/* isstrackerapp.com — "blue hour": the sky in the minutes you can see the station.
   Every colour, size and radius comes from Design/tokens.json (see DESIGN.md). One family: the system face.
   One accent: the station's warm light. The website is always the night sky; it has no light theme. */

/* tokens:start — generated from Design/tokens.json by Design/build-tokens.mjs. Do not edit here. */
:root {
  /* sky */
  --zenith: #070a1c; --zenith-rgb: 7 10 28;
  --ink: #0a0e24; --ink-rgb: 10 14 36;
  --ink-2: #0f1433; --ink-2-rgb: 15 20 51;
  --ink-3: #151c45; --ink-3-rgb: 21 28 69;
  --dusk: #1c2b6e; --dusk-rgb: 28 43 110;
  --twilight: #2a2f73; --twilight-rgb: 42 47 115;
  --gloaming: #3a3268; --gloaming-rgb: 58 50 104;
  --haze: #6b4b7c; --haze-rgb: 107 75 124;
  --ember: #e9975a; --ember-rgb: 233 151 90;
  /* light */
  --station: #ffe3a8; --station-rgb: 255 227 168;
  --station-core: #fff6e0; --station-core-rgb: 255 246 224;
  --glow: #ffc878; --glow-rgb: 255 200 120;
  --air: #7496ff; --air-rgb: 116 150 255;
  /* text */
  --star: #f4f1ff; --star-rgb: 244 241 255;
  --atlas-2: #c3c8e2; --atlas-2-rgb: 195 200 226;
  --atlas: #9aa2c4; --atlas-rgb: 154 162 196;
  /* device */
  --void: #000000; --void-rgb: 0 0 0;
  --device-hi: #3a3f58; --device-hi-rgb: 58 63 88;
  --device-lo: #16192a; --device-lo-rgb: 22 25 42;
  /* lines */
  --line: rgb(var(--atlas-2-rgb) / 0.14);
  --line-2: rgb(var(--atlas-2-rgb) / 0.26);
  --glass: rgb(var(--ink-3-rgb) / 0.58);
  /* type */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Hiragino Sans", "PingFang SC", "Apple SD Gothic Neo", "Noto Sans", sans-serif;
  --display: -apple-system-headline, -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Hiragino Sans", "PingFang SC", "Apple SD Gothic Neo", sans-serif;
  --fs-display: clamp(2.6rem, 1.3rem + 4.6vw, 5.4rem); --lh-display: 1; --fw-display: 700; --ls-display: -0.035em;
  --fs-title: clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem); --lh-title: 1.06; --fw-title: 700; --ls-title: -0.035em;
  --fs-title-2: 1.6rem; --lh-title-2: 1.15; --fw-title-2: 700; --ls-title-2: -0.02em;
  --fs-headline: 1.08rem; --lh-headline: 1.35; --fw-headline: 600; --ls-headline: 0.005em;
  --fs-body: 1.0625rem; --lh-body: 1.6; --fw-body: 400; --ls-body: 0;
  --fs-callout: 0.95rem; --lh-callout: 1.5; --fw-callout: 400; --ls-callout: 0;
  --fs-footnote: 0.86rem; --lh-footnote: 1.45; --fw-footnote: 400; --ls-footnote: 0;
  --fs-label: 0.78rem; --lh-label: 1.4; --fw-label: 500; --ls-label: 0.1em;
  --fs-data: inherit; --lh-data: 1; --fw-data: 700; --ls-data: -0.01em;
  /* space, radius, motion */
  --space-xxs: 2px; --space-xs: 4px; --space-s: 8px; --space-m: 12px; --space-l: 16px; --space-xl: 24px; --space-xxl: 32px; --space-xxxl: 48px;
  --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-xl: 32px; --r-pill: 999px;
  --dur-standard: 0.35s; --dur-gentle: 0.8s; --dial-loop: 6s;
  color-scheme: dark;
}
/* tokens:end */

:root { --gutter: clamp(16px, 5vw, 64px); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--sans);
  color: var(--star);
  background: var(--ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--station); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--station-core); }
:focus-visible { outline: 2px solid var(--station); outline-offset: 3px; border-radius: 6px; }
p { margin: 0 0 1em; }

h1, h2, h3 { margin: 0 0 0.4em; color: var(--star); font-weight: 500; }
h1, h2 { font-family: var(--display); font-style: normal; font-weight: 700; letter-spacing: -0.035em; }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display); text-wrap: balance; }
h2 { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--ls-title); text-wrap: balance; }
h3 { font-size: var(--fs-headline); font-weight: var(--fw-headline); letter-spacing: var(--ls-headline); }
:lang(ja) :is(h1, h2), :lang(ko) :is(h1, h2), :lang(zh-Hans) :is(h1, h2) { font-style: normal; font-weight: 600; letter-spacing: 0; line-height: 1.15; }
:lang(ja) h1, :lang(ko) h1, :lang(zh-Hans) h1 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.4rem); }

