/* ==========================================================================
   Beyond the Blue and White — styles
   --------------------------------------------------------------------------
   Visual design follows the team's wireframe: a navy interface, fog text,
   Carolina Blue and sky-blue accents, and a coral call to action.
   COLORS: all colors are tokens in :root below.
   FONTS: self-hosted in /fonts (SIL Open Font License). See docs/design-and-styles.md.
   ========================================================================== */

/* ---- Brand typefaces (Latin subsets, self-hosted) ---- */
@font-face {
  font-family: "Gasoek One";            /* logo / wordmark */
  src: url("../fonts/gasoek-one-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Oswald";                /* headers */
  src: url("../fonts/oswald-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";                  /* body copy */
  src: url("../fonts/lato-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";                  /* bold emphasis in body copy and buttons */
  src: url("../fonts/lato-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;

  /* ---- Brand palette (from the logo, icon, and wireframe files) ---- */
  --navy: #172849;          /* interface background (icon navy; wireframe #182848) */
  --navy-2: #1f3560;        /* raised surfaces on navy: cards, list items */
  --navy-3: #2a4373;        /* borders and hover on navy */
  --fog: #eceded;           /* text on navy — 12.5:1 */
  --fog-muted: #c3cad6;     /* secondary text on navy — 8.9:1 */
  --carolina: #4b9cd3;      /* era/dates and links on navy — 4.9:1 */
  --sky: #87aed0;           /* person cards (navy text on sky — 6.3:1) */
  --coral: #d85c54;         /* call to action (large bold fog text — 3.2:1, AA large) */
  --coral-hover: #c94c45;
  --logo-navy: #11294b;     /* the logo files' navy */

  /* ---- Roles ---- */
  --color-bg: var(--navy);
  --color-surface: var(--navy-2);
  --color-border: var(--navy-3);
  --color-text: var(--fog);
  --color-text-muted: var(--fog-muted);
  --color-accent: var(--carolina);
  --color-focus: #eceded;                 /* keyboard focus ring: fog, with a thin navy gap so it shows on light and dark */
  --color-placeholder-badge: #f6c34a;

  /* Map */
  --color-map-bg: #9fc6e0;                /* the illustrated map's background blue */
  --color-map-marker: var(--navy);        /* pins */
  --color-map-ring: var(--fog);
  --color-map-active: var(--coral);       /* active pin ring, "you are here" */

  /* ---- Type & spacing ---- */
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-logo: "Gasoek One", "Arial Black", Impact, var(--font-system);
  --font-heading: "Oswald", "Arial Narrow", "Roboto Condensed", var(--font-system);
  --font-body: "Lato", var(--font-system);
  --fs-base: 1.0625rem;  /* 17px — readable outdoors */
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.0625rem;
  --radius: 14px;
  --tap: 44px;           /* minimum tap target */
  --shadow: 0 6px 24px rgba(5, 12, 26, 0.35);
  --header-h: 60px;      /* updated by JS */
  --panel-h: 0px;        /* height of the stop sheet on phones; updated by JS */
  --panel-w: 420px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; margin: 0; }
a { color: var(--carolina); }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--navy); }
/* When the page moves focus itself (e.g. to "Explore the map" after the splash) for someone using a
   mouse or touch, no ring is shown; it appears only for keyboard users. See moveFocus in app.js. */
.quiet-focus:focus-visible { outline: none; box-shadow: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 3000;
  background: var(--fog); color: var(--navy);
  padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow);
}
.skip-link:focus { top: 8px; }

[hidden] { display: none !important; }

/* ---------- Splash ---------- */
.splash {
  position: fixed; inset: 0; z-index: 2500;
  display: grid; place-items: center;
  background: var(--navy);
  transition: opacity 0.45s ease, visibility 0.45s;
}
.splash-logo { width: min(64vw, 300px); height: auto; }
/* The team's opening animation (home page only; see playSplashVideo in app.js). It's always shown
   whole (never cropped, so none of the names in it are cut off), centered on its own navy. */
/* While the animation plays, .splash-canvas (on top of the video) paints each frame plus the space
   around it in one surface, so the navy always matches (see playSplashVideo in app.js). The video
   underneath only shows if the canvas can't be used. #122e54 is a close fallback for that case. */
.splash.has-video { background: #122e54; cursor: pointer; }
.splash-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.splash.has-video .splash-logo { visibility: hidden; }
/* Fallback if the canvas can't be used: the plain video, whole and centered (either shape). */
.splash-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Shown when the animation pauses at its end (on the logo and names). The whole screen is tappable;
   this is the visible invitation. */
.splash-continue {
  position: absolute; left: 0; right: 0; bottom: calc(44px + env(safe-area-inset-bottom));
  width: max-content; margin: 0 auto; padding: 12px 20px; min-height: var(--tap);
  border: 0; background: none; color: var(--fog); cursor: pointer;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase;
  /* Fades in over 1 s, then blinks slowly. */
  animation: fade-in 1s ease-out both, slow-blink 2.4s ease-in-out 1s infinite;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slow-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
body:not(.is-loading) .splash { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- Header ---------- */
.app-header {
  position: relative;
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 8px 8px 14px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--navy);
  border-bottom: 1px solid var(--navy-3);
  z-index: 1300;       /* above the site sheet, so the menu drop-down isn't covered */
}
.brand { min-width: 0; flex: 1 1 auto; font-size: inherit; }
.brand-btn {
  display: block; width: 100%; max-width: 330px; min-height: var(--tap);
  padding: 0; border: 0; background: none; cursor: pointer;
}
.brand-logo { width: 100%; height: auto; }

.header-nav { display: flex; align-items: center; gap: 2px; flex: none; }
.nav-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: var(--tap); min-height: var(--tap); padding: 0 8px;
  border: 0; border-radius: 999px; background: transparent; color: var(--fog);
  font-weight: 700; font-size: var(--fs-small); cursor: pointer;
}
.nav-link:hover { background: var(--navy-3); }
.nav-link[aria-pressed="true"] { color: var(--carolina); }
.nav-link .nav-text { display: none; }

/* Phones: menu button + drop-down. (Desktop overrides below show the links in the header.) */
.menu-btn .menu-close { display: none; }
.menu-btn[aria-expanded="true"] .menu-open { display: none; }
.menu-btn[aria-expanded="true"] .menu-close { display: inline; }
.nav-menu {
  display: none; position: absolute; top: 100%; right: 8px; margin-top: 6px;
  min-width: 210px; padding: 6px; flex-direction: column; gap: 2px;
  background: var(--navy); border: 1px solid var(--navy-3); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.nav-menu.is-open { display: flex; }
.nav-menu .nav-link { justify-content: flex-start; gap: 12px; width: 100%; padding: 0 14px; border-radius: 8px; font-size: var(--fs-base); }
.nav-menu .nav-link .nav-text { display: inline; }

/* ---------- Views ---------- */
main { flex: 1; position: relative; min-height: 0; }
.view { position: absolute; inset: 0; }

/* Intro / home */
.intro-view { overflow-y: auto; background: var(--navy); }
/* "Explore the map": the landing page lifts up and away over the map (see leaveIntro in app.js). */
.intro-view.is-leaving { position: fixed; inset: 0; z-index: 1500; transition: transform 0.65s cubic-bezier(0.65, 0, 0.25, 1); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.intro-view.is-gone { transform: translateY(-100%); }
.intro-inner {
  min-height: 100%;
  max-width: 560px; margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 24px max(28px, 9vh, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
}
/* Tagline right under the logo: coral, heading font, title case (as in the team's mockup). */
.intro-eyebrow { margin: -8px 0 22px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.75rem, 8.5vw, 2.4rem); line-height: 1.1; color: var(--coral); }
.intro-logo { margin-top: auto; }
.intro-logo img { width: min(100%, 400px); height: auto; }
.intro-text { margin: 0; font-size: var(--fs-base); color: var(--fog); }
.cta {
  align-self: stretch;
  min-height: 60px; padding: 0 24px;
  border: 2px solid var(--fog); border-radius: 4px;
  background: var(--coral); color: var(--fog);
  font-family: var(--font-heading); font-weight: 700; font-size: 1.625rem; letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  /* Sits low on the screen, within thumb reach; the tagline, logo, and text stay centered above it. */
  margin-top: auto;
}
.cta:hover { background: var(--coral-hover); }

/* Pages (All stops, About) */
.page-view { overflow-y: auto; background: var(--navy); }
.page-inner { max-width: 760px; margin: 0 auto; padding: 22px 16px 48px; }
.page-inner h2 { font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: 0.02em; }
.page-intro { color: var(--fog-muted); }
/* "Work in progress" note under the All sites and People headings */
.wip-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 14px 0 6px; padding: 12px 14px;
  background: var(--navy-2); border: 1px solid var(--navy-3); border-left: 4px solid var(--coral); border-radius: 6px;
}
.wip-icon { flex: none; margin-top: 1px; color: var(--coral); }
.wip-text { margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--fog); }

/* ---------- Map ---------- */
#map { position: absolute; inset: 0; background: var(--color-map-bg); }
.leaflet-container { font-family: var(--font-body); font-size: var(--fs-small); }

/* Faded streets under the illustration: grayed as they load (GrayTileLayer in app.js) and faded with the layer's opacity. */
/* Hide tile seams. Browsers soften each tile image's edges slightly, which leaves hairline
   lines where tiles meet. "plus-lighter" adds the two softened edges back up to a solid join;
   everywhere else (no overlap) it has no effect. Each layer is its own stacking context. */
.leaflet-art-pane img.leaflet-tile,
.faded-streets .leaflet-tile { mix-blend-mode: plus-lighter; }
.leaflet-art-pane, .faded-streets { isolation: isolate; }

/* Leaflet controls in the brand style */
.leaflet-bar { border: 0 !important; box-shadow: var(--shadow) !important; border-radius: 999px !important; overflow: hidden; }
/* Zoom buttons: the same size in every state. Leaflet's own ".leaflet-touch .leaflet-bar a" rule
   (30px) is overridden here with equal-or-higher specificity, so hovering never resizes a button. */
.leaflet-container .leaflet-bar a,
.leaflet-container .leaflet-bar a:hover,
.leaflet-container .leaflet-bar a:focus,
.leaflet-touch .leaflet-bar a {
  width: var(--tap); height: var(--tap); line-height: var(--tap); font-size: 22px;
  background: var(--navy); color: var(--fog); border-bottom-color: var(--navy-3);
}
.leaflet-container .leaflet-bar a:hover { background: var(--navy-3); }
.leaflet-bar a.leaflet-disabled { background: var(--navy); color: #6f7f98; }
.leaflet-control-attribution { font-size: 12px; background: rgba(236, 237, 237, 0.88) !important; color: var(--navy); }
.leaflet-control-attribution a { color: var(--logo-navy); }

.map-tools { position: absolute; top: 12px; right: 12px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
.round-btn {
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap); border-radius: 50%;
  border: 2px solid var(--fog); background: var(--navy); color: var(--fog);
  box-shadow: var(--shadow); cursor: pointer;
}
.round-btn:hover { background: var(--navy-3); }
/* On the light map, the amber focus ring gets a navy surround so it stays visible (amber on map blue alone is 1.1:1). */
.map-tools :focus-visible, .leaflet-control-container :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; box-shadow: 0 0 0 7px var(--navy); }
.round-btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }

/* Pins: upside-down teardrops (navy, fog outline) with the team's icon in the round head.
   The teardrop is a square with three rounded corners, turned 45° so the sharp corner points down. */
.stop-pin-wrap { background: none; border: 0; }
.stop-pin-wrap:focus-visible { outline: none; }
.stop-pin {
  position: relative; width: 48px; height: 56px;
  transform-origin: 50% 54px;                       /* grow from the tip, which stays on the spot */
  transition: transform 0.15s ease;
  /* Two shadows: a tight one that outlines the pin and a soft one that lifts it off the map. */
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 7px 9px rgba(0, 0, 0, 0.55));
}
/* A dark, blurred contact shadow on the ground beneath the pin's point. */
.stop-pin::after {
  content: ""; position: absolute; left: 50%; top: 50px; z-index: -1;
  width: 24px; height: 8px; margin-left: -12px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); filter: blur(2px);
}
.stop-pin .pin {
  position: absolute; left: 3px; top: 3px;
  width: 42px; height: 42px;
  border-radius: 50% 50% 0 50%;
  background: var(--color-map-marker);
  border: 3px solid var(--color-map-ring);
  transform: rotate(45deg);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.stop-pin .pin-icon { position: absolute; left: 10px; top: 10px; width: 28px; height: 28px; }
.stop-pin-wrap:focus-visible .pin { box-shadow: 0 0 0 3px var(--color-focus), 0 0 0 6px var(--navy); }
.stop-pin-wrap.quiet-focus:focus-visible .pin { box-shadow: none; }
.stop-pin-wrap.is-active .pin { background: var(--coral); }
/* Selected: coral (the brand's red) with the icon turned white. The icons in use are single-color
   shapes, so turning every drawn pixel white keeps all their detail. */
.stop-pin-wrap.is-active .pin-icon { filter: brightness(0) invert(1); }
.stop-pin-wrap.is-active .stop-pin { transform: scale(1.15); }

.you-are-here {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-map-active);
  border: 4px solid var(--fog);
  box-shadow: 0 0 0 2px var(--color-map-active), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Hint card ("Tap a location…") with the map key, shown when no stop is open */
.map-hint {
  position: absolute; z-index: 1000;
  left: 50%; transform: translateX(-50%);
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
  width: min(calc(100vw - 32px), 460px);
  margin: 0; padding: 12px 16px;
  background: var(--fog); color: var(--navy);
  border-radius: 8px; box-shadow: var(--shadow);
  font-size: var(--fs-small); line-height: 1.4;
}
.map-hint-text { margin: 0; }
.map-legend {
  list-style: none; margin: 10px 0 0; padding: 10px 0 0;
  border-top: 1px solid #c9ced6;
  display: flex; flex-wrap: wrap; gap: 8px 16px;
}
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: 700; }
.legend-pin {                       /* a small version of the pin head */
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); border: 2px solid var(--navy);
}
.legend-pin img { width: 18px; height: 18px; }

