/* =============================================================================
   47th.llc — THE ORIGINAL DIRECTORY, as its own stylesheet
   -----------------------------------------------------------------------------
   This is the sheet the original site shipped, carried onto labs.llc and cut
   down to the half of itself that is actually its own.

   WHAT WAS REMOVED, AND WHY
   -------------------------
   The original was written on the same design system this estate runs on, so
   roughly half of it — :root, body, .d1/.d2/.d3, .eyebrow, .lede, .wrap,
   .band, .rule, .split's siblings, .btn, .btn--outline, .rise, .skip, the nav
   and the footer — was a second copy of assets/css/site.css. A second copy of
   a stylesheet is a stylesheet that drifts, and every one of those rules is
   already on the page from the house sheet. They are gone. What is left is
   the objects the house sheet has never heard of: the photographic hero, the
   crawling strips, the finder, the listing row, the practice cards, the market
   plates, the offices and the desk form.

   WHAT WAS CHANGED, AND WHY
   -------------------------
   Every SURFACE literal became a token. The original painted its recessed
   grounds #FAFAFA, #FCFCFC and #fff and its inverted type #fff, which is
   correct exactly once — on white paper. This property now ships two editions,
   and a literal is a colour that has to be answered twice. --paper, --tint,
   --ink, --line, --deep and --muted are answered once, by assets/css/dark.css,
   for the whole estate. So:

       #FAFAFA / #FCFCFC  ->  var(--tint)      the recessed ground
       #fff as a SURFACE  ->  var(--paper)     the page's own ground
       #fff as TYPE ON INK->  var(--paper)     inverted label on an ink fill
       #878787            ->  var(--muted)     (the house raised it to #717171
                                                for contrast, and again to
                                                #8A9199 on the dark ground)

   The white literals that stayed are the ones painted on an object that is
   dark in BOTH editions — the hero photograph's scrim, the deep band, the
   desk form standing on it. There, white is not the light edition's colour,
   it is the object's.

   ORDER: this sheet is linked AFTER dark.css, so the handful of rules at the
   foot that begin html[data-dark] can reach past it. Nothing else in here
   needs to.
   ========================================================================== */

/* --------------------------------------------------------------- the accent
   The original's one departure from the house palette: a muted antique gold
   rather than the burnt print red, on the grounds that a directory of the
   diamond trade should not be indicating in a warning colour. It is scoped to
   the document rather than declared at :root so the CHROME — the navbar, the
   hamburger, the edition pill, the site search — stays in the house accent and
   goes on looking like the rest of labs.llc.

   .band--deep re-declares --accent to the deep band's orange (see the house
   sheet), so the two deep bands on this page have to be told again. */
#main, #strips { --accent: #A67C3D; }
#main .band--deep { --accent: #A67C3D; }

/* Visually hidden, still announced. The house sheet calls this .vh; the
   original's markup says .sr-only and this page is a reproduction of that
   markup, so the name it uses is the name that has to work. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =============================================================================
   HERO — photographic
   -----------------------------------------------------------------------------
   A full-bleed photograph under a directional scrim, one of ten diamond plates
   drawn per load. The whole object is dark on both editions: it is a dark
   thing standing on the page, not the page's own ground, so its type is white
   in both and says so.

   The house .hero is a paper hero with a padded band and a 46rem measure. This
   one replaces it outright — hence the padding-block reset and the explicit
   margin on the headline.

   THE PICTURES SHIP SEPARATELY. If images/landing/ is not on the server the
   photograph never decodes, .is-in is never added, and the hero stays at
   opacity 0 over the deep ground and the scrim — a quiet dark hero, not a
   broken frame. The engine clears the src on error so no browser draws its
   own placeholder over the headline.
   ========================================================================== */
.hero {
    position: relative; min-height: min(84vh, 720px);
    display: flex; align-items: flex-end;
    background: var(--deep); overflow: hidden;
    padding-block: 0;
    /* The hairlines inside the hero are drawn on a dark object, so they are
       white in both editions. Declared as the local --line rather than reached
       for by name in six places, which is the same move the house sheet makes
       inside .band--deep. */
    --line: rgba(255, 255, 255, .16);
}
.hero__photo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 42%;
    opacity: 0; transition: opacity .9s var(--ease);
}
.hero__photo.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__photo { transition: none; } }

