/* css/pages/prosper-celina-model.css: the "Up the Tollway" model (js/scenes/prosper-celina-model.js) and the markup between
   the model markers in prosper-celina.html. Owned by the model agent (audit/city-pages-brief.md section 1). Adapted from the
   .mm rules of css/pages/melissa.css (the Melissa model), under its own .pcm prefix so the two never meet.
   Static first (no JS, reduced motion, Pause motion): the still beside the list of stops. The controller adds .is-pin (T1
   and T2) for the pinned story: a sticky screen, the stage full-bleed behind the copy, the model to the right of it on
   desktop and under it on phones. The page canvas (z 1) draws between the section's grey and the pin (z 2). */
.page--city .pcm { position: relative; background: var(--stage-paper, var(--paper-2)); }
.page--city .pcm__pin { position: relative; display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(72px, 9vw, 128px) max(var(--gutter), 3vw); }
@media (min-width: 900px) { .page--city .pcm__pin { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.page--city .pcm__stage { position: relative; grid-row: 1; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: transparent; }
@media (min-width: 900px) { .page--city .pcm__stage { grid-column: 2; } }
.page--city .pcm__still { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.page--city .pcm__labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.page--city .pcm__copy { display: grid; gap: 18px; align-content: center; min-width: 0; }
@media (min-width: 900px) { .page--city .pcm__copy { grid-column: 1; grid-row: 1; } }
.page--city .pcm__h { font-weight: 300; font-size: clamp(2.5rem, 4.4vw, 4.5rem); line-height: .94; letter-spacing: -.05em; text-wrap: balance; }
.page--city .pcm__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; }
.page--city .pcm__beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.page--city .pcm__beat { display: grid; gap: 8px; align-content: start; justify-items: start; }
.page--city .pcm__beat h3 { font-weight: 400; font-size: clamp(1.375rem, 1.9vw, 1.875rem); line-height: 1.1; letter-spacing: -.03em; }
.page--city .pcm__beat p { max-width: 36ch; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.page--city .pcm__beat--intro p:first-child { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.3; color: var(--ink); }
.page--city .pcm__close { font-weight: 300; font-size: clamp(1.375rem, 2vw, 1.875rem) !important; line-height: 1.18 !important; letter-spacing: -.03em; color: var(--ink) !important; max-width: 22ch !important; text-wrap: balance; }
.page--city .pcm__beat .btn { margin-top: 6px; }
.page--city .pcm__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.page--city .pcm__legend i { display: inline-block; width: 18px; height: 12px; margin-right: 8px; vertical-align: -1px; border-radius: 3px; }
/* open = built: a white roof over a stone wall, solid; coming = frosted glass in a blue line; the town limits: a white dashed
   line with a soft dark casing, as the model's ground draws them */
.page--city .pcm__legend .is-open { background: linear-gradient(180deg, #F3F4F5 0 52%, #C3C6C9 52% 100%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 26%, transparent), 0 4px 8px -4px rgba(21, 19, 17, .45); }
.page--city .pcm__legend .is-coming { background: color-mix(in srgb, #DCE6F2 55%, transparent); box-shadow: inset 0 0 0 1px var(--blue-fill); }
.page--city .pcm__legend .is-line { width: 22px; height: 5px; border-radius: 2px; vertical-align: 2px; background: linear-gradient(180deg, transparent 0 25%, #FFFFFF 25% 75%, transparent 75%) 0 0 / 8px 100% repeat-x, #535856; background-image: repeating-linear-gradient(90deg, #FFFFFF 0 4.5px, transparent 4.5px 8px); background-size: 100% 46%; background-position: 0 50%; background-repeat: no-repeat; }
.page--city .pcm__index { display: none; }
.page--city .pcm__note { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
/* the map's credit (ODbL), on its own line under the note */
.page--city .pcm__osm { display: block; margin-top: 3px; font-size: 10px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--ink-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
.page--city .pcm__osm:hover, .page--city .pcm__osm:focus-visible { color: var(--ink); text-decoration-color: currentColor; }
.page--city .pcm__src { max-width: 46ch; }
.page--city .pcm__src .fineprint__body p + p { margin-top: 8px; }
/* the status tags (the callouts and the captions share them) */
.page--city .pcm-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 10px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.page--city .pcm-tag--open { background: var(--ink); color: var(--paper); }
.page--city .pcm-tag--building { background: var(--blue-fill); color: #FFFFFF; }
.page--city .pcm-tag--planned { color: var(--blue-text); background: color-mix(in srgb, var(--blue-fill) 7%, transparent); box-shadow: inset 0 0 0 1px var(--blue-fill); }
/* the callouts on the model: a blue dot on the landmark, a fine leader, a frosted card with the name and its tag */
.page--city .pcm-lab { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-out), visibility 0s .4s; will-change: transform; }
.page--city .pcm-lab.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.page--city .pcm-lab__dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-fill); box-shadow: 0 0 0 3px color-mix(in srgb, #FFFFFF 85%, transparent), 0 0 0 8px color-mix(in srgb, var(--blue-fill) 16%, transparent); }
.page--city .pcm-lab__lead { position: absolute; left: -.5px; bottom: 8px; width: 1px; height: calc(40px + var(--lift, 0px)); background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 20%, transparent), color-mix(in srgb, var(--ink) 70%, transparent)); }
.page--city .pcm-lab__box { position: absolute; left: 0; bottom: calc(48px + var(--lift, 0px)); display: grid; gap: 7px; justify-items: start; padding: 11px 14px 12px; white-space: nowrap; transform: translateX(calc(-50% + var(--dx, 0px))); background: color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 12px; box-shadow: 0 22px 44px -26px rgba(21, 19, 17, .5); }
.page--city .pcm-lab__box b { font-weight: 500; font-size: 15.5px; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
.page--city .pcm-lab.is-on .pcm-lab__box { animation: pcm-lab-in .5s var(--ease-out) both; }
@keyframes pcm-lab-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
/* a callout with a line of detail: the long name wraps in balanced lines, the detail sits under it a size below the name;
   the whole board keeps the short name and the status dot */
.page--city .pcm-lab--note .pcm-lab__box b { max-width: 15em; white-space: normal; text-wrap: balance; }
.page--city .pcm-lab__note { display: block; width: max-content; max-width: 19.5em; margin-top: -2px; white-space: normal; text-wrap: pretty; font-size: 12.5px; line-height: 1.38; color: var(--ink-2); }
.page--city .pcm-lab__sh { display: none; }
/* the whole board: every headline callout, compact (the name and a status dot; the list beside it has the words) */
.page--city .pcm__labels.is-all .pcm-lab__lead { height: calc(20px + var(--lift, 0px)); }
.page--city .pcm__labels.is-all .pcm-lab__box { bottom: calc(28px + var(--lift, 0px)); padding: 6px 10px 6px 9px; grid-auto-flow: column; align-items: center; gap: 7px; border-radius: 999px; }
.page--city .pcm__labels.is-all .pcm-lab__box b { font-size: 12.5px; }
.page--city .pcm__labels.is-all .pcm-tag { min-height: 0; width: 8px; height: 8px; padding: 0; font-size: 0; order: -1; }
.page--city .pcm__labels.is-all .pcm-lab__dot { width: 8px; height: 8px; left: -4px; top: -4px; box-shadow: 0 0 0 2px color-mix(in srgb, #FFFFFF 85%, transparent); }
.page--city .pcm__labels.is-all .pcm-lab__note, .page--city .pcm__labels.is-all .pcm-lab__nm { display: none; }
.page--city .pcm__labels.is-all .pcm-lab__sh { display: inline; }
.page--city .pcm__labels.is-all .pcm-lab--note .pcm-lab__box b { max-width: none; white-space: nowrap; }
/* a callout that would cover another flips under its landmark */
.page--city .pcm-lab.is-below .pcm-lab__lead { top: 8px; bottom: auto; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 20%, transparent), color-mix(in srgb, var(--ink) 70%, transparent)); }
.page--city .pcm-lab.is-below .pcm-lab__box { top: 48px; bottom: auto; }
.page--city .pcm__labels.is-all .pcm-lab.is-below .pcm-lab__box { top: 28px; }

/* the detail line the callouts carry, added to its stop by the controller: shown in the reduced-motion list, kept for screen
   readers only in the pinned story (where the callout shows it) */
.page--city .pcm__beat .pcm__more { font-size: .9375rem; line-height: 1.45; }
.page--city .pcm__more b { font-weight: 500; color: var(--ink); }
.page--city .pcm.is-pin .pcm__more { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the pinned story (T1 and T2): eleven stops paced by js/core/pace.js (11 beat weights; 460svh desktop, 400svh phones,
   audit/city-pages-brief.md section 3) */
.page--city .pcm.is-pin { height: 460vh; height: 460svh; }
.page--city .pcm.is-pin .pcm__pin { position: sticky; top: 0; z-index: 2; display: block; height: 100vh; height: 100svh; padding: 0; overflow: clip; }
.page--city .pcm.is-pin .pcm__stage { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.page--city .pcm.is-pin .pcm__still { inset: auto; left: 0; top: 0; width: 2400px; height: 3004px; object-fit: fill; transform-origin: 0 0; will-change: transform; clip-path: inset(0 0 calc(50% + 2px) 0); }
.page--city .pcm.is-pin .pcm__still.is-dark { clip-path: inset(calc(50% + 2px) 0 0 0); } /* (each half clipped clear of the 4 px seam between the light and dark frames: the light frame is rows 0 to 1500 of the 3004 px sprite, the dark one 1504 to 3004; a plain 50% let the seam's top 2 px show as a dark line under the light frame; fix 2026-10-03, as in mckinney-model.css) */
/* a soft fall of the studio grey behind the copy, so the model never fights the words */
.page--city .pcm.is-pin .pcm__pin::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: min(62vw, calc(max(var(--gutter), 3vw) + 640px)); pointer-events: none; --sp: var(--stage-paper, var(--paper-2)); background: linear-gradient(90deg, var(--sp) 0, var(--sp) 44%, color-mix(in srgb, var(--sp) 82%, transparent) 56%, color-mix(in srgb, var(--sp) 50%, transparent) 70%, color-mix(in srgb, var(--sp) 18%, transparent) 86%, color-mix(in srgb, var(--sp) 0%, transparent) 100%); }
.page--city .pcm.is-pin .pcm__copy { position: absolute; z-index: 3; left: max(var(--gutter), 3vw); top: calc(var(--header-h) + 3svh); bottom: 4svh; width: min(400px, 30vw); gap: 16px; }
.page--city .pcm.is-pin .pcm__beats { gap: 0; min-height: 14rem; align-content: start; }
.page--city .pcm.is-pin .pcm__beat { grid-area: 1 / 1; align-self: start; opacity: 0; transform: translate3d(0, 12px, 0); pointer-events: none; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.page--city .pcm.is-pin .pcm__beat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.page--city .pcm.is-pin .pcm__beat:not(.is-on) a { visibility: hidden; }
/* the stops as a row of dots (the header of a story you can feel): done in ink, the current one a blue bar; each jumps */
.page--city .pcm.is-pin .pcm__index { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.page--city .pcm__index button { position: relative; width: 24px; height: 32px; padding: 0; background: transparent; cursor: pointer; }
.page--city .pcm__index button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: width var(--dur-3) var(--ease-out), margin var(--dur-3) var(--ease-out), background-color var(--dur-2); }
.page--city .pcm__index button.is-done::after { background: color-mix(in srgb, var(--ink) 62%, transparent); }
.page--city .pcm__index button[aria-current="step"]::after { width: 20px; margin-left: -10px; background: var(--blue-fill); }
.page--city .pcm__index button:hover::after, .page--city .pcm__index button:focus-visible::after { background: var(--blue-text); }
/* the last stop: me beside the button */
.page--city .pcm__me { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 6px; }
.page--city .pcm__me img { flex: none; width: 48px; height: 48px; 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); }
/* the note rides on the busy ground of the close stops, so it sits on a soft studio-grey pill (like Skip) and stays legible */
.page--city .pcm.is-pin .pcm__note { position: absolute; z-index: 3; right: max(var(--gutter), 3vw); bottom: 2.6svh; padding: 6px 12px; border-radius: 999px; color: var(--ink-2); background: color-mix(in srgb, var(--stage-paper, var(--paper)) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.page--city .pcm__skip { position: absolute; z-index: 8; top: calc(var(--header-h) + 2.5svh); right: max(var(--gutter), 3vw); 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); text-decoration: none; background: color-mix(in srgb, var(--stage-paper, var(--paper)) 80%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); border-radius: 999px; transition: color var(--dur-2), border-color var(--dur-2); }
.page--city .pcm__skip:hover, .page--city .pcm__skip:focus-visible { color: var(--ink); border-color: var(--ink); }
/* while the WebGL model is live the still has handed over (stage3d fades it); the mode classes come from the controller */
.page--city .pcm.is-live .pcm__still { pointer-events: none; }
html.pcm-shot .page--city .pcm .pcm__copy, html.pcm-shot .page--city .pcm .pcm__labels, html.pcm-shot .page--city .pcm .pcm__note, html.pcm-shot .page--city .pcm .pcm__skip, html.pcm-shot .page--city .pcm .pcm__pin::before { display: none; }
@media (min-width: 900px) and (max-height: 760px) {
  .page--city .pcm.is-pin .pcm__copy { gap: 12px; }
  .page--city .pcm.is-pin .pcm__h { font-size: clamp(2.125rem, 3.6vw, 3.25rem); }
  .page--city .pcm.is-pin .pcm__beats { min-height: 12rem; }
}
/* phones: the copy at the top, the model below it (the camera sits the subject under the caption) */
@media (max-width: 899px) {
  .page--city .pcm__stage { border-radius: 14px; }
  .page--city .pcm.is-pin { height: 400vh; height: 400svh; }
  /* (the grey ends under the current caption, --pcm-cap = its foot, set by the controller) */
  .page--city .pcm.is-pin .pcm__pin::before { top: 0; right: 0; bottom: auto; left: 0; width: auto; height: calc(var(--pcm-cap, calc(var(--header-h) + 218px)) + 52px); background: linear-gradient(180deg, var(--stage-paper, var(--paper-2)) calc(100% - 92px), color-mix(in srgb, var(--stage-paper, var(--paper-2)) 0%, transparent)); transition: height .45s var(--ease-out); }
  .page--city .pcm.is-pin .pcm__copy { left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 12px); bottom: auto; width: auto; gap: 8px; align-content: start; }
  .page--city .pcm.is-pin .pcm__copy > .caps { display: none; }
  .page--city .pcm.is-pin .pcm__h { font-size: clamp(1.875rem, 8.4vw, 2.5rem); }
  .page--city .pcm.is-pin .pcm__beats { min-height: 8.6rem; }
  .page--city .pcm.is-pin .pcm__beat { gap: 6px; }
  .page--city .pcm.is-pin .pcm__beat h3 { font-size: 1.25rem; }
  .page--city .pcm.is-pin .pcm__beat p { font-size: .9375rem; line-height: 1.42; }
  .page--city .pcm.is-pin .pcm__beat--intro p:first-child { font-size: 1.125rem; }
  .page--city .pcm.is-pin .pcm__close { font-size: 1.25rem !important; }
  .page--city .pcm.is-pin .pcm__index, .page--city .pcm.is-pin .pcm__src { display: none; }
  .page--city .pcm.is-pin .pcm__note { right: auto; left: var(--gutter); bottom: calc(var(--bar-h, 64px) + 14px); max-width: calc(100% - 2 * var(--gutter) - 92px); font-size: 9.5px; letter-spacing: .1em; }
  .page--city .pcm.is-pin .pcm__osm { margin-top: 1px; font-size: 9.5px; }
  .page--city .pcm__skip { top: auto; bottom: calc(var(--bar-h, 64px) + 8px); right: var(--gutter); }
  .page--city .pcm-lab__box { padding: 8px 11px 9px; gap: 5px; }
  .page--city .pcm-lab__box b { font-size: 13.5px; }
  .page--city .pcm-lab__note { max-width: 17.5em; font-size: 11.5px; line-height: 1.34; }
  .page--city .pcm-lab__lead { height: calc(30px + var(--lift, 0px)); }
  .page--city .pcm-lab__box { bottom: calc(38px + var(--lift, 0px)); }
  .page--city .pcm__labels.is-all .pcm-lab__lead { height: calc(14px + var(--lift, 0px)); }
  .page--city .pcm__labels.is-all .pcm-lab__box { bottom: calc(22px + var(--lift, 0px)); padding: 5px 9px 5px 8px; gap: 6px; }
  .page--city .pcm__labels.is-all .pcm-lab__box b { font-size: 12px; }
  .page--city .pcm-tag { min-height: 19px; padding: 0 8px; font-size: 9.5px; letter-spacing: .12em; }
  .page--city .pcm-lab.is-below .pcm-lab__box { top: 38px; }
  .page--city .pcm__labels.is-all .pcm-lab.is-below .pcm-lab__box { top: 22px; }
}
/* reduced motion on desktop: the picture stays in view beside the list */
@media (min-width: 900px) { .page--city .pcm:not(.is-pin) .pcm__stage { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }
/* the still is one sprite: the light model on top, the dark-theme model below (the controller picks the half) */
.page--city .pcm:not(.is-pin) .pcm__still { object-position: 50% 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page--city .pcm:not(.is-pin) .pcm__still { object-position: 50% 100%; } }
:root[data-theme="dark"] .page--city .pcm:not(.is-pin) .pcm__still { object-position: 50% 100%; }
/* ?pcmshot renders the bare model for the stills: nothing over it */
html.pcm-shot .site-header, html.pcm-shot .bottombar, html.pcm-shot .toast { visibility: hidden !important; }
html.pcm-shot .page--city .pcm::after { display: none; }
/* the studio grey eases back into the white page at the section's foot (no hard seam) */
.page--city .pcm::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 16vh, 180px); pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 0%, transparent), var(--paper)); }
/* short phones (review 2026-10-03; a phone browser's real 100svh is about 664 px): a tighter caption, the close's line
   and Text me on fewer rows, and the callouts drop their line of detail (the captions and the list keep it) and use
   their short names where the full one is long, so the framing solver finds room for every card of a stop between the
   caption and the bar (as mckinney-model.css does) */
@media (max-width: 899px) and (max-height: 720px) {
  .page--city .pcm.is-pin .pcm__h { font-size: clamp(1.625rem, 7.4vw, 2.125rem); }
  .page--city .pcm.is-pin .pcm__copy { gap: 6px; top: calc(var(--header-h) + 8px); }
  .page--city .pcm.is-pin .pcm__beat { gap: 4px; }
  .page--city .pcm.is-pin .pcm__beat h3 { font-size: 1.125rem; }
  .page--city .pcm.is-pin .pcm__beat p { font-size: .875rem; line-height: 1.38; }
  .page--city .pcm.is-pin .pcm__beat--intro p:first-child { font-size: 1rem; }
  .page--city .pcm.is-pin .pcm__close { font-size: 1.0625rem !important; line-height: 1.3 !important; max-width: none !important; }
  .page--city .pcm.is-pin .pcm__me { flex-wrap: nowrap; gap: 10px; margin-top: 2px; }
  .page--city .pcm.is-pin .pcm__me img { width: 36px; height: 36px; }
  .page--city .pcm.is-pin .pcm__me .btn { min-height: 42px; margin-top: 0; padding-inline: 16px; font-size: .875rem; white-space: nowrap; }
  .page--city .pcm-lab__note { display: none; }
  .page--city .pcm-lab--note .pcm-lab__box b { max-width: none; white-space: nowrap; }
  .page--city .pcm-lab[data-site="academy"] .pcm-lab__nm, .page--city .pcm-lab[data-site="legacyer"] .pcm-lab__nm, .page--city .pcm-lab[data-site="chs"] .pcm-lab__nm, .page--city .pcm-lab[data-site="methodist"] .pcm-lab__nm { display: none; }
  .page--city .pcm-lab[data-site="academy"] .pcm-lab__sh, .page--city .pcm-lab[data-site="legacyer"] .pcm-lab__sh, .page--city .pcm-lab[data-site="chs"] .pcm-lab__sh, .page--city .pcm-lab[data-site="methodist"] .pcm-lab__sh { display: inline; }
}