/* css/pages/mckinney-model.css : the citywide "East to west" model on mckinney.html (js/scenes/mckinney-model.js) and the
   markup between the model markers. Owned by the model agent (audit/city-pages-brief.md section 1). Adapted from the
   Melissa model's rules (css/pages/melissa.css, section 1) with the mk 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 .mk { position: relative; background: var(--stage-paper, var(--paper-2)); }
.page--city .mk__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 .mk__pin { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.page--city .mk__stage { position: relative; grid-row: 1; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: transparent; }
@media (min-width: 900px) { .page--city .mk__stage { grid-column: 2; } }
.page--city .mk__still { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.page--city .mk__labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.page--city .mk__copy { display: grid; gap: 18px; align-content: center; min-width: 0; }
@media (min-width: 900px) { .page--city .mk__copy { grid-column: 1; grid-row: 1; } }
.page--city .mk__h { font-weight: 300; font-size: clamp(2.5rem, 4.4vw, 4.5rem); line-height: .94; letter-spacing: -.05em; text-wrap: balance; }
.page--city .mk__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; }
.page--city .mk__beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.page--city .mk__beat { display: grid; gap: 8px; align-content: start; justify-items: start; }
.page--city .mk__beat h3 { font-weight: 400; font-size: clamp(1.375rem, 1.9vw, 1.875rem); line-height: 1.1; letter-spacing: -.03em; }
.page--city .mk__beat p { max-width: 36ch; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.page--city .mk__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 .mk__close { font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2.125rem) !important; line-height: 1.15 !important; letter-spacing: -.03em; color: var(--ink) !important; max-width: 20ch !important; text-wrap: balance; }
.page--city .mk__beat .btn { margin-top: 6px; }
.page--city .mk__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 .mk__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 */
.page--city .mk__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 .mk__legend .is-coming { background: color-mix(in srgb, #DCE6F2 55%, transparent); box-shadow: inset 0 0 0 1px var(--blue-fill); }
.page--city .mk__index { display: none; }
.page--city .mk__note { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
/* the map's credit (ODbL: the roads, water, parks and streets are OpenStreetMap's), on its own line under the note */
.page--city .mk__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 .mk__osm:hover, .page--city .mk__osm:focus-visible { color: var(--ink); text-decoration-color: currentColor; }
.page--city .mk__src { max-width: 46ch; }
.page--city .mk__src .fineprint__body p + p { margin-top: 8px; }
/* the status tags (the callouts and the captions share them) */
.page--city .mk-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 .mk-tag--open { background: var(--ink); color: var(--paper); }
.page--city .mk-tag--building { background: var(--blue-fill); color: #FFFFFF; }
.page--city .mk-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 .mk-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 .mk-lab.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.page--city .mk-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 .mk-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 .mk-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 .mk-lab__box b { font-weight: 500; font-size: 15.5px; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
/* a branded site's wordmark chip (F45): its name in the brand's colours, the site's type, a red rule under it */
.page--city .mk-lab__brand { display: inline-block; padding: 4px 9px 3px; border-radius: 4px; font-size: 17px; font-weight: 700; line-height: 1; letter-spacing: .03em; color: var(--bf); background: var(--bb); box-shadow: inset 0 -3px 0 var(--br); }
.page--city .mk__labels.is-all .mk-lab__brand { display: none; }
.page--city .mk-lab.is-on .mk-lab__box { animation: mk-lab-in .5s var(--ease-out) both; }
@keyframes mk-lab-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
/* a callout with a line of detail (the landmarks Ashton added on 2026-10-01): the long name wraps in balanced lines, the
   detail sits under it a size below the name; the whole city keeps the short name and the status dot */
.page--city .mk-lab--note .mk-lab__box b { max-width: 15em; white-space: normal; text-wrap: balance; }
.page--city .mk-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 .mk-lab__sh { display: none; }
/* the whole city: every callout, compact (the name and a status dot; the list beside it has the words) */
.page--city .mk__labels.is-all .mk-lab__lead { height: calc(20px + var(--lift, 0px)); }
.page--city .mk__labels.is-all .mk-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 .mk__labels.is-all .mk-lab__box b { font-size: 12.5px; }
.page--city .mk__labels.is-all .mk-tag { min-height: 0; width: 8px; height: 8px; padding: 0; font-size: 0; order: -1; }
.page--city .mk__labels.is-all .mk-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 .mk__labels.is-all .mk-lab__note, .page--city .mk__labels.is-all .mk-lab__nm { display: none; }
.page--city .mk__labels.is-all .mk-lab__sh { display: inline; }
.page--city .mk__labels.is-all .mk-lab--note .mk-lab__box b { max-width: none; white-space: nowrap; }

/* the detail line the callouts carry (the dates and figures their sources give), 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 .mk__beat .mk__more { font-size: .9375rem; line-height: 1.45; }
.page--city .mk__more b { font-weight: 500; color: var(--ink); }
.page--city .mk.is-pin .mk__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) */
.page--city .mk.is-pin { height: 460vh; height: 460svh; } /* (eleven stops, paced by js/core/pace.js: about 0.33 screen per beat weight) */
.page--city .mk.is-pin .mk__pin { position: sticky; top: 0; z-index: 2; display: block; height: 100vh; height: 100svh; padding: 0; overflow: clip; }
.page--city .mk.is-pin .mk__stage { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.page--city .mk.is-pin .mk__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 .mk.is-pin .mk__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) */
/* a soft fall of the studio grey behind the copy, so the model never fights the words */
.page--city .mk.is-pin .mk__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 .mk.is-pin .mk__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 .mk.is-pin .mk__beats { gap: 0; min-height: 13.5rem; align-content: start; }
.page--city .mk.is-pin .mk__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 .mk.is-pin .mk__beat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.page--city .mk.is-pin .mk__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 .mk.is-pin .mk__index { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.page--city .mk__index button { position: relative; width: 26px; height: 32px; padding: 0; background: transparent; cursor: pointer; }
.page--city .mk__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 .mk__index button.is-done::after { background: color-mix(in srgb, var(--ink) 62%, transparent); }
.page--city .mk__index button[aria-current="step"]::after { width: 20px; margin-left: -10px; background: var(--blue-fill); }
.page--city .mk__index button:hover::after, .page--city .mk__index button:focus-visible::after { background: var(--blue-text); }
/* the last stop: me beside the button */
.page--city .mk__me { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.page--city .mk__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 .mk.is-pin .mk__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 .mk__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 .mk__skip:hover, .page--city .mk__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 .mk.is-live .mk__still { pointer-events: none; }
html.mk-shot .page--city .mk .mk__copy, html.mk-shot .page--city .mk .mk__labels, html.mk-shot .page--city .mk .mk__note, html.mk-shot .page--city .mk .mk__skip, html.mk-shot .page--city .mk .mk__pin::before { display: none; }
@media (min-width: 900px) and (max-height: 760px) {
  .page--city .mk.is-pin .mk__copy { gap: 12px; }
  .page--city .mk.is-pin .mk__h { font-size: clamp(2.125rem, 3.6vw, 3.25rem); }
  .page--city .mk.is-pin .mk__beats { min-height: 11.5rem; }
}
/* phones: the copy at the top, the model below it (the camera sits the subject under the caption) */
@media (max-width: 899px) {
  .page--city .mk__stage { border-radius: 14px; }
  .page--city .mk.is-pin { height: 400vh; height: 400svh; } /* phones: the brief's 360 to 400svh (about 0.27 small screen per beat weight; the pacer holds each stop) */
  /* (the grey ends under the current caption, --mk-cap = its foot, set by the controller: a short caption leaves the model
     more of a short screen) */
  .page--city .mk.is-pin .mk__pin::before { top: 0; right: 0; bottom: auto; left: 0; width: auto; height: calc(var(--mk-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 .mk.is-pin .mk__copy { left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 12px); bottom: auto; width: auto; gap: 8px; align-content: start; }
  .page--city .mk.is-pin .mk__copy > .caps { display: none; }
  .page--city .mk.is-pin .mk__h { font-size: clamp(1.875rem, 8.4vw, 2.5rem); }
  .page--city .mk.is-pin .mk__beats { min-height: 8.6rem; }
  .page--city .mk.is-pin .mk__beat { gap: 6px; }
  .page--city .mk.is-pin .mk__beat h3 { font-size: 1.25rem; }
  .page--city .mk.is-pin .mk__beat p { font-size: .9375rem; line-height: 1.42; }
  .page--city .mk.is-pin .mk__beat--intro p:first-child { font-size: 1.125rem; }
  .page--city .mk.is-pin .mk__close { font-size: 1.375rem !important; }
  .page--city .mk.is-pin .mk__index, .page--city .mk.is-pin .mk__src { display: none; }
  .page--city .mk.is-pin .mk__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 .mk.is-pin .mk__osm { margin-top: 1px; font-size: 9.5px; } /* (A diagram · buildings not to scale: kept clear of Skip on a 360 px phone) */
  .page--city .mk__skip { top: auto; bottom: calc(var(--bar-h, 64px) + 8px); right: var(--gutter); }
  .page--city .mk-lab__box { padding: 8px 11px 9px; gap: 5px; }
  .page--city .mk-lab__box b { font-size: 13.5px; }
  .page--city .mk-lab__note { max-width: 17.5em; font-size: 11.5px; line-height: 1.34; }
  .page--city .mk-lab__lead { height: calc(30px + var(--lift, 0px)); }
  .page--city .mk-lab__box { bottom: calc(38px + var(--lift, 0px)); }
  /* the whole city on a phone: a touch smaller and closer to the dots, so all eight fit under the closing line on a short
     screen (the controller's layout() uses the same 22 px lead) */
  .page--city .mk__labels.is-all .mk-lab__lead { height: calc(14px + var(--lift, 0px)); }
  .page--city .mk__labels.is-all .mk-lab__box { bottom: calc(22px + var(--lift, 0px)); padding: 5px 9px 5px 8px; gap: 6px; }
  .page--city .mk__labels.is-all .mk-lab__box b { font-size: 12px; }
  .page--city .mk-tag { min-height: 19px; padding: 0 8px; font-size: 9.5px; letter-spacing: .12em; }
}

/* a callout that would cover another flips under its landmark */
.page--city .mk-lab.is-below .mk-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 .mk-lab.is-below .mk-lab__box { top: 48px; bottom: auto; }
.page--city .mk__labels.is-all .mk-lab.is-below .mk-lab__box { top: 28px; }
@media (max-width: 899px) { .page--city .mk-lab.is-below .mk-lab__box { top: 38px; } .page--city .mk__labels.is-all .mk-lab.is-below .mk-lab__box { top: 22px; } }
/* reduced motion on desktop: the picture stays in view beside the list */
@media (min-width: 900px) { .page--city .mk:not(.is-pin) .mk__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 .mk:not(.is-pin) .mk__still { object-position: 50% 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page--city .mk:not(.is-pin) .mk__still { object-position: 50% 100%; } }
:root[data-theme="dark"] .page--city .mk:not(.is-pin) .mk__still { object-position: 50% 100%; }
/* ?mmshot=1 renders the bare model for the still: nothing over it */
html.mk-shot .site-header, html.mk-shot .bottombar, html.mk-shot .toast { visibility: hidden !important; }
html.mk-shot .page--city .mk::after { display: none; } /* (the still is rendered without the section's foot fade) */
/* the studio grey eases back into the white page at the section's foot (no hard seam before the builder visit) */
.page--city .mk::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 (a phone browser's real 100svh is about 664 px on an iPhone): the callouts drop their line of detail and
   use their short names, so all of a stop's cards find room clear of the caption and the bar (the list keeps the
   detail for screen readers and the reduced-motion story) */
@media (max-width: 899px) and (max-height: 720px) {
  .page--city .mk-lab__note, .page--city .mk-lab__nm { display: none; }
  .page--city .mk-lab__sh { display: inline; }
}