/* The scrim exists to protect the headline and nothing else: heavy where the
   words are, clearing quickly across, with a bottom pass that stops short of
   the figures instead of climbing into the middle of the frame. */
.hero__scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(17,22,28,.92) 0%, rgba(17,22,28,.86) 26%,
                               rgba(17,22,28,.42) 62%, rgba(17,22,28,.06) 100%),
        linear-gradient(0deg,  rgba(17,22,28,.80) 0%, rgba(17,22,28,0) 38%);
}

/* THE ORIGINAL'S GRADIENT IS UNCHANGED ABOVE, AND IT IS RIGHT AT THE WIDTH IT
   WAS DRAWN FOR. It is written for a hero where `max-width: 52ch` binds and
   the words sit in the dark left half. Below about 900px that bound stops
   binding — a 52ch measure is wider than the viewport — and the headline and
   the sub-line run edge to edge, straight out through the clear end of the
   gradient, which is at alpha .06.

   Measured rather than assumed. Composited each of the ten hero plates at
   object-fit: cover / center 42% under both gradient layers in paint order and
   sampled the two text bands, 360x520:

       scrim as drawn   h1 min 1.29:1  (9 of 10 plates under the 3:1 floor)
                        sub min 1.19:1 (10 of 10 under the 4.5:1 floor)
       scrim below      h1 min 7.03:1  (0 of 10)   at 768: 8.11:1  (0 of 10)
                        sub min 4.65:1 (0 of 10)   at 768: 4.71:1  (0 of 10)

   The plate is dealt by Math.random() per load, so the un-fixed version is
   legible on one reload and not on the next: it passes a single manual check
   and fails a third of the visitors it gets. Same colour, same two layers,
   same direction — only the falloff moves, and only where the words do. */
@media (max-width: 900px) {
    .hero__scrim {
        background:
            linear-gradient(90deg, rgba(17,22,28,.94) 0%, rgba(17,22,28,.90) 45%,
                                   rgba(17,22,28,.84) 78%, rgba(17,22,28,.66) 100%),
            linear-gradient(0deg,  rgba(17,22,28,.80) 0%, rgba(17,22,28,0) 38%);
    }
}
.hero__in {
    position: relative; width: 100%; max-width: none;
    padding-block: clamp(56px, 11vw, 118px);
}
.hero h1 { color: #fff; max-width: 20ch; margin-bottom: 0; }
.hero p  { color: rgba(255,255,255,.74); max-width: 52ch; margin: 1.5rem 0 2.2rem; font-weight: 300; }

.hero__cap {
    position: absolute; right: var(--gutter); bottom: 1.1rem; z-index: 2;
    font-size: .6rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
    color: rgba(255,255,255,.42);
}
@media (max-width: 860px) { .hero__cap { display: none; } }

/* The live strip along the bottom of the hero — the one place the previous
   build's pulse survives, reduced to a line of figures. */
.hero__ticker {
    position: relative; z-index: 2;
    border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 0;
}
.hero__stat {
    flex: 1 1 190px; padding: 1.15rem 0 1.25rem;
    border-right: 1px solid var(--line);
    margin: 0;
}
.hero__stat:last-child { border-right: 0; }
.hero__stat b {
    display: block; font-size: 1.55rem; font-weight: 300; letter-spacing: -.03em; color: #fff;
    font-variant-numeric: tabular-nums;
}
/* Direct child only. As `.hero__stat span` this also caught the counter's own
   span inside the <b>, which shrank the figure to label size — the number and
   its caption rendered at the same 10px. */
.hero__stat > span {
    display: block; margin-top: .15rem;
    font-size: .625rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
/* Two up rather than four down on a phone. At a 190px basis each figure took a
   full row, which pushed the last one most of a screen below the headline. */
@media (max-width: 640px) {
    .hero__stat { flex: 1 1 42%; padding: .95rem 0 1rem; }
    .hero__stat:nth-child(2n) { border-right: 0; padding-left: 1.1rem; }
    .hero__stat:nth-child(n+3) { border-top: 1px solid var(--line); }
    .hero__stat b { font-size: 1.32rem; }
}

.live-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); margin-right: .5rem; vertical-align: middle;
    /* @keyframes pulse is the house sheet's, and identical to the one the
       original declared. Declaring a second one here would rename it for
       every other user of it on the page. */
    animation: pulse 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
/* Inside the hero's ticker the dot sits beside a figure rather than in a run
   of text, so it takes the figure's colour and not the accent's. */
.hero__stat .live-dot { background: rgba(255,255,255,.6); }

/* =============================================================================
   SPLIT — the two-column band every prose section on this page uses
   ========================================================================== */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5.5rem); }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* The counter. One oversized figure per cell, hairline-separated. Every colour
   in here is a token, so the whole object inverts inside a deep band and again
   in the dark edition without a single override — except the cell's own
   ground, because --paper is the PAGE and a deep band is not the page. */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
           background: var(--line); border-block: 1px solid var(--line); margin-top: clamp(2rem,4vw,3.4rem); }
