/* css/pages/new-construction.css : the new construction guide (new-construction.html, outside the model markers). Owned by
   the page agent (audit/newbuild-brief.md section 3). Linked after site.css and city.css (the shared city blocks: the ink
   bands, the line rises, the lit words, the rising cards, the proof spotlight, the fine print and the text-me ending) and
   before newbuild-scene.css (the scene agent's build model). Everything here is scoped to .page--city and to this page's own
   blocks: .nch hero, .ncw who works for whom, .ncs the number on the sign (ink), .ncc their contract, .ncp when problems
   come up (ink), .nct taxes and notices, .ncb where it's being built, .ncproof the proof (ink).
   White page, neutral greys, his blue as the accent only; no beige, gold or brass. Static first: every figure, row and
   highlight shows its end state without JS, at T0 (reduced motion, Pause motion) and in the fail-safe;
   js/pages/new-construction.js only arms them (.is-armed) and writes the scroll variables (--push, --seam, --g). */

/* ------------------------------------------------------------------ 0. white page: neutral tints on ink (city.css uses
   bone ones; the same overrides the other white city pages carry) */
.page--city .ink-band .btn--ghost { border-color: rgba(255, 255, 255, .5); }
.page--city .spot__light { background: radial-gradient(closest-side, rgba(255, 255, 255, .08), rgba(170, 186, 240, .045) 55%, transparent); }
.page--city .spot__me { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 60px 110px -60px rgba(0, 0, 0, .95); }
.page--city .spot__stat { border-top-color: rgba(255, 255, 255, .24); }

/* a small round portrait beside a line in my voice (him on screen every few scrolls) */
.page--city :is(.ncc__me, .ncs__quote figcaption) img,
.page--city .ncw__rows .is-me img, .page--city .ncw__firstme, .page--city .nch__me {
  flex: none; border-radius: 50%; object-fit: cover; background: var(--paper-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent);
}

/* ====================================================================================================================
   1. HERO (white): the copy beside the build model's hero still in a tall frame; the first scroll pushes the still in
   (--push, 0 to 1 as the hero leaves) and lifts the copy a little; me and the five places I come in run under both, each
   chip a text. Phones: the copy, the still, then the chips, in the flow.
   ==================================================================================================================== */
.page--city .nch { --push: 0; position: relative; display: grid; align-content: end; min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + clamp(16px, 3.4vh, 40px)) max(var(--gutter), 3vw) clamp(24px, 4.4vh, 48px); background: var(--paper); }
.page--city .nch__grid { display: grid; gap: clamp(24px, 3vw, 56px); align-items: end; }
@media (min-width: 900px) { .page--city .nch__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.page--city .nch__copy { display: grid; gap: clamp(16px, 2.4vh, 26px); align-content: end; justify-items: start; padding-bottom: clamp(2px, .8vh, 10px); transform: translate3d(0, calc(var(--push) * -40px), 0); }
.page--city .nch__copy h1 { font-weight: 300; font-size: clamp(3rem, 5.6vw, 6.25rem); line-height: .9; letter-spacing: -.05em; color: var(--ink); text-wrap: balance; }
.page--city .nch__copy h1 .kicker { display: block; margin-bottom: clamp(12px, 1.6vw, 20px); font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); }
.page--city .nch__copy h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; padding-right: .04em; }
.page--city .nch__lede { max-width: 34ch; font-size: clamp(1.0625rem, 1.35vw, 1.3rem); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.page--city .nch__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.page--city .nch__ctas .btn { min-height: 52px; padding: 0 24px; }
.page--city .nch__ctas .btn--primary { gap: 10px; }
/* the frame: the still fills it, on the studio grey the 3D lives on, so a slow load never shows a white hole */
.page--city .nch__visual {
  position: relative; margin: 0; overflow: hidden; isolation: isolate;
  height: min(64svh, calc(100svh - var(--header-h) - 230px)); min-height: 340px;
  border-radius: calc(26px - var(--push) * 10px); background: var(--stage-paper);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), 0 50px 100px -56px rgba(21, 19, 17, .5);
}
.page--city .nch__push { position: absolute; inset: 0; transform: scale(calc(1.1 + var(--push) * .12)) translate3d(0, calc(var(--push) * -2.5%), 0); transform-origin: 45% 64%; } /* starts a touch in: the still has open sky above the house */
.page--city .nch:not(.is-static) .nch__push { will-change: transform; }
.page--city .nch__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--nch-x, 45%) var(--nch-y, 56%); } /* the house sits left of center in the still */
/* the still settles in once on arrival (a slow camera ease, never a bounce); reduced motion and Pause skip it */
@media (prefers-reduced-motion: no-preference) { .page--city .nch__img { animation: nch-settle 1.9s var(--ease-out) both; } }
:root[data-motion="paused"] .page--city .nch__img { animation: none; }
@keyframes nch-settle { from { transform: scale(1.07); opacity: .2; } to { transform: none; opacity: 1; } }
/* a whisper of cool grade over the still (multiply #F6F8FD, about 3% down): the render's sunlit walls, drive and plinth rim
   are warm greys that tools/qa/beige_scan.py reads as bone on the white page (3.1% of the still, 0.8% of the first screen;
   with the grade 0.2% of the still). The model below keeps its own look. */
