/* ==========================================================================
   Fallcast site. One stylesheet for every page.

   Design notes
   - Photo-led hero, full-bleed maps, restrained type: a serif for the
     headlines and the story, the system sans for everything you tap.
   - The six class colors and the eight Normal colors are the app's own
     (PeeperKit/ColorClass.swift, TimingPalette.rendered). They are data and
     are set from JS (fc-map.js), never restyled here.
   - Light and dark follow the system. Every color is a token below.
   - 390 px first: nothing is wider than the viewport, no sideways scroll.
   ========================================================================== */

:root {
  --paper:   #FBF7F0;
  --card:    #FFFFFF;
  --ink:     #241C16;
  --muted:   #5C5049;
  --link:    #A8410F;
  --rule:    #E4D9C9;
  --accent:  #E0601E;
  --tint:    #F3EBDD;
  --shadow:  0 10px 30px rgba(36, 28, 22, .16), 0 2px 6px rgba(36, 28, 22, .10);

  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 72rem;
  --gutter: 1.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #16120F;
    --card:   #211B16;
    --ink:    #F2EAE0;
    --muted:  #B9AA9C;
    --link:   #F5A06B;
    --rule:   #3A3029;
    --tint:   #1D1713;
    --shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* belt and braces; nothing should need it */
}

img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

.skip { position: absolute; left: .75rem; top: -4rem; z-index: 100; background: var(--card); color: var(--ink); padding: .6rem .9rem; border-radius: 8px; }
.skip:focus { top: .75rem; }

/* ---------- Header (floats over the hero) ---------- */

.site-head { position: absolute; z-index: 20; top: 0; left: 0; right: 0; color: #fff; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
.logo { display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.logo img { width: 34px; height: 34px; border-radius: 8px; display: block; }
.head-nav { display: flex; align-items: center; gap: 1.1rem; font-size: .95rem; }
.head-nav a { color: inherit; text-decoration: none; opacity: .92; }
.head-nav a:hover { opacity: 1; text-decoration: underline; }
.pill { display: inline-block; border: 1.5px solid rgba(255,255,255,.85); border-radius: 999px; padding: .35rem .95rem; font-weight: 600; }
.pill:hover { background: rgba(255,255,255,.16); text-decoration: none !important; }
@media (max-width: 520px) { .head-nav .hide-sm { display: none; } }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  color: #fff;
  min-height: min(92svh, 860px);
  min-height: min(92vh, 860px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  background: #3a2418;         /* shows while the photo loads */
}
@supports (height: 1svh) { .hero { min-height: min(92svh, 860px); } }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(18,12,8,.55) 0%, rgba(18,12,8,.10) 26%, rgba(18,12,8,.28) 52%, rgba(18,12,8,.82) 100%);
}
.hero .wrap { width: 100%; padding-top: 7rem; padding-bottom: 3.4rem; }
.hero-copy { max-width: 42rem; }

