/* css/pages/melissa.css : Melissa only (linked from melissa.html alone, after city.css). Ashton, 2026-09-30: "more about
   melissa and not a random model of a home" and "do the white background".
   1. What's coming to Melissa: the town model (js/scenes/melissa-model.js; a realistic miniature in a porcelain rim since
      Ashton's 2026-10-01 "make it a little bit more realistic") on the studio grey of the white page (--stage-paper), its
      callouts, captions and stop index, and its reduced-motion list.
   2. White page: neutral versions of the warm (bone) tints city.css uses in the sections melissa.html shows.
   city.css stays shared with McKinney and Search and is not touched. */

/* ------------------------------------------------------------------ 1. 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 .mm { position: relative; background: var(--stage-paper, var(--paper-2)); }
.page--city .mm__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 .mm__pin { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.page--city .mm__stage { position: relative; grid-row: 1; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: transparent; }
@media (min-width: 900px) { .page--city .mm__stage { grid-column: 2; } }
.page--city .mm__still { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.page--city .mm__labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.page--city .mm__copy { display: grid; gap: 18px; align-content: center; min-width: 0; }
@media (min-width: 900px) { .page--city .mm__copy { grid-column: 1; grid-row: 1; } }
.page--city .mm__h { font-weight: 300; font-size: clamp(2.5rem, 4.4vw, 4.5rem); line-height: .94; letter-spacing: -.05em; text-wrap: balance; }
.page--city .mm__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; }
.page--city .mm__beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.page--city .mm__beat { display: grid; gap: 8px; align-content: start; justify-items: start; }
.page--city .mm__beat h3 { font-weight: 400; font-size: clamp(1.375rem, 1.9vw, 1.875rem); line-height: 1.1; letter-spacing: -.03em; }
.page--city .mm__beat p { max-width: 36ch; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.page--city .mm__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 .mm__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 .mm__beat .btn { margin-top: 6px; }
.page--city .mm__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 .mm__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 .mm__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 .mm__legend .is-coming { background: color-mix(in srgb, #DCE6F2 55%, transparent); box-shadow: inset 0 0 0 1px var(--blue-fill); }
.page--city .mm__index { display: none; }
.page--city .mm__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 .mm__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 .mm__osm:hover, .page--city .mm__osm:focus-visible { color: var(--ink); text-decoration-color: currentColor; }
.page--city .mm__src { max-width: 46ch; }
.page--city .mm__src .fineprint__body p + p { margin-top: 8px; }
/* the status tags (the callouts and the captions share them) */
.page--city .mm-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 .mm-tag--open { background: var(--ink); color: var(--paper); }
.page--city .mm-tag--building { background: var(--blue-fill); color: #FFFFFF; }
.page--city .mm-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 .mm-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 .mm-lab.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.page--city .mm-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 .mm-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 .mm-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 .mm-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 .mm-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 .mm__labels.is-all .mm-lab__brand { display: none; }
.page--city .mm-lab.is-on .mm-lab__box { animation: mm-lab-in .5s var(--ease-out) both; }
@keyframes mm-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 town keeps the short name and the status dot */
.page--city .mm-lab--note .mm-lab__box b { max-width: 15em; white-space: normal; text-wrap: balance; }
.page--city .mm-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 .mm-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 .mm__labels.is-all .mm-lab__lead { height: calc(20px + var(--lift, 0px)); }
.page--city .mm__labels.is-all .mm-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 .mm__labels.is-all .mm-lab__box b { font-size: 12.5px; }
.page--city .mm__labels.is-all .mm-tag { min-height: 0; width: 8px; height: 8px; padding: 0; font-size: 0; order: -1; }
.page--city .mm__labels.is-all .mm-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 .mm__labels.is-all .mm-lab__note, .page--city .mm__labels.is-all .mm-lab__nm { display: none; }
.page--city .mm__labels.is-all .mm-lab__sh { display: inline; }
.page--city .mm__labels.is-all .mm-lab--note .mm-lab__box b { max-width: none; white-space: nowrap; }

/* the detail line the callouts carry (F45's ranking, the stadium's facts), 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 .mm__beat .mm__more { font-size: .9375rem; line-height: 1.45; }
.page--city .mm__more b { font-weight: 500; color: var(--ink); }
.page--city .mm.is-pin .mm__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 .mm.is-pin { height: 460vh; height: 460svh; } /* (nine stops, paced by js/core/pace.js: 0.4 screen per beat weight) */
.page--city .mm.is-pin .mm__pin { position: sticky; top: 0; z-index: 2; display: block; height: 100vh; height: 100svh; padding: 0; overflow: clip; }
.page--city .mm.is-pin .mm__stage { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.page--city .mm.is-pin .mm__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 .mm.is-pin .mm__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 .mm.is-pin .mm__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 .mm.is-pin .mm__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 .mm.is-pin .mm__beats { gap: 0; min-height: 13.5rem; align-content: start; }
.page--city .mm.is-pin .mm__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 .mm.is-pin .mm__beat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.page--city .mm.is-pin .mm__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 .mm.is-pin .mm__index { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.page--city .mm__index button { position: relative; width: 26px; height: 32px; padding: 0; background: transparent; cursor: pointer; }
.page--city .mm__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 .mm__index button.is-done::after { background: color-mix(in srgb, var(--ink) 62%, transparent); }
.page--city .mm__index button[aria-current="step"]::after { width: 20px; margin-left: -10px; background: var(--blue-fill); }
.page--city .mm__index button:hover::after, .page--city .mm__index button:focus-visible::after { background: var(--blue-text); }
/* the last stop: me beside the button */
.page--city .mm__me { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.page--city .mm__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 .mm.is-pin .mm__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 .mm__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 .mm__skip:hover, .page--city .mm__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 .mm.is-live .mm__still { pointer-events: none; }
html.mm-shot .page--city .mm .mm__copy, html.mm-shot .page--city .mm .mm__labels, html.mm-shot .page--city .mm .mm__note, html.mm-shot .page--city .mm .mm__skip, html.mm-shot .page--city .mm .mm__pin::before { display: none; }
@media (min-width: 900px) and (max-height: 760px) {
  .page--city .mm.is-pin .mm__copy { gap: 12px; }
  .page--city .mm.is-pin .mm__h { font-size: clamp(2.125rem, 3.6vw, 3.25rem); }
  .page--city .mm.is-pin .mm__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 .mm__stage { border-radius: 14px; }
  .page--city .mm.is-pin { height: 595vh; height: 595svh; } /* phones: 0.55 small screen per beat weight (pacing plan) */
  /* (the grey ends under the current caption, --mm-cap = its foot, set by the controller: a short caption leaves the model
     more of a short screen) */
  .page--city .mm.is-pin .mm__pin::before { top: 0; right: 0; bottom: auto; left: 0; width: auto; height: calc(var(--mm-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 .mm.is-pin .mm__copy { left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 12px); bottom: auto; width: auto; gap: 8px; align-content: start; }
  .page--city .mm.is-pin .mm__copy > .caps { display: none; }
  .page--city .mm.is-pin .mm__h { font-size: clamp(1.875rem, 8.4vw, 2.5rem); }
  .page--city .mm.is-pin .mm__beats { min-height: 8.6rem; }
  .page--city .mm.is-pin .mm__beat { gap: 6px; }
  .page--city .mm.is-pin .mm__beat h3 { font-size: 1.25rem; }
  .page--city .mm.is-pin .mm__beat p { font-size: .9375rem; line-height: 1.42; }
  .page--city .mm.is-pin .mm__beat--intro p:first-child { font-size: 1.125rem; }
  .page--city .mm.is-pin .mm__close { font-size: 1.375rem !important; }
  .page--city .mm.is-pin .mm__index, .page--city .mm.is-pin .mm__src { display: none; }
  .page--city .mm.is-pin .mm__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 .mm.is-pin .mm__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 .mm__skip { top: auto; bottom: calc(var(--bar-h, 64px) + 8px); right: var(--gutter); }
  .page--city .mm-lab__box { padding: 8px 11px 9px; gap: 5px; }
  .page--city .mm-lab__box b { font-size: 13.5px; }
  .page--city .mm-lab__note { max-width: 17.5em; font-size: 11.5px; line-height: 1.34; }
  .page--city .mm-lab[data-site="mhs"] .mm-lab__note { max-width: 15.5em; } /* (narrow enough to leave the stadium's video board in view) */
  .page--city .mm-lab__lead { height: calc(30px + var(--lift, 0px)); }
  .page--city .mm-lab__box { bottom: calc(38px + var(--lift, 0px)); }
  /* the whole town 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 .mm__labels.is-all .mm-lab__lead { height: calc(14px + var(--lift, 0px)); }
  .page--city .mm__labels.is-all .mm-lab__box { bottom: calc(22px + var(--lift, 0px)); padding: 5px 9px 5px 8px; gap: 6px; }
  .page--city .mm__labels.is-all .mm-lab__box b { font-size: 12px; }
  .page--city .mm-tag { min-height: 19px; padding: 0 8px; font-size: 9.5px; letter-spacing: .12em; }
}

/* ------------------------------------------------------------------ 2. white page: neutral tints (city.css uses bone ones)
   The sections melissa.html shows: the growth band, the proof (the develop figure, the spotlight, the Coleman card),
   the ghost buttons on ink. Same selectors as city.css, loaded after it. */
.page--city .ink-band .growth__streets path { stroke: rgba(255, 255, 255, .14); }
.page--city .ink-band .growth__figs > div { border-top-color: rgba(255, 255, 255, .5); }
.page--city .ink-band .btn--ghost { border-color: rgba(255, 255, 255, .5); }
.page--city .proof-card--story .proof-card__result { border-top-color: rgba(255, 255, 255, .16); }
.page--city .develop { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 120px -60px rgba(0, 0, 0, .95); }
.page--city .develop__ink { background: #F7F7F6; }
.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 .proof-card__me { box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
.page--city .proof-card--story img.proof-card__me { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 0 0 4px color-mix(in srgb, var(--blue-fill) 26%, transparent); }
/* a callout that would cover another flips under its landmark */
.page--city .mm-lab.is-below .mm-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 .mm-lab.is-below .mm-lab__box { top: 48px; bottom: auto; }
.page--city .mm__labels.is-all .mm-lab.is-below .mm-lab__box { top: 28px; }
@media (max-width: 899px) { .page--city .mm-lab.is-below .mm-lab__box { top: 38px; } .page--city .mm__labels.is-all .mm-lab.is-below .mm-lab__box { top: 22px; } }
/* reduced motion on desktop: the picture stays in view beside the list */
@media (min-width: 900px) { .page--city .mm:not(.is-pin) .mm__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 .mm:not(.is-pin) .mm__still { object-position: 50% 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page--city .mm:not(.is-pin) .mm__still { object-position: 50% 100%; } }
:root[data-theme="dark"] .page--city .mm:not(.is-pin) .mm__still { object-position: 50% 100%; }
/* ?mmshot=1 renders the bare model for the still: nothing over it */
html.mm-shot .site-header, html.mm-shot .bottombar, html.mm-shot .toast { visibility: hidden !important; }
/* the hero's two facts (the model carries the rest): the road names wrap rather than run off a phone */
.page--city .cwin .cstats dd { white-space: normal; font-size: clamp(1.75rem, 2.6vw, 2.75rem); }
@media (max-width: 899px) { .page--city .cwin .cstats dd { font-size: clamp(1.625rem, 7.4vw, 2.25rem); } }
/* the studio grey eases back into the white page at the section's foot (no hard seam before the builder visit) */
.page--city .mm::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)); }