/* Raaz — the editorial layer: one design language for every reading surface.
   Colours come from tokens.css only. Type, rhythm and the three-track layout are
   set here so Explore, On this day, the atlas panels and the account pages read
   as one book rather than four sites. */

:root {
  color-scheme: dark;

  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;

  /* one fluid scale, 320px → 1440px */
  --step--1: clamp(12.5px, 0.2vw + 12px, 14px);
  --step-0: clamp(16px, 0.25vw + 15px, 18px);
  --step-1: clamp(19px, 0.5vw + 17px, 22px);
  --step-2: clamp(24px, 1vw + 20px, 30px);
  --step-3: clamp(30px, 1.8vw + 24px, 44px);
  --step-4: clamp(38px, 3.2vw + 28px, 66px);
  --step-5: clamp(46px, 6vw + 28px, 104px);

  /* vertical rhythm */
  --flow: 1.1em;
  --section: clamp(48px, 7vw, 104px);
  --gutter: clamp(16px, 4vw, 44px);

  /* the three tracks: text column, wide, and full bleed */
  --measure: 66ch;
  --wide: 1180px;

  --hair: color-mix(in srgb, var(--signal-brass) 34%, transparent);
  --hair-quiet: color-mix(in srgb, var(--textOnDark-primary) 14%, transparent);
  --glass: color-mix(in srgb, var(--surface-deep) 66%, transparent);
  --raise: color-mix(in srgb, var(--surface-lapis) 55%, transparent);
  --shadow: 0 18px 50px -24px var(--effect-shadowBase);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  color: var(--textOnDark-primary);
  font: 400 var(--step-0)/1.68 var(--sans);
  background:
    radial-gradient(120% 70% at 78% -12%, color-mix(in srgb, var(--surface-blue) 80%, transparent), transparent 62%),
    radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, var(--surface-lapis) 55%, transparent), transparent 58%),
    var(--surface-deep);
  background-attachment: fixed;
}

a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accentOnDark-cyan); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* ── layout ──────────────────────────────────────────────────────────────── */
.page { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.column { width: 100%; max-width: var(--measure); margin-inline: auto; }
.bleed { width: 100%; }
.stack > * + * { margin-block-start: var(--flow); }
.section { padding-block: var(--section); border-top: 1px solid var(--hair-quiet); }
.section:first-of-type { border-top: 0; }

/* ── type ────────────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-5); line-height: 0.92; }
h2 { font-size: var(--step-3); line-height: 1.04; }
h3 { font-size: var(--step-2); line-height: 1.1; }
p { margin: 0; }

.kicker {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font: 500 var(--step--1)/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accentOnDark-cyan);
}
.kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; flex: none; }

.lede { font-size: var(--step-1); line-height: 1.55; color: var(--textOnDark-secondary); max-width: 56ch; }
.note { font: 400 var(--step--1)/1.65 var(--mono); color: var(--textOnDark-quiet); }
.caveat { font: 400 var(--step--1)/1.7 var(--mono); color: var(--textOnDark-quiet); }

/* body copy in a story: long measure, real leading, a drop cap to open */
.prose p { font-size: var(--step-0); line-height: 1.78; color: var(--textOnDark-secondary); max-width: var(--measure); }
.prose p + p { margin-top: var(--flow); }
.prose h3 { color: var(--signal-brass); margin-top: calc(var(--section) * 0.55); }
.prose h3 + p { margin-top: 0.6em; }
.prose > h3:first-child { margin-top: 0; }
.prose .opens::first-letter {
  float: inline-start; font-family: var(--serif); font-size: 3.4em; line-height: 0.78;
  padding-inline-end: 0.1em; padding-block-start: 0.06em; color: var(--signal-brass);
}

.pull {
  margin-block: calc(var(--section) * 0.5); padding-inline-start: clamp(14px, 2vw, 22px);
  border-inline-start: 2px solid var(--signal-red);
  font: 400 var(--step-2)/1.28 var(--serif); color: var(--textOnDark-primary); max-width: 34ch;
}
.pull small { display: block; margin-top: 10px; font: 500 var(--step--1) var(--mono); color: var(--textOnDark-quiet); letter-spacing: .08em; }

/* ── facts row: the numbers that describe a thing ────────────────────────── */
.facts { display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 54px); margin: 0; padding: 0; list-style: none; }
.facts div { min-width: 0; }
.facts dt, .facts .k { font: 500 var(--step--1) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--textOnDark-quiet); }
.facts dd, .facts .v { margin: 6px 0 0; font: 400 var(--step-2)/1 var(--serif); color: var(--textOnDark-primary); }
.facts .v b { font-weight: 400; color: var(--signal-brass); }