.status {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; padding: .3rem .85rem; font-size: .85rem; font-weight: 600; letter-spacing: .01em;
}
.status i { width: .5rem; height: .5rem; border-radius: 50%; background: #F5A06B; }

.brand { font-family: var(--serif); font-weight: 700; font-size: clamp(3.6rem, 13vw, 8.5rem); line-height: .95; letter-spacing: -.035em; margin: 1.1rem 0 .35rem; }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, 3.6vw, 2.1rem); line-height: 1.25; letter-spacing: -.01em; margin: 0 0 1.6rem; max-width: 30ch; text-wrap: balance; }
.hero h1 .kicker { display: block; font-family: var(--sans); font-size: .9rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: .5rem; }
.hero h1.state-title { font-weight: 700; font-size: clamp(3rem, 11vw, 7rem); line-height: .98; letter-spacing: -.035em; margin-bottom: 1.4rem; max-width: none; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center; }
.store { display: inline-block; line-height: 0; padding: 4px; }
.store img { width: 150px; height: 50px; display: block; }
.credit { position: absolute; right: var(--gutter); bottom: .75rem; z-index: 2; font-size: .72rem; line-height: 1.3; color: rgba(255,255,255,.82); text-align: right; max-width: 70%; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.credit a { color: inherit; }

/* State pages without a photo get a color treatment instead. */

/* ---------- State picker (a combobox) ---------- */

.picker { position: relative; width: min(100%, 26rem); }
.picker-box { position: relative; }
.picker input {
  width: 100%; height: 3.4rem; border: 0; border-radius: 14px;
  background: #fff; color: #241C16;
  font: 500 1rem/1 var(--sans); font-size: max(16px, 1rem);   /* >= 16px: no iOS zoom on focus */
  padding: 0 3rem 0 3rem; box-shadow: 0 6px 24px rgba(0,0,0,.28);
}
.picker input::placeholder { color: #6a5c52; }
.picker .ico { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; color: #6a5c52; }
.picker .ico { left: 1rem; width: 20px; height: 20px; }

.picker ul {
  position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: .35rem; list-style: none; max-height: min(22rem, 52vh); overflow-y: auto;
  background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow);
  overscroll-behavior: contain;
}
.picker li { padding: .6rem .75rem; border-radius: 9px; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; font-size: 1rem; line-height: 1.25; }
.picker li small { color: var(--muted); font-size: .8rem; letter-spacing: .04em; }
.picker li[aria-selected="true"], .picker li:hover { background: var(--tint); }
.picker li[aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.picker .empty { padding: .8rem .75rem; color: var(--muted); font-size: .95rem; }

/* ---------- Map sections ---------- */

.mapsec { padding: 3.2rem 0 0; }
.mapsec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.2rem; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem; }
.mapsec h2 { font-family: var(--serif); font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.08; letter-spacing: -.025em; margin: 0; font-weight: 700; }
.datelabel { margin: .45rem 0 0; color: var(--muted); font-size: 1rem; min-height: 1.6em; }

.seg { display: inline-flex; background: var(--tint); border: 1px solid var(--rule); border-radius: 999px; padding: 3px; }
.seg button {
  font: 600 .95rem/1 var(--sans); color: var(--muted); background: transparent; border: 0; cursor: pointer;
  padding: .7rem 1.25rem; border-radius: 999px; min-width: 5.2rem;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.mapbox { position: relative; width: 100%; height: clamp(440px, 76svh, 820px); background: var(--tint); overflow: hidden; }
.mapbox.state { height: clamp(460px, 74svh, 780px); }
.mapbox .canvas { position: absolute; inset: 0; }
.mapbox .msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; color: var(--muted); font-size: .95rem; }

.mapbox noscript img { width: 100%; height: 100%; object-fit: contain; }

.legend { margin: 1.1rem auto 0; }
.legend ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem .5rem; grid-template-columns: repeat(var(--cols, 6), 1fr); }
.legend li { font-size: .82rem; line-height: 1.2; color: var(--muted); font-weight: 600; }
.legend li::before { content: ""; display: block; height: 10px; border-radius: 3px; background: var(--c); margin-bottom: .45rem; }
@media (max-width: 640px) { .legend ol { grid-template-columns: repeat(3, 1fr); } .legend.n8 ol { grid-template-columns: repeat(4, 1fr); } .legend li { font-size: .76rem; } }

.attrib { font-size: .76rem; color: var(--muted); margin: .9rem 0 0; }
.attrib a { color: inherit; }

/* MapLibre chrome, retuned */
.maplibregl-ctrl-group { border-radius: 10px !important; box-shadow: var(--shadow) !important; background: var(--card) !important; overflow: hidden; }
.maplibregl-ctrl-group button { width: 38px !important; height: 38px !important; }
@media (prefers-color-scheme: dark) { .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); } }
.maplibregl-ctrl-attrib { font-size: 11px; }
.maplibregl-popup-content { padding: 0 !important; border-radius: 12px !important; background: var(--card) !important; color: var(--ink) !important; box-shadow: var(--shadow) !important; font-family: var(--sans); }
.maplibregl-popup-tip { display: none; }
.maplibregl-popup-close-button { display: none; }
.pop { padding: .75rem .95rem .8rem; min-width: 10.5rem; max-width: 15rem; }
.pop .row { display: flex; align-items: center; gap: .55rem; font-size: 1.02rem; font-weight: 700; line-height: 1.2; }
.pop .dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.7) inset; }

.pop .go { display: inline-block; margin-top: .55rem; font-size: .9rem; font-weight: 700; }
.pop .absent { color: var(--muted); font-weight: 600; }
.pop .st { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }

/* ---------- Story (sticky map, stepping through this season) ---------- */

/* ---------- Nearby / all states ---------- */