.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--station); color: var(--ink); padding: 8px 14px; border-radius: var(--r-pill); }
.skip:focus { left: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.read { width: min(720px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 30; padding: 14px 0; pointer-events: none; }
/* Scrim behind the fixed header so content never runs under the logo and nav (design review 2026-09-27, issue 3).
   Hidden at the very top (the globe stays clean), fades in over the first 80 px of scroll; always on without scroll timelines. */
.site-header::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.96) 0%, rgb(var(--ink-rgb) / 0.82) 60%, rgb(var(--ink-rgb) / 0) 100%); }
@supports (animation-timeline: scroll()) {
  .site-header::before { opacity: 0; animation: header-scrim linear both; animation-timeline: scroll(root); animation-range: 0 80px; }
  @keyframes header-scrim { to { opacity: 1; } }
}
.site-header .wrap { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--star); text-decoration: none; font-weight: 600; letter-spacing: 0.01em; margin: -7px auto -7px -7px; padding: 7px; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.site-nav, .lang summary {
  background: rgb(var(--ink-rgb) / 0.55);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.site-nav { display: flex; gap: 2px; padding: 4px; }
.site-nav a { color: var(--atlas-2); text-decoration: none; font-size: 0.92rem; padding: 10px 14px; border-radius: var(--r-pill); white-space: nowrap; }
.site-nav a:hover { color: var(--star); }
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--station); }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 12px; color: var(--atlas-2); font-size: 0.92rem; }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; right: 0; top: calc(100% + 8px); margin: 0; padding: 8px; list-style: none; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r-m); min-width: 190px; max-height: 70vh; overflow: auto; box-shadow: 0 24px 60px rgb(var(--void-rgb) / 0.5); }
.lang li a { display: block; padding: 6px 12px; border-radius: var(--r-s); color: var(--atlas-2); text-decoration: none; }
.lang li a:hover, .lang li a[aria-current="true"] { background: var(--ink-3); color: var(--star); }
@media (max-width: 640px) {
  .site-nav a:not([aria-current="page"]):nth-child(n+3) { display: none; }
  .lang summary span:first-of-type { display: none; }
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-nav a { padding: 10px 12px; }
}

/* ---------- buttons ---------- */
.button, button.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 1rem/1 var(--sans); color: var(--ink); background: var(--station);
  border: 1px solid var(--station); border-radius: var(--r-pill); padding: 14px 22px; min-height: 48px;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 0 rgb(var(--station-rgb) / 0), 0 10px 30px -10px rgb(var(--glow-rgb) / 0.55);
  transition: transform 0.2s, box-shadow 0.2s;
}
.button:hover { color: var(--ink); transform: translateY(-1px); box-shadow: 0 0 0 6px rgb(var(--station-rgb) / 0.12), 0 14px 36px -12px rgb(var(--glow-rgb) / 0.7); }
.button.ghost { background: transparent; color: var(--station); box-shadow: none; }
.button.ghost:hover { background: rgb(var(--station-rgb) / 0.08); }
button { font: inherit; color: inherit; }
.linkish { background: none; border: 0; padding: 0; color: var(--station); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; cursor: pointer; font-size: inherit; }
.badge { display: inline-block; line-height: 0; border-radius: var(--r-s); }
.badge img { height: 54px; width: auto; }
.note { color: var(--atlas); font-size: 0.86rem; margin: 14px 0 0; }

/* ---------- the story: a pinned stage (globe → your sky) with beats scrolling over it ---------- */
.story { position: relative; --p: 0; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.sky {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 40%, rgb(var(--dusk-rgb) / 0.55), transparent 60%),
    linear-gradient(180deg, var(--zenith) 0%, var(--ink) 55%, var(--ink-2) 100%);
}
.sky::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, var(--dusk) 42%, var(--twilight) 64%, var(--haze) 82%, var(--ember) 100%);
  opacity: clamp(0, calc((var(--p) - 0.55) * 3), 1);
}
.horizon {
  position: absolute; inset: auto -10% -2px; height: 40%; z-index: 1; pointer-events: none;
  background: radial-gradient(70% 90% at 50% 100%, rgb(var(--ember-rgb) / 0.5), rgb(var(--ember-rgb) / 0.12) 45%, transparent 70%);
  opacity: clamp(0.18, calc(var(--p) * 1.6), 1);
}
#globe {
  position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.4s ease;
  cursor: grab; touch-action: pan-y;
}
#globe:active { cursor: grabbing; }
.globe-ready #globe { opacity: clamp(0, calc(1 - (var(--p) - 0.8) * 5), 1); transition: opacity 0.2s linear; }
.no-webgl .sky { background:
    radial-gradient(38vmin 38vmin at 66% 48%, rgb(var(--air-rgb) / 0.35), rgb(var(--dusk-rgb) / 0.4) 60%, transparent 62%),
    radial-gradient(120% 90% at 78% 40%, rgb(var(--dusk-rgb) / 0.55), transparent 60%),
    linear-gradient(180deg, var(--zenith) 0%, var(--ink) 55%, var(--ink-2) 100%); }

.stage-dial {
  position: absolute; z-index: 2; margin: 0;
  right: max(var(--gutter), 6vw); top: 50%; width: min(42vw, 520px);
  transform: translateY(-50%) scale(calc(0.92 + 0.08 * clamp(0, calc((var(--p) - 0.72) * 5), 1)));
  opacity: clamp(0, calc((var(--p) - 0.72) * 5), 1);
  pointer-events: none;
}
/* One grid for all rows (subgrid), so the label column is as wide as the longest label in every language. */
.steps { list-style: none; margin: 8px auto 0; padding: 0; display: grid; grid-template-columns: max-content max-content 1fr; gap: 6px 12px; width: min(100%, 420px); }
.steps li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; font-size: 0.95rem; }
.step-time { font-family: var(--sans); font-size: 0.8rem; color: var(--station); }
.step-label { font-family: var(--sans); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--atlas-2); }
.step-where { color: var(--atlas-2); }

