/* css/pages/city.css : the city pages (mckinney.html, melissa.html) in the cinematic system (audit/cinematic-guide.md),
   plus the pieces Moving and Search share with them (the opening chapter, district credits, the tax card, community
   chips, headings, Keep exploring). Unlayered on purpose: it sits above every site.css layer and the tools' :where(). */

.page [hidden] { display: none; }

/* ------------------------------------------------------------------ shared type */
.cine-h2 { font-weight: 300; font-size: clamp(2.75rem, 6.4vw, 6rem); line-height: .94; letter-spacing: -.05em; text-wrap: balance; }
.cine-h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.015em; }
.cine-lead { max-width: 38ch; font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.4; letter-spacing: -.015em; color: var(--fg); text-wrap: pretty; }
.scene--bone > .container { padding-block: clamp(72px, 11vw, 150px); }


/* the city's facts, as end credits */
.city-credits { gap: 18px; }
.city-credits .title-card__title { font-size: clamp(3rem, 7vw, 6.5rem); }
.city-credits .credits__list { width: min(720px, calc(100vw - 2 * var(--gutter))); margin-top: 8px; }
.city-credits .credits__list dd { font-size: clamp(1.125rem, 1.8vw, 1.5rem); font-weight: 300; }
.city-credits__src { max-width: 70ch; margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--on-night-2); }
.city-credits__src a { color: var(--on-night-2); text-underline-offset: .2em; }
.city-credits__src a:hover { color: var(--on-night); }

/* ------------------------------------------------------------------ communities (bone) */
.streets__grid { display: grid; gap: clamp(28px, 5vw, 80px); align-items: end; }
@media (min-width: 1000px) { .streets__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.streets__head { display: grid; gap: 16px; }
.streets__body { display: grid; gap: 28px; }
.community-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.community { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; font-size: 1rem; letter-spacing: -.005em; color: var(--ink); text-decoration: none; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); overflow: hidden; isolation: isolate; transition: color var(--dur-2), border-color var(--dur-2); }
.community::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--night); transform: translateY(101%); transition: transform var(--dur-3) var(--ease-out); }
.community:hover, .community:focus-visible { color: var(--on-night); border-color: var(--night); }
.community:hover::before, .community:focus-visible::before { transform: none; }

.square-film.is-static .square-film__art svg { transform: none; }