/* Compass and scale (bottom-left). They sit on the light map. */
.map-compass { width: 48px; height: 48px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3)); }
.map-compass svg { display: block; }
.compass-face { fill: var(--fog); stroke: var(--navy); stroke-width: 1.5; }  /* r 22.5 + half the stroke = 23.25, inside the 48-unit box */
.compass-north { fill: var(--navy); }
.compass-south { fill: var(--sky); }
.compass-pin { fill: var(--fog); stroke: var(--navy); stroke-width: 1; }
.compass-n { font: 700 8.5px var(--font-heading); fill: var(--navy); }
.leaflet-control-scale-line {
  font: 700 11px/1.3 var(--font-body);
  color: var(--navy);
  background: rgba(236, 237, 237, 0.9);
  border: 2px solid var(--navy); border-top: 0;
  padding: 1px 6px;
}
.leaflet-control-scale-line:not(:first-child) { border-top: 2px solid var(--navy); border-bottom: 0; margin-top: -2px; }
.leaflet-left .leaflet-control-scale, .leaflet-left .map-compass { margin-left: 12px; }

/* Building info tooltip (hover or tap a building) */
/* The building shapes are invisible tap targets; never show a focus ring that would reveal them. */
.leaflet-buildings-pane path:focus, .leaflet-buildings-pane path:focus-visible,
.leaflet-placeAreas-pane path:focus, .leaflet-placeAreas-pane path:focus-visible,
.leaflet-placePoints-pane path:focus, .leaflet-placePoints-pane path:focus-visible { outline: none; }
.leaflet-tooltip { background: var(--navy); color: var(--fog); border: 1px solid var(--navy-3); box-shadow: var(--shadow); }
.leaflet-tooltip-top::before { border-top-color: var(--navy); }
.building-tip strong { display: block; font-size: var(--fs-small); }
/* Site name over a pin (hover or keyboard focus) */
.site-label { font-weight: 700; font-size: var(--fs-small); padding: 4px 10px; }
.building-tip span { font-size: var(--fs-xs); color: var(--fog-muted); }