/* ── controls ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
  padding: 13px 20px; border-radius: 999px; border: 1px solid var(--hair); background: transparent;
  color: var(--textOnDark-primary); font: 500 var(--step--1) var(--mono); letter-spacing: .12em; text-transform: uppercase;
  transition: border-color .2s, background-color .2s, transform .2s;
}
.btn:hover, .btn:focus-visible { border-color: var(--signal-brass); background: color-mix(in srgb, var(--signal-brass) 12%, transparent); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--signal-brass); border-color: var(--signal-brass); color: var(--surface-deep); font-weight: 600; }
.btn.primary:hover { background: var(--accentOnDark-brass); }
.btn.quiet { border-color: var(--hair-quiet); color: var(--textOnDark-secondary); }

.chip {
  cursor: pointer; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--hair-quiet); background: transparent;
  color: var(--textOnDark-secondary); font: 500 var(--step--1) var(--mono); letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .2s, color .2s, background-color .2s;
}
.chip:hover { border-color: var(--signal-brass); color: var(--textOnDark-primary); }
.chip[aria-pressed="true"], .chip.on { background: var(--signal-brass); border-color: var(--signal-brass); color: var(--surface-deep); }

.field { display: grid; gap: 7px; }
.field > span { font: 500 var(--step--1) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--textOnDark-quiet); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px; color-scheme: dark;
  border: 1px solid var(--hair-quiet); background: var(--glass); color: var(--textOnDark-primary);
  font: 400 var(--step-0) var(--sans);
}
.field input::placeholder { color: var(--textOnDark-quiet); }
.field input:focus, .field select:focus { border-color: var(--signal-brass); }
.hint { font: 400 var(--step--1)/1.6 var(--sans); color: var(--textOnDark-quiet); }
.error { color: var(--accentOnDark-redLight); font: 500 var(--step--1)/1.6 var(--sans); }

/* ── surfaces ────────────────────────────────────────────────────────────── */
.card {
  display: block; padding: clamp(18px, 2.4vw, 28px); border-radius: 16px; text-decoration: none;
  border: 1px solid var(--hair-quiet); background: var(--raise); box-shadow: var(--shadow);
}
a.card, button.card { transition: border-color .2s, transform .25s; cursor: pointer; text-align: start; }
a.card:hover, button.card:hover, a.card:focus-visible, button.card:focus-visible { border-color: var(--signal-brass); transform: translateY(-3px); }

details.fold { border-top: 1px solid var(--hair-quiet); padding-top: 12px; margin-top: var(--section); }
details.fold summary { cursor: pointer; font: 500 var(--step--1) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--textOnDark-quiet); }
details.fold[open] summary { margin-bottom: 12px; }
details.fold ul { margin: 0; padding-inline-start: 18px; font: 400 var(--step--1)/1.75 var(--mono); color: var(--textOnDark-quiet); }