.track { position: relative; z-index: 3; margin-top: -100vh; margin-top: -100svh; }
.beat {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  width: min(600px, 100% - 2 * var(--gutter)); margin-left: max(var(--gutter), 6vw);
  padding: 110px 0 72px;
  opacity: 0.45; transition: opacity 0.6s ease, transform 0.6s ease; transform: translateY(12px);
}
.beat.is-active { opacity: 1; transform: none; }
.beat h2 { margin-bottom: 0.35em; }
.beat > h2 + p { color: var(--atlas-2); font-size: 1.15rem; max-width: 34em; }
.beat-dial { min-height: 130vh; justify-content: center; }

/* hero */
.live { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 22px; font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--atlas); }
.live > span:not(.live-dot):not(:empty) + span:not(:empty)::before { content: "·"; margin: 0 0.7em; color: var(--line-2); }
.live-label { color: var(--station); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); margin-right: 10px; box-shadow: 0 0 0 0 rgb(var(--ember-rgb) / 0.7); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgb(var(--ember-rgb) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--ember-rgb) / 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.hero h1 { margin-bottom: 0.45em; max-width: 11em; }
.answer {
  position: relative; padding: 22px 24px 20px; margin: 0 0 26px; max-width: 32rem;
  background: linear-gradient(160deg, rgb(var(--dusk-rgb) / 0.55), rgb(var(--ink-rgb) / 0.55));
  border: 1px solid var(--line-2); border-radius: var(--r-l);
  backdrop-filter: blur(14px) saturate(1.3);
}
.answer::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgb(var(--station-rgb) / 0.55), transparent 40%); -webkit-mask: linear-gradient(var(--void) 0 0) content-box, linear-gradient(var(--void) 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.answer p { margin: 0; }
.answer-place { font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--atlas); margin-bottom: 10px !important; }
.answer-place .linkish { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 0.85rem; padding: 13px 8px; margin: -13px -8px -13px 0; }
.answer-when { font: normal 700 clamp(1.9rem, 1.2rem + 2vw, 2.9rem)/1.05 var(--display); white-space: nowrap; color: var(--station); text-shadow: 0 0 28px rgb(var(--glow-rgb) / 0.35); margin-bottom: 8px !important; }
:lang(ja) .answer-when, :lang(ko) .answer-when, :lang(zh-Hans) .answer-when { font-style: normal; font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem); }
.answer-look { font-size: 1.22rem; color: var(--star); }
.answer-meta { margin-top: 10px !important; font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--atlas); }
.answer[data-state="loading"] .answer-when { width: 9ch; height: 1em; border-radius: var(--r-s); background: linear-gradient(90deg, rgb(var(--station-rgb) / 0.08), rgb(var(--station-rgb) / 0.2), rgb(var(--station-rgb) / 0.08)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.answer[data-state="none"] .answer-look, .answer[data-state="error"] .answer-look { font-size: 1.05rem; color: var(--atlas-2); }
.answer-note { margin-top: 10px !important; font-size: 0.9rem; color: var(--atlas-2); }
.answer-retry { margin-top: 14px; }
.answer-retry[hidden], .answer-note[hidden] { display: none; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero .note { margin-top: 16px; }

@media (max-width: 900px) {
  .stage-dial { left: 50%; right: auto; top: 6svh; width: min(88vw, 420px); transform: translateX(-50%) scale(calc(0.92 + 0.08 * clamp(0, calc((var(--p) - 0.72) * 5), 1))); }
  .beat { margin-inline: auto; justify-content: flex-end; padding-bottom: 48px; }
  .beat > * { position: relative; }
  .beat.hero { padding-top: 34svh; }
  .beat { position: relative; }
  .beat:not(.hero)::before { content: ""; position: absolute; z-index: -1; inset: 30% calc(50% - 50vw) -16vh; background: linear-gradient(180deg, transparent 0%, rgb(var(--ink-rgb) / 0.82) 30%, rgb(var(--ink-rgb) / 0.82) 70%, transparent 100%); pointer-events: none; }
  .live { text-shadow: 0 1px 8px rgb(var(--void-rgb) / 0.9); }
  .beat-dial { justify-content: flex-end; }
  .hero h1 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .beat { transition: none; transform: none; opacity: 1; }
}

/* ---------- sections ---------- */
section:not(.beat) { padding: clamp(72px, 10vw, 140px) 0; position: relative; }
.section-head { margin-bottom: clamp(28px, 4vw, 48px); max-width: 44rem; }
.section-head p { color: var(--atlas-2); font-size: 1.1rem; }

/* finder */
.finder { background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 30%); border-top: 1px solid var(--line); }
.finder-place { font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--station) !important; }
.finder-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 14px; }
.search { position: relative; flex: 1 1 280px; max-width: 420px; }
.search input {
  width: 100%; min-height: 48px; padding: 12px 18px 12px 44px; border-radius: var(--r-pill);
  font: 400 1rem var(--sans); color: var(--star);
  background: var(--glass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%239aa2c4' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M12.5 12.5L17 17'/%3E%3C/svg%3E") no-repeat 16px 50%;
  border: 1px solid var(--line-2);
}
.search input::placeholder { color: var(--atlas); }
.search input:focus { outline: none; border-color: var(--station); box-shadow: 0 0 0 4px rgb(var(--station-rgb) / 0.15); }
#place-results { position: absolute; z-index: 5; inset: calc(100% + 6px) 0 auto; margin: 0; padding: 6px; list-style: none; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r-m); box-shadow: 0 24px 60px rgb(var(--void-rgb) / 0.55); }
#place-results li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--r-s); cursor: pointer; }
#place-results li span { color: var(--atlas); font-size: 0.9rem; }
#place-results li:hover, #place-results li[aria-selected="true"] { background: var(--ink-3); }
#place-results li[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--station); }
#place-results li.none { cursor: default; color: var(--atlas); }
.toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--atlas-2); font-size: 0.95rem; cursor: pointer; }
.toggle input { accent-color: var(--station); width: 18px; height: 18px; }
.privacy-note { color: var(--atlas); font-size: 0.9rem; margin-bottom: 26px; }
#finder-status { color: var(--station); }

