/* css/pages/prosper-celina.css: Prosper & Celina page (prosper-celina.html, outside the model markers). Owned by the page agent (audit/city-pages-brief.md section 1).
   Loaded after css/pages/city.css (the shared city blocks: growth figures, the tax line, three things, proof, search, the
   ending) and before prosper-celina-model.css (the model agent's). Everything here is scoped to .page--city and to this
   page's own blocks (.pch hero, .pcg growth chart, .twin two towns, .pck three figures, .pcb builder visit, .pcs search,
   .pcp proof). White page, neutral greys, his blue as the accent only; the ink bands come from city.css .ink-band.
   Static first: every figure, row and line shows its end state without JS, at T0 (reduced motion, Pause motion) and in the
   fail-safe; js/pages/prosper-celina.js only arms them (.is-armed) and writes the scroll variables (--push, --gd, --r, --g). */

/* ------------------------------------------------------------------ 0. white page: neutral tints (city.css uses bone ones;
   the same overrides melissa.css carries for its white page, for the blocks this page shows) */
.page--city .ink-band .btn--ghost { border-color: rgba(255, 255, 255, .5); }
.page--city .ink-band .growth__figs > div { border-top-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); }
.page--city .know__item { border-top-color: rgba(255, 255, 255, .24); }

/* ------------------------------------------------------------------ 1. the hero (white): the copy beside the 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;
   the neighborhoods sit under both, grouped by town. Phones: the copy, the still, then the chips, in the flow. */
.page--city .pch { --push: 0; position: relative; padding: calc(var(--header-h) + clamp(14px, 3vh, 32px)) max(var(--gutter), 3vw) clamp(28px, 5vh, 56px); background: var(--paper); }
.page--city .pch__grid { display: grid; gap: clamp(24px, 3vw, 56px); align-items: end; }
@media (min-width: 900px) { .page--city .pch__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.page--city .pch__copy { display: grid; gap: clamp(16px, 2.2vh, 24px); align-content: end; justify-items: start; padding-bottom: clamp(2px, .8vh, 10px); transform: translate3d(0, calc(var(--push) * -40px), 0); }
.page--city .pch__copy h1 { font-weight: 300; font-size: clamp(3rem, 6.1vw, 6.75rem); line-height: .9; letter-spacing: -.05em; color: var(--ink); text-wrap: balance; }
.page--city .pch__copy h1 .kicker { display: block; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); margin-bottom: clamp(12px, 1.6vw, 20px); }
.page--city .pch__copy h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; }
.page--city .pch__lede { max-width: 34ch; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.page--city .pch__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.page--city .pch__ctas .btn--primary { min-height: 50px; padding: 0 22px; }
/* the frame: the still fills it (object-fit), on the studio grey the 3D lives on, so a slow load never shows a white hole */
.page--city .pch__visual {
  position: relative; margin: 0; overflow: hidden; isolation: isolate;
  height: min(60svh, calc(100svh - var(--header-h) - 300px)); min-height: 330px;
  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, .55);
}
.page--city .pch__push { position: absolute; inset: 0; transform: scale(calc(1.02 + var(--push) * .12)) translate3d(0, calc(var(--push) * -2.5%), 0); transform-origin: 50% 42%; }
.page--city .pch:not(.is-static) .pch__push { will-change: transform; }
.page--city .pch__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 36% 55%; } /* the still's Tollway runs up its left third: keep it in */
/* 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 .pch__img { animation: pch-settle 1.9s var(--ease-out) both; }
}
@keyframes pch-settle { from { transform: scale(1.07); opacity: .2; } to { transform: none; opacity: 1; } }
/* no still (it failed to load): the frame shows the studio grey with a fine engraved route, never a broken image */
.page--city .pch__visual.is-noimg .pch__img { display: none; }
.page--city .pch__plate { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ink-2); display: none; }
.page--city .pch__visual.is-noimg .pch__plate { display: block; }
.page--city .pch__plate .rd { fill: none; stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 1.4; }
.page--city .pch__plate .rd--x { stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-width: 1; }
.page--city .pch__plate .dnt { fill: none; stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 2.4; }
.page--city .pch__plate .dnt--new { stroke: var(--blue-fill); stroke-dasharray: 10 8; }
.page--city .pch__plate text { fill: currentColor; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .18em; }
.page--city .pch__plate .town { font-size: 30px; font-weight: 300; letter-spacing: .32em; fill: var(--ink); }
.page--city .pch__plate .note { font-size: 10px; letter-spacing: .2em; fill: var(--muted); }
/* the neighborhoods: me and the line on the left, each town's chips on its own row (each chip starts a text); a place
   outside the town limits wears a dashed edge and its status, set small */