.figures > div { background: var(--paper); padding: 1.6rem 1.4rem 1.5rem; }
.band--deep .figures > div { background: var(--deep); }
.figure__n {
    font-size: clamp(2.1rem, 4vw, 3.05rem); font-weight: 200; letter-spacing: -.04em;
    line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.figure__l {
    margin-top: .6rem; font-size: .64rem; font-weight: 700; letter-spacing: .17em;
    text-transform: uppercase; color: var(--ink-55);
}
.figure__d { margin-top: .5rem; font-size: .855rem; line-height: 1.5; color: var(--ink-55); }

/* =============================================================================
   PRACTICES — the six departments as cards
   ========================================================================== */
.practices { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1px;
             background: var(--line); border: 1px solid var(--line); margin-top: clamp(2rem,4vw,3.2rem); }
.practice {
    background: var(--paper); padding: clamp(1.6rem, 2.4vw, 2.2rem);
    display: flex; flex-direction: column; min-height: 268px;
    text-decoration: none; transition: background .3s var(--ease);
}
.practice:hover { background: var(--tint); }
.practice__i {
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 50%; color: var(--ink);
    font-size: .78rem; margin-bottom: 1.4rem;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.practice:hover .practice__i { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.practice h3 { font-size: 1.16rem; font-weight: 600; letter-spacing: -.025em; }
.practice p { margin: .7rem 0 0; font-size: .9rem; line-height: 1.56; color: var(--ink-55); }
.practice__n {
    margin-top: auto; padding-top: 1.3rem;
    font-size: .64rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
    color: var(--ink-55);
}

/* =============================================================================
   THE DIRECTORY
   -----------------------------------------------------------------------------
   Fourteen hundred listings, which changes three things about a register: it
   needs a search field, it needs a second axis of filtering (market as well as
   department), and it cannot render the whole set at once — so rows arrive in
   batches behind a "show more".

   The row itself is the house object: hairline-ruled, no card, no border.
   ========================================================================== */
.finder { display: grid; gap: 1rem; margin-top: 2.4rem; }
.finder__search { position: relative; }
.finder__search input {
    font: inherit; font-size: 1rem; width: 100%;
    padding: .9rem 2.6rem .9rem 1rem;
    border: 0; border-bottom: 1px solid var(--ink);
    background: transparent; color: var(--ink);
    border-radius: 0;
}
.finder__search input::placeholder { color: var(--ink-55); }
.finder__search input:focus { outline: none; border-bottom-width: 2px; padding-bottom: calc(.9rem - 1px); }
.finder__search::after {
    content: '⌕'; position: absolute; right: .6rem; top: 50%; transform: translateY(-55%);
    font-size: 1.15rem; color: var(--ink-55); pointer-events: none;
}
.finder__rows { display: flex; flex-wrap: wrap; gap: .75rem 1.4rem; align-items: center; }
.finder__market {
    font: inherit; font-size: .8rem; font-weight: 500; color: var(--ink);
    padding: .5rem 2.2rem .5rem .9rem; border: 1px solid var(--line); border-radius: 999px;
    background-color: transparent; cursor: pointer; max-width: 100%;
    appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-55) 50%),
                      linear-gradient(135deg, var(--ink-55) 50%, transparent 50%);
    background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.finder__count {
    margin-left: auto; font-size: .64rem; font-weight: 700; letter-spacing: .17em;
    text-transform: uppercase; color: var(--ink-55); font-variant-numeric: tabular-nums;
}

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.2rem; }
.filter {
    font: inherit; font-size: .755rem; font-weight: 600; letter-spacing: .02em;
    padding: .5rem .95rem; border-radius: 999px;
    border: 1px solid var(--line); background: transparent; color: var(--ink-77);
    cursor: pointer; transition: border-color .24s var(--ease), color .24s var(--ease),
                                 background .24s var(--ease);
}
.filter:hover { border-color: var(--ink-55); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter span { opacity: .55; font-variant-numeric: tabular-nums; margin-left: .3rem; }

.register { margin-top: 2.2rem; border-top: 1px solid var(--line); }
.register__empty { padding: 3rem .4rem; color: var(--ink-55); font-size: .92rem; }

/* A listing row. Four columns on a desktop: who, where, what, and the way to
   reach them. The whole row is not a link — a listing has two destinations
   (site and phone) and making the row itself clickable would have to pick one.

   THE TRACKS ARE minmax(0, …). The original wrote bare fr, and a 1fr track
   grows to its min-content: one unbroken address or one long URL in fourteen
   hundred rows widens the track, then the grid, then the document, and every
   fixed element on the page goes with it. */
.listing {
    display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 3fr) minmax(0, 1.4fr) auto;
    gap: 1.4rem; align-items: baseline;
    padding: 1.05rem .4rem 1.1rem;
    border-bottom: 1px solid var(--line-soft);
}
.listing:first-child { border-top: 1px solid var(--line); }
.listing:hover { background: var(--tint); }
.listing__name { font-size: 1rem; font-weight: 600; letter-spacing: -.022em; color: var(--ink);
                 overflow-wrap: anywhere; }
.listing__name a { text-decoration: none; }
.listing__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.listing__note { display: block; margin-top: .25rem; font-size: .78rem; line-height: 1.45; color: var(--ink-55); }
.listing__addr { font-size: .85rem; line-height: 1.5; color: var(--ink-55); overflow-wrap: anywhere; }
.listing__cat  { font-size: .64rem; font-weight: 700; letter-spacing: .15em;
                 text-transform: uppercase; color: var(--ink-55); }
.listing__cat span { display: block; margin-top: .3rem; letter-spacing: .1em; color: var(--muted); }
.listing__act { display: flex; gap: .5rem; align-items: center; white-space: nowrap; }
.listing__act a {
    display: inline-grid; place-items: center; width: 32px; height: 32px;
    border: 1px solid var(--line); border-radius: 50%; text-decoration: none;
    font-size: .78rem; color: var(--ink-55);
    transition: background .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease);
}
.listing__act a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 980px) {
    .listing { grid-template-columns: minmax(0, 1fr) auto; gap: .45rem 1rem; }
    .listing__addr { grid-column: 1 / -1; }
    .listing__cat  { grid-column: 1; }
    .listing__act  { grid-row: 1; grid-column: 2; }
}