.pass-list { border-top: 1px solid var(--line); }
.pass-list .day { font: normal 500 1.5rem/1.2 var(--display); color: var(--atlas-2); margin: 34px 0 6px; }
:lang(ja) .pass-list .day, :lang(ko) .pass-list .day, :lang(zh-Hans) .pass-list .day { font-style: normal; font-size: 1.2rem; }
.pass { display: grid; grid-template-columns: 72px max-content minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pass p { margin: 0; }
.pass-dial svg { width: 72px; height: 72px; }
.pass-time { font: 500 1.4rem/1 var(--sans); color: var(--station); letter-spacing: -0.02em; white-space: nowrap; min-width: 6ch; }
.pass-look { font-size: 1.04rem; }
.pass-look span { display: block; color: var(--atlas); font-size: 0.9rem; }
.pass-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: flex-end; font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--atlas); }
.pass .b { color: var(--star); }
.pass .b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--station); }
.pass .b4::before { box-shadow: 0 0 10px 3px rgb(var(--glow-rgb) / 0.8); }
.pass .b3::before { box-shadow: 0 0 6px 1px rgb(var(--glow-rgb) / 0.6); }
.pass .b2::before { opacity: 0.7; }
.pass .b1::before { opacity: 0.4; }
.pass.is-dim { opacity: 0.55; }
.empty { color: var(--atlas-2); padding: 24px 0; }
@media (max-width: 720px) {
  .pass { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "dial time" "dial look" "meta meta"; gap: 4px 16px; }
  .pass-dial { grid-area: dial; align-self: start; }
  .pass-dial svg { width: 64px; height: 64px; }
  .pass-time { grid-area: time; }
  .pass-look { grid-area: look; }
  .pass-meta { grid-area: meta; justify-content: flex-start; margin-top: 6px; }
}