.page--city .nch__visual::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #F6F8FD; mix-blend-mode: multiply; }
.page--city .nch__visual.is-noimg::after { display: none; }
/* no still (it failed to load): the drawn plate, never a broken image */
.page--city .nch__visual.is-noimg .nch__push { display: none; }
.page--city .nch__plate { position: absolute; inset: 0; width: 100%; height: 100%; display: none; color: var(--ink-2); }
.page--city .nch__visual.is-noimg .nch__plate { display: block; }
.page--city .nch__plate .lot { fill: none; stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 1.2; stroke-dasharray: 6 7; }
.page--city .nch__plate .road { fill: none; stroke: color-mix(in srgb, var(--ink) 16%, transparent); stroke-width: 10; }
.page--city .nch__plate .str { fill: color-mix(in srgb, var(--blue-fill) 5%, transparent); stroke: var(--blue-fill); stroke-width: 1.6; }
.page--city .nch__plate .bat { fill: none; stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 2; }
.page--city .nch__plate .stk rect { fill: var(--ink); }
.page--city .nch__plate text { fill: currentColor; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .22em; }
.page--city .nch__plate .note { fill: var(--muted); font-size: 11px; }
/* me and the five places I come in: a hairline sequence of chips (each starts a text) */
.page--city .nch__phases { display: grid; gap: 14px 40px; margin-top: clamp(20px, 3.4vh, 38px); padding-top: 18px; border-top: 1px solid var(--ink); transform: translate3d(0, calc(var(--push) * -18px), 0); }
@media (min-width: 900px) { .page--city .nch__phases { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; } }
.page--city .nch__phases-top { display: flex; gap: 14px; align-items: center; }
.page--city .nch__me { width: 52px; height: 52px; }
.page--city .nch__phases-h { font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2.125rem); line-height: 1.05; letter-spacing: -.035em; color: var(--ink); }
.page--city .nch__phases-h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.01em; }
.page--city .nch__chips { gap: 8px 0; align-items: center; }
.page--city .nch__chips li { display: flex; align-items: center; }
.page--city .nch__chips li + li::before { content: ""; flex: none; width: clamp(10px, 1.4vw, 22px); height: 1px; background: color-mix(in srgb, var(--ink) 35%, transparent); }
.page--city .nch .community { min-height: 42px; padding: 0 16px; font-size: .9375rem; }
.page--city .nch.is-static { --push: 0; }
@media (max-width: 899px) {
  .page--city .nch { min-height: 0; padding-top: calc(var(--header-h) + 14px); }
  .page--city .nch__copy h1 { font-size: clamp(2.6rem, 12.4vw, 4.25rem); }
  .page--city .nch__copy h1 .kicker { letter-spacing: .2em; font-size: 11px; }
  .page--city .nch__lede { font-size: 1.0625rem; }
  .page--city .nch__ctas { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .page--city .nch__ctas .btn { width: 100%; }
  .page--city .nch__visual { height: auto; min-height: 0; aspect-ratio: 4 / 3; border-radius: calc(20px - var(--push) * 8px); }
  .page--city .nch__chips { gap: 8px; }
  .page--city .nch__chips li + li::before { display: none; }
  .page--city .nch .community { padding: 0 13px; font-size: .875rem; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .page--city .nch__copy h1 { font-size: clamp(2.75rem, 4.9vw, 4.75rem); }
  .page--city .nch__visual { min-height: 300px; }
}

/* ====================================================================================================================
   2. WHO WORKS FOR WHOM (white): two sides of the table. The builder's side on the left, in its quieter grey; mine on the
   right, under a blue rule (his blue = where I come in). Rows slide in from their own side (city.js data-rise-card; the
   direction is set here), the seam between the sides draws (--seam). Then the first-visit rules on a grey card with me.
   ==================================================================================================================== */
.page--city .ncw > .container { display: grid; gap: clamp(28px, 4vw, 52px); padding-block: clamp(56px, 8vw, 112px) clamp(56px, 7vw, 104px); }
.page--city .ncw__head { display: grid; gap: 14px; }
.page--city .ncw .cine-h2 { font-size: clamp(2.75rem, 5.8vw, 5.75rem); }
.page--city .ncw__table { --seam: 1; position: relative; display: grid; gap: 44px; }
@media (min-width: 900px) { .page--city .ncw__table { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 96px); } }
.page--city .ncw__col { display: grid; gap: 20px; align-content: start; min-width: 0; }
.page--city .ncw__colh { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); }
.page--city .ncw__colh .dot-blue { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-fill); box-shadow: 0 0 10px color-mix(in srgb, var(--blue-fill) 60%, transparent); }
.page--city .ncw__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.page--city .ncw__col--you .ncw__rows { border-top: 2px solid var(--blue-fill); }
.page--city .ncw__rows li { display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 300; font-size: clamp(1.375rem, 2.1vw, 2rem); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
.page--city .ncw__col--them .ncw__rows li { color: var(--ink-2); }
.page--city .ncw__rows .is-me img { width: 40px; height: 40px; }
.page--city .ncw__rows .is-me em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.01em; }
/* rows slide in from their own side (the base rise lives in city.css; these win on specificity, then let go at .is-in) */
.page--city .ncw__col--them [data-rise-card].is-armed { transform: translate3d(-26px, 0, 0); }
.page--city .ncw__col--you [data-rise-card].is-armed { transform: translate3d(26px, 0, 0); }
.page--city .ncw__col [data-rise-card].is-armed.is-in { transform: none; }
html.is-failsafe .page--city .ncw__col [data-rise-card].is-armed { transform: none; }
/* the seam between the two sides */
.page--city .ncw__seam { display: none; }
@media (min-width: 900px) {
  .page--city .ncw__seam { display: block; align-self: stretch; width: 1px; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ink) 30%, transparent) 12%, color-mix(in srgb, var(--ink) 30%, transparent) 88%, transparent); transform-origin: 50% 0; transform: scaleY(var(--seam)); }
}
.page--city .ncw__quote { margin: 4px 0 0; display: grid; gap: 10px; }
.page--city .ncw__quote p { max-width: 30ch; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.page--city .ncw__quote figcaption { font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.page--city .ncw__law { margin-top: 4px; max-width: 44ch; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
/* what I do on a new build (Ashton, 2026-10-05: "more bullish on why having a realtor will help"): seven short promises
   under a blue rule, two columns on desktop, each one rising in turn (city.js data-rise-card) */
.page--city .ncw__why { display: grid; gap: clamp(18px, 2.4vw, 28px); padding-top: clamp(26px, 3.6vw, 44px); border-top: 2px solid var(--blue-fill); }
.page--city .ncw__why-h { font-weight: 300; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.page--city .ncw__why-h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.01em; }
.page--city .ncw__whylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(32px, 5vw, 96px); }
@media (min-width: 900px) { .page--city .ncw__whylist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page--city .ncw__whylist li { position: relative; padding: 16px 0 16px 22px; border-bottom: 1px solid var(--line); font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.page--city .ncw__whylist li::before { content: ""; position: absolute; left: 2px; top: calc(16px + .62em); width: 8px; height: 8px; border-radius: 50%; background: var(--blue-fill); }
.page--city .ncw__whylist strong { display: block; margin-bottom: 2px; font-weight: 600; font-size: clamp(1.1875rem, 1.5vw, 1.4375rem); line-height: 1.25; letter-spacing: -.015em; color: var(--ink); }
/* the first-visit rules: a grey card with me and the ask */
.page--city .ncw__first { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; align-items: center; padding: clamp(20px, 2.6vw, 30px); background: var(--paper-2); border-radius: 20px; }
.page--city .ncw__firstme { width: 64px; height: 64px; }
.page--city .ncw__first p { max-width: 56ch; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.page--city .ncw__first p strong { font-weight: 600; color: var(--ink); }
.page--city .ncw__first .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 900px) {
  .page--city .ncw__first { grid-template-columns: auto minmax(0, 1fr) auto; }
  .page--city .ncw__first .btn { grid-column: auto; }
}
.page--city .ncw__deeper p + p { margin-top: 12px; }
@media (max-width: 899px) {
  .page--city .ncw__rows li { min-height: 56px; font-size: clamp(1.25rem, 6vw, 1.625rem); }
  .page--city .ncw__col--them [data-rise-card].is-armed { transform: translate3d(-12px, 0, 0); }
  .page--city .ncw__col--you [data-rise-card].is-armed { transform: translate3d(12px, 0, 0); }
  .page--city .ncw__col [data-rise-card].is-armed.is-in { transform: none; }
  .page--city .ncw__first .btn { width: 100%; justify-self: stretch; }
}

/* ====================================================================================================================
   4. THE NUMBER ON THE SIGN (INK): the heading, then my words in Bodoni lighting up word by word (city.js initLit) beside
   the two national figures, which count while a blue bar along each rule grows to its share (--g); then the two places
   an incentive ties you, side by side. One ink moment, about a screen and a half.
   ==================================================================================================================== */
.page--city .ncs__inner { display: grid; gap: clamp(28px, 4.6vh, 56px); padding-block: clamp(80px, 11vh, 136px) clamp(64px, 9vh, 112px); }
.page--city .ncs__head { display: grid; gap: 14px; }
.page--city .ncs .cine-h2 { font-size: clamp(2.75rem, 6vw, 6rem); }
.page--city .ncs__grid { display: grid; gap: clamp(32px, 4vw, 80px); align-items: end; }
@media (min-width: 900px) { .page--city .ncs__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.page--city .ncs__quote { margin: 0; display: grid; gap: 20px; }
.page--city .ncs__quote p { max-width: 27ch; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 3.1vw, 3rem); line-height: 1.14; letter-spacing: -.012em; color: var(--ink); text-wrap: pretty; }
.page--city .ncs__quote p em { color: var(--blue-text); }
.page--city .ncs__quote figcaption { display: flex; align-items: center; gap: 14px; }
.page--city .ncs__quote figcaption::after { content: ""; width: 44px; height: 1px; background: var(--blue-text); }
.page--city .ncs__quote figcaption img { width: 52px; height: 52px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.page--city .ncs__figs { display: grid; margin: 0; }
.page--city .ncs__fig { --g: 1; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 6px 20px; padding: 14px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.page--city .ncs__fig:first-child { border-top: 1px solid rgba(255, 255, 255, .22); }
.page--city .ncs__fig dd { grid-column: 1; grid-row: 1; margin: 0; font-weight: 300; font-size: clamp(3.25rem, 6vw, 5.75rem); line-height: .9; letter-spacing: -.06em; font-variant-numeric: tabular-nums; color: var(--ink); }
.page--city .ncs__fig dt { grid-column: 2; grid-row: 1; max-width: 18ch; padding-bottom: 6px; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.page--city .ncs__fig i { position: absolute; left: 0; bottom: -1px; height: 3px; width: calc(var(--v, 1) * var(--g, 1) * 100%); border-radius: 2px; background: var(--blue-text); box-shadow: 0 0 14px rgba(96, 128, 255, .45); }
.page--city .ncs__src { padding-top: 10px; }
.page--city .ncs__src dd { margin: 0; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.page--city .ncs__ties { display: grid; margin: 0; gap: 0 clamp(24px, 4vw, 72px); }
@media (min-width: 900px) { .page--city .ncs__ties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page--city .ncs__tie { display: grid; gap: 8px; align-content: start; padding: 18px 0 6px; border-top: 1px solid rgba(255, 255, 255, .22); }
.page--city .ncs__tie dt { font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .24em; text-transform: uppercase; color: var(--blue-text); }
.page--city .ncs__tie dd { margin: 0; max-width: 44ch; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.page--city .ncs .deeper, .page--city .ncs .fineprint { max-width: 72ch; }
.page--city .ncs__deeper p + p { margin-top: 12px; }
@media (max-width: 899px) {
  .page--city .ncs__quote p { font-size: clamp(1.625rem, 7.4vw, 2.25rem); }
  .page--city .ncs__fig dd { font-size: clamp(3rem, 15vw, 4.25rem); }
  .page--city .ncs__fig dt { font-size: 11px; letter-spacing: .12em; }
}

/* ====================================================================================================================
   5. THEIR CONTRACT, NOT THE STATE'S (white): a contract page beside the four things to read for. Desktop keeps the page in
   view (sticky) while the notes pass; the note nearest the middle of the screen is lit (.is-on) and so is its clause,
   swept by a blue highlighter; clauses already read stay softly marked (.is-done). Phones light the clauses in turn as the
   page crosses the screen. Static: every clause marked, every note at full strength.
   ==================================================================================================================== */
.page--city .ncc > .container { padding-block: clamp(80px, 11vw, 150px) clamp(64px, 9vw, 120px); }
.page--city .ncc__grid { display: grid; gap: clamp(36px, 5vw, 104px); }
@media (min-width: 1000px) {
  .page--city .ncc__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .page--city .ncc__sheetwrap { position: sticky; top: calc(var(--header-h) + clamp(28px, 7vh, 72px)); }
}
.page--city .ncc__sheet {
  position: relative; margin: 0; width: 100%; aspect-ratio: 8.5 / 11;
  display: flex; flex-direction: column; gap: 3.1%; padding: 9% 10% 8%;
  background: var(--paper); border-radius: 8px; transform: rotate(-1.4deg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent), 0 2px 0 color-mix(in srgb, var(--ink) 4%, transparent), 0 60px 100px -56px rgba(21, 19, 17, .5);
}
/* a second sheet under it, for depth (on the wrapper, so it sits behind the page rather than over its paper) */
.page--city .ncc__stack { position: relative; width: min(100%, 440px); margin: 0 auto; }
.page--city .ncc__stack::before { content: ""; position: absolute; inset: 0; border-radius: 8px; background: var(--paper-2); transform: rotate(2.2deg) translate3d(12px, 10px, 0); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.page--city .ncc__doc { margin-bottom: 2%; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 1.9vw, 1.75rem); line-height: 1.1; color: var(--ink); }
.page--city .ncc__ln { display: block; flex: none; width: var(--w, 100%); height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 11%, transparent); }
.page--city .ncc__cl { position: relative; display: flex; flex-direction: column; gap: 7px; margin: 0 -3.5%; padding: 3% 3.5% 3.4%; border-radius: 6px; background: linear-gradient(color-mix(in srgb, var(--blue-fill) 16%, transparent), color-mix(in srgb, var(--blue-fill) 16%, transparent)) 0 0 / 100% 100% no-repeat; transition: background-size 1s var(--ease-out), background-color .6s var(--ease-out); }
.page--city .ncc__cl b { font-size: 10px; font-weight: 600; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.page--city .ncc__cl .ncc__ln { background: color-mix(in srgb, var(--ink) 16%, transparent); }
.page--city .ncc__cl::before { content: ""; position: absolute; left: -10px; top: 12%; bottom: 12%; width: 3px; border-radius: 2px; background: var(--blue-fill); transform: scaleY(1); transform-origin: 50% 0; transition: transform .7s var(--ease-out); }
.page--city .ncc__sign { display: flex; gap: 12%; margin-top: auto; }
.page--city .ncc__sign i { flex: 1; height: 1px; background: color-mix(in srgb, var(--ink) 40%, transparent); }
/* armed: clauses wait unmarked; the lit one sweeps full, the read ones keep a soft mark */
.page--city .ncc.is-armed .ncc__cl { background-size: 0% 100%; }
.page--city .ncc.is-armed .ncc__cl::before { transform: scaleY(0); }
.page--city .ncc.is-armed .ncc__cl.is-done { background-size: 100% 100%; background-image: linear-gradient(color-mix(in srgb, var(--blue-fill) 7%, transparent), color-mix(in srgb, var(--blue-fill) 7%, transparent)); }
.page--city .ncc.is-armed .ncc__cl.is-on { background-size: 100% 100%; }
.page--city .ncc.is-armed .ncc__cl.is-on::before { transform: scaleY(1); }
html.is-failsafe .page--city .ncc .ncc__cl { background-size: 100% 100% !important; }
.page--city .ncc__copy { display: grid; gap: clamp(22px, 3vw, 36px); align-content: start; min-width: 0; }
.page--city .ncc__head { display: grid; gap: 16px; }
.page--city .ncc .cine-h2 { font-size: clamp(2.6rem, 5.2vw, 5.25rem); }
.page--city .ncc__lede { max-width: 40ch; font-size: clamp(1.125rem, 1.45vw, 1.375rem); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.page--city .ncc__notes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.page--city .ncc__note { display: grid; gap: 6px; padding: clamp(18px, 2.4vw, 26px) 0 clamp(18px, 2.4vw, 26px) 18px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; transition: opacity .5s var(--ease-out), border-color .5s var(--ease-out); }
.page--city .ncc__note h3 { font-weight: 400; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -.025em; color: var(--ink); }
.page--city .ncc__note p { max-width: 46ch; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 1000px) {
  .page--city .ncc.is-armed .ncc__note { opacity: .5; }
  .page--city .ncc.is-armed .ncc__note.is-on { opacity: 1; border-left-color: var(--blue-fill); }
}
html.is-failsafe .page--city .ncc .ncc__note { opacity: 1 !important; }
.page--city .ncc__me { display: flex; align-items: center; gap: 12px; max-width: 46ch; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.45; color: var(--ink); }
.page--city .ncc__me img { width: 44px; height: 44px; }
.page--city .ncc .deeper p + p { margin-top: 12px; }
@media (max-width: 999px) {
  .page--city .ncc__sheetwrap { order: 2; }
  .page--city .ncc__copy { display: contents; }
  .page--city .ncc__head { order: 1; }
  .page--city .ncc__notes { order: 3; }
  .page--city .ncc__me { order: 4; }
  .page--city .ncc__copy > details { order: 5; }
  .page--city .ncc__stack { width: min(76%, 340px); }
}

/* ====================================================================================================================
   6. WHEN PROBLEMS COME UP (INK, city.css .ink-band): me in a new build that's still being finished, rising out of its
   mask (cinema.js data-mask), my line under it; beside it the common 1-2-10 warranty drawn to scale (ten years is the full
   track), the bars growing as the figure arrives (--g) and my 11-month walk landing in his blue just before the first
   year ends; then two things to know. On ink the bars are light, the walk is the light blue of the dark theme.
   ==================================================================================================================== */
.page--city .ncp > .container { padding-block: clamp(80px, 10vw, 136px) clamp(64px, 8vw, 112px); }
.page--city .ncp__grid { display: grid; gap: clamp(36px, 5vw, 104px); align-items: center; }
@media (min-width: 900px) { .page--city .ncp__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.page--city .ncp__photo { margin: 0; display: grid; gap: 18px; justify-items: start; }
.page--city .ncp__frame { width: min(100%, 400px); aspect-ratio: 540 / 840; overflow: hidden; border-radius: 22px; background: #1B1A18; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 60px 110px -60px rgba(0, 0, 0, .9); }
.page--city .ncp__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.page--city .ncp__me { max-width: 20ch; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.16; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.page--city .ncp__copy { display: grid; gap: clamp(24px, 3.4vw, 40px); align-content: center; min-width: 0; }
.page--city .ncp .cine-h2 { font-size: clamp(2.6rem, 5.2vw, 5.25rem); }
/* the warranty, to scale */
.page--city .ncp__years { --g: 1; margin: 0; display: grid; gap: 14px; }
.page--city .ncp__years figcaption { color: var(--ink-2); }
.page--city .ncp__bars { --lab: 8.5rem; --gap: 16px; position: relative; display: grid; gap: 12px; padding-bottom: 46px; }
.page--city .ncp__bar { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: center; gap: var(--gap); }
.page--city .ncp__lab { font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.page--city .ncp__track { position: relative; display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1px) 0 0 / 10% 100% repeat-x, color-mix(in srgb, var(--ink) 4%, transparent); }
.page--city .ncp__track i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--y) * var(--g) * 100%); min-width: 4px; border-radius: 7px; background: var(--ink); }
.page--city .ncp__track b { position: absolute; top: 50%; left: calc(var(--y) * var(--g) * 100% + 10px); transform: translateY(-50%); font-size: 13px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; color: var(--ink); }
.page--city .ncp__bar--full .ncp__track b { left: auto; right: 10px; color: var(--paper); opacity: clamp(0, calc((var(--g) - .55) * 4), 1); }
.page--city .ncp__walk { position: absolute; top: -6px; bottom: 0; left: calc(var(--lab) + var(--gap) + (100% - var(--lab) - var(--gap)) * var(--x)); width: 2px; margin-left: -1px; background: var(--blue-text); border-radius: 1px; opacity: clamp(0, calc((var(--g) - .8) * 6), 1); }
.page--city .ncp__walk b { position: absolute; left: -5px; bottom: 0; transform: translateY(100%); padding-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--blue-text); }
.page--city .ncp__walk::before { content: ""; position: absolute; left: 50%; top: -4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--blue-text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-text) 24%, transparent), 0 0 18px rgba(96, 128, 255, .5); }
.page--city .ncp__list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--ink); }
@media (min-width: 1100px) { .page--city .ncp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.page--city .ncp__list li { display: grid; gap: 6px; align-content: start; padding: 18px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 1100px) { .page--city .ncp__list li { border-bottom: 0; } }
.page--city .ncp__list h3 { font-weight: 400; font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.page--city .ncp__list p { max-width: 40ch; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.page--city .ncp .deeper p + p { margin-top: 12px; }
@media (max-width: 899px) {
  .page--city .ncp__photo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: 18px; }
  .page--city .ncp__frame { width: 100%; border-radius: 18px; }
  .page--city .ncp__me { font-size: clamp(1.25rem, 5.6vw, 1.625rem); }
  .page--city .ncp__bars { --lab: 6.6rem; --gap: 12px; }
  .page--city .ncp__lab { font-size: 10.5px; letter-spacing: .12em; }
}

/* ====================================================================================================================
   7. TAXES AND NOTICES (white, compact): three grey cards rise in turn (city.js data-rise-card), each drawing its figure
   (cinema.js data-draw); the area pages' tax lines one tap away.
   ==================================================================================================================== */
.page--city .nct > .container { display: grid; gap: clamp(24px, 3.4vw, 40px); padding-block: clamp(64px, 8vw, 112px) clamp(40px, 5vw, 72px); }
.page--city .nct__h { max-width: 18ch; font-weight: 300; font-size: clamp(2.25rem, 4.4vw, 4.25rem); line-height: .98; letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.page--city .nct__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; }
.page--city .nct__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .page--city .nct__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page--city .nct__card { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.6vw, 34px); background: var(--paper-2); border-radius: 20px; }
.page--city .nct__ico { width: 56px; height: 56px; margin-bottom: 6px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.page--city .nct__ico .is-part { stroke: var(--blue-fill); stroke-width: 2.4; }
.page--city .nct__card h3 { font-weight: 400; font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.12; letter-spacing: -.025em; color: var(--ink); }
.page--city .nct__card p { max-width: 36ch; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.page--city .nct__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.page--city .nct__links .caps { margin-right: 4px; }
.page--city .nct__deeper p + p { margin-top: 12px; }

/* ====================================================================================================================
   8. WHERE IT'S BEING BUILT (white): the heading and the regional numbers beside a bar chart drawn to scale (Celina's
   count is the full track); the bars grow as the chart arrives (--g) while the numbers count; each row opens that area.
   ==================================================================================================================== */
.page--city .ncb > .container { padding-block: clamp(32px, 4vw, 64px) clamp(64px, 8vw, 112px); }
.page--city .ncb__grid { display: grid; gap: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 112px); align-items: end; }
@media (min-width: 1000px) { .page--city .ncb__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } .page--city .ncb__src { grid-column: 1 / -1; } }
.page--city .ncb__head { display: grid; gap: 18px; align-content: end; }
.page--city .ncb .cine-h2 { font-size: clamp(2.6rem, 5.4vw, 5.5rem); }
.page--city .ncb__lede { max-width: 34ch; font-size: clamp(1.125rem, 1.45vw, 1.375rem); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.page--city .ncb__chart { --g: 1; margin: 0; display: grid; gap: 14px; min-width: 0; }
.page--city .ncb__chart figcaption { color: var(--ink-2); }
.page--city .ncb__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.page--city .ncb__row a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 4.5rem; align-items: center; gap: 16px; min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color var(--dur-2); }
.page--city .ncb__name { font-weight: 400; font-size: clamp(1.125rem, 1.5vw, 1.375rem); letter-spacing: -.02em; }
.page--city .ncb__track { position: relative; display: block; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.page--city .ncb__track i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * var(--g) * 100%); min-width: 4px; border-radius: 5px; background: var(--ink); transition: background-color var(--dur-2); }
.page--city .ncb__row b { justify-self: end; font-weight: 300; font-size: clamp(1.375rem, 2vw, 1.875rem); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.page--city .ncb__row a:hover .ncb__track i, .page--city .ncb__row a:focus-visible .ncb__track i { background: var(--blue-fill); }
.page--city .ncb__row a:hover .ncb__name, .page--city .ncb__row a:focus-visible .ncb__name { color: var(--blue-text); }
.page--city .ncb__note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; font-size: 13px; color: var(--muted); }
/* Prosper, on its own line under the Census bars (the Town's count is a different source, so it isn't drawn as a bar) */
.page--city .ncb__aside { font-size: 14px; color: var(--ink-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent); text-underline-offset: 3px; transition: color var(--dur-2), text-decoration-color var(--dur-2); }
.page--city .ncb__aside:hover, .page--city .ncb__aside:focus-visible { color: var(--blue-text); text-decoration-color: currentColor; }
@media (max-width: 599px) {
  .page--city .ncb__row a { grid-template-columns: 5.6rem minmax(0, 1fr) 3.6rem; gap: 10px; min-height: 54px; }
  .page--city .ncb__name { font-size: 1.0625rem; }
  .page--city .ncb__row b { font-size: 1.375rem; }
}

/* ====================================================================================================================
   9. PROOF (INK): city.css .cproof / .spot; the studio headshot is square, so it sits a touch higher in the arch.
   ==================================================================================================================== */
.page--city .ncproof .spot__me img { object-position: 46% 18%; }
/* the headshot sits in a <picture>: without a height the square image stopped short of the 4:5 frame and left an empty
   band under it (city.css sizes the img to 100% of its parent) */
.page--city .ncproof .spot__me picture { display: block; height: 100%; }

/* ------------------------------------------------------------------ dark theme: the white sections follow the tokens; the
   pieces drawn with fixed light tints get their night versions */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page--city .ncc__sheet { background: var(--paper-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 100px -56px rgba(0, 0, 0, .9); }
  :root:not([data-theme="light"]) .page--city .ncc__stack::before { background: #232220; }
  :root:not([data-theme="light"]) .page--city .nch__visual { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 100px -56px rgba(0, 0, 0, .9); }
}
:root[data-theme="dark"] .page--city .ncc__sheet { background: var(--paper-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 100px -56px rgba(0, 0, 0, .9); }
:root[data-theme="dark"] .page--city .ncc__stack::before { background: #232220; }
:root[data-theme="dark"] .page--city .nch__visual { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 100px -56px rgba(0, 0, 0, .9); }