/* ── chrome: header and chapter rail ─────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--surface-deep) 82%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair-quiet);
}
.lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lockup .seal { width: 34px; height: 34px; flex: none; }
.lockup .wm { font: 500 13px var(--mono); letter-spacing: .26em; }
.lockup .fa { font: 22px/1 var(--serif); color: var(--signal-brass); }
.top nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); font: 500 var(--step--1) var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.top nav a { text-decoration: none; color: var(--textOnDark-quiet); padding-block: 4px; border-bottom: 1px solid transparent; white-space: nowrap; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--textOnDark-primary); border-color: var(--signal-brass); }

.rail {
  position: sticky; top: 62px; z-index: 20; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 10px 0; margin-bottom: var(--section);
  background: color-mix(in srgb, var(--surface-deep) 80%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair-quiet);
}
.rail::-webkit-scrollbar { display: none; }
.rail a {
  flex: none; text-decoration: none; padding: 8px 14px; border-radius: 999px;
  font: 500 var(--step--1) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--textOnDark-quiet);
}
.rail a[aria-current="true"] { background: color-mix(in srgb, var(--signal-brass) 18%, transparent); color: var(--textOnDark-primary); }

/* ── motion: present by default, removed when the reader asks ────────────── */
.rise-in { opacity: 0; transform: translateY(18px); }
.rise-in.shown { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .rise-in, .rise-in.shown { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ── cinema: the film behind the page, the sweep over it ─────────────────── */
/* A state opens on footage of a real place that stood inside its borders. The
   sonar sweep runs over the footage: the same object at two scales as the mark. */
.cinema { position: relative; min-height: min(86svh, 780px); display: grid; align-items: end; overflow: clip; isolation: isolate; }
.cinema > .film { position: absolute; inset: 0; z-index: -2; }
.cinema > .film video, .cinema > .film img { width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.72) contrast(1.05) blur(7px); transform: scale(1.12); }
.cinema::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, var(--surface-deep) 2%, color-mix(in srgb, var(--surface-deep) 72%, transparent) 38%, transparent 78%),
    linear-gradient(to right, color-mix(in srgb, var(--surface-deep) 78%, transparent), transparent 62%);
}
.cinema .page { padding-block: clamp(28px, 6vh, 72px); }
.cinema + .rail { margin-top: 0; }
.rail + .page > *:first-child .section:first-child,
.rail + .page .section:first-child { padding-top: clamp(28px, 4vw, 52px); }
.cinema h1 { text-shadow: 0 6px 40px var(--effect-shadowBase); }

/* the sweep, drawn over the footage */
.sweep { position: absolute; inset-block-start: clamp(12px, 4vh, 40px); inset-inline-end: clamp(12px, 4vw, 48px);
  width: clamp(120px, 16vw, 210px); aspect-ratio: 1; z-index: 0; opacity: .85; pointer-events: none; }
.sweep .ring { fill: none; stroke: var(--signal-brass); stroke-opacity: .55; }
.sweep .beam { transform-origin: 50% 50%; animation: sweep-turn 6s linear infinite; }
.sweep .contact { transform-box: fill-box; transform-origin: center; animation: sweep-ping 6s ease-out infinite; }
@keyframes sweep-turn { to { transform: rotate(360deg); } }
@keyframes sweep-ping { 0%, 10% { opacity: 0; transform: scale(.4); } 16% { opacity: 1; transform: scale(1.25); } 46%, 100% { opacity: 0; transform: scale(1); } }

/* film controls: sound off by default, a reader can stop it */
.film-ctl { position: absolute; inset-block-end: clamp(12px, 3vh, 26px); inset-inline-end: clamp(12px, 4vw, 48px); z-index: 2;
  display: flex; gap: 8px; }
.film-ctl button { padding: 9px 13px; font-size: 11px; }
.film-cred { position: absolute; inset-block-end: 6px; inset-inline-start: var(--gutter); z-index: 2;
  font: 400 11px var(--mono); color: color-mix(in srgb, var(--textOnDark-primary) 62%, transparent); }

/* ── the flash: black, then white, then the page ─────────────────────────── */
/* Two frames of attention before a story opens. It never repeats on a page. */
.flash { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: var(--surface-deep); animation: flash-cut .92s steps(1, end) forwards; }
@keyframes flash-cut {
  0% { background: #000; opacity: 1; }
  34% { background: #000; opacity: 1; }
  40% { background: #FFF; opacity: 1; }
  52% { background: #000; opacity: 1; }
  58% { background: #FFF; opacity: .92; }
  70% { background: var(--surface-deep); opacity: .7; }
  100% { background: var(--surface-deep); opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .flash { animation: flash-fade .5s ease-out forwards; }
  @keyframes flash-fade { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
  .sweep .beam, .sweep .contact { animation: none; }
  .cinema video { display: none; }
}