/* the dial (shared by the story and the list) */
.dial { width: 100%; height: auto; overflow: visible; }
.dial-rim { stroke: rgb(var(--atlas-2-rgb) / 0.5); stroke-width: 1; }
.dial-compact .dial-rim { stroke: rgb(var(--atlas-2-rgb) / 0.35); }
.dial-ring { fill: none; stroke: rgb(var(--atlas-2-rgb) / 0.22); stroke-dasharray: 2 5; }
.dial-tick { stroke: rgb(var(--atlas-2-rgb) / 0.4); stroke-width: 1; }
.dial-tick.major { stroke: rgb(var(--atlas-2-rgb) / 0.75); stroke-width: 1.4; }
.dial-label { font: 500 13px var(--sans); fill: var(--atlas); letter-spacing: 0.08em; }
.dial-label.north { fill: var(--star); }
.dial-path { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.dial-compact .dial-path { stroke-width: 2.4; }
.dial-path-glow { fill: none; stroke: rgb(var(--glow-rgb) / 0.45); stroke-width: 10; stroke-linecap: round; }
.dial-compact .dial-path-glow { stroke-width: 4; }
.dial-start { fill: none; stroke: var(--station); stroke-width: 2; }
.dial-head { fill: var(--station); }
.dial-dot-halo { fill: rgb(var(--station-rgb) / 0.28); }
.dial-dot-core { fill: var(--station-core); }

/* what you'll see */
.see { background: var(--ink); }
.see-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.see-scene { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgb(var(--ember-rgb) / 0.35); }
.see-scene svg { width: 100%; height: auto; aspect-ratio: 800 / 420; }
.see-scene .stars circle { fill: var(--star); opacity: 0.7; }
.see-path { fill: none; stroke: rgb(var(--station-rgb) / 0.14); stroke-width: 1.5; stroke-dasharray: 3 7; }
.see-iss { offset-path: path("M60 330 Q380 40 720 250"); offset-rotate: 0deg; animation: glide 11s linear infinite; }
@keyframes glide {
  0% { offset-distance: 0%; opacity: 0; }
  6% { opacity: 1; }
  66% { opacity: 1; }
  74% { opacity: 0; offset-distance: 74%; }
  100% { offset-distance: 74%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .see-iss { animation: none; offset-distance: 42%; } }
.land { fill: var(--zenith); }
.see-text p { color: var(--atlas-2); font-size: 1.15rem; }
@media (max-width: 860px) { .see-grid { grid-template-columns: 1fr; } }

/* the app */
.app { background: radial-gradient(90% 60% at 50% 0%, rgb(var(--dusk-rgb) / 0.45), transparent 70%), var(--ink); border-top: 1px solid var(--line); }
.app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.app-card { background: linear-gradient(180deg, rgb(var(--ink-3-rgb) / 0.7), rgb(var(--ink-2-rgb) / 0.5)); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 22px 26px; }
.app-card h3 { margin-top: 22px; }
.app-card p { color: var(--atlas-2); margin: 0; }
.mock { min-height: 150px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-l); background: radial-gradient(120% 120% at 20% 0%, var(--twilight), var(--ink) 70%); padding: 18px; }
.mock p { margin: 0; }
.mock-notif { align-items: flex-start; justify-content: flex-start; gap: 10px; }
.mock-notif > div { background: rgb(var(--star-rgb) / 0.14); backdrop-filter: blur(10px); border-radius: var(--r-m); padding: 10px 12px; flex: 1; }
.mock-icon { width: 30px; height: 30px; border-radius: 8px; flex: none; margin-top: 10px; background: radial-gradient(circle at 62% 38%, var(--glow) 0 16%, transparent 17%), linear-gradient(160deg, var(--twilight), var(--ink)); }
.mock-app { font-size: 0.72rem; color: var(--atlas-2); display: flex; justify-content: space-between; }
.mock-title { font-weight: 600; font-size: 0.92rem; }
.mock-body { font-size: 0.86rem; color: var(--atlas-2); }
.mock-activity { background: var(--void); gap: 14px; justify-content: flex-start; border-radius: var(--r-l); }
.mock-count { font: 500 1.6rem/1.1 var(--sans); color: var(--station); }
.mock-dial { width: 60px; height: 60px; flex: none; }
.mock-dial circle:first-child { fill: rgb(var(--dusk-rgb) / 0.6); stroke: rgb(var(--atlas-2-rgb) / 0.5); }
.mock-dial path { fill: none; stroke: var(--station); stroke-width: 2.6; stroke-linecap: round; }
.mock-dial .dot { fill: var(--station-core); }
.mock-widget { flex-direction: column; align-items: flex-start; width: 160px; height: 160px; min-height: 0; margin-inline: auto; position: relative; background: linear-gradient(180deg, var(--dusk), var(--twilight) 70%, var(--haze)); border-radius: var(--r-xl); }
.mock-widget .mock-dial { position: absolute; right: 12px; bottom: 12px; width: 52px; height: 52px; }
.mock-day { font-size: 0.75rem; color: var(--atlas-2); font-weight: 600; }
.mock-time { font: 600 1.9rem/1.1 var(--sans); }
.mock-weather { font: 400 0.72rem var(--sans); color: var(--station); }
.app-cta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (max-width: 860px) { .app-grid { grid-template-columns: 1fr; } }

/* crew */
.crew { background: var(--ink-2); border-top: 1px solid var(--line); }
.crew-count { font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--station) !important; }
.crew-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 32px; }
.crew-list li { display: grid; grid-template-columns: 34px 1fr; grid-template-areas: "flag name" "flag role" "flag days"; padding: 16px 0; border-bottom: 1px solid var(--line); }
.crew-flag { grid-area: flag; font-size: 1.3rem; line-height: 1.5; }
.crew-name { grid-area: name; font: normal 500 1.45rem/1.15 var(--display); }
:lang(ja) .crew-name, :lang(ko) .crew-name, :lang(zh-Hans) .crew-name { font-style: normal; font-size: 1.15rem; }
.crew-role { grid-area: role; font-size: 0.92rem; color: var(--atlas-2); }
.crew-days { grid-area: days; font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--atlas); }
.crew-next { margin-top: 26px; font-size: 1.05rem; color: var(--station); }
.crew-more { margin-top: 18px; }
.crew-more a, .crew-links a { color: var(--station); }

/* /crew page (rendered by the Worker from Site/src/crew.mjs) */
.crew-page { padding-top: 120px; padding-bottom: 48px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 18px; padding: 0; list-style: none; color: var(--atlas); font-size: var(--fs-footnote); }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--atlas); }
.crumbs a { color: var(--atlas-2); display: inline-block; padding-block: 10px; }
.crew-section { margin-top: 40px; }
.crew-section h2 { font-size: var(--fs-title-2); line-height: var(--lh-title-2); letter-spacing: var(--ls-title-2); margin-bottom: 14px; }
.crew-updated { color: var(--atlas); font-size: var(--fs-footnote); }
.crew-cards { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.crew-card { display: flex; gap: 16px; align-items: flex-start; background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px; min-width: 0; }
.crew-initials, .crew-photo { flex: none; width: 56px; height: 56px; border-radius: var(--r-pill); }
.crew-initials { display: grid; place-items: center; background: rgb(var(--station-rgb) / 0.14); color: var(--station); font: 600 1.05rem/1 var(--sans); letter-spacing: 0.04em; }
.crew-photo { object-fit: cover; }
.crew-body { min-width: 0; }
.crew-body p { margin: 4px 0 0; }
.crew-card .crew-name { margin: 0; font: normal 500 1.35rem/1.2 var(--display); }
.crew-card .crew-role { font-size: var(--fs-callout); }
.crew-country { color: var(--atlas-2); font-size: var(--fs-callout); }
.crew-card .crew-days { color: var(--station); }
.crew-credit { color: var(--atlas); font-size: var(--fs-footnote); }
.docked-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 32px; }
.docked-list li { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.docked-name { font-weight: 600; }
.docked-meta { color: var(--atlas-2); font-size: var(--fs-callout); }
.docked-since { color: var(--atlas); font-size: var(--fs-footnote); }
.coming { margin: 0; display: grid; gap: 12px; }
.coming div { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 18px; }
.coming dt { color: var(--atlas); font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--sans); letter-spacing: var(--ls-label); text-transform: uppercase; }
.coming dd { margin: 6px 0 0; }
.coming-detail { display: block; color: var(--atlas); font-size: var(--fs-footnote); }
.crew-app { margin-top: 40px; }
.crew-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 20px 0 0; padding: 0; list-style: none; }
.crew-links a { display: inline-block; padding-block: 10px; }

