/* ELEVEN THREE — white world. Ink in milk.
   Type: JetBrains Mono for everything in the world (the fiction), Inter Tight for reading pages.
   Color: white light, black ink, one red. */

@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2"); }

:root {
  --milk: #f7f5f1;
  --paper: #ffffff;
  --ink: #141210;
  --ink-2: #5a5550;
  --ink-3: #a8a29a;
  --rule: #e2ddd5;
  --signal: #d6362b;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
  --measure: 34rem;
  --t1: clamp(2.6rem, 8.2vw, 8rem);
  --t2: clamp(1.7rem, 4vw, 3.6rem);
  --t3: clamp(1.1rem, 1.5vw, 1.35rem);
  --body: clamp(0.95rem, 1vw, 1.05rem);
  --small: 0.75rem;
}

* { box-sizing: border-box; }
html { background: var(--milk); color: var(--ink); }
body { margin: 0; font-family: var(--mono); font-size: var(--body); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
p { margin: 0 0 1em; max-width: var(--measure); }
h1, h2, h3 { font-family: var(--mono); font-weight: 500; margin: 0; line-height: 0.98; letter-spacing: -0.03em; text-transform: uppercase; }
h1 { font-size: var(--t1); }
h2 { font-size: var(--t2); }
h3 { font-size: var(--t3); line-height: 1.15; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- HUD ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter);
  font-size: var(--small); text-transform: uppercase; letter-spacing: 0.08em;
}
.top .mark { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.top .mark img { height: 44px; width: auto; display: block; }
.top nav { display: flex; align-items: center; gap: 0; border: 1px solid var(--ink); border-radius: 999px; padding: 4px 6px; background: rgba(247,245,241,0.6); backdrop-filter: blur(10px); }
.top nav a, .top nav button { padding: 7px 12px; border-radius: 999px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.top nav a[aria-current="page"], .top nav a:hover, .top nav button:hover { background: var(--ink); color: var(--milk); }
.top nav .sound[aria-pressed="true"] { background: var(--signal); color: var(--milk); }
@media (max-width: 640px) { .top nav a:not(.keep) { display: none; } }

/* progress: a thin ink line on the right edge, the flight's position */
.flight {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%); height: 36vh; width: 1px; background: var(--rule); z-index: 20;
}
.flight i { position: absolute; left: -2px; top: calc(var(--p, 0) * 100%); width: 5px; height: 5px; border-radius: 50%; background: var(--signal); transform: translateY(-50%); }
.flight b { position: absolute; left: -1px; width: 3px; height: 1px; background: var(--ink-3); }

/* ---------- world ---------- */
#world { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.world-static {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none;
  background: radial-gradient(900px 600px at 60% 40%, #ffffff, var(--milk) 70%);
}
.world-static svg { width: 100%; height: 100%; }
.world-off #world { display: none; }
.world-off .world-static { display: block; }

/* ---------- stations ---------- */
main.world-scroll { position: relative; z-index: 1; }
.station { min-height: 100svh; display: grid; align-content: center; padding: 18vh var(--gutter) max(12vh, 230px); }
.station.hero { align-content: center; }
.station .panel { max-width: 40rem; padding: 1.2rem 1.4rem; margin: -1.2rem -1.4rem; border-radius: 10px; background: radial-gradient(closest-side, rgba(247,245,241,0.75), rgba(247,245,241,0)); }
.station .meta { font-size: var(--small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin-bottom: 1rem; display: flex; gap: 1.2rem; }
.station .meta b { font-weight: 500; color: var(--signal); }
.station .lead { font-family: var(--sans); font-weight: 400; font-size: var(--t3); line-height: 1.35; margin-top: 1.2rem; max-width: 30rem; }
.station h2 a:hover { color: var(--signal); }
.station .next { display: inline-block; margin-top: 1.6rem; font-size: var(--small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); border-bottom: 1px solid var(--ink-3); padding-bottom: 2px; }
.station .next:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (min-width: 900px) {
  .station.alt { justify-items: end; }
  .station.alt .panel { margin-right: 4vw; }
  .station.mid { justify-items: center; text-align: center; }
  .station.mid .panel .lead, .station.mid .panel p { margin-left: auto; margin-right: auto; }
  .station.mid .meta { justify-content: center; }
}
@media (max-width: 899px) { .station { align-content: end; padding-bottom: max(16vh, 120px); } }

.station.hero .signature { width: clamp(260px, 38vw, 560px); height: auto; display: block; margin-bottom: 1.4rem; margin-left: -4%; filter: drop-shadow(0 18px 30px rgba(20,18,16,0.10)); overflow: visible; }
.signature .pen { fill: none; stroke: #fff; stroke-width: 120; stroke-linecap: round; stroke-linejoin: round; animation: pen linear forwards; }
@keyframes pen { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .signature .pen { animation: none; stroke-dashoffset: 0 !important; } }
.station.hero .meta { margin-bottom: 0.6rem; }
@media (max-width: 899px) { .station.hero { align-content: end; padding-bottom: 12vh; } .station.hero .signature { width: min(62vw, 320px); margin-bottom: 1rem; } .station .panel { background: radial-gradient(closest-side, rgba(247,245,241,0.55), rgba(247,245,241,0)); } }
/* the hero: live text over the world */
.station.hero h1 { font-size: var(--t1); }
.station.hero .lead { font-size: clamp(1rem, 1.4vw, 1.25rem); }

.scroll-hint {
  position: fixed; left: var(--gutter); bottom: 22px; z-index: 5; font-size: var(--small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); pointer-events: none; transition: opacity .6s ease;
}
.scroll-hint.hide { opacity: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px;
  font-family: var(--mono); font-size: var(--small); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
  border: 1px solid var(--ink); color: var(--ink); background: rgba(255,255,255,0.5); transition: background-color .2s, color .2s;
}
.btn:hover { background: var(--ink); color: var(--milk); }
.btn.signal { background: var(--signal); border-color: var(--signal); color: var(--milk); }
.btn.signal:hover { background: var(--ink); border-color: var(--ink); }

/* ---------- inner pages ---------- */
.page { position: relative; z-index: 1; padding: 20vh var(--gutter) 10vh; }
.page .intro { max-width: 60rem; }
.page .intro h1 { font-size: clamp(2.2rem, 6.5vw, 6rem); }
.page .intro .lead { font-family: var(--sans); font-size: var(--t3); line-height: 1.35; margin: 1.4rem 0 0; max-width: 38rem; }
.page .kicker { font-size: var(--small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin-bottom: 1rem; }
.page .kicker a { border-bottom: 1px solid var(--ink-3); }

.block { margin-top: clamp(4rem, 10vw, 9rem); display: grid; gap: 2rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .block { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 4rem; } }
.block > h2 { font-size: var(--t2); }

.defs { display: grid; gap: 1.6rem; max-width: 46rem; font-family: var(--sans); }
.defs h3 { font-family: var(--mono); font-size: 0.95rem; margin-bottom: .3rem; }
.defs p { color: var(--ink-2); max-width: 40rem; }

.steps { counter-reset: step; display: grid; gap: 1.4rem; max-width: 46rem; font-family: var(--sans); }
.steps li { position: relative; padding-left: 3rem; }
.steps li::before { counter-increment: step; content: "0" counter(step); position: absolute; left: 0; top: 0.15em; font-family: var(--mono); font-size: var(--small); color: var(--signal); }
.steps h3 { font-family: var(--mono); font-size: 0.95rem; margin-bottom: .3rem; }
.steps p { color: var(--ink-2); }

.case { max-width: 46rem; font-family: var(--sans); }
.case h3 { font-family: var(--mono); margin-bottom: .5rem; }
.case .credit { font-family: var(--mono); color: var(--ink-2); font-size: var(--small); margin-top: 1rem; }
.case .credit a { border-bottom: 1px solid var(--ink-3); }
.case figure { margin: 1.4rem 0 0; }
.case .placeholder { aspect-ratio: 16 / 9; border: 1px dashed var(--ink-3); border-radius: 4px; display: grid; place-items: center; color: var(--ink-2); font-family: var(--mono); font-size: var(--small); text-align: center; padding: 1rem; background: rgba(255,255,255,0.4); }

.cta-band { margin-top: clamp(5rem, 12vw, 11rem); padding-top: 2rem; border-top: 1px solid var(--rule); display: grid; gap: 1.4rem; }
.cta-band h2 { font-size: var(--t2); max-width: 30rem; }
.cta-band p { color: var(--ink-2); font-family: var(--sans); }

.service-list { display: grid; margin-top: 2rem; border-top: 1px solid var(--rule); }
.service-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem; align-items: baseline; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.service-list a i { font-style: normal; font-size: var(--small); color: var(--signal); }
.service-list a h2 { font-size: clamp(1.4rem, 3.4vw, 3rem); }
.service-list a span { font-size: var(--small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); text-align: right; }
.service-list a:hover h2 { color: var(--signal); }

footer {
  position: relative; z-index: 1; padding: 3rem var(--gutter) 2rem; font-size: var(--small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; border-top: 1px solid var(--rule);
  background: linear-gradient(to bottom, transparent, rgba(247,245,241,0.9) 40%);
}
footer a { border-bottom: 1px solid var(--ink-3); }
footer a:hover { color: var(--ink); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- dock: "What are you looking for?", bottom left ---------- */
.dock {
  position: fixed; left: var(--gutter); bottom: 22px; z-index: 20; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; pointer-events: none;
  display: grid; gap: 2px; font-size: var(--small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal);
  padding: 14px 16px 12px 12px; margin-left: -12px; border-radius: 12px;
  background: radial-gradient(120% 120% at 0% 100%, rgba(247,245,241,0.92), rgba(247,245,241,0.55) 60%, rgba(247,245,241,0));
}
.dock.show { opacity: 1; transform: none; pointer-events: auto; }
.dock.show.dim { opacity: 0.12; pointer-events: none; }
.dock .q { margin: 0 0 6px; color: var(--ink); opacity: 0.8; }
.dock a { position: relative; padding: 3px 0 3px 22px; opacity: 0.75; transition: opacity .2s, padding-left .2s; }
.dock a::before { content: "\2192"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.dock a:hover, .dock a.on { opacity: 1; padding-left: 28px; }
.dock .ask { margin-top: 10px; display: flex; align-items: center; border: 1px solid var(--signal); border-radius: 999px; padding: 2px 4px 2px 14px; background: rgba(247,245,241,0.7); backdrop-filter: blur(8px); width: 240px; }
.dock .ask input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); padding: 7px 0; outline: none; }
.dock .ask input::placeholder { color: var(--signal); opacity: 0.8; }
.dock .ask button { border: 0; background: var(--signal); color: var(--milk); width: 26px; height: 26px; border-radius: 50%; font: inherit; cursor: pointer; }
.scroll-hint { left: auto; right: calc(var(--gutter) + 28px); }
@media (max-width: 640px) {
  .dock { font-size: 0.62rem; display: flex; flex-wrap: wrap; gap: 2px 10px; bottom: 12px; right: var(--gutter); padding: 8px 10px; margin-left: -10px; }
  .dock .q, .dock .ask { display: none; } .dock a { padding-left: 12px; }
  .scroll-hint { display: none; }
}

/* ---------- reactive cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
  .cursor { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; mix-blend-mode: multiply; will-change: transform; }
  .cursor i { display: block; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid var(--signal); border-radius: 50%; transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s, border-width .25s; }
  .cursor::after { content: ""; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--signal); }
  .cursor.link i { transform: scale(0.5); background: var(--signal); }
  .cursor.down i { transform: scale(0.8); }
}
@media not ((hover: hover) and (pointer: fine)) { .cursor { display: none; } }

/* ---------- draft 9: menu bottom-left only, dark data center, comets ---------- */
.top nav { display: none; }
.dock .row { display: flex; gap: 14px; margin: 8px 0 0; padding-left: 0; }
.dock .row a, .dock .row button { padding: 2px 0; border-bottom: 1px solid currentColor; opacity: 0.8; background: none; border-top: 0; border-left: 0; border-right: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.dock .row a:hover, .dock .row button:hover { opacity: 1; }
.dock .row .sound[aria-pressed="true"] { color: var(--ink); }
.station.hero { align-content: end; padding-bottom: max(14vh, 240px); }
.station.hero .panel { max-width: 32rem; }
#comets { position: fixed; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
.flight { display: none; }

html.dark { background: #0d0e11; }
html.dark body { color: var(--milk); }
html.dark .station .panel { background: radial-gradient(closest-side, rgba(13,14,17,0.75), rgba(13,14,17,0)); }
html.dark .station .meta { color: #9aa1aa; }
html.dark .station .next { color: #9aa1aa; border-bottom-color: #4a505a; }
html.dark .station .next:hover { color: var(--milk); border-bottom-color: var(--milk); }
html.dark .btn { border-color: var(--milk); color: var(--milk); background: rgba(13,14,17,0.4); }
html.dark .btn:hover { background: var(--milk); color: #0d0e11; }
html.dark .btn.signal { background: var(--signal); border-color: var(--signal); color: var(--milk); }
html.dark .dock { background: radial-gradient(120% 120% at 0% 100%, rgba(13,14,17,0.92), rgba(13,14,17,0.55) 60%, rgba(13,14,17,0)); }
html.dark .dock .q { color: var(--milk); }
html.dark .dock .ask { background: rgba(13,14,17,0.7); }
html.dark .dock .ask input { color: var(--milk); }
html.dark .top .mark img { filter: invert(1) hue-rotate(180deg) saturate(1.6); }
html.dark footer { color: #9aa1aa; border-top-color: #2a2e36; background: linear-gradient(to bottom, transparent, rgba(13,14,17,0.9) 40%); }
html.dark .cursor { mix-blend-mode: screen; }
html, body, .station, .dock, .btn, footer { transition: background-color .6s, color .6s, border-color .6s; }

/* every station is a stop */
/* stops are handled by a gentle magnet in site.js, not CSS snap */

footer .ver { opacity: .55; margin-left: 1em; text-transform: none; letter-spacing: 0; }