/* ---------- All stops (list) ---------- */
.stop-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.stop-card {
  display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start;
  width: 100%; text-align: left;
  padding: 16px; min-height: var(--tap);
  background: var(--navy); color: var(--fog);           /* navy, not navy-2: keeps the Carolina Blue era at 4.9:1 */
  border: 1px solid var(--color-border); border-radius: var(--radius);
  cursor: pointer;
}
.stop-card:hover { border-color: var(--carolina); }
.stop-card .thumb {
  position: relative; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); border: 3px solid var(--fog);
}
.stop-card .thumb img { width: 32px; height: 32px; }
.stop-card .t { display: block; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.02em; }
.stop-card .e { display: block; color: var(--carolina); font-size: var(--fs-small); margin-top: 2px; }
.stop-card .s { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--fog-muted); }
.stop-card .go { display: inline-block; margin-top: 8px; color: var(--fog); font-weight: 700; font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- About ---------- */
.about-tagline { margin: 12px 0 4px; font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; color: var(--carolina); }
.about .intro { color: var(--fog); }
.about h3 { font-size: var(--fs-h3); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-body); }
.about-card { margin: 20px 0; padding: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.about-card p { margin: 0 0 8px; }
.about-card p:last-child { margin-bottom: 0; }
.about-group { margin: 24px 0; }
.about-note { margin: -2px 0 10px; color: var(--fog-muted); font-size: var(--fs-small); }
/* Team, coaches, and advisors: sky-blue name cards (the Key People card color) that wrap to any width.
   LinkedIn and portfolio links, when given, sit inside the card. */
.credit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.credit-card {
  display: block; min-height: var(--tap); padding: 9px 14px;
  background: var(--sky); color: var(--navy); border-radius: 4px;
}
.credit-name { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.credit-role { display: block; margin-top: 2px; font-size: var(--fs-small); color: #24385c; }
.credit-links { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 2px; }
.credit-link { display: inline-flex; align-items: center; min-height: 32px; font-size: 0.8rem; font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.credit-link:hover { text-decoration-thickness: 2px; }
.about-credits { margin: 0; padding-left: 1.2em; font-size: var(--fs-small); color: var(--fog-muted); }
.about-credits li { margin-bottom: 6px; }

/* ---------- Stop sheet (phones) / side panel (desktop) ---------- */
.panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  display: flex; flex-direction: column;
  /* Always full height on phones; JS slides it with a transform so only the top shows in preview. */
  height: calc(100vh - var(--header-h) - 8px);
  height: calc(100dvh - var(--header-h) - 8px);
  background: var(--navy); color: var(--fog);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.panel.is-dragging { transition: none; }

.panel-top {
  position: relative; flex: none; padding: 0 64px 14px 20px; padding-bottom: max(14px, env(safe-area-inset-bottom));
  cursor: grab; touch-action: none;   /* drags move the sheet, not the page */
  border-bottom: 1px solid transparent;
}
.panel.is-expanded .panel-top { border-bottom-color: var(--navy-3); padding-bottom: 14px; }
.handle {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  width: calc(100% + 84px); margin-left: -20px; height: 26px; padding: 0 0 4px;
  border: 0; background: transparent; cursor: inherit;
}
.handle-bar { width: 96px; height: 4px; border-radius: 999px; background: var(--fog); }
/* Blinking arrow above the handle, inviting a swipe up, until the visitor first opens a full story. */
.swipe-hint { display: none; color: var(--fog); }
.panel.show-swipe-hint .handle { height: 46px; gap: 6px; }
.panel.show-swipe-hint .swipe-hint { display: block; animation: swipe-hint 1.3s ease-in-out infinite; }
@keyframes swipe-hint {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.25; transform: translateY(3px); }
}
.close-btn {
  position: absolute; top: 14px; right: 12px;
  display: grid; place-items: center; width: var(--tap); height: var(--tap);
  border: 0; border-radius: 50%; background: transparent; color: var(--fog); cursor: pointer;
}
.close-btn:hover { background: var(--navy-3); }
.panel-title { font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em; }
.stop-name { display: block; }
.era { margin: 6px 0 0; color: var(--carolina); font-size: var(--fs-small); }
/* Peek view (phones): a sliver of the hero photo under the name and era, hinting at the story above. */
.peek-hero { height: 76px; margin: 12px 0 0 0; margin-right: -44px; border-radius: 6px; overflow: hidden; background: var(--navy-2); }
.peek-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.panel.is-expanded .peek-hero { display: none; }

.panel-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 28px; }
.panel-body:focus { outline: none; }
.summary { font-weight: 700; margin: 18px 0 8px; }
.history p { margin: 0 0 12px; }
.section-heading { margin: 26px 0 10px; font-family: var(--font-body); font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: 0.04em; }

.placeholder-flag {
  display: inline-block; margin-bottom: 10px;
  padding: 2px 10px; border-radius: 999px;
  background: var(--color-placeholder-badge); color: var(--navy);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.03em;
}

/* Key people cards */
.people { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.person > div { min-width: 0; overflow-wrap: anywhere; }   /* long words (file names, URLs) wrap instead of widening the card */
.person {
  display: grid; grid-template-columns: 92px 1fr; gap: 12px;
  padding: 10px; background: var(--sky); color: var(--navy); border-radius: 4px;
}
.person-photo { width: 92px; height: 92px; object-fit: cover; object-position: 50% 20%; border-radius: 2px; }  /* portraits: keep the face in frame */
.person .img-fallback { width: 92px; height: 92px; aspect-ratio: auto; padding: 4px; font-size: 11px; }
.person-name { margin: 2px 0 0; font-weight: 700; font-size: var(--fs-small); line-height: 1.25; text-transform: uppercase; }
.person-name::after { content: ""; display: block; width: 44px; height: 3px; margin: 6px 0; background: var(--fog); }
.person-desc { margin: 0; font-size: var(--fs-xs); line-height: 1.45; }
.person-desc + .person-desc { margin-top: 8px; }
.person-draft { margin: 0 0 8px; font-size: 0.7rem; }
.person-role { margin: -2px 0 6px; font-size: var(--fs-xs); font-weight: 700; line-height: 1.35; }

.person-credit { margin: 6px 0 0; font-size: 0.75rem; line-height: 1.35; color: #24385c; }
.person-more { display: inline-flex; align-items: center; min-height: 32px; margin-top: 4px; color: var(--navy); font-size: var(--fs-xs); font-weight: 700; }
.person-sites { margin: 8px 0 0; font-size: var(--fs-xs); line-height: 1.5; }
.person-sites-label { font-weight: 700; }
.person-sites a { display: inline-block; min-height: 32px; padding: 6px 0; color: var(--navy); font-weight: 700; text-underline-offset: 3px; }

/* People page: the same cards as a stop's "Key people", one column on phones, two on wide screens */
.people-index { margin-top: 16px; }
@media (min-width: 700px) { .people-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sources { padding-left: 1.3em; margin: 0; font-size: var(--fs-xs); color: var(--fog-muted); }
.sources li { margin-bottom: 6px; }

/* ---------- Gallery ---------- */
.gallery { position: relative; }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track figure { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
/* Images are shown whole (never cropped): cropping an archival photo can change what it shows.
   Portrait and odd-shaped images sit centered in the 4:3 frame on a dark background. */
.gallery-img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #0f1c35; }
.img-fallback {
  width: 100%; aspect-ratio: 4 / 3;
  display: grid; place-items: center; text-align: center; padding: 16px;
  background: var(--navy-2); color: var(--fog-muted); font-weight: 700;
}
.gallery figcaption { padding: 10px 0 0; font-size: var(--fs-xs); color: var(--fog-muted); line-height: 1.45; }
.gallery .credit { display: block; margin-top: 2px; }
.gallery-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.gallery-controls button {
  width: var(--tap); height: var(--tap); border-radius: 999px;
  border: 2px solid var(--fog); background: var(--navy); color: var(--fog);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.gallery-controls button:disabled { opacity: 0.35; cursor: default; }
.gallery-count { font-size: var(--fs-small); color: var(--fog-muted); font-weight: 700; }

/* Stop navigation (end of the sheet) */
.panel-nav { display: grid; gap: 10px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--navy-3); padding-bottom: env(safe-area-inset-bottom); }
.directions { display: flex; align-items: center; justify-content: center; min-height: var(--tap); color: var(--fog); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nav-btn {
  min-height: 48px; padding: 0 12px; border-radius: 4px;
  border: 2px solid var(--fog); background: transparent; color: var(--fog);
  font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; cursor: pointer;
}
.nav-btn.primary { background: var(--coral); }
.nav-btn.primary:hover { background: var(--coral-hover); }
.nav-btn:disabled { opacity: 0.4; cursor: default; }
.prev-next .nav-btn { text-transform: uppercase; letter-spacing: 0.04em; }   /* ‹ PREVIOUS / NEXT › */

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(var(--header-h) + 12px); z-index: 1300;
  width: min(92vw, 480px); padding: 12px 16px; border-radius: 8px;
  background: var(--fog); color: var(--navy); box-shadow: var(--shadow);
  font-size: var(--fs-small); font-weight: 700;
}
.toast button { margin-left: 8px; min-height: 32px; padding: 0 10px; border-radius: 6px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }

.noscript { padding: 24px; text-align: center; }

/* ---------- Keeping map controls clear of the sheet, hint, and credit line ---------- */
/* On phones, the bottom corners rise above the stop sheet when it's open. */
body.panel-open .leaflet-bottom { bottom: var(--panel-h); }
/* With the full story open, the sheet covers the map, so its corner controls step aside. */
body.panel-expanded .leaflet-bottom { display: none; }

@media (max-width: 640px) {
  .leaflet-control-zoom { display: none; }  /* pinch to zoom on phones */
  .leaflet-control-attribution { max-width: calc(100vw - 150px); font-size: 11px; line-height: 1.35; }
  /* the hint sits above the two-line credit line; the compass and scale sit above the hint */
  .map-hint { bottom: max(52px, calc(env(safe-area-inset-bottom) + 46px)); }
  body.hint-visible:not(.panel-open) .leaflet-bottom.leaflet-left { bottom: calc(var(--hint-h, 64px) + 62px); }
}

/* ---------- Desktop: header links and side panel ---------- */
@media (min-width: 900px) {
  .app-header { padding: 10px 16px 10px 22px; }
  .brand-btn { max-width: 380px; }
  .menu-btn { display: none; }
  .nav-menu, .nav-menu.is-open {
    display: flex; position: static; flex-direction: row; gap: 2px; min-width: 0; margin: 0; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  .nav-menu .nav-link { width: auto; padding: 0 14px; border-radius: 999px; font-size: var(--fs-small); }
  .nav-link .nav-icon { display: none; }
  .nav-link .nav-text { display: inline; }

  .panel {
    left: auto; right: 0; top: var(--header-h); bottom: 0;
    width: var(--panel-w); max-height: none; height: auto;
    border-radius: 0; border-left: 1px solid var(--navy-3);
    transform: none !important; transition: none;
  }
  .panel-top { cursor: default; touch-action: auto; padding-top: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--navy-3); }
  .handle { display: none; }
  .peek-hero { display: none; }
  .close-btn { top: 10px; }
  body.panel-open .leaflet-bottom { bottom: 0; }
  body.panel-expanded .leaflet-bottom { display: block; }
  body.panel-open .map-tools { right: calc(var(--panel-w) + 12px); }
  body.panel-open .leaflet-right { right: var(--panel-w); }
  .person { grid-template-columns: 104px 1fr; }
  .person-photo, .person .img-fallback { width: 104px; height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .panel.show-swipe-hint .swipe-hint { animation: none; }
  .splash-continue { animation: fade-in 1s ease-out both; }   /* fade in, but no blinking */
}