.copy { padding: 3.5rem 0 0; }
.copy .lede { font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.5; max-width: 40rem; margin: 0; }
.nearby { padding: 2.5rem 0 0; }
.nearby h2 { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .8rem; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.chips a { display: inline-block; border: 1px solid var(--rule); background: var(--card); color: var(--ink); text-decoration: none; border-radius: 999px; padding: .5rem 1rem; font-weight: 600; font-size: .95rem; }
.chips a:hover { border-color: var(--accent); }

.states-list { list-style: none; margin: 0; padding: .4rem 0 1.4rem; columns: 2; column-gap: 1.5rem; }
@media (min-width: 640px) { .states-list { columns: 3; } }
@media (min-width: 960px) { .states-list { columns: 5; } }
.states-list li { break-inside: avoid; margin: 0; }
.states-list a { display: block; padding: .38rem 0; color: var(--ink); text-decoration: none; }
.states-list a:hover { color: var(--link); text-decoration: underline; }

footer.site-foot { margin-top: 4.5rem; padding: 2.2rem 0 3rem; border-top: 1px solid var(--rule); font-size: .88rem; color: var(--muted); }
footer.site-foot .wrap { display: grid; gap: .8rem; }
footer.site-foot .links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
footer.site-foot a { color: var(--ink); }
footer.site-foot p { margin: 0; }

/* ==========================================================================
   State story: the map is the page; cards scroll over it.
   ========================================================================== */

.site-head.solid { position: fixed; color: var(--ink); background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
.site-head.solid .wrap { padding-top: .6rem; padding-bottom: .6rem; }
.site-head.solid .pill { border-color: currentColor; }
.site-head.solid .pill:hover { background: var(--tint); }

/* The map's stage is as tall as the LARGE viewport (lvh): on a phone that is the screen with Safari's toolbars hidden, so
   the map covers the screen whether they are showing or not and nothing re-sizes when they come and go. (100vh is the
   fallback; story.js raises --stage-h if a browser ever shows more than that.) Cards and beats keep svh. */
.sp { position: relative; --stage-h: 100vh; }
@supports (height: 100lvh) { .sp { --stage-h: 100lvh; } }
/* The overlay layer (.sp-over) is a second sticky box exactly the size of the stage and pinned with it. It holds the legend and,
   on a phone, the one docked card. It sits between the map and the cards on a wide screen (as the legend always did) and
   ABOVE the cards on a phone, so the title scrolls up UNDER the legend instead of over it. */
.sp-over { position: sticky; top: 0; height: var(--stage-h); z-index: 1; pointer-events: none; }
.sp-dock { display: none; }
.sp-stage { position: sticky; top: 0; height: var(--stage-h); margin-top: calc(-1 * var(--stage-h)); z-index: 0; background: var(--tint); overflow: hidden; contain: layout paint; }
.sp-stage .canvas { position: absolute; inset: 0; }
.sp-stage .msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; color: var(--muted); }
.sp-legend {
  position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); top: 3.9rem;
  padding: .55rem .75rem .6rem; border-radius: 12px; border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--card) 90%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--shadow);
}
.sp-legend .legend { margin: 0; }
.sp-legend .legend ol { gap: .35rem .5rem; }
.sp-legend .legend li { font-size: .7rem; }
.sp-legend .legend li::before { height: 7px; margin-bottom: .3rem; }
@media (min-width: 821px) {
  .sp-legend { top: auto; left: auto; bottom: 1.4rem; right: 1.2rem; width: min(34rem, 46vw); }
  .sp-legend .legend li { font-size: .74rem; }
}

.sp-steps { position: relative; z-index: 2; margin-top: calc(-1 * var(--stage-h)); pointer-events: none; }
.sp-step { position: relative; }
.sp-step > .wrap { display: grid; }
.sp-card, .sp-tools { grid-area: 1 / 1; align-self: start; position: sticky; top: 17vh; top: 17svh; pointer-events: auto; width: min(26rem, 100%); }
.sp-card {
  background: color-mix(in srgb, var(--card) 95%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--shadow); padding: 1.15rem 1.3rem 1.25rem;
  opacity: .55; transition: opacity .35s;
}
.sp-step.active .sp-card { opacity: 1; }
.sp-card p { margin: 0; font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.34rem); line-height: 1.45; letter-spacing: -.005em; }
.sp-card mark { background: transparent; color: inherit; border-radius: 5px; padding: 0 .1em; margin: 0 -.1em; transition: background .35s, box-shadow .35s; }
.sp-card mark.on { background: rgba(224, 96, 30, .24); box-shadow: 0 0 0 2px rgba(224, 96, 30, .24); }