/* promise */
.promise { padding: clamp(56px, 7vw, 96px) 0 !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.promise ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; font: normal 500 clamp(1.7rem, 1.1rem + 2vw, 2.8rem)/1.2 var(--display); }
.promise li + li::before { content: "✦"; font-style: normal; font-size: 0.45em; vertical-align: 0.5em; color: var(--ember); margin: 0 0.8em; }
:lang(ja) .promise ul, :lang(ko) .promise ul, :lang(zh-Hans) .promise ul { font-style: normal; font-size: 1.5rem; }
.promise p { color: var(--atlas-2); margin: 0; }

/* faq */
.faq h2 { margin-bottom: 0.6em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font: normal 500 1.5rem/1.25 var(--display); }
:lang(ja) .faq summary, :lang(ko) .faq summary, :lang(zh-Hans) .faq summary { font-style: normal; font-size: 1.15rem; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 300 1.6rem var(--sans); color: var(--station); transition: transform 0.25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--atlas-2); padding-bottom: 20px; margin: 0; }

/* final */
.final { text-align: center; background: radial-gradient(70% 70% at 50% 110%, rgb(var(--ember-rgb) / 0.28), transparent 70%); }
.final .hero-actions { justify-content: center; margin-top: 24px; }
.final p { color: var(--star); font-size: 1.12rem; }
.credits { margin-top: 56px; font-size: 0.82rem !important; color: var(--star) !important; }

/* ---------- other pages ---------- */
main > section:first-child:not(.beat), main > .read:first-child, .live-head { padding-top: 120px; }
.prose { padding: 120px 0 80px; }
.prose h1 { font-size: clamp(2.4rem, 1.4rem + 3vw, 3.8rem); }
.prose h2 { font-size: var(--fs-title-2); line-height: var(--lh-title-2); letter-spacing: var(--ls-title-2); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose p, .prose li { color: var(--atlas-2); }
.prose ul { padding-left: 1.2em; }
.prose .updated { color: var(--atlas); font-family: var(--sans); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.prose figure { margin: 28px 0; }
.prose figure img { border-radius: var(--r-m); }
.prose figcaption { color: var(--atlas); font-size: 0.86rem; margin-top: 8px; }
.callout { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 24px 0; }
.cta .note { margin: 0; }

/* live page */
.live-head { padding-bottom: 12px; }
.live-head p { color: var(--atlas-2); max-width: 44em; }
.map-wrap { position: relative; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); background: var(--ink-2); }
.map-wrap svg { width: 100%; height: auto; }
.map-land { fill: var(--twilight); stroke: var(--ink-2); stroke-width: 0.25; }
.map-graticule { stroke: var(--atlas); stroke-opacity: 0.25; stroke-width: 0.3; fill: none; }
.map-night { fill: rgb(var(--zenith-rgb) / 0.55); }
.map-past { fill: none; stroke: var(--station); stroke-opacity: 0.55; stroke-width: 2; stroke-dasharray: 5 4; stroke-linecap: round; }
.map-next { fill: none; stroke: var(--station); stroke-width: 2.5; stroke-linecap: round; }
.map-iss { fill: var(--station); stroke: var(--ink); stroke-width: 1; }
.map-iss-glow { fill: var(--station); opacity: 0.3; }
.map-status { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; background: rgb(var(--ink-rgb) / 0.7); }
.map-status[hidden] { display: none; }
.map-status p { margin: 0 0 12px; font-weight: 600; }
.map-status button { border-radius: var(--r-pill); border: 1px solid var(--station); background: transparent; color: var(--station); padding: 8px 18px; cursor: pointer; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--atlas); font-size: 0.9rem; margin: 10px 0 0; padding: 0; list-style: none; }
.legend span { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--station); vertical-align: middle; margin-right: 6px; }
.legend .past span { border-top-style: dashed; opacity: 0.7; }
.legend .night span { height: 12px; border: 0; background: rgb(var(--zenith-rgb) / 0.55); outline: 1px solid var(--line); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats div { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; min-width: 0; }
.stats dt { color: var(--atlas); font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--sans); letter-spacing: var(--ls-label); text-transform: uppercase; }
.stats dd { margin: 4px 0 0; font: 500 1.15rem/1.2 var(--sans); color: var(--station); }
.stats dd small { display: block; font: 400 0.8rem var(--sans); color: var(--atlas); }
.over { margin: 16px 0 0; font: normal 500 1.6rem var(--display); }
.source { color: var(--atlas); font-size: 0.86rem; margin-top: 12px; }
.stale { background: rgb(var(--station-rgb) / 0.12); border-radius: var(--r-s); padding: 10px 14px; }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 56px; color: var(--atlas); font-size: 0.92rem; background: var(--zenith); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 22px; margin-bottom: 8px; }
.site-footer nav a { display: inline-block; padding-block: 10px; }
.site-footer a { color: var(--atlas-2); text-decoration: none; }
.site-footer a:hover { color: var(--star); }
.site-footer .langs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 18px; padding: 0; list-style: none; }
.site-footer .langs a { color: var(--atlas); }
.site-footer .langs a[aria-current="true"] { color: var(--station); }