.more { display: flex; justify-content: center; margin-top: 2.4rem; }

/* =============================================================================
   MARKET PLATES
   ========================================================================== */
.insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
            gap: clamp(1.4rem, 2.4vw, 2.2rem); margin-top: clamp(2rem,4vw,3.2rem); }
.insight { display: flex; flex-direction: column; text-decoration: none; }
.insight__t {
    aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
    background: var(--deep-soft); position: relative;
}
.insight__t canvas { width: 100%; height: 100%; display: block; }
.insight__k {
    margin: 1.1rem 0 .5rem; font-size: .625rem; font-weight: 700; letter-spacing: .17em;
    text-transform: uppercase; color: var(--ink-55);
}
.insight h3 { font-size: 1.06rem; font-weight: 600; letter-spacing: -.024em; line-height: 1.32; }
.insight p { margin: .55rem 0 0; font-size: .875rem; line-height: 1.55; color: var(--ink-55); }
.insight:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================================
   THE DESK — offices and the contact form
   -----------------------------------------------------------------------------
   Both stand on a deep band, which is dark in BOTH editions, so everything in
   here is white-on-dark by the object rather than by the edition.

   The house .field is a white input for a paper page. On the deep band it is a
   white box on charcoal, so it is overridden here — and the override is
   written twice, once plain and once under html[data-dark], because
   `html[data-dark] .field` in the house dark sheet outranks a plain
   `.band--deep .field` and would otherwise win in the dark edition.
   ========================================================================== */
.offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
           gap: clamp(1.6rem, 3vw, 2.6rem); margin-top: 2.6rem; }
.office h3 { font-size: 1.16rem; font-weight: 700; letter-spacing: -.025em; }
.office p  { margin: .5rem 0 0; font-size: .875rem; line-height: 1.55; color: rgba(255,255,255,.55); }
.office a  { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.office a:hover { border-color: #fff; }

.form { display: grid; gap: .8rem; margin-top: 1.8rem; max-width: 460px; }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

.band--deep .field,
html[data-dark] .band--deep .field {
    font: inherit; font-size: .95rem; font-weight: 400; width: 100%;
    padding: .78rem .9rem; border-radius: 8px; color: #fff;
    background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.22);
    box-shadow: none;
    transition: border-color .24s var(--ease), background .24s var(--ease);
}
.band--deep .field::placeholder,
html[data-dark] .band--deep .field::placeholder { color: rgba(255,255,255,.5); }
.band--deep .field:focus,
html[data-dark] .band--deep .field:focus {
    outline: none; border-color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.08); box-shadow: none;
}
.band--deep textarea.field,
html[data-dark] .band--deep textarea.field { resize: vertical; min-height: 104px; }
/* The native select needs its own arrow once the platform chrome is removed,
   and color-scheme so the dropped-open list is dark too — without it the
   options render as black-on-white over a dark form. */
.band--deep select.field,
html[data-dark] .band--deep select.field {
    appearance: none; -webkit-appearance: none;
    color-scheme: dark; cursor: pointer;
    padding-right: 2.4rem;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.55) 50%),
                      linear-gradient(135deg, rgba(255,255,255,.55) 50%, transparent 50%);
    background-position: calc(100% - 18px) 51%, calc(100% - 13px) 51%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.band--deep select.field:invalid,