.sp-card.title { width: min(30rem, 100%); padding: 1.4rem 1.5rem 1.5rem; opacity: 1; }
.sp-card .status { font-family: var(--sans); font-size: .85rem; line-height: 1.3; }
.sp-card.title .status { background: var(--tint); border-color: var(--rule); color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sp-card.title h1 { font-family: var(--serif); margin: .9rem 0 1.1rem; font-size: clamp(2.8rem, 8vw, 4.6rem); line-height: .98; letter-spacing: -.035em; font-weight: 700; }
.sp-card.title h1 .kicker { display: block; font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; }
.sp-card.title .picker { width: 100%; }
.sp-card.title .picker input { box-shadow: none; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.sp-card.title .picker input::placeholder { color: var(--muted); }
.sp-card.title .picker .ico { color: var(--muted); }
.sp-card .cue { margin: 1rem 0 0; font: 600 .85rem/1.2 var(--sans); letter-spacing: 0; color: var(--muted); display: flex; align-items: center; gap: .5rem; }
.cue svg { width: 16px; height: 16px; }

.beats { grid-area: 1 / 1; pointer-events: none; }
.beat { height: 78vh; height: 78svh; }
.beat.tall { height: 100vh; height: 100svh; }

/* Photos: open with the stop they belong to, close without one. */
.ph { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
.ph.on { grid-template-rows: 1fr; }
.ph-in { overflow: hidden; min-height: 0; }
.ph-item { display: none; margin: 0 0 .95rem; }
.ph-item.on { display: block; }
.ph-item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; background: var(--tint); }
.ph-item figcaption { font-family: var(--sans); font-size: .74rem; line-height: 1.4; color: var(--muted); margin-top: .45rem; }
.ph-item .pl { display: block; color: var(--ink); font-weight: 600; font-size: .8rem; }
.ph-item a { color: inherit; }

/* The last step: the toggle, and the map is yours. */
.sp-step.explore .beat { height: 100vh; height: 100svh; }
.sp-tools { align-self: end; top: auto; bottom: 1.2rem; width: min(24rem, 100%); opacity: 0; transition: opacity .35s; display: block; }
.sp.exploring .sp-tools { opacity: 1; }
.sp-tools .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.sp-tools .datelabel { margin: .7rem 0 0; font-size: .92rem; min-height: 1.3em; }

.sp-tools .seg button { padding: .65rem 1.15rem; }

@media (max-width: 820px) {
  .sp-card, .sp-tools { align-self: end; top: auto; bottom: .75rem; width: 100%; }
  .sp-card:not(.title) { max-height: calc(100svh - 8rem); overflow-y: auto; }
  .sp-card p { font-size: 1.12rem; }
  .ph-item img { aspect-ratio: 16 / 9; }
  .sp-card.title { padding: 1.1rem 1.2rem 1.2rem; }
  .sp-card.title h1 { font-size: clamp(2.6rem, 14vw, 3.6rem); margin: .7rem 0 .9rem; }
  .sp-tools { bottom: .75rem; }
  .sp.exploring .sp-legend { top: 3.9rem; }

  /* ONE docked card (story.js builds it). The step cards in the page become invisible spacers: they keep their size, so the
     timing of the steps and of the camera is unchanged, but nothing sticky is left to rise, pin and snap at a step boundary.
     The dock is pinned to the bottom of the SMALL viewport (toolbars shown) and never moves: the stage is as tall as the large
     one, so the offset is the difference. Content swaps with a short crossfade; between beats of one step only the marks and
     the photo change. */
  .sp-over { z-index: 3; }
  .sp.docked .sp-step:not(.explore) .sp-card { opacity: 0; pointer-events: none; transition: none; }
  .sp-dock { display: block; position: absolute; left: var(--gutter); right: var(--gutter); height: 0; bottom: max(.75rem, calc(var(--stage-h) - 100svh + .75rem)); }       /* a line: the panes hang up from it, so the dock itself has no height to change */
  .sp-pane { position: absolute; left: 0; right: 0; bottom: 0; min-width: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility 0s linear .22s; }
  .sp-pane.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .22s ease; }
  .sp-pane-tools { visibility: visible; transition: opacity .22s ease; }                 /* the toggle is a real control: it stays in the accessibility tree and the tab order, and shows when it takes focus */
  .sp-pane-tools:focus-within { opacity: 1; pointer-events: auto; }
  .sp-pane.still .ph { transition: none; }
  /* In the dock a photo never pops: all of a step's photos stay laid out in one stack, the one that is on is opaque, and the row
     eases open and shut (the page's own cards switch photos with display, which closes a card in one frame). */
  .sp-dock .ph-in { display: grid; }
  .sp-dock .ph-item { display: block; grid-area: 1 / 1; opacity: 0; transition: opacity .3s ease; }
  .sp-dock .ph-item.on { opacity: 1; }
  .sp-dock .ph-item:not(.on) { pointer-events: none; }
  .sp-pane.still .ph-item { transition: none; }
  .sp-dock .sp-card, .sp-dock .sp-tools { position: relative; top: auto; bottom: auto; width: 100%; margin: 0; opacity: 1; transition: none; }
  .nomap .sp-dock { display: none; }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) { .sp-pane, .sp-pane.on, .sp-dock .ph, .sp-dock .ph-item { transition: none; } }

.sp-stage .maplibregl-ctrl-top-right { top: 3.6rem; }
@media (max-width: 820px) { .sp-stage .maplibregl-ctrl-top-right { top: 8.6rem; } .sp-stage .maplibregl-ctrl-top-left { top: 8.6rem; left: .4rem; max-width: calc(100% - 4.5rem); } .sp-stage .maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--paper) 80%, transparent) !important; color: var(--ink); } }