/* System type: numbers line up, labels are small caps-like tracking without a mono face. */
.live, .answer-place, .answer-meta, .finder-place, .crew-count, .crew-days, .crew-updated, .docked-since, .pass-meta, .step-time, .step-label, .stats dt, .prose .updated, .mock-count, .pass-time { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.pass-time, .mock-count, .stats dd { letter-spacing: -0.01em; font-weight: 600; }
.answer-when { font-weight: 700; letter-spacing: -0.03em; }

/* 14-night calendar: each column is a night (6 p.m. at the top, 6 a.m. at the bottom). */
.pass-calendar { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; margin: 8px 0 34px; }
.cal-item { display: grid; }
.cal-night { display: grid; grid-template-rows: 120px auto auto; gap: 6px; padding: 0; background: none; border: 0; color: var(--atlas); cursor: default; text-align: center; }
.cal-night.has { cursor: pointer; }
.cal-sky { position: relative; border-radius: var(--r-s); background: linear-gradient(180deg, var(--twilight) 0%, var(--dusk) 30%, var(--ink-2) 60%, var(--dusk) 85%, var(--gloaming) 100%); border: 1px solid var(--line); overflow: hidden; }
.cal-night.has .cal-sky { border-color: rgb(var(--station-rgb) / 0.35); }
.cal-night.has:hover .cal-sky { border-color: var(--station); }
.cal-dot { position: absolute; left: 50%; top: calc(8px + var(--y) * (100% - 16px)); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--station); }
.cal-dot.b4 { box-shadow: 0 0 10px 3px rgb(var(--glow-rgb) / 0.85); }
.cal-dot.b3 { box-shadow: 0 0 6px 2px rgb(var(--glow-rgb) / 0.6); }
.cal-dot.b2 { opacity: 0.75; }
.cal-dot.b1 { opacity: 0.45; }
.cal-wd { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.cal-d { font-size: 0.95rem; color: var(--atlas-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-night.has .cal-d { color: var(--station); }
@media (max-width: 640px) { .pass-calendar { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px 4px; } .cal-night { grid-template-rows: 90px auto auto; } .cal-sky { border-radius: 8px; } }

/* The app: one lock screen at the moment it matters (five minutes before a pass). */
.app-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.phone { justify-self: center; width: min(330px, 80vw); aspect-ratio: 9 / 19.5; border-radius: 54px; padding: 12px; background: linear-gradient(145deg, var(--device-hi), var(--device-lo) 40%, var(--device-hi)); box-shadow: 0 60px 120px -40px rgb(var(--ember-rgb) / 0.35), 0 30px 60px -30px rgb(var(--void-rgb) / 0.8), inset 0 0 0 1px rgb(var(--star-rgb) / 0.08); }
.phone-screen { position: relative; height: 100%; border-radius: 44px; overflow: hidden; padding: 58px 14px 18px; display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(1.2px 1.2px at 20% 18%, rgb(var(--star-rgb) / 0.53) 50%, transparent), radial-gradient(1px 1px at 70% 12%, rgb(var(--star-rgb) / 0.40) 50%, transparent), radial-gradient(1.3px 1.3px at 84% 30%, rgb(var(--star-rgb) / 0.47) 50%, transparent), radial-gradient(1px 1px at 36% 34%, rgb(var(--star-rgb) / 0.33) 50%, transparent),
    linear-gradient(180deg, var(--ink) 0%, var(--dusk) 45%, var(--twilight) 65%, var(--haze) 85%, var(--ember) 100%); }
.island { position: absolute; top: 12px; left: 50%; width: 34%; height: 30px; margin-left: -17%; border-radius: var(--r-l); background: var(--void); }
.ls-date { margin: 0; font-size: 0.95rem; font-weight: 600; color: rgb(var(--star-rgb) / 0.85); }
.ls-time { margin: 0 0 22px; font: 700 4.6rem/1 var(--display); letter-spacing: -0.04em; color: rgb(var(--star-rgb) / 0.92); font-variant-numeric: tabular-nums; }
.ls-activity { width: 100%; display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r-l); background: rgb(var(--void-rgb) / 0.72); backdrop-filter: blur(12px); margin-bottom: 10px; }
.ls-activity p { margin: 0; }
.ls-notif { width: 100%; display: flex; gap: 10px; padding: 12px; border-radius: var(--r-l); background: rgb(var(--star-rgb) / 0.16); backdrop-filter: blur(14px); }
.ls-notif p { margin: 0; }
.ls-notif .mock-icon { margin-top: 2px; }
.app-copy h2 { margin-bottom: 0.6em; }
.app-points { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 22px; }
.app-points li { padding-left: 22px; border-left: 2px solid rgb(var(--station-rgb) / 0.35); }
.app-points h3 { margin: 0 0 4px; font-size: 1.15rem; }
.app-points p { margin: 0; color: var(--atlas-2); }
@media (max-width: 860px) { .app-layout { grid-template-columns: 1fr; } .phone { order: 2; } }

/* Rhythm: the page gets later in the evening as you scroll: night → blue hour → the last glow. */
.finder { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); }
.see { background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink-3) 100%); border-top: 1px solid var(--line); }
.app { background: radial-gradient(80% 60% at 30% 40%, rgb(var(--haze-rgb) / 0.35), transparent 70%), linear-gradient(180deg, var(--ink-3) 0%, var(--dusk) 100%); }
.crew { background: linear-gradient(180deg, var(--dusk) 0%, var(--dusk) 100%); }
.promise { background: linear-gradient(180deg, var(--dusk) 0%, var(--twilight) 100%); border: 0; padding: clamp(44px, 5vw, 72px) 0 !important; }
.promise ul { font: 700 clamp(1.3rem, 1rem + 1.2vw, 1.9rem)/1.3 var(--display); letter-spacing: -0.02em; gap: 4px 28px; }
.promise li + li::before { content: none; }
.promise li { color: var(--star); }
.faq { background: linear-gradient(180deg, var(--twilight) 0%, var(--gloaming) 100%); }
.final { background: radial-gradient(90% 80% at 50% 115%, rgb(var(--ember-rgb) / 0.55), transparent 70%), linear-gradient(180deg, var(--gloaming) 0%, var(--haze) 70%, var(--haze) 100%); }
.site-footer { background: var(--ink); }
.faq details { border-bottom-color: rgb(var(--star-rgb) / 0.14); }