.page--city .pch__streets { display: grid; gap: 14px 40px; margin-top: clamp(22px, 3.6vh, 40px); padding-top: 18px; border-top: 1px solid var(--ink); transform: translate3d(0, calc(var(--push) * -18px), 0); }
@media (min-width: 900px) { .page--city .pch__streets { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; } }
.page--city .pch__streets-top { display: flex; gap: 14px; align-items: center; }
.page--city .pch__streets-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 .pch__streets-h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.01em; }
.page--city .pch__groups { display: grid; gap: 10px; min-width: 0; }
.page--city .pch__group { display: grid; gap: 8px; align-items: center; min-width: 0; }
@media (min-width: 900px) { .page--city .pch__group { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 14px; } }
.page--city .pch__town { font-size: 11px; letter-spacing: .24em; color: var(--ink-2); }
.page--city .pch__src { margin-top: 2px; font-size: 12px; }
@media (min-width: 900px) { .page--city .pch__src { padding-left: calc(6.5rem + 14px); } }
.page--city .pch .community-chips { gap: 6px; }
.page--city .pch .community { min-height: 42px; padding: 0 16px; font-size: .9375rem; }
.page--city .community--out { border-style: dashed; }
.page--city .community small { margin-left: 8px; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); transition: color var(--dur-2); }
.page--city .community:hover small, .page--city .community:focus-visible small { color: inherit; }
/* static (T0, Pause, no JS): no push, no lift */
.page--city .pch.is-static { --push: 0; }
@media (max-width: 899px) {
  .page--city .pch { padding-top: calc(var(--header-h) + 14px); }
  .page--city .pch__copy h1 { font-size: clamp(2.75rem, 13.4vw, 4.25rem); }
  .page--city .pch__copy h1 .kicker { letter-spacing: .2em; font-size: 11px; }
  .page--city .pch__lede { font-size: 1rem; }
  .page--city .pch__ctas { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .page--city .pch__ctas .btn { width: 100%; }
  .page--city .pch__visual { height: auto; min-height: 0; aspect-ratio: 5 / 4; border-radius: calc(20px - var(--push) * 8px); }
}
@media (min-width: 900px) and (max-height: 760px) {
  .page--city .pch__copy h1 { font-size: clamp(2.75rem, 5.2vw, 5rem); }
  .page--city .pch__visual { min-height: 300px; }
}

/* ------------------------------------------------------------------ 2. the fastest-growing city (ink): the head across, then
   the Census lines (drawn to scale; --gd draws them with the scroll, the end labels and the 2023 crossing arrive after the
   lines reach them) beside the three figures. Phones: a narrower chart of its own (so the type never squashes). */
.page--city .pcg__inner { position: relative; display: grid; gap: clamp(22px, 3.6vh, 40px); padding-block: clamp(72px, 10vh, 120px) clamp(64px, 9vh, 104px); }
.page--city .pcg__head { display: grid; gap: 14px; max-width: 60rem; }
.page--city .pcg__head .cine-h2 { font-size: clamp(2.75rem, 5.6vw, 5.75rem); }
.page--city .pcg__body { display: grid; gap: clamp(24px, 4vw, 64px); align-items: end; }
@media (min-width: 900px) { .page--city .pcg__body { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.page--city .pcg__chart { margin: 0; min-width: 0; }
.page--city .pcg__svg { display: block; width: 100%; height: auto; overflow: visible; }
.page--city .pcg__svg--narrow { display: none; }
@media (max-width: 699px) { .page--city .pcg__svg--wide { display: none; } .page--city .pcg__svg--narrow { display: block; } }
.page--city .pcg__grid path { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
.page--city .pcg__ylab text, .page--city .pcg__xlab text { fill: rgba(255, 255, 255, .52); font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.page--city .pcg__svg--narrow .pcg__ylab text, .page--city .pcg__svg--narrow .pcg__xlab text { font-size: 10px; }
.page--city .pcg__line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.page--city .pcg__line--cel { stroke: #8EA4FF; stroke-width: 4; filter: drop-shadow(0 0 10px rgba(96, 128, 255, .45)); }
.page--city .pcg__line--pro { stroke: rgba(255, 255, 255, .74); stroke-width: 2.4; }
.page--city .pcg__svg--narrow .pcg__line--cel { stroke-width: 3; }
.page--city .pcg__svg--narrow .pcg__line--pro { stroke-width: 2; }
.page--city .pcg__pass path { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 1; stroke-dasharray: 2 4; }
.page--city .pcg__pass circle { fill: #121110; stroke: #8EA4FF; stroke-width: 2; }
.page--city .pcg__pass text { fill: rgba(255, 255, 255, .78); font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.page--city .pcg__end circle { fill: #8EA4FF; }
.page--city .pcg__end--pro circle { fill: #F1F0ED; }
.page--city .pcg__end text { fill: #F1F0ED; font-family: var(--sans); font-size: 30px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.page--city .pcg__svg--narrow .pcg__end text { font-size: 17px; }
.page--city .pcg__name { fill: #CAC9C5; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.page--city .pcg__svg--narrow .pcg__name { font-size: 9px; }
.page--city .pcg.is-armed .pcg__line { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--gd, 1)); }
.page--city .pcg.is-armed .pcg__pass { opacity: clamp(0, calc((var(--gd, 1) - .58) * 7), 1); }
.page--city .pcg.is-armed .pcg__end { opacity: clamp(0, calc((var(--gd, 1) - .88) * 9), 1); }
html.is-failsafe .page--city .pcg .pcg__line { stroke-dashoffset: 0 !important; }
html.is-failsafe .page--city .pcg :is(.pcg__pass, .pcg__end) { opacity: 1 !important; }
/* the figures beside the chart, stacked (city.css .growth__figs gives them their rules and type) */
.page--city .pcg__figs { gap: 0; }
@media (min-width: 900px) { .page--city .pcg__figs { grid-template-columns: minmax(0, 1fr); } }
.page--city .pcg__figs > div { gap: 6px; padding: 14px 0 16px; }
.page--city .pcg__figs dd { font-size: clamp(2.75rem, 4.6vw, 4.5rem); }
.page--city .pcg__figs dt { letter-spacing: .16em; }
@media (max-width: 899px) {
  .page--city .pcg__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .page--city .pcg__figs > div:first-child { grid-column: 1 / -1; }
  .page--city .pcg__figs dd { font-size: clamp(2.5rem, 12vw, 3.5rem); }
  .page--city .pcg__figs dt { font-size: 11px; letter-spacing: .12em; }
}

/* ------------------------------------------------------------------ 4. two towns, side by side (white): a label column and
   the two towns; the column heads stay under the header while the rows pass; each row rises as it arrives and its
   hairline draws (--r per row). Phones: the label spans both columns above its two values. */
.page--city .twin { background: var(--paper); }
.page--city .twin > .twin__wrap { display: grid; gap: clamp(22px, 3.4vh, 40px); padding-block: clamp(72px, 10vw, 136px) clamp(48px, 7vw, 96px); }
.page--city .twin__head .cine-h2 { font-size: clamp(2.75rem, 5.6vw, 5.5rem); }
.page--city .twin__table { display: grid; }
.page--city .twin__cols, .page--city .twin__row { display: grid; grid-template-columns: minmax(10rem, 2.6fr) minmax(0, 4fr) minmax(0, 4fr); column-gap: clamp(18px, 3vw, 48px); }
.page--city .twin__cols { position: sticky; top: var(--header-h); z-index: 2; align-items: end; padding: 14px 0 12px; background: var(--paper); border-bottom: 1px solid var(--ink); }
.page--city .twin__cols p { display: grid; gap: 4px; margin: 0; }
.page--city .twin__cols .caps { font-size: 11px; letter-spacing: .24em; }
.page--city .twin__cols em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1; letter-spacing: -.015em; color: var(--blue-text); }
.page--city .twin__rows { margin: 0; }
.page--city .twin__row { --r: 1; position: relative; align-items: baseline; row-gap: 6px; padding: clamp(14px, 2vh, 22px) 0; }
.page--city .twin__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: 0 50%; transform: scaleX(var(--r)); }
.page--city .twin__row dt { font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.page--city .twin__row dd { display: grid; gap: 6px; align-content: start; margin: 0; min-width: 0; }
.page--city .twin__v { font-weight: 300; font-size: clamp(1.75rem, 2.8vw, 2.75rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.page--city .twin__v--sm { font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.15; letter-spacing: -.025em; }
.page--city .twin__note { font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.page--city .twin.is-armed .twin__row > * { opacity: calc(.1 + .9 * var(--r)); transform: translate3d(0, calc((1 - var(--r)) * 22px), 0); }
html.is-failsafe .page--city .twin .twin__row { --r: 1 !important; }
.page--city .twin__src { margin-top: -6px; }
@media (max-width: 699px) {
  .page--city .twin__cols, .page--city .twin__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .page--city .twin__cols > span { display: none; }
  .page--city .twin__row dt { grid-column: 1 / -1; font-size: 11px; letter-spacing: .14em; }
  .page--city .twin__cols em { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .page--city .twin__v { font-size: clamp(1.5rem, 7vw, 2rem); }
  .page--city .twin__v--sm { font-size: clamp(1.0625rem, 4.6vw, 1.25rem); }
  .page--city .twin__note { font-size: .875rem; }
}

/* ------------------------------------------------------------------ 5. three things to know (ink): city.css .know gives the
   grid and the type; these are this page's three figures, built by --g per item (0 to 1; 1 without JS):
   bars (a PID's or MUD's own line beside the city's rate, each bar after the one before), two rails (the school line's
   seam slides off the town line), and each town's residents split across the county line. */
.page--city .pck .know__fig { min-height: clamp(104px, 9vw, 132px); }
.page--city .pck__fig { --g: 1; flex-direction: column; align-items: stretch; justify-content: flex-end; }
/* a. bars, per $100 */
.page--city .pck__bars { gap: 10px; }
.page--city .pck__bar { --gb: clamp(0, calc((var(--g) - var(--k, 0)) / (1 - var(--k, 0))), 1); position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; padding-bottom: 10px; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.page--city .pck__bar i { position: absolute; left: 0; bottom: 0; height: 5px; width: calc(var(--v) * var(--gb) * 100%); border-radius: 3px; background: rgba(255, 255, 255, .5); }
.page--city .pck__bar b { font-weight: 300; font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1; letter-spacing: -.03em; text-transform: none; white-space: nowrap; color: var(--ink); opacity: calc(.3 + .7 * var(--gb)); }
.page--city .pck__bar--pid i { height: 7px; background: linear-gradient(90deg, rgba(142, 164, 255, .26) 0 calc(var(--lo) / var(--v) * 100%), #8EA4FF calc(var(--lo) / var(--v) * 100%) 100%); }
.page--city .pck__bar--mud i { height: 7px; background: #8EA4FF; box-shadow: 0 0 18px rgba(96, 128, 255, .35); }
/* b. the town line and the school line */
.page--city .pck__lines { position: relative; gap: 22px; padding-top: 16px; }
.page--city .pck__rail { --at: 48%; position: relative; display: flex; height: 30px; border-radius: 8px; }
.page--city .pck__rail--isd { --at: calc(48% + 19% * var(--g)); }
.page--city .pck__lab { position: absolute; left: 0; bottom: calc(100% + 5px); font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.page--city .pck__seg { display: flex; align-items: center; min-width: 0; padding: 0 10px; overflow: hidden; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: #F1F0ED; }
.page--city .pck__seg--a { flex: 0 0 var(--at); border-radius: 8px 0 0 8px; background: rgba(255, 255, 255, .16); }
.page--city .pck__seg--b { flex: 1 1 auto; border-radius: 0 8px 8px 0; background: rgba(142, 164, 255, .34); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .5); }
.page--city .pck__seam { position: absolute; left: 48%; top: 6px; bottom: -6px; width: 0; border-left: 1px dashed rgba(255, 255, 255, .7); pointer-events: none; }
/* c. residents by county (the bar grows; Collin solid, Denton blue) */
.page--city .pck__split { gap: 10px; }
.page--city .pck__sp { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 3px; margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.page--city .pck__sp i { position: relative; display: block; height: 10px; width: calc(var(--g) * 100%); border-radius: 999px; overflow: hidden; background: rgba(142, 164, 255, .55); }
.page--city .pck__sp i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--c) * 100%); background: rgba(241, 240, 237, .78); }
.page--city .pck__sp b { grid-column: 2; font-weight: 400; font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; opacity: calc(.3 + .7 * var(--g)); }
.page--city .pck__key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 0; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.page--city .pck__key span::before { content: ""; display: inline-block; width: 10px; height: 6px; margin-right: 6px; vertical-align: 1px; border-radius: 3px; }
.page--city .pck__key .is-collin::before { background: rgba(241, 240, 237, .78); }
.page--city .pck__key .is-denton::before { background: rgba(142, 164, 255, .55); }
.page--city .pck__key span:last-child::before { display: none; }
html.is-failsafe .page--city .pck .pck__fig { --g: 1 !important; }
@media (max-width: 899px) { .page--city .pck .know__fig { min-height: 0; padding-bottom: 4px; } .page--city .pck__lines { padding-top: 18px; } }

/* ------------------------------------------------------------------ 6. schools and taxes: the tax line keeps city.css; seven
   places a home can sit make seven chips, so on desktop they wrap in two tidy rows */
@media (min-width: 1100px) { .page--city .taxline__picks .chip { min-height: 36px; padding: 0 12px; font-size: .875rem; } }

/* ------------------------------------------------------------------ 6b. bring me on your first builder visit (white, compact) */
.page--city .pcb { background: var(--paper); }
.page--city .pcb > .container { padding-block: clamp(8px, 2vw, 24px) clamp(20px, 3vw, 40px); }
/* the search follows the builder card on white: one gap between them, never a dead white stretch */
.page--city .pcb + .citysearch > .container.citysearch__more--first { padding-top: clamp(48px, 6vw, 88px); }
.page--city .pcb__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px clamp(18px, 3vw, 40px); align-items: center; padding: clamp(20px, 2.6vw, 32px); background: var(--paper-2); border-top: 3px solid var(--blue-fill); }
.page--city .pcb__me { width: 72px; height: 72px; 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 .pcb__copy { display: grid; gap: 6px; min-width: 0; }
.page--city .pcb__h { font-weight: 300; font-size: clamp(1.625rem, 2.6vw, 2.5rem); line-height: 1.05; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.page--city .pcb__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.01em; }
.page--city .pcb__p { font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 767px) {
  .page--city .pcb__card { grid-template-columns: auto minmax(0, 1fr); }
  .page--city .pcb__me { width: 56px; height: 56px; align-self: start; }
  .page--city .pcb__btn { grid-column: 1 / -1; justify-self: start; }
}

/* ------------------------------------------------------------------ 8. search: two towns, two big tiles, then the two quiet ones */
@media (min-width: 900px) {
  .page--city .pcs__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .82fr); }
  .page--city .pcs__grid .citysearch__alt { grid-column: 3; }
  .page--city .pcs__grid .citysearch__big:nth-child(2) { grid-row: 1 / span 2; grid-column: 2; }
}
.page--city .pcs__grid .citysearch__t { font-size: clamp(2.5rem, 4.6vw, 4.5rem); }
.page--city .pcs__grid .citysearch__big { min-height: clamp(240px, 26vw, 360px); }

/* ------------------------------------------------------------------ 7. proof (ink), straight into the ending: no house figure
   above it on this page, so the spotlight band carries the top padding; the portrait is the studio one from my card */
.page--city .pcp > .container.spot { padding-block: clamp(80px, 11vw, 140px) clamp(56px, 8vw, 104px); }
.page--city .pcp .spot__me { background: #F4F4F2; }
.page--city .pcp .spot__me img { object-position: 46% 30%; }
.page--city .pcp .spot__body { gap: clamp(14px, 2vw, 24px); }
.page--city .pcp .cproof__label { color: var(--blue-text); }
@media (max-width: 899px) { .page--city .pcp > .container.spot { padding-block: 56px 40px; } }
/* the proof runs straight into the ending: no hairline between them (site.css gives every .spot a bottom rule) */
.page--city .pcp > .spot { border-bottom: 0; }
/* phones: the four facts fit two to a row at 320 px too (Top Producer wraps rather than run off the edge) */
@media (max-width: 599px) {
  .page--city .pcp .spot__stats { column-gap: 14px; }
  .page--city .pcp .spot__n { font-size: clamp(1.625rem, 8vw, 2.25rem); line-height: .95; white-space: normal; }
  .page--city .pcp .spot__l { font-size: 10px; letter-spacing: .12em; }
}