.picker[data-flip="up"] ul { top: auto; bottom: calc(100% + 6px); }
.seg button:disabled { opacity: .4; cursor: default; }

@media (max-width: 640px) { .mapbox:not(.state) { height: clamp(330px, 56svh, 480px); } }

/* ==========================================================================
   Round 2
   ========================================================================== */

/* ---- Compact home hero ---- */
.hero.compact { min-height: min(54svh, 500px); min-height: min(54vh, 500px); }
@supports (height: 1svh) { .hero.compact { min-height: min(54svh, 500px); } }
.hero.compact::after { background: linear-gradient(180deg, rgba(18,12,8,.50) 0%, rgba(18,12,8,.06) 30%, rgba(18,12,8,.18) 55%, rgba(18,12,8,.72) 100%); }
.hero.compact .wrap { padding-top: 5.2rem; padding-bottom: 2.4rem; }
.hero.compact .status { background: none; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .92; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.hero.compact .brand { font-size: clamp(2.6rem, 6.2vw, 4.4rem); margin: .35rem 0 .3rem; text-shadow: 0 2px 22px rgba(0,0,0,.35); }
.hero.compact h1 { font-size: clamp(1.02rem, 2vw, 1.4rem); margin: 0 0 1.1rem; max-width: 34ch; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.hero.compact .hero-copy { max-width: 36rem; }
@media (max-width: 520px) {
  .hero.compact { min-height: 0; }
  .hero.compact .wrap { padding-top: 4.6rem; padding-bottom: 1.5rem; }
  .hero.compact .brand { font-size: 2.5rem; }
  .hero.compact .credit { position: static; text-align: left; max-width: none; padding: .55rem var(--gutter) 0; font-size: .7rem; }
  .hero.compact .hero-actions { gap: .6rem 1rem; }
}
.hero .picker input { height: 3.1rem; }
.mapsec { padding-top: 2.2rem; }

/* ---- Search: the nav icon, the overlay, grouped results ---- */
.nav-search { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .95; }
.nav-search:hover { background: rgba(255,255,255,.18); }
.site-head.solid .nav-search:hover { background: var(--tint); }
.nav-search svg { width: 20px; height: 20px; }
.picker .ico { z-index: 1; }
.picker input { padding-right: 1rem; }
.picker ul .grp { padding: .55rem .75rem .25rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); cursor: default; display: block; }
.picker li[role=option] small { text-align: right; }

.picker li mark { background: transparent; color: inherit; font-weight: 700; }
.picker .empty { color: var(--muted); }

.search-overlay { position: fixed; inset: 0; z-index: 200; display: grid; align-items: start; justify-items: center; padding: 8vh var(--gutter) 0; }
.search-overlay[hidden] { display: none; }
.search-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--paper) 62%, rgba(20,14,10,.55)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.search-dialog { position: relative; width: min(34rem, 100%); }
.search-dialog .picker { width: 100%; }
.search-dialog .picker ul { position: static; margin-top: .5rem; max-height: min(26rem, 62vh); }
.search-dialog .picker input { border: 1px solid var(--rule); background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.search-dialog .picker input::placeholder { color: var(--muted); }
.search-dialog .picker .ico { color: var(--muted); }

/* ---- State pages: a light title over the map, not a box ---- */
.sp-title { grid-area: 1 / 1; align-self: start; position: sticky; top: 17vh; top: 17svh; pointer-events: auto; width: min(24rem, 100%); position: sticky; isolation: isolate; padding: .2rem 0; }
.sp-title::before { content: ""; position: absolute; z-index: -1; inset: -2.4rem -3.2rem -2rem -2.2rem; background: radial-gradient(closest-side, color-mix(in srgb, var(--paper) 86%, transparent) 55%, transparent); }
.sp-title .kicker, .state-title .kicker { margin: 0 0 .1rem; font: 700 .78rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sp-title h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(3rem, 7vw, 5rem); line-height: .96; letter-spacing: -.035em; margin: 0 0 .5rem; color: var(--ink); text-shadow: 0 0 22px var(--paper), 0 0 6px var(--paper); }
.sp-title .status-small { margin: 0; font: 600 .8rem/1.3 var(--sans); color: var(--muted); }
.sp-title .cue { display: flex; align-items: center; gap: .4rem; margin: .9rem 0 0; font: 600 .8rem/1.2 var(--sans); color: var(--muted); }
.sp-title .cue svg { width: 14px; height: 14px; }
@media (max-width: 820px) {
  .sp-title { align-self: end; position: relative; top: auto; bottom: auto; margin-bottom: 1.4rem; width: 100%; }      /* not sticky: it scrolls away with the page, nothing to snap */
  .sp-title::before { inset: -3rem -1.1rem -1rem -1.1rem; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--paper) 88%, transparent) 55%); }
  .sp-title h1 { font-size: clamp(2.6rem, 14vw, 3.6rem); }
}
.state-title h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1; letter-spacing: -.03em; margin: 0; }
.state-top { padding-top: 5.4rem; }
.state-top .datelabel { margin-top: .5rem; }

/* ---- Story beats: more scroll between camera moves ---- */
.beat { height: 100vh; height: 100svh; }
.beat.tall { height: 100vh; height: 100svh; }

/* ---- All-states index ---- */
.index-page { padding: 6rem 0 1rem; }
.index-page h1 { font-family: var(--serif); font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -.03em; line-height: 1.05; margin: 0 0 .6rem; }

.index-page .region { padding-top: 1.8rem; border-top: 1px solid var(--rule); margin-top: 1.8rem; }
.index-page .region h2 { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.index-page .states-list { padding-bottom: 0; }
.site-foot { margin-top: 4.5rem; padding: 2rem 0 2.6rem; border-top: 1px solid var(--rule); font-size: .85rem; color: var(--muted); }
.site-foot .wrap { display: grid; gap: .7rem; }
.site-foot .links { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; }
.site-foot a { color: var(--ink); }
.site-foot p { margin: 0; }
.plain-state .copy { padding-top: 2.5rem; }

/* Story: the legend and the date label show only while the map is pinned */

/* Home: one map. The +/- buttons and the Today | Normal toggle belong to the last step. */

/* Home map: Progression's vertical timeline (circles joined by a line; the selected date is filled) */
.timeline { position: absolute; z-index: 3; left: .9rem; bottom: 1rem; display: flex; flex-direction: column; padding: .55rem .8rem .55rem .65rem; border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.timeline[hidden] { display: none; }
.timeline button { position: relative; display: flex; align-items: center; gap: .7rem; height: 2.15rem; padding: 0; border: 0; background: none; cursor: pointer; font: 600 .86rem/1 var(--sans); color: var(--muted); text-align: left; }
.timeline button:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: calc(50% + 7px); width: 2px; height: calc(100% - 14px); background: color-mix(in srgb, var(--muted) 38%, transparent); border-radius: 1px; }
.timeline .dot { position: relative; z-index: 1; flex: none; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--muted) 65%, transparent); background: var(--paper); }
.timeline button:hover { color: var(--ink); }
.timeline button:hover .dot { border-color: var(--accent); }
.timeline button[aria-checked="true"] { color: var(--ink); font-weight: 700; }
.timeline button[aria-checked="true"] .dot { background: var(--accent); border-color: var(--accent); }
.timeline .l-short { display: none; }
@media (max-width: 520px) {
  .timeline { left: .45rem; bottom: .6rem; padding: .4rem .55rem .4rem .45rem; }
  .timeline button { height: 1.85rem; font-size: .76rem; gap: .5rem; }
  .timeline button:not(:last-child)::after { top: calc(50% + 6px); height: calc(100% - 12px); }
  .timeline .l-long { display: none; }
  .timeline .l-short { display: inline; }
}
@media (max-width: 520px) { .seg button { min-width: 0; padding: .65rem 1rem; } }

/* Vermont story: the timeline sits on the right on a wide screen, and under the legend on a phone */
.sp-stage .timeline { left: auto; right: 1.2rem; bottom: auto; top: 50%; transform: translateY(-50%); }
@media (max-width: 820px) {
  .sp-stage .timeline { right: auto; left: .45rem; top: 9.4rem; bottom: auto; transform: none; }
}
.sp-stage .timeline[hidden] { display: none; }
.sp-tools .seg button { padding: .65rem .9rem; min-width: 4.4rem; }
.sp-step > .wrap > * { min-width: 0; }
@media (max-width: 520px) {
  .sp-tools { padding: .9rem 1rem 1rem; }
  .sp-tools .seg { max-width: 100%; }
  .sp-tools .seg button { padding: .6rem .62rem; font-size: .86rem; min-width: 0; }
  .seg button { padding: .6rem .8rem; }
}
@media (max-width: 460px) {
  .site-head .wrap { gap: .4rem; }
  .logo { font-size: 1.05rem; gap: .45rem; }
  .head-nav { gap: .25rem; }
  .pill { padding: .32rem .8rem; font-size: .9rem; }
}

.sp, .sp-steps { overflow-x: clip; }

/* ---- Progression as a scroll track ----------------------------------------------------------- */
.track { position: relative; overflow-anchor: none; }
.mapsec.tracking .pin { position: sticky; top: var(--pin-top, 0px); display: flex; flex-direction: column; background: var(--paper); z-index: 2; overflow: hidden; }
.mapsec.tracking .pin .mapsec-head { padding-top: .9rem; margin-bottom: .7rem; flex: none; }
.mapsec.tracking .pin .mapbox, .mapsec.tracking .pin .mapbox.state { flex: 1 1 auto; height: auto; min-height: 0; }
.mapsec.tracking .pin .legend, .mapsec.tracking .pin .wrap:last-child { flex: none; }
.mapsec.tracking .pin .legend { margin-top: .7rem; }
.mapsec.tracking .pin .attrib { margin: .5rem 0 .7rem; }
.plain-state .mapsec { --pin-top: 56px; }

/* Story: after the last stop the map stays pinned (nothing changes) before the page moves on */
.dwell { height: 250vh; height: 250svh; }

/* Pinned Progression: the block is a flex column, and auto-margined .wrap/.legend children would shrink to their content
   (that squeezed the legend into a narrow column). They fill the width, up to the page width, exactly as unpinned. */
.mapsec.tracking .pin > .wrap, .mapsec.tracking .pin > .legend { width: 100%; box-sizing: border-box; }

/* On a phone the timeline sits above the map's own attribution line, never over it. */
@media (max-width: 520px) { .mapbox .timeline { bottom: 2.3rem; } }
/* Vermont story on a narrow screen: everything that hangs from the top sits just under the legend, whatever height it has. */
@media (max-width: 820px) {
  .sp-stage .maplibregl-ctrl-top-right, .sp-stage .maplibregl-ctrl-top-left { top: calc(var(--lg-bottom, 9rem) + 6px); }
  .sp-stage .timeline { top: calc(var(--lg-bottom, 9rem) + 34px); }
}

/* ==========================================================================
   Launch additions: states by region, the app, the explainer, credits, no map
   ========================================================================== */

/* ---- Home: the app, mostly pictures ---- */
.app-sec { padding: 4.5rem 0 0; }
.app-line { font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.45; max-width: 40rem; margin: 0 0 1.6rem; }
.shots { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
         margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) .4rem; scroll-padding: 0 var(--gutter); }
.shots img { flex: 0 0 62%; width: 62%; height: auto; scroll-snap-align: start; border-radius: 14px; background: var(--tint); }
@media (min-width: 40rem) {
  .shots { overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; }
  .shots img { flex: 1 1 0; width: 0; min-width: 0; }
}
.app-sec .store { margin-top: 1.1rem; }
.more { margin-top: 2.6rem; margin-bottom: 0; font-size: 1rem; }
.more a { font-weight: 600; }

/* ---- Photo credits: small, quiet, under every picture ---- */
.credit a, .ph-item figcaption a, .ex-photo figcaption a { color: inherit; text-decoration-thickness: 1px; }
.ex-photo figcaption { font-family: var(--sans); font-size: .74rem; line-height: 1.4; color: var(--muted); margin-top: .45rem; }

/* ---- The explainer: editorial type, no map ---- */
.explainer { padding: 6rem 0 1rem; }
.explainer .wrap { max-width: 46rem; }
.explainer h1 { font-family: var(--serif); font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -.03em; line-height: 1.05; margin: 0 0 2rem; }
.explainer h2 { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15; letter-spacing: -.02em; margin: 3rem 0 .4rem; padding-top: 1.8rem; border-top: 1px solid var(--rule); }
.explainer h1 + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.explainer h3 { font: 700 .78rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 1.9rem 0 .4rem; }
.explainer p { font-family: var(--serif); font-size: 1.2rem; line-height: 1.6; margin: 0 0 1rem; max-width: 38rem; }
.ex-photo { margin: .6rem 0 1.2rem; }
.ex-photo img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--tint); }
@media (min-width: 900px) {
  .explainer .wrap { max-width: 62rem; }
  .ex-sec.has-photo { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; column-gap: 2.4rem; align-items: start; }
  .ex-sec.has-photo > h2, .ex-sec.has-photo > h3, .ex-sec.has-photo > p { grid-column: 1; }
  .ex-sec.has-photo > .ex-photo { grid-column: 2; grid-row: 1 / span 4; margin-top: 1.9rem; }
}

/* ---- Footer map credit ---- */
.site-foot .mapcredit { font-size: .8rem; }
.site-foot .mapcredit a { color: inherit; }