html[data-dark] .band--deep select.field:invalid { color: rgba(255,255,255,.5); }
.form .btn { justify-content: center; }
.form__note { font-size: .74rem; color: rgba(255,255,255,.55); margin: 0; }
.form__status { font-size: .82rem; margin: 0; min-height: 1.2em; }
.form__status[data-state="ok"]  { color: #6EE7B7; }
.form__status[data-state="err"] { color: #FCA5A5; }

/* =============================================================================
   THE STRIPS
   -----------------------------------------------------------------------------
   Two rows of chips crawling opposite ways at slightly different speeds, so
   they never march in lockstep and read as a single block. Each house gets an
   enclosed chip rather than a run of text between dots: at crawl speed a bare
   "name · market" string reads as one continuous smear.

   Speed is not set here. The engine measures the laid-out run and writes
   animation-duration, so the strip always crawls at a fixed pixels-per-second
   whatever ended up in it.
   ========================================================================== */
.strips {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--tint);
    overflow: hidden;
    padding: calc(1.1rem - 3px) 0;
}
.strip-row {
    display: flex; overflow: hidden;
    /* Three pixels of slack inside the clip. A row is as tall as one chip and a
       chip works out to a fractional height, so without this the clip rounds
       down and shaves the bottom line of pixels off every chip in the top row. */
    padding: 3px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.strip-row + .strip-row { margin-top: calc(.7rem - 6px); }

.strip-track {
    display: flex; align-items: center; flex: 0 0 auto;
    gap: .7rem;
    /* Matches `gap` exactly. Without it the track is one gap short of twice a
       run, so the -50% keyframe lands half a gap off and the loop visibly
       hitches once per pass. */
    padding-right: .7rem;
    white-space: nowrap;
    animation: strip-run 120s linear infinite;
    will-change: transform; backface-visibility: hidden;
}
/* The crawl deliberately does not pause on hover: a chip is a control, and
   stopping the row the moment the pointer arrives made every click stop the
   strip dead. */

.s-chip {
    display: inline-flex; align-items: center; gap: .6rem;
    flex: 0 0 auto;
    padding: .42rem .9rem;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper);
    font: inherit; text-align: left; cursor: pointer;
    transition: border-color .22s var(--ease), background .22s var(--ease);
}
.s-chip:hover { border-color: var(--ink); }
.s-chip::before {
    content: '◆'; color: var(--accent); font-size: .58rem; line-height: 1; flex: 0 0 auto;
}
.s-name { font-size: .82rem; font-weight: 600; letter-spacing: -.018em; color: var(--ink); }
.s-meta {
    font-size: .58rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
    color: var(--ink-55);
    padding-left: .6rem; border-left: 1px solid var(--line);
}

@keyframes strip-run {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .strip-track { animation: none; } }

@media (max-width: 640px) {
    .strips { padding: calc(.8rem - 3px) 0; }
    .strip-row + .strip-row { margin-top: calc(.5rem - 6px); }
    .s-chip { gap: .45rem; padding: .36rem .7rem; }
    .s-name { font-size: .76rem; }
    .s-meta { font-size: .53rem; padding-left: .45rem; }
}

/* =============================================================================
   TOUCH, AND THE DARK EDITION'S LEFTOVERS
   ========================================================================== */

/* Under 16px iOS Safari zooms the page on focus and carries the fixed header
   off-screen with it. Gated on the POINTER, never on the width: a narrow
   desktop window is not a phone.

   THE SELECTOR LIST HAS TO MATCH THE ONE THAT SET THE SIZE. `.field` alone
   left the desk form at 15.2px, because the size on those four controls comes
   from `.band--deep .field` above — two classes, which outranks one class no
   matter which of them is written last. Measured rather than assumed: every
   focusable control on this page reads 16px under a coarse pointer. */
@media (pointer: coarse) {
    .finder__search input,
    .finder__market,
    .field,
    .band--deep .field,
    html[data-dark] .band--deep .field { font-size: 16px; }
}

/* THE SAME RULE, FOR THE OTHER KIND OF TOUCH TARGET. The two actions on a
   listing row — call the house, open its site — are the directory's only
   actions and its smallest targets: a 32px ring, eighty-eight of them in the
   first batch, .5rem apart. The ring itself is the original's and does not
   move; what is added is an invisible 44px hit area centred on it, so the
   drawn object is unchanged and the finger has something to land on. Grown
   with ::after rather than with width/height because the ring is a grid box
   whose glyph is centred in it, and growing the box would grow the ring. */
@media (pointer: coarse) {
    /* .5rem between two 32px rings puts their centres 40px apart, so two 44px
       hit areas would overlap by 4px and the second would take a strip of the
       first. .75rem puts the centres exactly 44px apart: the boxes abut and
       neither steals from the other. */
    .listing__act { gap: .75rem; }
    .listing__act a { position: relative; }
    .listing__act a::after {
        content: ""; position: absolute; top: 50%; left: 50%;
        width: 44px; height: 44px; transform: translate(-50%, -50%);
    }
}

/* The market plates are drawn dark by the canvas — #161D26 to #0A0E12 — which
   is a tile with visible edges on paper and a tile with none on the dark
   ground. A hairline inside the radius gives it back its edge without touching
   the paper edition. */
html[data-dark] .insight__t { box-shadow: inset 0 0 0 1px var(--line); }