/* ------------------------------------------------------------------ schools + taxes (bone, with a black screen) */
.schooltax > .container { display: grid; gap: clamp(24px, 3vw, 40px); padding-top: clamp(56px, 8vw, 104px); }
.schooltax__lead { margin-bottom: clamp(8px, 2vw, 24px); }
.schooltax__src { margin-top: -8px; }
.districts { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--ink); }
.district { display: grid; gap: 6px 28px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--rule); transition: background-color var(--dur-2); }
@media (min-width: 1000px) { .district { grid-template-columns: minmax(180px, 2.2fr) minmax(150px, 1.4fr) minmax(0, 2.4fr) minmax(0, 3fr) auto; } }
.district__name { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1; letter-spacing: -.01em; }
.district__rate { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.district__rate .tabular { font-weight: 300; font-size: 1.75rem; letter-spacing: -.03em; }
.district__unit { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.district__combined { font-size: var(--fs-label); line-height: 1.5; color: var(--fg-2); }
.district__combined .tabular { font-weight: 600; color: var(--fg); }
.district__links { display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: var(--fs-label); }
.district__links a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; color: var(--fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--fg) 30%, transparent); text-underline-offset: .25em; }
.district__links a:hover { text-decoration-color: var(--blue-fill); }
.district__pick { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); background: linear-gradient(var(--blue-fill), var(--blue-fill)) 0 calc(100% - 10px) / 0 1px no-repeat; transition: background-size var(--dur-3) var(--ease-out); }
.district__pick:hover, .district__pick[aria-pressed="true"] { background-size: 100% 1px; }
.district.is-picked .district__name { color: var(--blue-text); }
.districts--solo { max-width: none; }
.taxcard { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(24px, 4vw, 48px); }
@media (min-width: 1000px) { .taxcard { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.taxcard__in { display: grid; gap: 20px; align-content: start; }
.taxcard__in .field__label .badge { margin-left: 8px; font-weight: 400; }
.rates { margin-top: 6px; }
.rates th, .rates td { padding: 10px 8px 10px 0; font-size: .9375rem; }
.rates thead th { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); }
.rates th[scope="row"] { font-weight: 500; color: var(--fg); }
.rates tfoot th, .rates tfoot td { border-bottom: 0; border-top: 1px solid var(--ink); font-weight: 600; color: var(--fg); }
.taxcard__out { display: grid; gap: 18px; padding: clamp(28px, 3.4vw, 44px); justify-items: center; position: sticky; top: calc(var(--header-h) + 24px); }
.taxcard__out .credits { width: 100%; }
.taxcard__out .credits__list dd { font-size: 1.25rem; }
.taxcard__fine { font-size: 12px; line-height: 1.6; color: var(--on-night-2); text-align: center; max-width: 52ch; }
.taxcard .tool-mount__summary.credits { padding: 28px; background: var(--night); color: var(--on-night); }
.schooltax__mud { max-width: 64rem; padding: 18px 20px; border-left: 2px solid var(--blue-fill); background: var(--paper-2); font-size: 1.0625rem; line-height: 1.55; }
@media (max-width: 999px) { .taxcard__out { position: static; } }

/* ------------------------------------------------------------------ three facts (black) */
.cityfacts > .container { display: grid; gap: clamp(28px, 4vw, 48px); padding-block: clamp(80px, 12vw, 160px); }
.cityfacts__head { display: grid; gap: 16px; max-width: 52rem; }
.cityfacts__lede { max-width: 52ch; font-size: 1.125rem; line-height: 1.55; color: var(--on-night-2); }
.cityfacts .flip-deck { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
@media (min-width: 1000px) { .cityfacts .flip-deck { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cityfacts .flip { --flip-h: 300px; }
.cityfacts .flip__front { background: color-mix(in srgb, var(--on-night) 4%, transparent); border-color: var(--night-line); }
.cityfacts .flip__q { font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; letter-spacing: -.035em; }
.cityfacts .flip__back { background: var(--paper-2); color: var(--ink); border-color: var(--paper-2); --fg: var(--ink); --fg-2: var(--ink-2); }
.cityfacts .flip__meta, .cityfacts .flip__close { color: var(--ink-2); }
.cityfacts .flip__meta a { color: #2852E5; }
.cityfacts__fine { font-size: 13px; color: var(--on-night-2); display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }

/* ------------------------------------------------------------------ search {city} (bone) */
.citysearch__grid { display: grid; gap: 12px; }
@media (min-width: 900px) { .citysearch__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .citysearch__big { grid-row: span 2; } }
.citysearch__big { position: relative; display: grid; align-content: end; gap: 14px; min-height: clamp(260px, 32vw, 400px); padding: clamp(24px, 4vw, 52px); text-decoration: none; overflow: hidden; }
.citysearch__t { font-weight: 300; font-size: clamp(2.75rem, 7vw, 6rem); line-height: .9; letter-spacing: -.055em; color: var(--on-night); }
.citysearch__t em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-on-night); letter-spacing: -.015em; }
.citysearch__sub { font-size: var(--fs-label); color: var(--on-night-2); }
.citysearch__arrow { position: absolute; right: clamp(20px, 3vw, 36px); top: clamp(20px, 3vw, 36px); color: var(--on-night); transition: transform var(--dur-3) var(--ease-out); }
.citysearch__big:hover .citysearch__arrow { transform: translate(4px, -4px); }
.citysearch__alt { display: grid; gap: 8px; align-content: end; padding: clamp(22px, 3vw, 32px); background: var(--paper-2); color: var(--ink); text-decoration: none; transition: background-color var(--dur-2); }
.citysearch__alt:hover { background: color-mix(in srgb, var(--paper-2) 80%, var(--ink)); }
.citysearch__alt strong { font-weight: 300; font-size: clamp(1.75rem, 2.6vw, 2.25rem); letter-spacing: -.04em; line-height: 1; }
.citysearch__alt strong em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); }
.citysearch__alt span:last-child { color: var(--fg-2); }

/* ------------------------------------------------------------------ keep exploring (bone) */
.keep > .container { padding-block: clamp(56px, 8vw, 96px); }
.keep__h { margin-bottom: 18px; }

/* ======================================================================================================================
   THE CITY PAGES (mckinney.html, melissa.html), award round 2026-09-28 (change-plan §3.7, §3.8). Everything below is
   scoped to .page--city so Moving and Search, which share this file, are untouched. Bone first; zero dark moments.
   ====================================================================================================================== */

/* ------------------------------------------------------------------ community chips cascade in */
.page--city [data-cascade].is-armed li { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.page--city [data-cascade].is-armed.is-in li { opacity: 1; transform: none; }
html.is-failsafe .page--city [data-cascade].is-armed li, html.is-failsafe .page--city [data-rise].is-armed .district { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ the signatures: a sticky model beside its story */
.page--city .sig { position: relative; height: 260vh; height: 260svh; --sig-ink: 0; --sig-close: 0; --sig-inkc: #121110; --sig-paper: var(--paper); --sig-bg: color-mix(in srgb, var(--sig-inkc) calc(var(--sig-ink) * 100%), var(--sig-paper)); background: var(--sig-bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page--city .sig { --sig-inkc: #080807; } }
:root[data-theme="dark"] .page--city .sig { --sig-inkc: #080807; }
.page--city .sig--build { height: 340vh; height: 340svh; } /* (paced by js/core/pace.js: 0.4 screen per beat) */
/* the fail-safe and no script (no pacer): today's tracks */
:is(html.is-failsafe, :root:not(.cine-js)) .page--city .sig { height: 240vh; }
:is(html.is-failsafe, :root:not(.cine-js)) .page--city .sig--build { height: 320vh; }
.page--city .sig__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); grid-template-rows: minmax(0, 1fr) auto; gap: 8px clamp(24px, 3.4vw, 56px); padding: calc(var(--header-h) + 2.5vh) max(var(--gutter), 3vw) 2.5vh; }
.page--city .sig__pin.has-live-stage { z-index: 2; }
/* the finale on ink: the pin takes .theme-dark at the midpoint of the fade, and the type eases across */
.page--city .sig__pin { color: var(--ink); transition: color .3s var(--ease-out); }
.page--city .sig__pin :is(.caps, .sig__title, .sig__lede, .sig__note, .sig__src, .sig__src a, .sig__legend button, .sig__steps button, .sig__cap h3, .sig__cap p, .sig__cap .link-caps, .sig__beats .link-caps, .fineprint__line, .fineprint__more) { transition: color .3s var(--ease-out), border-color .3s var(--ease-out), background-color .3s var(--ease-out); }
.page--city .sig.is-static .sig__stage::after { display: none; }
.page--city .sig__copy { grid-column: 1; grid-row: 1 / span 2; align-self: center; display: grid; gap: 16px; align-content: center; min-width: 0; }
.page--city .sig__title { font-weight: 300; font-size: clamp(2.5rem, 4.6vw, 4.75rem); line-height: .94; letter-spacing: -.05em; text-wrap: balance; }
.page--city .sig__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; }
.page--city .sig__lede { max-width: 36ch; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.page--city .sig__stage { grid-column: 2; grid-row: 1; position: relative; min-height: 0; height: 100%; background: transparent; touch-action: pan-y; cursor: grab; }
.page--city .sig__stage.is-dragging { cursor: grabbing; }
/* stage3d clips its stages (overflow: hidden), but its scissor can round one canvas row past the box: let the edge
   fade below reach 2px beyond the stage so no stray row of the model ever shows as a line under it */
.page--city .sig__stage[data-stage-state="live"] { overflow: visible; }
/* the stage's edge fade (it sits above the page canvas): a thin safety feather on wide shots (the camera keeps the whole
   plinth inside it), plus, only in a close-up (city.js sets --sig-close from the scene), a soft oval iris (clear over
   the inner four fifths, where the scenes keep the house or the courthouse) with an eased falloff, like a pool of gallery light, so the plinth running off the stage dissolves gradually (never a wall, also on
   the dark theme); always in the section's own color, and solid for the outer 4px */
.page--city .sig__stage::after { content: ""; position: absolute; inset: -2px; z-index: 2; pointer-events: none; --fx: calc(5% + 4% * var(--sig-close, 0)); --fy: calc(4% + 3% * var(--sig-close, 0)); background: radial-gradient(ellipse 64% 68% at 50% 50%, color-mix(in srgb, var(--sig-bg) 0%, transparent) calc(100% - 38% * var(--sig-close, 0)), color-mix(in srgb, var(--sig-bg) calc(var(--sig-close, 0) * 18%), transparent) calc(100% - 22% * var(--sig-close, 0)), color-mix(in srgb, var(--sig-bg) calc(var(--sig-close, 0) * 58%), transparent) calc(100% - 10% * var(--sig-close, 0)), color-mix(in srgb, var(--sig-bg) calc(var(--sig-close, 0) * 100%), transparent) 100%), linear-gradient(90deg, var(--sig-bg) 0, var(--sig-bg) 4px, color-mix(in srgb, var(--sig-bg) 0%, transparent) var(--fx), color-mix(in srgb, var(--sig-bg) 0%, transparent) calc(100% - var(--fx)), var(--sig-bg) calc(100% - 4px), var(--sig-bg) 100%), linear-gradient(180deg, var(--sig-bg) 0, var(--sig-bg) 4px, color-mix(in srgb, var(--sig-bg) 0%, transparent) var(--fy), color-mix(in srgb, var(--sig-bg) 0%, transparent) calc(100% - var(--fy)), var(--sig-bg) calc(100% - 4px), var(--sig-bg) 100%); }
.page--city .sig__stage[data-tier="1"], .page--city .sig__stage[data-tier="0"], .page--city .sig__stage:not([data-stage]) { cursor: default; }
.page--city .sig__plan { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .48s var(--ease-out); }
.page--city .sig__plan svg { width: 100%; height: 100%; overflow: visible; }
.page--city .sig__note { grid-column: 2; grid-row: 2; justify-self: end; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.page--city .sig__src { font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
.page--city .sig__src a { color: var(--ink-2); text-underline-offset: .2em; }
.page--city .sig__skip { position: absolute; left: max(var(--gutter), 3vw); bottom: 16px; z-index: 8; display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); border-radius: 999px; text-decoration: none; transition: color var(--dur-2), border-color var(--dur-2), background-color var(--dur-2); }
.page--city .sig__skip:hover, .page--city .sig__skip:focus-visible { color: var(--ink); border-color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
/* the square: beats (the active one in ink), a legend that lights one side of the model */
.page--city .sig__beats { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; max-width: 30rem; }
.page--city .sig__beats li { display: grid; gap: 4px; padding: 11px 0 11px 18px; border-left: 1px solid var(--line); color: var(--muted); transition: color .3s var(--ease-out), border-color .3s var(--ease-out); }
.page--city .sig__beats li b { font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.page--city .sig__beats li span { font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.5; }
.page--city .sig__beats li.is-on { color: var(--ink); border-left-color: var(--blue-fill); }
.page--city .sig__beats .link-caps { display: table; margin-top: 8px; color: inherit; }
.page--city .sig__legend { display: flex; flex-wrap: wrap; gap: 6px; }
.page--city .sig__legend button { min-height: 36px; padding: 0 12px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; transition: color var(--dur-2), border-color var(--dur-2), background-color var(--dur-2); }
.page--city .sig__legend button:hover, .page--city .sig__legend button:focus-visible, .page--city .sig__legend button.is-on, .page--city .sig__legend button[aria-pressed="true"] { color: var(--blue-text); border-color: var(--blue-fill); background: color-mix(in srgb, var(--blue-fill) 7%, transparent); }
/* street labels and the hover tip over the live model */
.sq-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.sq-label { position: absolute; left: 0; top: 0; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; transition: opacity .4s; background: color-mix(in srgb, var(--paper) 78%, transparent); padding: 2px 6px; }
.sq-tip { position: absolute; left: 0; top: 0; padding: 6px 10px; font-size: 12px; letter-spacing: .04em; color: var(--paper); background: var(--ink); white-space: nowrap; opacity: 0; transition: opacity .2s; }
.sq-tip.is-on { opacity: 1; }
/* the plan drawing (T1 draws it by scroll; T0 and the WebGL poster show it finished) */
.sq-svg { --d: 1; }
.sq-svg [data-win] { --d: 1; }
/* the T1/T0 drawing in the luxury palette (2026-09-28): gallery white on a lacquer plinth, smoked glass, graphite
   hairlines, frosted trees, warm-white lit windows (light, never gold). The massing is painted opaque, back to front,
   and each group fades in as one layer, so no building ever shows through another */
.sq-svg polygon, .sq-svg line, .sq-svg ellipse, .sq-svg polyline, .sq-svg path { stroke: #2A2D33; stroke-width: .6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d)); fill-opacity: var(--d); }
.sq-svg :is(.sq-court, .sq-stores, .sq-trees) { opacity: min(1, calc(var(--d) * 2)); }
.sq-svg :is(.sq-court, .sq-stores, .sq-trees) :is(polygon, path) { fill-opacity: 1; }
.sq-svg .sq-board { fill: #F0EFEE; stroke: none; }
.sq-svg .sq-board-e { fill: #E1E0DF; stroke: #55585F; stroke-width: .45; stroke-dasharray: none; }
.sq-svg .sq-board-s { fill: #D4D3D2; stroke: #55585F; stroke-width: .45; stroke-dasharray: none; }
.sq-svg .sq-awn polygon { fill: #F7F6F3; stroke-width: .35; }
.sq-svg .sq-awn.is-satin polygon { fill: #DCDFE4; }
.sq-svg .sq-plates polygon { fill: #EEEDEC; stroke: none; }
.sq-svg .sq-plates .is-lawn { fill: #E1E6DC; }
.sq-svg .sq-grid polygon { fill: none; stroke-width: .8; stroke-opacity: .75; }
.sq-svg .sq-pane { fill: #3E4753; stroke-width: .3; }
.sq-svg .sq-col { stroke-width: 2.2; stroke: #FBFAF8; }
.sq-svg .sq-tree path { fill: #F0EFEE; stroke-width: .45; stroke-opacity: .55; }
.sq-svg .sq-tree line { stroke: #5B5F66; stroke-width: .8; }
.sq-svg .sq-lit { fill: #FFF1DE; stroke: none; fill-opacity: var(--d); }
.sq-svg .sq-wire { fill: none; stroke: #5B5F66; stroke-width: .3; stroke-dasharray: none; stroke-opacity: var(--d); }
.sq-svg .sq-bulb { fill: #FFF6EA; stroke: none; opacity: var(--d); }
.sq-svg .sq-street { font: 500 5.4px var(--sans); letter-spacing: .2em; fill: #4B4E55; opacity: var(--d); }
.sq-svg[data-hl="0"] [data-b="0"] polygon, .sq-svg[data-hl="1"] [data-b="1"] polygon, .sq-svg[data-hl="2"] [data-b="2"] polygon, .sq-svg[data-hl="3"] [data-b="3"] polygon, .sq-svg[data-hl="4"] [data-b="4"] polygon { stroke: #2852E5; }
/* the build: a stepper, one caption at a time, the phone frame it hands off to */
.page--city .sig__steps { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page--city .sig__steps button { position: relative; flex: 1 1 auto; min-height: 44px; padding: 0 10px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: transparent; text-align: left; transition: color var(--dur-2); }
.page--city .sig__steps button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue-fill); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-out); }
.page--city .sig__steps button.is-done { color: var(--ink-2); }
.page--city .sig__steps button[aria-pressed="true"] { color: var(--ink); }
.page--city .sig__steps button[aria-pressed="true"]::after { transform: none; }
.page--city .sig__steps button:hover, .page--city .sig__steps button:focus-visible { color: var(--blue-text); }
.page--city .sig__caps { display: grid; min-height: 9rem; }
.page--city .sig__cap { grid-area: 1 / 1; display: grid; gap: 10px; align-content: start; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility 0s .5s; }
.page--city .sig__cap.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.page--city .sig__cap h3 { font-weight: 400; font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.15; letter-spacing: -.025em; max-width: 24ch; }
.page--city .sig__cap p { max-width: 42ch; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.page--city .sig__cap .link-caps { margin-left: 6px; }
.bld-svg { --d: 1; }
.bld-svg .b-g { --d: 0; opacity: min(1, calc(var(--d) * 4)); }
/* the T1/T0 drawing in the luxury palette (2026-09-28): a porcelain field drum on an ink-lacquer base, milled contours,
   an ink survey grid, satin pins with pearl heads and blue survey ribbons, smooth bisque oaks, pale oak framing, white board
   and batten, an ink standing-seam roof, smoked glass lit warm white, his blue door */
.bld-svg polygon, .bld-svg line, .bld-svg polyline, .bld-svg ellipse { stroke: #2A2D33; stroke-width: .55; stroke-linejoin: round; fill: none; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d, 1)); }
.bld-svg .b-base { fill: #141518; stroke: #141518; stroke-width: .6; stroke-dasharray: none; }
.bld-svg .b-drum { fill: #DDDAD4; stroke: #DDDAD4; stroke-width: .6; stroke-dasharray: none; }
.bld-svg .b-field { fill: #E9E7E2; stroke: none; }
.bld-svg .b-contour { fill: none; stroke: #2A2D33; stroke-width: .3; stroke-opacity: .3; stroke-dasharray: none; }
.bld-svg .b-ring { fill: none; stroke: #2A2D33; stroke-width: .35; stroke-opacity: .45; stroke-dasharray: none; }
.bld-svg .b-ring.is-2 { stroke-opacity: .22; }
.bld-svg .b-grid { stroke: #2A2D33; stroke-width: .25; stroke-opacity: .28; stroke-dasharray: none; opacity: var(--d); }
.bld-svg .b-pin { stroke: #8F949D; stroke-width: .9; }
.bld-svg .b-head { fill: #F4F3F7; stroke: #8F949D; stroke-width: .35; opacity: var(--d); }
.bld-svg .b-lot { fill: #EDEDE9; stroke: none; }
.bld-svg .b-site { fill: #E6E5E0; fill-opacity: var(--d); stroke: #2A2D33; stroke-width: .3; stroke-opacity: .35; stroke-dasharray: none; }
.bld-svg .b-site.is-h { fill: url(#bld-hatch); stroke: none; }
.bld-svg .b-lotline { stroke: #2A2D33; stroke-width: .3; stroke-opacity: .5; opacity: var(--d); }
.bld-svg .b-stake { stroke: #B5AB9B; stroke-width: 1.1; }
.bld-svg .b-ribbon { stroke: #2852E5; stroke-width: .9; stroke-linecap: round; stroke-dasharray: none; opacity: var(--d); }
.bld-svg .b-ribbon.is-k { stroke-width: 2.2; }
.bld-svg .b-string { stroke: #2852E5; stroke-width: .4; stroke-dasharray: 1.6 1.2; stroke-dashoffset: 0; opacity: var(--d); }
.bld-svg .b-slab { fill: #D8D7D3; fill-opacity: var(--d); stroke-width: .45; }
.bld-svg .b-slab.is-e { fill: #C4C3BF; } .bld-svg .b-slab.is-s { fill: #CECDC9; }
.bld-svg .b-stud { stroke: #B5AB9B; stroke-width: .42; }
.bld-svg .b-plate { stroke: #9D9384; stroke-width: .6; }
.bld-svg .b-truss { stroke: #B5AB9B; stroke-width: .38; }
.bld-svg .b-deck { fill: #DBD7CF; fill-opacity: var(--d); stroke: #8F8A80; stroke-width: .5; }
.bld-svg .b-deck.is-back { fill: #CFCBC3; }
.bld-svg .b-glass { fill: #3C4550; fill-opacity: var(--d); stroke-width: .35; }
.bld-svg .b-brick { fill: #F4F3EF; fill-opacity: var(--d); stroke-width: .5; }
.bld-svg .b-brick.is-e { fill: #E4E3DF; }
.bld-svg .b-roof { fill: #2A2D33; fill-opacity: var(--d); stroke: #111214; stroke-width: .5; }
.bld-svg .b-roof.is-back { fill: #1E2024; }
.bld-svg .b-win { fill: #FFF1DE; fill-opacity: var(--d); stroke-width: .6; stroke: #1A1C20; }
.bld-svg .b-door { fill: #2852E5; fill-opacity: var(--d); stroke-width: .4; }
.bld-svg .b-case { fill: #FAF9F6; fill-opacity: var(--d); stroke-width: .35; }
.bld-svg .b-gdoor { fill: #ECEBE7; fill-opacity: var(--d); stroke-width: .4; }
.bld-svg .b-post { fill: #DDD4C5; fill-opacity: var(--d); stroke-width: .35; }
.bld-svg .b-post.is-e { fill: #CFC6B7; }
.bld-svg .b-tree { fill: #F1EFEA; stroke: #2A2D33; stroke-width: .35; stroke-opacity: .42; stroke-dasharray: none; }
.bld-svg .b-tshade { fill: #2A2D33; fill-opacity: .1; stroke: none; }
.bld-svg .b-trunk { stroke: #9A9EA6; stroke-width: 1.3; stroke-dasharray: none; }
.bld-svg .b-branch { stroke: #9A9EA6; stroke-width: .7; stroke-dasharray: none; }
.bld-svg .b-lamp { fill: #FFF6EA; stroke: none; opacity: var(--d); filter: drop-shadow(0 0 3px rgba(255, 241, 222, .95)); }

.page--city .sig.is-static { height: auto; }
.page--city .sig.is-static .sig__pin { position: relative; height: auto; min-height: 0; padding-block: clamp(72px, 10vw, 140px); }
.page--city .sig.is-static .sig__stage { aspect-ratio: 4 / 3; height: auto; }
.page--city .sig.is-static .sig__beats li { color: var(--ink); }
.page--city .sig.is-static .sig__steps { display: none; }
.page--city .sig.is-static .sig__caps { gap: 26px; min-height: 0; }
.page--city .sig.is-static .sig__cap { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
.page--city .sig.is-static .sig__pin { grid-template-rows: auto auto auto; align-content: start; }
.page--city .sig.is-static .sig__copy { grid-row: 1 / span 3; align-self: start; }
@media (max-width: 899px) {
  .page--city .sig { height: 320vh; height: 320svh; } /* phones: four paced beats, about 0.55 small screen each */
  .page--city .sig--build { height: 350vh; height: 350svh; }
  :is(html.is-failsafe, :root:not(.cine-js)) .page--city .sig { height: 180vh; } /* (no pacer: today's track) */
  :is(html.is-failsafe, :root:not(.cine-js)) .page--city .sig--build { height: 210vh; }
  .page--city .sig__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: calc(var(--header-h) + 14px) var(--gutter) calc(var(--bar-h, 64px) + 14px); }
  .page--city .sig__copy { grid-row: 1; gap: 10px; align-self: start; }
  .page--city .sig__stage { grid-column: 1; grid-row: 2; }
  /* the live model gets the whole space left under the story, edge to edge; the camera centers the model in it */
  .page--city .sig:not(.is-static) .sig__stage { align-self: stretch; height: auto; min-height: 0; margin-inline: calc(-1 * var(--gutter)); }
  .page--city .sig__note { grid-column: 1; grid-row: 3; justify-self: start; font-size: 10px; }
  .page--city .sig__title { font-size: clamp(2rem, 8.6vw, 2.75rem); }
  .page--city .sig__lede, .page--city .sig__src, .page--city .sig__legend { display: none; }
  .page--city .sig:not(.is-static) .sig__beats { display: grid; }
  .page--city .sig:not(.is-static) .sig__beats li { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-out), visibility 0s .35s; }
  .page--city .sig:not(.is-static) .sig__beats li.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
  .page--city .sig__beats li { padding: 6px 0 6px 14px; }
  .page--city .sig__beats li span { font-size: .95rem; }
  .page--city .sig__steps button { padding: 0 6px; letter-spacing: .06em; font-size: 10.5px; }
  .page--city .sig__caps { min-height: 5.8rem; }
  .page--city .sig__cap h3 { font-size: 1.125rem; }
  .page--city .sig__cap p { font-size: .9rem; line-height: 1.45; }
  .page--city .sig__fine { font-size: 11px; }
      .page--city .sig__skip { bottom: calc(var(--bar-h, 64px) + 12px); left: auto; right: var(--gutter); }
  .page--city .sig.is-static .sig__pin { padding-block: 56px; }
  /* reduced motion and Pause motion: copy, then the drawing, then the note (never stacked on each other) */
  .page--city .sig.is-static .sig__copy { grid-row: 1; }
  .page--city .sig.is-static .sig__stage { grid-row: 2; aspect-ratio: 3 / 2; }
  .page--city .sig.is-static .sig__note { grid-row: 3; }
  .page--city .sig.is-static .sig__src, .page--city .sig.is-static .sig__lede { display: block; }
  .page--city .sig.is-static .sig__beats li:not(.is-on) { display: grid; }
}

/* ------------------------------------------------------------------ the growth numbers (Melissa, one bone screen) */
.page--city .growth { position: relative; overflow: clip; }
.page--city .growth__streets { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30%; }
.page--city .growth__streets path { fill: none; stroke: var(--line); stroke-width: 1.2; }
.page--city .growth__streets .main { stroke: var(--blue-fill); stroke-width: 2; }
.page--city .growth__inner { position: relative; display: grid; gap: clamp(28px, 5vh, 56px); padding-block: clamp(72px, 10vh, 120px) clamp(120px, 20vh, 220px); }
.page--city .growth__head { display: grid; gap: 14px; max-width: 46rem; }
.page--city .growth__figs { display: grid; gap: clamp(18px, 3vw, 40px); margin: 0; }
@media (min-width: 900px) { .page--city .growth__figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page--city .growth__figs > div { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--ink); }
.page--city .growth__figs dt { order: 2; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); line-height: 1.6; }
.page--city .growth__figs dd { margin: 0; font-weight: 300; font-size: clamp(3.5rem, 7.4vw, 7rem); line-height: .9; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.page--city .growth__src { font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 70ch; }
.page--city .growth__src a { color: var(--ink-2); }
@media (max-width: 899px) { .page--city .growth__figs dd { font-size: clamp(3rem, 14vw, 4.5rem); } .page--city .growth__figs { gap: 16px; } }

/* ------------------------------------------------------------------ schools + taxes, Texas facts, search, finale: bone */
.page--city .schooltax > .container { padding-bottom: clamp(64px, 9vw, 120px); }
.page--city [data-rise] .district { opacity: 1; }
.page--city [data-rise].is-armed .district { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.page--city [data-rise].is-armed.is-in .district { opacity: 1; transform: none; }
.page--city .taxcard__out.screen { border-top: 3px solid var(--ink); }
.page--city .taxcard .tool-mount__summary.credits { background: var(--paper-2); color: var(--ink); border-top: 3px solid var(--ink); }
.page--city .schooltax .deeper { margin-top: 4px; }
.page--city .cityfacts > .container { padding-block: clamp(64px, 9vw, 128px); }
.page--city .cityfacts .flip__front { background: var(--paper-2); border-color: var(--line); }
.page--city .cityfacts .flip__back { background: var(--paper-2); color: var(--ink); border-color: var(--line); border-top: 3px solid var(--ink); }
.page--city .citysearch > .container { padding-block: clamp(56px, 8vw, 104px); }
.page--city .citysearch__big--paper { border-top: 3px solid var(--blue-fill); background: var(--paper-2); transition: background-color var(--dur-2); }
.page--city .citysearch__big--paper:hover { background: color-mix(in srgb, var(--paper-2) 86%, var(--blue-fill)); }
.page--city .citysearch__big--paper .citysearch__t { color: var(--ink); }
.page--city .citysearch__big--paper .citysearch__t em { color: var(--blue-text); }
.page--city .citysearch__big--paper .citysearch__sub { color: var(--ink-2); }
.page--city .citysearch__go { position: absolute; right: clamp(20px, 3vw, 36px); top: clamp(20px, 3vw, 36px); display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; background: var(--blue-fill); transition: transform var(--dur-3) var(--ease-out); }
.page--city .citysearch__big--paper:hover .citysearch__go { transform: translate(4px, -4px); }
@media (max-width: 767px) { .page--city .citysearch__go { width: 44px; height: 44px; } }
@media (min-width: 900px) { .page--city .sig__pin > .sig__skip { top: calc(var(--header-h) + 2.5vh); bottom: auto; left: auto; right: max(var(--gutter), 3vw); } }
/* phones: the three Texas cards become a swipe row (native scroll-snap) instead of a tall stack */
@media (max-width: 767px) {
  .page--city .cityfacts .flip-deck { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 6px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .page--city .cityfacts .flip-deck::-webkit-scrollbar { display: none; }
  .page--city .cityfacts .flip { scroll-snap-align: start; --flip-h: 280px; }
}
.page--city .sig.is-static .sig__pin { padding-bottom: 48px; }
.page--city .explore__link strong { padding-right: 30px; }
/* phones: the model note never runs under the Skip link */
@media (max-width: 899px) { .page--city .sig__note { padding-right: 84px; line-height: 1.5; } }
/* laptops (a 1440x900 MacBook shows about 790px of page): the square's story fits between the header and the fold. The
   inactive beats keep their year and one line, the title and the legend tighten, and the sources sit in a fine-print
   drawer (the build's copy is shorter and already fits) */
@media (min-width: 900px) and (max-height: 920px) {
  .page--city .sig__pin { padding-top: calc(var(--header-h) + 1.8vh); padding-bottom: 1.8vh; }
  .page--city .sig--square .sig__copy { gap: 10px; }
  .page--city .sig--square .sig__title { font-size: clamp(2.25rem, 3.8vw, 3.5rem); }
  .page--city .sig--square .sig__beats li { gap: 2px; padding-block: 7px; }
  .page--city .sig--square:not(.is-static) .sig__beats li:not(.is-on) span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
  .page--city .sig--square .sig__legend button { min-height: 32px; }
}
@media (min-width: 900px) and (max-height: 700px) {
  .page--city .sig--square:not(.is-static) .sig__legend { display: none; }
  .page--city .sig--square .sig__title { font-size: clamp(2rem, 3.4vw, 3rem); }
}
/* phones: the model gets at least about two fifths of the screen, and short phones tighten the story above it */
@media (max-width: 899px) {
  .page--city .sig:not(.is-static) .sig__stage { min-height: min(40svh, 106vw); }
}
@media (max-width: 899px) and (max-height: 740px) {
  .page--city .sig__pin { gap: 6px; padding-top: calc(var(--header-h) + 8px); padding-bottom: calc(var(--bar-h, 64px) + 8px); }
  .page--city .sig__copy { gap: 6px; }
  .page--city .sig__title { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .page--city .sig__steps button { min-height: 36px; }
  .page--city .sig__caps { min-height: 4.4rem; }
  .page--city .sig__cap { gap: 4px; }
  .page--city .sig__cap h3 { font-size: 1rem; }
  .page--city .sig__cap p { font-size: .84rem; line-height: 1.4; }
  .page--city .sig__note { font-size: 9.5px; }
  .page--city .sig:not(.is-static) .sig__stage { min-height: min(35svh, 106vw); }
}
/* the build's three Texas facts share one fine-print line (sources for each inside); it steps aside for "Moving here?" */
.page--city .sig__fine { max-width: 46ch; transition: opacity .4s var(--ease-out); }
.page--city .sig__fine .fineprint__body p + p { margin-top: 8px; }
.page--city .sig:not(.is-static) .sig__caps:has(.sig__cap[data-cap="2"].is-on) + .sig__fine { opacity: 0; visibility: hidden; }

/* ------------------------------------------------------------------ contrast rhythm (Ashton, 2026-09-28 evening): ink moments
   Bone stays the base; each city page mixes in three deliberate ink bands (McKinney: proof, the Texas facts and the
   final call; Melissa: the growth numbers, proof and the final call). .theme-dark re-points the tokens inside, so every
   component reads right on ink. In dark mode the bands go one step deeper so they still read as moments. */
.page--city .ink-band { background: #121110; color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page--city .ink-band { background: #080807; --paper: #080807; --paper-2: #141312; } }
:root[data-theme="dark"] .page--city .ink-band { background: #080807; --paper: #080807; --paper-2: #141312; }
.page--city .ink-band .caps { color: var(--muted); }
.page--city .ink-band .cine-h2 em, .page--city .ink-band .title-card__title em { color: var(--blue-text); }
.page--city .ink-band .film-frame { box-shadow: 0 0 0 1px rgba(241, 240, 237, .1), 0 40px 90px -50px rgba(0, 0, 0, .9); }
.page--city .ink-band .proof-card { background: #1B1A18; border-top-color: var(--ink); }
.page--city .ink-band .proof-card--mini .proof-card__status, .page--city .ink-band .cproof__label { color: var(--blue-text); }
.page--city .ink-band .proof-card--story .proof-card__result { border-top-color: rgba(241, 240, 237, .16); }
.page--city .ink-band .growth__streets path { stroke: rgba(241, 240, 237, .14); }
.page--city .ink-band .growth__streets .main { stroke: var(--blue-text); opacity: .8; }
.page--city .ink-band .growth__figs > div { border-top-color: rgba(241, 240, 237, .5); }
.page--city .ink-band .growth__src, .page--city .ink-band .growth__src a { color: var(--muted); }
.page--city .ink-band.cityfacts .flip__front { background: #1B1A18; border-color: rgba(241, 240, 237, .12); }
.page--city .ink-band.cityfacts .flip__back { background: #1B1A18; color: var(--ink); border-color: rgba(241, 240, 237, .12); border-top-color: var(--ink); --fg: var(--ink); --fg-2: var(--ink-2); }
.page--city .ink-band.cityfacts .flip__meta, .page--city .ink-band.cityfacts .flip__close { color: var(--ink-2); }
.page--city .ink-band.cityfacts .flip__meta a { color: var(--blue-text); }
.page--city .ink-band .btn--ghost { color: var(--ink); border-color: rgba(241, 240, 237, .5); }
.page--city .ink-band.keep { border-top: 1px solid rgba(241, 240, 237, .1); }

/* ======================================================================================================================
   ROUND 5 (2026-09-29, playbook §3.7/§3.8, feedback #21-#32): one start-to-bottom story per city.
   Three windows open into the city, its facts roll as credits, the model builds, the lights go down, the drawing develops
   into a house I sold, and the page ends on me (the shared text-me ending, css/site.css §14).
   ====================================================================================================================== */

/* ------------------------------------------------------------------ 1. three windows (city.js initCityWindows), round 6
   One clock, three variables. --open: 0 = three windows on bone, 1 = the lead opened (full bleed on McKinney, whose lead
   is 1440 px listing-film footage; a tall 3:4 frame on Melissa, whose water tower is 720 px phone footage, so it never
   upscales). --dock: 1 = the lead steps back into a frame on the right and keeps playing while the city's facts roll up
   beside it and the neighborhoods cascade in. --copy lifts the headline away before the frame fills (no words on
   footage). The lead's box is the mix A (three windows) -> B (opened) -> C (docked). Static first: without JS, at T0
   and in the fail-safe the windows sit as a collage and the words and facts follow in the flow. */
.page--city .cwin {
  --open: 0; --copy: 0; --dock: 0;
  --top: calc(var(--header-h) + 3vh);
  --hc: min(62vh, calc(100vh - var(--header-h) - 250px)); --wc: calc(var(--hc) * .74);
  --hs: calc(var(--hc) * .84); --ws: calc(var(--hs) * .7); --gap: 16px;
  --ax: calc(50% - var(--wc) / 2); --ay: var(--top); --aw: var(--wc); --ah: var(--hc); --ar: 26px;
  --bx: 0px; --by: 0px; --bw: 100%; --bh: 100%; --br: 0px;
  --cx: 52%; --cy: calc(var(--header-h) + 3.5svh); --cw: calc(48% - max(var(--gutter), 3vw)); --ch: calc(100svh - var(--header-h) - 7svh); --cr: 22px;
  --cred-r: calc(48% + clamp(28px, 3.4vw, 56px));
  position: relative; height: 320vh; height: 320svh; /* pinned (desktop): five paced beats (js/core/pace.js), 2.2 screens of travel (fix pass 2026-10-02: 1.8 left a trackpad flick no room for the facts and chips) */
}
.page--city .cwin[data-open="frame"] {
  --bh: calc(100svh - var(--header-h) - 7svh); --bw: calc(var(--bh) * .75);
  --bx: calc(50% - var(--bw) / 2); --by: calc(var(--header-h) + 3.5svh); --br: 22px;
  --cw: var(--bw); --ch: var(--bh); --cy: var(--by); --cx: calc(76% - var(--bw) / 2);
  --cred-r: calc(100% - var(--cx) + clamp(28px, 3.4vw, 56px));
}
.page--city .cwin__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; background: var(--paper); }
.page--city .cwin__films { position: absolute; inset: 0; z-index: 1; }
.page--city .cwin__win {
  position: absolute; overflow: hidden; background: var(--paper-2); border-radius: 26px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent), 0 50px 100px -56px rgba(21, 19, 17, .55);
}
.page--city .cwin__win video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ox, 50%) var(--oy, 45%); }
/* each window keeps its subject in frame: him in the closing selfie and on the builder visit, the tower's lettering */
.page--city .cwin__win--me { --ox: 70%; --oy: 62%; }
.page--city .cwin__win--nb { --ox: 82%; --oy: 45%; }
.page--city .cwin__win--tower { --ox: 50%; --oy: 32%; }
.page--city .cwin__win--c {
  z-index: 2;
  left: calc((var(--ax) * (1 - var(--open)) + var(--bx) * var(--open)) * (1 - var(--dock)) + var(--cx) * var(--dock));
  top: calc((var(--ay) * (1 - var(--open)) + var(--by) * var(--open)) * (1 - var(--dock)) + var(--cy) * var(--dock));
  width: calc((var(--aw) * (1 - var(--open)) + var(--bw) * var(--open)) * (1 - var(--dock)) + var(--cw) * var(--dock));
  height: calc((var(--ah) * (1 - var(--open)) + var(--bh) * var(--open)) * (1 - var(--dock)) + var(--ch) * var(--dock));
  border-radius: calc((var(--ar) * (1 - var(--open)) + var(--br) * var(--open)) * (1 - var(--dock)) + var(--cr) * var(--dock));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent), 0 50px 100px -56px rgba(21, 19, 17, .55);
}
.page--city .cwin__win--c { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent), 0 calc(50px - 30px * var(--dock)) calc(100px - 56px * var(--dock)) calc(-56px + 22px * var(--dock)) rgba(21, 19, 17, .55); }
.page--city .cwin[data-open="bleed"] .cwin__win--c { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) calc(9% * (1 - var(--open) * (1 - var(--dock)))), transparent), 0 calc(50px - 30px * var(--dock)) calc(100px - 56px * var(--dock)) calc(-56px + 22px * var(--dock)) rgba(21, 19, 17, calc(.55 * (1 - var(--open) * (1 - var(--dock))))); }
.page--city .cwin__win--c video { transform: scale(calc(1.12 - .12 * max(var(--open), var(--dock)))); transform-origin: 50% 46%; }
.page--city .cwin__win--l, .page--city .cwin__win--r { top: calc(var(--top) + (var(--hc) - var(--hs)) / 2); width: var(--ws); height: var(--hs); opacity: calc(1 - var(--open) * 1.7); }
.page--city .cwin__win--l { left: calc(50% - var(--wc) / 2 - var(--gap) - var(--ws)); transform: translate3d(calc(var(--open) * -46vw), 0, 0) scale(calc(1 - var(--open) * .08)); transform-origin: 100% 50%; }
.page--city .cwin__win--r { left: calc(50% + var(--wc) / 2 + var(--gap)); transform: translate3d(calc(var(--open) * 46vw), 0, 0) scale(calc(1 - var(--open) * .08)); transform-origin: 0 50%; }
.page--city .cwin__pause { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: rgba(11, 11, 12, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: calc(.35 + var(--open) * .65); transition: opacity .3s; }
.page--city .cwin__pause:hover, .page--city .cwin__pause:focus-visible { opacity: 1; border-color: #fff; }
.page--city .cwin__copy {
  position: absolute; z-index: 3; left: max(var(--gutter), 3vw); right: max(var(--gutter), 3vw); bottom: clamp(22px, 4vh, 48px);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px clamp(32px, 5vw, 80px); align-items: end;
  opacity: calc(1 - var(--copy)); transform: translate3d(0, calc(var(--copy) * -56px), 0);
}
.page--city .cwin__copy h1 { font-weight: 300; font-size: clamp(3.25rem, 6vw, 6.5rem); line-height: .9; letter-spacing: -.05em; color: var(--ink); }
.page--city .cwin__copy h1 .kicker { display: block; font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); margin-bottom: clamp(12px, 1.6vw, 20px); }
.page--city .cwin__copy h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; }
.page--city .cwin__aside { display: grid; gap: 16px; justify-items: start; }
.page--city .cwin__lede { max-width: 38ch; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.5; color: var(--ink-2); }
.page--city .cwin__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.page--city .cwin__ctas .btn--primary { min-height: 50px; padding: 0 26px; }
.page--city .cwin.is-docked .cwin__copy { visibility: hidden; }
/* the facts, on the left beside the docked film (pinned); they roll up row by row, then the neighborhoods cascade in */
.page--city .cwin__credits { position: absolute; z-index: 6; left: max(var(--gutter), 3vw); right: var(--cred-r); top: var(--header-h); bottom: 0; display: grid; align-content: center; justify-items: start; gap: 12px; padding: 2.5svh 0; text-align: left; visibility: hidden; }
.page--city .cwin.is-rolling .cwin__credits { visibility: visible; }
.page--city .cwin__credits .title-card__title { font-size: clamp(3rem, 5.4vw, 5.25rem); max-width: none; }
.page--city .cwin__credits .title-card__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .14em; margin: 0 -.08em -.14em; }
.page--city .cwin__credits .title-card__title em .w { line-height: 1.08; padding-top: .06em; margin-top: -.06em; }
.page--city .cwin__credits .title-card__title .wi { display: inline-block; }
.page--city .cwin__credits .credits__list { width: 100%; gap: 0; margin: 6px 0 0; }
.page--city .cwin__credits .credits__list > div { grid-template-columns: minmax(8.5rem, 11rem) minmax(0, 1fr); gap: 4px 20px; padding: 9px 0; border-top: 1px solid var(--line); }
.page--city .cwin__credits .credits__list dt { text-align: left; }
.page--city .cwin__credits .credits__list dd { font-size: clamp(1.0625rem, 1.5vw, 1.375rem); }
.page--city .city-credits__src { max-width: 60ch; font-size: 12px; color: var(--muted); }
.page--city .city-credits__src a { color: var(--ink-2); }
.page--city .cwin__streets { display: grid; gap: 12px; width: 100%; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--ink); }
.page--city .cwin__streets-h { font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2.125rem); line-height: 1.05; letter-spacing: -.035em; }
.page--city .cwin__streets-h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.01em; }
.page--city .cwin__streets .community-chips { gap: 6px; }
.page--city .cwin__streets .community { min-height: 42px; padding: 0 16px; font-size: .9375rem; }
.page--city .cwin__streets-note { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.page--city .cwin__skip { position: absolute; z-index: 8; left: max(var(--gutter), 3vw); top: calc(var(--header-h) + 12px); display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); background: color-mix(in srgb, var(--paper) 86%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); border-radius: 999px; text-decoration: none; opacity: max(.72, calc(1 - var(--copy))); } /* it stays findable through the whole pin (every pin over 1.5 screens keeps its Skip) */
.page--city .cwin__skip:hover, .page--city .cwin__skip:focus-visible { color: var(--ink); border-color: var(--ink); opacity: 1; }
/* static (phones, short windows, T0, no JS): the windows as a collage, then the words, then the facts, in the flow */
.page--city :is(.cwin.is-static, html.is-failsafe .cwin, :root:not(.cine-js) .cwin) { height: auto; --top: 0px; }
.page--city :is(.cwin.is-static, html.is-failsafe .cwin, :root:not(.cine-js) .cwin) .cwin__stage { position: relative; height: auto; overflow: visible; padding-top: calc(var(--header-h) + clamp(12px, 2.4vh, 28px)); }
.page--city :is(.cwin.is-static, html.is-failsafe .cwin, :root:not(.cine-js) .cwin) .cwin__films { position: relative; inset: auto; height: var(--hc); }
.page--city :is(.cwin.is-static, html.is-failsafe .cwin, :root:not(.cine-js) .cwin) .cwin__win--c { left: var(--ax); top: 0; width: var(--aw); height: var(--ah); border-radius: var(--ar); }
.page--city :is(.cwin.is-static, html.is-failsafe .cwin, :root:not(.cine-js) .cwin) .cwin__win--l, .page--city :is(.cwin.is-static, html.is-failsafe .cwin, :root:not(.cine-js) .cwin) .cwin__win--r { top: calc((var(--hc) - var(--hs)) / 2); }
.page--city :is(.cwin.is-static, html.is-failsafe .cwin, :root:not(.cine-js) .cwin) .cwin__copy { position: relative; left: auto; right: auto; bottom: auto; margin: clamp(28px, 4vh, 44px) max(var(--gutter), 3vw) 0; visibility: visible; }
.page--city :is(.cwin.is-static, html.is-failsafe .cwin, :root:not(.cine-js) .cwin) .cwin__credits { position: relative; inset: auto; visibility: visible; max-width: 760px; padding: clamp(48px, 8vh, 96px) 0 clamp(24px, 5vh, 56px); margin: clamp(36px, 6vh, 64px) max(var(--gutter), 3vw) 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) and (max-height: 619px) { .page--city .cwin { --hc: min(78vh, 480px); } }
/* phones: a collage that fits the screen (the lead above, the two small windows side by side under it), so his face and
   the tower's lettering are always in frame; as the hero scrolls away the lead widens to the edges and the small ones
   drift down */
@media (max-width: 899px) {
  .page--city .cwin { --hc: min(66svh, 150vw, 620px); --gap: 8px; }
  .page--city .cwin__win { border-radius: 18px; }
  .page--city :is(.cwin, .cwin.is-static, html.is-failsafe .cwin, :root:not(.cine-js) .cwin) .cwin__films .cwin__win--c { left: calc(var(--gutter) * (1 - var(--open))); top: 0; width: calc(100% - 2 * var(--gutter) * (1 - var(--open))); height: 62%; border-radius: calc(18px * (1 - var(--open))); }
  .page--city :is(.cwin, .cwin.is-static, html.is-failsafe .cwin, :root:not(.cine-js) .cwin) .cwin__films .cwin__win--l, .page--city :is(.cwin, .cwin.is-static, html.is-failsafe .cwin, :root:not(.cine-js) .cwin) .cwin__films .cwin__win--r { top: calc(62% + var(--gap)); width: calc((100% - 2 * var(--gutter) - var(--gap)) / 2); height: calc(38% - var(--gap)); opacity: calc(1 - var(--open) * .35); border-radius: 16px; }
  .page--city :is(.cwin, .cwin.is-static, html.is-failsafe .cwin, :root:not(.cine-js) .cwin) .cwin__films .cwin__win--l { left: var(--gutter); transform: translate3d(0, calc(var(--open) * 26px), 0); }
  .page--city :is(.cwin, .cwin.is-static, html.is-failsafe .cwin, :root:not(.cine-js) .cwin) .cwin__films .cwin__win--r { left: calc(50% + var(--gap) / 2); transform: translate3d(0, calc(var(--open) * 40px), 0); }
  .page--city .cwin__win--me { --ox: 62%; --oy: 80%; }
  .page--city .cwin__win--nb { --ox: 78%; --oy: 40%; }
  .page--city .cwin__win--tower { --ox: 50%; --oy: 26%; }
  .page--city .cwin__copy { grid-template-columns: minmax(0, 1fr); }
  .page--city .cwin__copy h1 { font-size: clamp(2.9rem, 13.5vw, 4.25rem); }
  .page--city .cwin__copy h1 .kicker { letter-spacing: .2em; font-size: 11px; }
  .page--city .cwin__lede { font-size: 1rem; }
  .page--city .cwin__pause { min-height: 40px; padding: 0 12px; }
  .page--city .cwin__pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .page--city .cwin__credits .credits__list > div { grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr); gap: 4px 14px; }
  .page--city .cwin__credits .title-card__title { font-size: clamp(2.75rem, 13vw, 4rem); }
}
:root[data-tier="0"] .page--city .cwin__pause { display: none; }
/* the credits roll (inline styles from city.js while pinned); phones rise each row as it arrives */
.page--city .cwin:not(.is-static) [data-roll] { will-change: opacity, transform; }
.page--city .cwin.is-flow [data-roll].is-armed { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.page--city .cwin.is-flow [data-roll].is-armed.is-in { opacity: 1; transform: none; }
html.is-failsafe .page--city .cwin [data-roll] { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------------ 4/5. proof: the drawing develops into the house I sold
   --dim draws the blue ground line on the drawing, --wipe takes the drawing away left to right (a blue edge rides the
   wipe), .is-sold raises the Sold tab from its mask; Melissa's figure then opens on my listing film at that front door.
   Static first: --wipe 1 (the photo) without JS, at T0 and in the fail-safe. */
.page--city .cproof > .container { padding-block: clamp(56px, 7vw, 104px) clamp(72px, 10vw, 128px); }
.page--city .cproof .cine-h2 { font-size: clamp(2.5rem, 4.6vw, 4.5rem); }
.page--city .cproof__grid { display: grid; gap: clamp(32px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .page--city .cproof__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.page--city .cproof__body { display: grid; gap: 18px; align-content: start; }
.page--city .cproof__label { color: var(--blue-text); }
.page--city .cproof__cards { display: grid; gap: 12px; margin-top: 8px; }
.page--city .proof-card--mini { gap: 10px; padding: clamp(20px, 2.6vw, 30px); align-content: start; }
.page--city .proof-card--mini .proof-card__title { font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.08; max-width: 22ch; }
.page--city .proof-card--mini .proof-card__status { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-text); }
.page--city .proof-card--story .proof-card__story { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); max-width: 36ch; }
.page--city .proof-card--story .proof-card__result { display: block; max-width: 22ch; margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(241, 240, 237, .16); font-weight: 300; font-size: clamp(1.5rem, 2.5vw, 2.125rem); line-height: 1.14; letter-spacing: -.03em; text-wrap: balance; }
.page--city .proof-card--story .proof-card__result [data-count] { font-weight: 400; color: var(--blue-text); }
.page--city .proof-card--story .proof-card__status { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.page--city .proof-card--story .proof-card__status .link-caps { color: var(--ink); }
.page--city .develop { --dim: 1; --wipe: 1; position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #1B1A18; border-radius: 6px; box-shadow: 0 0 0 1px rgba(241, 240, 237, .1), 0 60px 120px -60px rgba(0, 0, 0, .95); }
.page--city .develop__photo, .page--city .develop__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.page--city .develop__film { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.page--city .develop.is-film .develop__film { opacity: 1; }
.page--city .develop__ink { position: absolute; inset: 0; background: #F5F5F3; clip-path: inset(0 0 0 calc(var(--wipe) * 100%)); }
.page--city .develop__ink img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.page--city .develop__edge { position: absolute; top: 0; bottom: 0; left: calc(var(--wipe) * 100%); width: 2px; margin-left: -1px; background: #2852E5; box-shadow: 0 0 22px 3px rgba(40, 82, 229, .55); opacity: calc(min(1, var(--wipe) * 14) * min(1, (1 - var(--wipe)) * 14)); pointer-events: none; }
.page--city .develop__dim { position: absolute; left: 0; bottom: 9%; width: 100%; height: 20px; overflow: visible; opacity: calc(1 - var(--wipe) * 1.4); }
.page--city .develop__dim path { fill: none; stroke: #2852E5; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1000; stroke-dashoffset: calc(1000 * (1 - var(--dim))); }
.page--city .develop__sold { position: absolute; left: clamp(12px, 2vw, 22px); bottom: clamp(12px, 2vw, 22px); z-index: 2; padding: 8px 14px; font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #fff; background: #2852E5; border-radius: 999px; box-shadow: 0 12px 30px -10px rgba(40, 82, 229, .7); }
.page--city .develop.is-armed .develop__sold { clip-path: inset(0 0 100% 0 round 999px); transform: translate3d(0, 10px, 0); transition: clip-path .7s var(--ease-out), transform .7s var(--ease-out); }
.page--city .develop.is-armed.is-sold .develop__sold { clip-path: inset(0 0 0 0 round 999px); transform: none; }
.page--city [data-rise-card].is-armed { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
.page--city [data-rise-card].is-armed.is-in { opacity: 1; transform: none; }
html.is-failsafe .page--city .develop { --wipe: 1 !important; --dim: 1 !important; }
html.is-failsafe .page--city [data-rise-card].is-armed { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ 3. Melissa growth: the blue line draws with the scroll */
.page--city [data-growth-draw].is-armed path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--gd, 1)); }
.page--city [data-growth-draw].is-armed path:not(.main) { stroke-dashoffset: calc(1 - var(--gd2, 1)); }

/* ------------------------------------------------------------------ 6. Texas facts: the three cards rise in turn */
.page--city .flip-deck.is-armed > .flip { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
.page--city .flip-deck.is-armed.is-in > .flip { opacity: 1; transform: none; }
html.is-failsafe .page--city .flip-deck.is-armed > .flip { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ 7. search, then a client's words light word by word */
.page--city .citysearch > .container.citysearch__more { padding-top: 0; display: grid; gap: 28px 64px; align-items: end; }
@media (min-width: 1000px) { .page--city .citysearch__more { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); } }
.page--city .cityquote { margin: 0; display: grid; gap: 18px; padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.page--city .cityquote blockquote p { max-width: 26ch; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 3.3vw, 3.25rem); line-height: 1.14; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.page--city .cityquote blockquote em { color: var(--blue-text); }
.page--city .cityquote figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.page--city .cityquote__next { display: grid; gap: 12px; justify-items: start; padding-bottom: 6px; }
.page--city [data-lit] .wi { opacity: clamp(.14, calc(.14 + (var(--lp, 1) * (var(--ln, 1) + 3) - var(--i, 0)) * .86), 1); transition: opacity .25s linear; }
.page--city [data-lit] .w { display: inline; }
html.is-failsafe .page--city [data-lit] .wi { opacity: 1 !important; }

/* ------------------------------------------------------------------ 5. district rows: the rates count as each row rises */
.page--city .district__rate .tabular, .page--city .district__combined .tabular { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ 5. schools and taxes, tighter (round 5): the district rows
   rise on the left while the tax card stays beside them (sticky), and the full rate table waits in a Go deeper drawer */
.page--city .taxcard__rates { margin-top: 4px; }
.page--city .taxcard__rates .rates { margin-top: 12px; }
@media (min-width: 1100px) {
  .page--city .schooltax > .container { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; }
  .page--city .schooltax > .container > * { grid-column: 1; }
  .page--city .schooltax > .container > .taxcard { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; position: sticky; top: calc(var(--header-h) + 24px); grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .page--city .schooltax .taxcard__out { position: static; }
  .page--city .schooltax .district { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name rate" "comb comb" "links pick"; gap: 6px 20px; padding: 18px 0; }
  .page--city .schooltax .district__name { grid-area: name; }
  .page--city .schooltax .district__rate { grid-area: rate; justify-content: end; }
  .page--city .schooltax .district__combined { grid-area: comb; }
  .page--city .schooltax .district__links { grid-area: links; }
  .page--city .schooltax .district__pick { grid-area: pick; justify-self: end; }
}
.page--city .proof-card__me { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(241, 240, 237, .28); }
.page--city .proof-card--mini .proof-card__status:has(.proof-card__me) { display: flex; align-items: center; gap: 12px; }
@media (max-width: 1099px) {
  .page--city .schooltax .district { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name rate" "comb comb" "links links" "pick pick"; gap: 4px 14px; padding: 14px 0; }
  .page--city .schooltax .district__name { grid-area: name; font-size: 1.5rem; }
  .page--city .schooltax .district__rate { grid-area: rate; justify-content: end; }
  .page--city .schooltax .district__rate .tabular { font-size: 1.375rem; }
  .page--city .schooltax .district__rate { flex-direction: column; align-items: flex-end; gap: 0; }
  .page--city .schooltax .district__unit { font-size: 10px; letter-spacing: .12em; }
  .page--city .schooltax .district__combined { grid-area: comb; font-size: 12.5px; line-height: 1.45; }
  .page--city .schooltax .district__links { grid-area: links; gap: 0 14px; font-size: 12.5px; }
  .page--city .schooltax .district__links a { min-height: 32px; }
  .page--city .schooltax .district__pick { grid-area: pick; justify-self: start; min-height: 36px; }
}
@media (max-width: 699px) { .page--city .schooltax .district__pick { display: none; } .page--city .schooltax .district { grid-template-areas: "name rate" "comb comb" "links links"; } }

/* ======================================================================================================================
   ROUND 6 (2026-09-29, the scroll review's must-fix list): him every few screens, proof that builds, the tax bill as the
   visual, and no dead stretch. Page-owned (the shared hooks in cinema.js don't have a spotlight yet).
   ====================================================================================================================== */

/* ------------------------------------------------------------------ the square's last beat is me */
.page--city .sig__me { display: flex; gap: 12px; align-items: center; }
.page--city .sig__me > img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.page--city .sig__me > span { display: block; }
.page--city .sig__me .link-caps { display: inline-block; margin: 6px 14px 0 0; color: inherit; }
.page--city .sig__beats li.sig__beat-me.is-on { border-left-color: var(--blue-fill); }

/* ------------------------------------------------------------------ proof: me, and the proof walks under a light (B5)
   A neutral pool of light (paper white, faintly cool; never warm on the ink) travels over the four facts as the band
   scrolls by: the lit one at full, the rest at rest; each count runs when the light reaches it. Before and after the
   walk every fact is lit. T0 and the fail-safe: everything lit, no pool. */
.page--city .cproof > .container.cproof__grid { padding-bottom: clamp(40px, 5vw, 72px); }
.page--city .cproof > .container.spot { padding-block: clamp(8px, 2vw, 24px) clamp(80px, 10vw, 140px); }
.page--city .spot { position: relative; display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; isolation: isolate; }
@media (min-width: 900px) { .page--city .spot { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.page--city .spot__light { position: absolute; z-index: -1; left: 0; top: 0; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(241, 240, 237, .085), rgba(170, 186, 240, .045) 55%, transparent); transform: translate3d(var(--lx, 70%), var(--ly, 50%), 0); opacity: 0; transition: transform .9s var(--ease-out), opacity .6s var(--ease-out); }
.page--city .spot.is-spot .spot__light { opacity: 1; }
.page--city .spot__me { position: relative; margin: 0; width: min(100%, 380px); aspect-ratio: 4 / 5; justify-self: center; border-radius: 999px 999px 20px 20px; overflow: hidden; background: #1B1A18; box-shadow: 0 0 0 1px rgba(241, 240, 237, .14), 0 60px 110px -60px rgba(0, 0, 0, .95); }
.page--city .spot__me img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.page--city .spot__me.is-armed { clip-path: inset(100% 0 0 0 round 999px 999px 20px 20px); transition: clip-path 1.2s var(--ease-out); }
.page--city .spot__me.is-armed img { transform: scale(1.1); transition: transform 1.6s var(--ease-out); }
.page--city .spot__me.is-armed.is-in { clip-path: inset(0 0 0 0 round 999px 999px 20px 20px); }
.page--city .spot__me.is-armed.is-in img { transform: none; }
html.is-failsafe .page--city .spot__me { clip-path: none !important; }
.page--city .spot__body { display: grid; gap: clamp(18px, 2.4vw, 30px); align-content: center; min-width: 0; }
.page--city .spot__line { max-width: 24ch; font-weight: 300; font-size: clamp(1.875rem, 3.2vw, 3rem); line-height: 1.06; letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.page--city .spot__line em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.01em; }
.page--city .spot__stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(18px, 2.6vw, 40px); }
@media (min-width: 1680px) { .page--city .spot__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.page--city .spot__stat { display: grid; gap: 10px; align-content: start; padding: 18px 0 8px; border-top: 1px solid rgba(241, 240, 237, .24); color: var(--ink); text-decoration: none; transition: opacity .55s var(--ease-out), border-color .55s var(--ease-out); }
.page--city .spot.is-spot .spot__stat { opacity: .36; }
.page--city .spot.is-spot li.is-lit .spot__stat { opacity: 1; border-top-color: var(--blue-text); }
.page--city .spot__n { font-weight: 300; font-size: clamp(2.25rem, 3.6vw, 3.5rem); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.page--city .spot__n em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; }
.page--city .spot__l { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.page--city a.spot__stat:hover .spot__l, .page--city a.spot__stat:focus-visible .spot__l { color: var(--ink); }
.page--city .spot__broker { font-size: 13px; color: var(--ink-2); }
.page--city .spot__broker span { color: var(--ink); font-weight: 500; }
@media (max-width: 899px) { .page--city .spot__me { width: min(72vw, 320px); } .page--city .spot__n { font-size: clamp(2.25rem, 11vw, 3.25rem); } }
/* site.css's Home repairs list (.spots > .spot > .spot__body, in @layer sections) shares these class names: its .spot
   bottom rule and its .spot__body indent (padding: 0 0 20px calc(2.6ch + 14px)) leaked into every city proof band, and
   on phones pushed the second column of facts off screen. Reset once here (this file is unlayered, so it wins). */
.page--city .spot { border-bottom: 0; }
.page--city .spot__body { padding: 0; }
/* a fact wraps (Top / Producer) rather than run past its column, and on phones the figures step down a size so the
   four facts sit two to a row down to 320 px ("Hundreds" is one word and must fit its column) */
.page--city .spot__n { white-space: normal; }
@media (max-width: 599px) {
  .page--city .spot__stats { column-gap: 14px; }
  .page--city .spot__n { font-size: clamp(1.625rem, 8vw, 2.25rem); line-height: .95; }
}

/* ------------------------------------------------------------------ Melissa: bring me on your first builder visit (bone) */
.page--city .meet > .container { padding-block: clamp(72px, 10vw, 140px); }
.page--city .meet__grid { display: grid; gap: clamp(28px, 5vw, 96px); align-items: center; }
@media (min-width: 900px) { .page--city .meet__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.page--city .meet__film { width: min(100%, 440px); justify-self: center; border-radius: 22px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent), 0 60px 110px -60px rgba(21, 19, 17, .6); --focus-y: 50%; }
.page--city .meet__film::after { display: none; }
.page--city .meet__copy { display: grid; gap: 20px; align-content: center; }
.page--city .meet__copy .cine-h2 { font-size: clamp(2.5rem, 5vw, 4.75rem); }
.page--city .meet__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 899px) { .page--city .meet__film { width: min(100%, 360px); } }

/* ------------------------------------------------------------------ schools and taxes: one tax bill is the visual
   The copy on the left, the bill on the right. Desktop pins it (city.js initTaxLine) and the scroll steps it: McKinney
   through its districts, Melissa line by line and then the homestead exemption; every figure counts to its new value
   and the bar's segments grow or give way. Phones and short windows play the same steps once on arrival. */
.page--city .taxline { position: relative; }
.page--city .taxline__pin { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(72px, 9vw, 128px) max(var(--gutter), 3vw); }
@media (min-width: 1100px) { .page--city .taxline__pin { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.page--city .taxline.is-pinned { height: 240vh; height: 240svh; }
.page--city .taxline.is-pinned .taxline__pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: calc(var(--header-h) + 2.5svh); padding-bottom: 2.5svh; }
.page--city .taxline__copy { display: grid; gap: 14px; align-content: center; min-width: 0; }
.page--city .taxline__h { font-weight: 300; font-size: clamp(2.5rem, 4.4vw, 4.5rem); line-height: .95; letter-spacing: -.05em; text-wrap: balance; max-width: 16ch; }
.page--city .taxline__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; }
.page--city .taxline__lede { max-width: 40ch; font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); line-height: 1.45; color: var(--ink-2); }
.page--city .taxline__me { display: flex; gap: 12px; align-items: center; max-width: 46ch; font-family: var(--serif); font-style: italic; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.35; color: var(--ink); }
.page--city .taxline__me img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.page--city .taxline__picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.page--city .taxline__picks .chip { position: relative; overflow: hidden; }
.page--city .taxline__picks .chip[aria-pressed="true"] { color: #fff; background: var(--blue-fill); border-color: var(--blue-fill); }
.page--city .taxline__schools { max-width: 60ch; }
.page--city .taxline .deeper { margin: 0; }
.page--city .taxline .deeper .districts { margin-top: 12px; }
.page--city .taxline .deeper .fine { margin-top: 10px; }
.page--city .taxline__card { min-width: 0; }
@media (min-width: 1100px) and (max-height: 900px) { .page--city .taxline.is-pinned .taxline__copy { gap: 10px; } .page--city .taxline.is-pinned .taxline__h { font-size: clamp(2.25rem, 3.8vw, 3.75rem); } }
/* the bill */
.page--city .tl { position: relative; display: grid; gap: 16px; padding: clamp(24px, 2.8vw, 40px); background: var(--paper-2); border-top: 3px solid var(--ink); box-shadow: 0 50px 90px -70px rgba(21, 19, 17, .55); }
.page--city .tl__head { display: grid; gap: 6px; }
.page--city .tl__head .caps { color: var(--ink-2); }
.page--city .tl__dist { display: block; overflow: hidden; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.08; color: var(--blue-text); }
.page--city .tl__dist > span { display: block; }
.page--city .tl__dist > span.is-new { animation: tl-rise .55s var(--ease-out) both; }
@keyframes tl-rise { from { transform: translate3d(0, 70%, 0); opacity: 0; } to { transform: none; opacity: 1; } }
.page--city .tl__bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.page--city .tl__bar i { display: block; flex: 0 0 auto; height: 100%; width: calc(var(--w, 0) * 100%); background: var(--c); transition: width .75s var(--ease-out); }
.page--city .tl__lines { display: grid; margin: 0; }
.page--city .tl__lines > div { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); transition: opacity .45s var(--ease-out); }
.page--city .tl__lines > div.is-off { opacity: .26; }
.page--city .tl__lines .sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c); align-self: center; }
.page--city .tl__lines dt { font-size: .9375rem; line-height: 1.35; color: var(--ink); }
.page--city .tl__lines dd { margin: 0; font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.page--city .tl__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; padding-top: 4px; }
.page--city .tl__total .caps { color: var(--ink-2); }
.page--city .tl__sum { font-weight: 300; font-size: clamp(3rem, 5vw, 4.75rem); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--ink); }
.page--city .tl__rate { width: 100%; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.page--city .tl__in { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding-top: 12px; border-top: 1px solid var(--rule); }
.page--city .tl__price { display: flex; align-items: center; gap: 8px; }
.page--city .tl__price .field__label { margin: 0; font-size: 12px; }
.page--city .tl__price .input-wrap { width: 150px; }
.page--city .tl__price .input { min-height: 42px; }
.page--city .tl__foot { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; }
.page--city .tl__fine { font-size: 12px; line-height: 1.55; color: var(--muted); }
@media (max-width: 1099px) { .page--city .taxline__card { max-width: 620px; } }

/* ------------------------------------------------------------------ search: the quote first, then the tiles rise in turn */
.page--city .citysearch > .container.citysearch__more--first { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(28px, 4vw, 48px); }
.page--city .citysearch__more--first .cityquote { border-top: 0; padding-top: 0; }
.page--city .citysearch > .container.citysearch__grid { padding-block: 0; }
.page--city .citysearch > .container.citysearch__next { padding-block: clamp(28px, 4vw, 48px) clamp(56px, 8vw, 104px); }
.page--city .citysearch__next .cityquote__next { display: flex; flex-wrap: wrap; gap: 12px 28px; }

/* the square's last beat keeps its portrait beside the words (the laptop rule clamps inactive beats to one line) */
.page--city .sig--square:not(.is-static) .sig__beats li .sig__me { display: flex; -webkit-line-clamp: unset; overflow: visible; }
.page--city .sig--square:not(.is-static) .sig__beats li:not(.is-on) .sig__me > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.page--city .sig__beats li:not(.is-on) .sig__me .link-caps { display: none; }
.page--city .sig.is-static .sig__beats li .sig__me .link-caps { display: inline-block; }

.page--city .taxline.is-pinned { height: 255vh; height: 255svh; }

/* ======================================================================================================================
   ROUND 8 (2026-09-29, Ashton's global rule, feedback #40: the key details, and a visual that builds as you scroll)
   ====================================================================================================================== */

/* ------------------------------------------------------------------ the city's numbers, as stat tiles that count up
   (city.js initCityWindows: scrubbed beside the docked film on desktop, on arrival on phones; T0 shows the numbers) */
.page--city .cstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(18px, 2.4vw, 36px); width: 100%; margin: 4px 0 0; }
.page--city .cstats > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 0 12px; border-top: 1px solid var(--line); }
.page--city .cstats dt { order: 2; font-size: 11px; font-weight: 500; line-height: 1.45; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.page--city .cstats dd { order: 1; margin: 0; font-weight: 300; font-size: clamp(2.25rem, 3.5vw, 3.5rem); line-height: .92; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.page--city .cstats dd em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.01em; }
.page--city .cstats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page--city .cstats--3 dd { font-size: clamp(1.75rem, 2.6vw, 2.75rem); white-space: normal; }
@media (max-width: 899px) {
  .page--city .cstats, .page--city .cstats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .page--city .cstats--3 > div:last-child { grid-column: 1 / -1; }
  .page--city .cstats dd { font-size: clamp(2rem, 9.4vw, 2.75rem); }
  .page--city .cstats--3 dd { font-size: clamp(1.625rem, 7.4vw, 2.25rem); }
  .page--city .cstats dt { font-size: 10px; letter-spacing: .12em; }
}
/* phones: the facts and the neighborhoods take about one screen (the pinned desktop keeps its column) */
.page--city :is(.cwin.is-static, html.is-failsafe .cwin, :root:not(.cine-js) .cwin) .cwin__credits { gap: 10px; }
@media (max-width: 899px) {
  .page--city :is(.cwin.is-static, html.is-failsafe .cwin, :root:not(.cine-js) .cwin) .cwin__credits { padding: clamp(28px, 5vh, 48px) 0 8px; margin-top: clamp(24px, 4vh, 40px); }
}


/* ------------------------------------------------------------------ McKinney: three things to know, as three figures on ink
   (city.js initKnow): the homestead exemption counts up, the MUD's rate bar outgrows the city's, a month of nights
   fills in. Static first: every figure complete without JS, at T0 and in the fail-safe. */
.page--city .know { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 56px); counter-reset: none; }
@media (min-width: 900px) { .page--city .know { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page--city .know__item { display: grid; gap: 12px; align-content: start; min-width: 0; padding-top: 22px; border-top: 1px solid rgba(241, 240, 237, .24); }
.page--city .know__fig { display: flex; align-items: flex-end; min-height: clamp(92px, 8.4vw, 124px); }
.page--city .know__n, .page--city .know__nd { font-weight: 300; font-size: clamp(3.25rem, 5.4vw, 5.25rem); line-height: .9; letter-spacing: -.055em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.page--city .know__h { max-width: 22ch; font-weight: 400; font-size: clamp(1.25rem, 1.7vw, 1.625rem); line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.page--city .know__p { max-width: 36ch; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.page--city .know__fig--bars { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 14px; }
.page--city .know__bar { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding-bottom: 12px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.page--city .know__bar i { position: absolute; left: 0; bottom: 0; height: 5px; width: calc(var(--v, 1) * var(--g, 1) * 100%); border-radius: 3px; background: rgba(241, 240, 237, .5); transition: width .12s linear; }
.page--city .know__bar--mud i { height: 7px; background: var(--blue-text); box-shadow: 0 0 18px rgba(96, 128, 255, .35); }
.page--city .know__bar b { font-weight: 300; font-size: clamp(1.5rem, 2vw, 2rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-transform: none; color: var(--ink); opacity: calc(.25 + .75 * var(--g, 1)); }
.page--city .know__fig--days { gap: 18px; }
.page--city .know__cal { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; width: min(200px, 56%); }
.page--city .know__cal i { aspect-ratio: 1; border-radius: 2px; background: var(--blue-text); border: 1px solid var(--blue-text); transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out); }
.page--city .know.is-armed .know__cal i:not(.is-on) { background: transparent; border-color: rgba(241, 240, 237, .26); }
@media (max-width: 899px) { .page--city .know__fig { min-height: 0; } .page--city .know__item { gap: 10px; padding-top: 18px; } .page--city .know { gap: 26px; } }

/* ------------------------------------------------------------------ schools and taxes, one screen: the copy and the district
   chips, the bill right under them (beside them on desktop), then one drawer and the fine print */
.page--city .taxline__pin { grid-template-areas: "copy" "card" "more"; }
.page--city .taxline__copy { grid-area: copy; }
.page--city .taxline__card { grid-area: card; }
.page--city .taxline__more { grid-area: more; display: grid; gap: 10px; min-width: 0; align-content: start; }
.page--city .taxline__more .deeper > .fine { margin: 10px 0 0; }
.page--city .taxline__more .deeper > p:not(.fine) { margin-top: 10px; max-width: 60ch; }
@media (min-width: 1100px) {
  .page--city .taxline__pin { grid-template-areas: "copy card" "more card"; grid-template-rows: auto auto; align-content: center; row-gap: 22px; }
  .page--city .taxline__copy { align-self: end; }
  .page--city .taxline__more { align-self: start; }
}
.page--city .taxline.is-pinned { height: 220vh; height: 220svh; } /* (paced steps, js/core/pace.js: 1.2 screens of travel) */
@media (max-width: 1099px) {
  .page--city .taxline__pin { gap: 20px; padding-block: clamp(56px, 9vw, 88px); }
  .page--city .taxline__copy { gap: 12px; }
  .page--city .taxline__picks { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * max(var(--gutter), 3vw)); padding: 2px max(var(--gutter), 3vw) 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .page--city .taxline__picks::-webkit-scrollbar { display: none; }
  .page--city .taxline__picks .chip { flex: none; scroll-snap-align: start; }
  .page--city .tl { gap: 12px; padding: 20px 18px; }
  .page--city .tl__lines > div { padding: 8px 0; }
  .page--city .tl__sum { font-size: clamp(2.5rem, 12vw, 3.25rem); }
}
/* me beside the neighborhoods (him on screen every few scrolls), and a larger portrait on the square's last beat */
.page--city .cwin__streets-top { display: flex; gap: 14px; align-items: center; }
.page--city .cwin__me { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent), 0 0 0 4px color-mix(in srgb, var(--blue-fill) 22%, transparent); }
.page--city .sig__me > img { width: 64px; height: 64px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent), 0 0 0 4px color-mix(in srgb, var(--blue-fill) 26%, transparent); }
@media (max-width: 899px) { .page--city .sig__me > img { width: 48px; height: 48px; } }
/* (round 8) the T1/T0 drawings wear the models' real finishes: green trees and lawns, a meadow field, bark, black steel */
.sq-svg .sq-tree path { fill: #6A7D51; stroke: #3E4A33; }
.sq-svg .sq-tree line { stroke: #5A524B; }
.sq-svg .sq-plates .is-lawn { fill: #9EAF85; }
.sq-svg .sq-awn polygon { fill: #2B2E33; }
.sq-svg .sq-awn.is-satin polygon { fill: #2B3A5E; }
.bld-svg .b-field { fill: #C3C7AE; }
.bld-svg .b-tree { fill: #6A7D51; stroke: #3E4A33; }
.bld-svg .b-trunk, .bld-svg .b-branch { stroke: #6A625A; }
.bld-svg .b-post, .bld-svg .b-post.is-e { fill: #26282C; }
.page--city .taxline.is-pinned .taxline__pin { position: sticky; }
.page--city .taxline__pin > .taxline__skip { top: calc(var(--header-h) + 2.5vh); bottom: auto; left: auto; right: max(var(--gutter), 3vw); }

/* ======================================================================================================================
   ROUND 9 (2026-09-29, the scroll review at 8): re-cut hero films, a live film band on phones, him inside the build,
   the build stage to the page edge, and fewer words (feedback #40)
   ====================================================================================================================== */
/* the hero windows: the new-build film is now the smiling selfie with the builder's rep (its crop keeps me the largest
   face, so no zoom), and the tower drifts there and back with its lettering on the right half of the frame */
.page--city .cwin__win--nb { --ox: 74%; --oy: 38%; }
.page--city .cwin__win--tower { --ox: 68%; --oy: 30%; }
.page--city .cwin__win--tower video { transform-origin: 70% 34%; }
@media (max-width: 899px) {
  .page--city .cwin__win--nb { --ox: 72%; --oy: 34%; }
  .page--city .cwin__win--tower { --ox: 66%; --oy: 26%; }
  /* phones keep two facts (the rest are on the desktop credits) */
  .page--city .cstats > div.cstats__more { display: none; }
  /* the film band (city.js --vis): the collage sticks under the header and gives way to the words as they come up, down
     to a band of the lead film that keeps playing while the facts and the neighborhoods scroll under it */
  .page--city .cwin.is-flow.is-static .cwin__stage .cwin__films { position: sticky; top: var(--header-h); z-index: 4; background: var(--paper); clip-path: inset(0 0 max(0px, calc(100% - var(--vis, 100%))) 0); }
  .page--city .cwin.is-flow.is-static .cwin__stage .cwin__films .cwin__win--c.is-lead { height: min(62%, var(--vis, 62%)); }
  .page--city .cwin.is-flow.is-static .cwin__stage :is(.cwin__copy, .cwin__credits) { z-index: 2; }
}
/* the build stage runs to the page edge on desktop, so the round field is never cut by a fade at the gutter */
@media (min-width: 900px) { .page--city .sig--build:not(.is-static) .sig__stage { margin-right: calc(-1 * max(var(--gutter), 3vw)); } }
/* me at the finished house (the build's last caption) and on the Coleman card */
.page--city .sig__cap--me .sig__me { align-items: flex-start; }
.page--city .sig__cap--me .sig__me > img { width: 56px; height: 56px; border-radius: 50%; }
.page--city .sig__cap--me .sig__me > span { max-width: 34ch; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.page--city .sig__cap--me .sig__me .link-caps { display: flex; width: fit-content; margin: 0; color: var(--ink); }
.page--city .proof-card--story .proof-card__status:has(.proof-card__me) { flex-wrap: nowrap; }
.page--city .proof-card--story img.proof-card__me { width: 40px; height: 40px; box-shadow: 0 0 0 1px rgba(241, 240, 237, .3), 0 0 0 4px color-mix(in srgb, var(--blue-fill) 26%, transparent); }
.page--city .proof-card--story .proof-card__status > span { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
/* the spotlight portrait is a candid, warmer photo (the arched door headshot is the ending's) */
.page--city .spot__me { border-radius: 22px; }
.page--city .spot__me img { object-position: 42% 30%; }
.page--city .spot__me.is-armed { clip-path: inset(100% 0 0 0 round 22px); }
.page--city .spot__me.is-armed.is-in { clip-path: inset(0 0 0 0 round 22px); }
/* phones: the ink moments stay about a screen each (contrast rhythm: 20-35% dark), so the proof and the Texas facts sit a
   little tighter and the candid portrait is a size smaller */
@media (max-width: 899px) {
  .page--city .cityfacts > .container { padding-block: 48px 52px; }
  .page--city .cproof > .container { padding-block: 44px 52px; }
  .page--city .spot__me { width: min(58vw, 260px); }
  .page--city .know { gap: 20px; }
}