/* ---- No WebGL (or the library or style did not load): the same tiles as plain images under one SVG, see fc-map.js, "the fallback" ---- */
.fc-grid { position: absolute; inset: 0; overflow: hidden; background: var(--paper); }
.fc-layer { position: absolute; inset: 0; }
.fc-layer img { position: absolute; display: block; max-width: none; -webkit-user-drag: none; user-select: none; }
.fc-grid.pix img { image-rendering: pixelated; }
.fc-over { position: absolute; left: 0; top: 0; pointer-events: none; }
.fc-over path { fill-rule: evenodd; }
.fc-over .mask { fill: var(--paper); }
.fc-over .dim { fill: #F2F3F0; }
.fc-over .ln, .fc-over .focus { fill: none; stroke-linejoin: round; }
.fc-over .ln { stroke: rgba(255, 247, 236, .36); stroke-width: .6; }
.fc-over.st .ln { stroke-width: 1; }
.fc-over .focus { stroke: #241C16; stroke-opacity: .8; stroke-width: 1.6; }
@media (prefers-color-scheme: dark) { .fc-over .dim { fill: #0C0C0C; } .fc-over .ln { stroke: rgba(242, 234, 224, .2); } .fc-over .focus { stroke: #fff; } }

/* ---- No map at all (the tiles host or the manifest cannot be reached): the static Normal picture in the same box ---- */
.nomap .seg, .nomap [data-chips], .nomap .timeline, .nomap .sp-legend, .nomap .sp-tools { display: none; }
.nomap:not(.has-static) .legend, .nomap:not(.has-static) .datelabel { display: none; }
.nomap .mapbox { background: var(--paper); }
.nomap .mapbox > img { inset: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); }
.mapbox > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.nomap .mapbox .msg { inset: auto 0 0 0; padding: .9rem 1rem; background: color-mix(in srgb, var(--paper) 88%, transparent); }

/* ---- Home: "Only in the app" ---- */
.app-sec h2 { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15; letter-spacing: -.02em; margin: 2.2rem 0 1rem; font-weight: 700; }
.app-features { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .9rem 1.6rem; grid-template-columns: 1fr; }
.app-features li { margin: 0; padding: .95rem 1.1rem; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; font-size: 1rem; line-height: 1.45; color: var(--muted); }
.app-features strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: .15rem; }
@media (min-width: 40rem) { .app-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .app-features { grid-template-columns: repeat(4, 1fr); } }

@media (max-width: 520px) { .hero .picker { width: 100%; } }

/* Phone hero: the credit sits under the copy, on its own line (the hero is a flex row, so it must wrap). */
@media (max-width: 520px) { .hero.compact { flex-wrap: wrap; align-content: flex-end; } .hero.compact .credit { flex: 0 0 100%; } }

/* Footer links: comfortable to tap */
.site-foot .links a { display: inline-block; padding: .4rem 0; }
.site-foot .links { gap: 0 1.3rem; }

/* The map's own attribution: the page's colors, both schemes (MapLibre's default is white on a translucent white). */
.maplibregl-ctrl-attrib.maplibregl-compact, .maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--paper) 86%, transparent) !important; color: var(--ink) !important; }
.maplibregl-ctrl-attrib a { color: var(--ink) !important; }
.maplibregl-ctrl-attrib-button { background-color: transparent !important; }
@media (prefers-color-scheme: dark) { .maplibregl-ctrl-attrib-button { filter: invert(1); } }

/* Phones: no backdrop blur over the map. The map redraws every frame while it eases and while tiles arrive, and a blur
   behind the cards, the legend, the header and the timeline has to be recomputed with it (and again each time a card's
   opacity animates). The same panels are drawn nearly opaque instead, which looks the same and costs almost nothing. */
@media (max-width: 820px) {
  .sp-card, .sp-legend, .site-head.solid, .timeline { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sp-card { background: color-mix(in srgb, var(--card) 97%, transparent); }
  .sp-legend { background: color-mix(in srgb, var(--card) 96%, transparent); }
  .site-head.solid { background: color-mix(in srgb, var(--paper) 96%, transparent); }
  .timeline { background: color-mix(in srgb, var(--paper) 92%, transparent); }
}

/* ---- Touch screens: the map is awake only after a tap (fc-map.js, "touch: one finger scrolls the page") ----
   Active: the whole map area takes the touch. touch-action none on the container and the canvas (MapLibre's own rule
   would leave pan-x pan-y); the legend and the timeline's frame let touches through to the map, so there is no dead
   zone under them (their buttons, the zoom buttons and the attribution keep their own touch). The only sign is a thin
   outline. */
.fc-active, .fc-active .maplibregl-canvas-container, .fc-active .maplibregl-canvas { touch-action: none !important; }
.fc-active .sp-legend, .fc-active .timeline, .fc-active .legend { pointer-events: none; }
.fc-active .timeline button { pointer-events: auto; }
.fc-active .maplibregl-ctrl-attrib { pointer-events: none; }
.fc-active .maplibregl-ctrl-attrib a, .fc-active .maplibregl-ctrl-attrib-button { pointer-events: auto; }
.fc-active .maplibregl-popup-content { pointer-events: none; }
.fc-active .maplibregl-popup-content a { pointer-events: auto; }
.fc-active::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 80%, transparent); }