/* css/pages/anna-model.css: the "North on 75" model (js/scenes/anna-model.js) and the markup between the model markers
   in anna.html. Owned by the model agent (audit/city-pages-brief.md section 1). The rules are melissa.css's model rules
   (the .mm block), carried over as .am so the two pages' models share one look: a realistic miniature in a porcelain
   rim on the studio grey of the white page (--stage-paper), its callouts with status tags, the captions and the stop
   index, the reduced-motion list. Anna's track: ten stops, 460svh desktop and 400svh phones (the brief's ranges). */

/* ------------------------------------------------------------------ the model
   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 .am { position: relative; background: var(--stage-paper, var(--paper-2)); }
.page--city .am__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 .am__pin { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.page--city .am__stage { position: relative; grid-row: 1; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: transparent; }
@media (min-width: 900px) { .page--city .am__stage { grid-column: 2; } }
.page--city .am__still { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.page--city .am__labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.page--city .am__copy { display: grid; gap: 18px; align-content: center; min-width: 0; }
@media (min-width: 900px) { .page--city .am__copy { grid-column: 1; grid-row: 1; } }
.page--city .am__h { font-weight: 300; font-size: clamp(2.5rem, 4.4vw, 4.5rem); line-height: .94; letter-spacing: -.05em; text-wrap: balance; }
.page--city .am__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; }
.page--city .am__beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.page--city .am__beat { display: grid; gap: 8px; align-content: start; justify-items: start; }
.page--city .am__beat h3 { font-weight: 400; font-size: clamp(1.375rem, 1.9vw, 1.875rem); line-height: 1.1; letter-spacing: -.03em; }
.page--city .am__beat p { max-width: 36ch; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.page--city .am__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 .am__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 .am__beat .btn { margin-top: 6px; }
.page--city .am__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 .am__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 .am__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 .am__legend .is-coming { background: color-mix(in srgb, #DCE6F2 55%, transparent); box-shadow: inset 0 0 0 1px var(--blue-fill); }
.page--city .am__index { display: none; }
.page--city .am__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 .am__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 .am__osm:hover, .page--city .am__osm:focus-visible { color: var(--ink); text-decoration-color: currentColor; }
.page--city .am__src { max-width: 46ch; }
.page--city .am__src .fineprint__body p + p { margin-top: 8px; }
/* the status tags (the callouts and the captions share them) */
.page--city .am-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 .am-tag--open { background: var(--ink); color: var(--paper); }
.page--city .am-tag--building { background: var(--blue-fill); color: #FFFFFF; }
.page--city .am-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 .am-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 .am-lab.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.page--city .am-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 .am-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 .am-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 .am-lab__box b { font-weight: 500; font-size: 15.5px; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
.page--city .am-lab.is-on .am-lab__box { animation: am-lab-in .5s var(--ease-out) both; }
@keyframes am-lab-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
/* a callout with a line of detail (Seventh and Interurban, Rosamond Town Center's anchors, Sprouts, Anna High School,
   Texas Instruments): the long name wraps in balanced lines, the detail sits under it a size below the name; the whole
   town keeps the short name and the status dot */
.page--city .am-lab--note .am-lab__box b { max-width: 15em; white-space: normal; text-wrap: balance; }
.page--city .am-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 .am-lab__sh { display: none; }
/* the whole town: every callout, compact (the name and a status dot; the list beside it has the words) */
.page--city .am__labels.is-all .am-lab__lead { height: calc(20px + var(--lift, 0px)); }
.page--city .am__labels.is-all .am-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 .am__labels.is-all .am-lab__box b { font-size: 12.5px; }
.page--city .am__labels.is-all .am-tag { min-height: 0; width: 8px; height: 8px; padding: 0; font-size: 0; order: -1; }
.page--city .am__labels.is-all .am-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 .am__labels.is-all .am-lab__note, .page--city .am__labels.is-all .am-lab__nm { display: none; }
.page--city .am__labels.is-all .am-lab__sh { display: inline; }
.page--city .am__labels.is-all .am-lab--note .am-lab__box b { max-width: none; white-space: nowrap; }

/* 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 .am__beat .am__more { font-size: .9375rem; line-height: 1.45; }
.page--city .am__more b { font-weight: 500; color: var(--ink); }
.page--city .am.is-pin .am__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 .am.is-pin { height: 460vh; height: 460svh; } /* (ten stops, paced by js/core/pace.js: 0.35 screen per beat weight) */
.page--city .am.is-pin .am__pin { position: sticky; top: 0; z-index: 2; display: block; height: 100vh; height: 100svh; padding: 0; overflow: clip; }
.page--city .am.is-pin .am__stage { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.page--city .am.is-pin .am__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 .am.is-pin .am__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 .am.is-pin .am__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 .am.is-pin .am__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 .am.is-pin .am__beats { gap: 0; min-height: 13.5rem; align-content: start; }
.page--city .am.is-pin .am__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 .am.is-pin .am__beat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.page--city .am.is-pin .am__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 .am.is-pin .am__index { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.page--city .am__index button { position: relative; width: 26px; height: 32px; padding: 0; background: transparent; cursor: pointer; }
.page--city .am__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 .am__index button.is-done::after { background: color-mix(in srgb, var(--ink) 62%, transparent); }
.page--city .am__index button[aria-current="step"]::after { width: 20px; margin-left: -10px; background: var(--blue-fill); }
.page--city .am__index button:hover::after, .page--city .am__index button:focus-visible::after { background: var(--blue-text); }
/* the last stop: me beside the button */
.page--city .am__me { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.page--city .am__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 .am.is-pin .am__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 .am__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 .am__skip:hover, .page--city .am__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 .am.is-live .am__still { pointer-events: none; }
html.am-shot .page--city .am .am__copy, html.am-shot .page--city .am .am__labels, html.am-shot .page--city .am .am__note, html.am-shot .page--city .am .am__skip, html.am-shot .page--city .am .am__pin::before { display: none; }
@media (min-width: 900px) and (max-height: 760px) {
  .page--city .am.is-pin .am__copy { gap: 12px; }
  .page--city .am.is-pin .am__h { font-size: clamp(2.125rem, 3.6vw, 3.25rem); }
  .page--city .am.is-pin .am__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 .am__stage { border-radius: 14px; }
  .page--city .am.is-pin { height: 400vh; height: 400svh; } /* phones: 0.29 small screen per beat weight (the brief's 360 to 400svh) */
  /* (the grey ends under the current caption, --am-cap = its foot, set by the controller: a short caption leaves the model
     more of a short screen) */
  .page--city .am.is-pin .am__pin::before { top: 0; right: 0; bottom: auto; left: 0; width: auto; height: calc(var(--am-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 .am.is-pin .am__copy { left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 12px); bottom: auto; width: auto; gap: 8px; align-content: start; }
  .page--city .am.is-pin .am__copy > .caps { display: none; }
  .page--city .am.is-pin .am__h { font-size: clamp(1.75rem, 8.1vw, 2.5rem); } /* (one line from 360 px up: a short phone keeps the room for the model) */
  .page--city .am.is-pin .am__beats { min-height: 8.6rem; }
  .page--city .am.is-pin .am__beat { gap: 6px; }
  .page--city .am.is-pin .am__beat h3 { font-size: 1.25rem; }
  .page--city .am.is-pin .am__beat p { font-size: .9375rem; line-height: 1.42; }
  .page--city .am.is-pin .am__beat--intro p:first-child { font-size: 1.125rem; }
  .page--city .am.is-pin .am__close { font-size: 1.375rem !important; }
  .page--city .am.is-pin .am__index, .page--city .am.is-pin .am__src { display: none; }
  .page--city .am.is-pin .am__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 .am.is-pin .am__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 .am__skip { top: auto; bottom: calc(var(--bar-h, 64px) + 8px); right: var(--gutter); }
  .page--city .am-lab__box { padding: 8px 11px 9px; gap: 5px; }
  .page--city .am-lab__box b { font-size: 13.5px; }
  .page--city .am-lab__note { max-width: 17.5em; font-size: 11.5px; line-height: 1.34; }
  .page--city .am-lab[data-site="rtc"] .am-lab__note { max-width: 15.5em; } /* (the anchors' list wraps in four short lines) */
  .page--city .am-lab__lead { height: calc(30px + var(--lift, 0px)); }
  .page--city .am-lab__box { bottom: calc(38px + var(--lift, 0px)); }
  /* the whole town on a phone: a touch smaller and closer to the dots, so all of them fit under the closing line on a
     short screen (the controller's layout() uses the same 22 px lead) */
  .page--city .am__labels.is-all .am-lab__lead { height: calc(14px + var(--lift, 0px)); }
  .page--city .am__labels.is-all .am-lab__box { bottom: calc(22px + var(--lift, 0px)); padding: 5px 9px 5px 8px; gap: 6px; }
  .page--city .am__labels.is-all .am-lab__box b { font-size: 12px; }
  .page--city .am-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 .am-lab.is-below .am-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 .am-lab.is-below .am-lab__box { top: 48px; bottom: auto; }
.page--city .am__labels.is-all .am-lab.is-below .am-lab__box { top: 28px; }
@media (max-width: 899px) { .page--city .am-lab.is-below .am-lab__box { top: 38px; } .page--city .am__labels.is-all .am-lab.is-below .am-lab__box { top: 22px; } }
/* reduced motion on desktop: the picture stays in view beside the list */
@media (min-width: 900px) { .page--city .am:not(.is-pin) .am__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 theme picks the half). Unpinned (reduced
   motion, no script) the box shows the part of a half that holds the model, x 0.20 to 0.86 and y 0.07 to 1 of it (the
   board and, up the causeway, the medallion; the empty paper beside the narrow medallion is left out), so the model is
   half as big again as the whole frame would give; paintStill()'s CROP is the same box */
.page--city .am:not(.is-pin) .am__stage { aspect-ratio: 1584 / 1395; }
.page--city .am:not(.is-pin) .am__still { inset: auto; left: 0; top: 0; width: calc(100% / .66); height: auto; object-fit: fill; transform: translate(-20%, -3.495%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page--city .am:not(.is-pin) .am__still { transform: translate(-20%, -53.562%); } }
:root[data-theme="dark"] .page--city .am:not(.is-pin) .am__still { transform: translate(-20%, -53.562%); }
/* ?amshot=1 renders the bare model for the still: nothing over it */
html.am-shot .site-header, html.am-shot .bottombar, html.am-shot .toast { visibility: hidden !important; }
/* the studio grey eases back into the white page at the section's foot (no hard seam before the next section) */
.page--city .am::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)); }
/* the smallest phones (an iPhone SE, 375 x 667): four cards under the downtown caption leave no room for the planned
   project's note, so its card there is its name and status (the note shows on every larger screen, and in the list) */
@media (max-width: 389px) and (max-height: 700px) { .page--city .am-lab[data-site="gtp"] .am-lab__note { display: none; } .page--city .am-lab[data-site="gtp"] .am-lab__box b { white-space: nowrap; } }