/* Live map: the notes under the map read as an article, not as page sections. */
.live-more { padding: 72px 0 104px; }
.live-more .callout { padding: 32px; margin-bottom: 8px; }
.live-more .callout h2 { font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); }
.live-more h2:not(.callout h2) { font-size: var(--fs-title-2); line-height: var(--lh-title-2); letter-spacing: var(--ls-title-2); margin-top: 1.8em; }
.live-more .read > p { color: var(--atlas-2); }

/* Contact card (DESIGN.md › Contact card): the same facts and order as the app's Settings › About. */
.contact-card { margin: var(--space-xl) 0 0; padding: var(--space-xl); border-radius: var(--r-l); background: linear-gradient(160deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--line); display: grid; gap: var(--space-l); }
.cc-head { display: flex; align-items: center; gap: var(--space-l); }
.cc-head img { width: 64px; height: 64px; border-radius: 22.37%; flex: none; }
.contact-card p { margin: 0; }
.cc-name { font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--display); letter-spacing: var(--ls-title-2); color: var(--star); }
.cc-tag { color: var(--atlas-2); font-size: var(--fs-callout); }
.cc-rows { margin: 0; display: grid; border-top: 1px solid var(--line); }
.cc-rows > div { display: flex; justify-content: space-between; gap: var(--space-l); padding: var(--space-m) 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cc-rows dt { color: var(--atlas); font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; align-self: center; }
.cc-rows dd { margin: 0; overflow-wrap: anywhere; }
.cc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); }
.cc-legal { color: var(--atlas); font-size: var(--fs-footnote); }
.cc-legal a { color: var(--atlas-2); }

/* ---------- analytics consent (build.mjs consentBanner; src/analytics.mjs) ---------- */
/* Small and non-modal, bottom of the viewport; Accept and Reject share one style and one width. */
.consent {
  position: fixed; z-index: 40; inset: auto var(--gutter) max(var(--space-l), env(safe-area-inset-bottom)) auto;
  width: min(440px, calc(100vw - 2 * var(--gutter))); padding: var(--space-l) var(--space-l) var(--space-m);
  background: var(--glass); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line-2); border-radius: var(--r-l); color: var(--atlas-2);
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); box-shadow: 0 24px 60px rgb(var(--void-rgb) / 0.55);
}
.consent[hidden] { display: none; }
.consent-title { margin: 0 0 var(--space-xs); font: var(--fw-headline) var(--fs-headline)/var(--lh-headline) var(--sans); color: var(--star); letter-spacing: var(--ls-headline); }
.consent p { margin: 0 0 var(--space-m); }
.consent a { color: var(--station); }
.consent-actions { display: flex; gap: var(--space-s); }
.consent-actions .button { flex: 1 1 0; min-height: 44px; padding: 10px 16px; }
.footer-choices { color: var(--atlas-2); text-decoration: none; padding-block: 10px; font-size: inherit; }
.footer-choices:hover { color: var(--star); }

/* Japanese: break headings between phrases, never inside a word (Chrome 119+; others ignore it). */
:lang(ja) :is(h1, h2, h3, .answer-when, .answer-look, .beat p) { word-break: auto-phrase; }
/* Korean: spaces separate words, so break only there (localization review 9). */
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }