@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* The lamp's reach is a registered length so it can open over the whole sheet and close again. */
@property --lr { syntax: '<length>'; inherits: true; initial-value: 200px; }

/* A blueprint, drawn in pencil: deep blue that darkens toward the edges, a faint paper tooth, a drafting grid. */
:root {
  --blue-deep: #0F325D;
  --blue: #1A4880;
  --blue-light: #235894;
  --ink: #F2F6FB;
  --ink-2: #C9D8EC;
  --ink-3: #9FB7D6;
  --lead: rgba(232, 241, 255, 0.5);
  --lead-faint: rgba(232, 241, 255, 0.28);
  --grid-minor: rgba(232, 241, 255, 0.05);
  --grid-major: rgba(232, 241, 255, 0.11);
  --sheet-line: rgba(232, 241, 255, 0.16);
  --lamp: #F7CD45;
  --note: #FCE9B0;
  --note-line: rgba(252, 233, 176, 0.7);
  --river: #4E8FDF;
  --lr: clamp(150px, 18vw, 240px);   /* how far the lamp's light reaches */
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { overflow-x: clip; }

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow-x: clip;
  color: var(--ink);
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: var(--blue);
  background-image:
    url("/paper-grain.png"),
    radial-gradient(130% 95% at 50% 42%, transparent 52%, rgba(6, 20, 42, 0.55)),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px),
    radial-gradient(90% 70% at 50% 38%, var(--blue-light), var(--blue) 55%, var(--blue-deep));
  background-size: 160px 160px, auto, 100px 100px, 100px 100px, 20px 20px, 20px 20px, auto;
  background-position: 0 0, center, center, center, center, center, center;
  background-attachment: fixed;
}

/* The sheet: a ruled border with zone marks, and a title block in the corner on wide screens. */
.sheet { position: fixed; inset: 8px; z-index: 0; border: 1px solid var(--sheet-line); pointer-events: none; }
.zones, .title-block { display: none; }
.motes { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

.stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow-x: clip;   /* the drawing may run past the edges on a phone, never the page */
  justify-items: center;
  align-content: center;
  gap: clamp(8px, 1.8vh, 20px);
  padding: 28px 20px 4px;
  text-align: center;
}

.lockup { width: min(330px, 70vw); height: auto; }

.plate { position: relative; width: clamp(600px, 62vw, 820px); justify-self: center; }
.drawing { display: block; width: 100%; height: auto; overflow: visible; }
.ink { fill: none; stroke: var(--lead); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ink.faint { stroke: var(--lead-faint); }
.gear { transform-box: fill-box; transform-origin: center; }

.face { fill: rgba(12, 38, 72, 0.38); stroke: var(--ink); stroke-width: 1.8; }
.tick { stroke: var(--ink-3); stroke-width: 1.2; stroke-linecap: round; }
.tick.hour { stroke: var(--ink); stroke-width: 2.6; }
.hand { transform-box: view-box; transform-origin: 120px 120px; }
.hand line { stroke-linecap: round; }
.hour line { stroke: var(--ink); stroke-width: 6.5; }
.minute line { stroke: var(--ink); stroke-width: 4.2; }
.second line { stroke: var(--lamp); stroke-width: 1.7; }
.second circle { fill: var(--lamp); }
.cap { fill: var(--river); stroke: var(--ink); stroke-width: 1.2; }
.pin { fill: var(--blue-deep); }

/* The construction circle stops eight seconds short of closing. The pencil rests in the gap. */
.ink.d1 { stroke-dasharray: 1; stroke-dashoffset: 0.1333; }
.tip-core { fill: #FFF4CF; }
.chime { fill: none; stroke: var(--lamp); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* The dial can be wound. */
.winder {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 21%;
  aspect-ratio: 1;
  translate: -50% -50%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.45s ease;
}
.winder:hover { box-shadow: 0 0 0 1.5px rgba(247, 205, 69, 0.5), 0 0 40px 6px rgba(247, 205, 69, 0.14); }
.winder:focus-visible { outline: 2px solid var(--lamp); outline-offset: 6px; }
.winder[aria-busy="true"] { cursor: progress; box-shadow: none; }

.line {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(23px, 3.6vw, 36px);
  font-weight: 520;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(6, 20, 42, 0.35);
}
.dots i { font-style: normal; }

.crossing { position: relative; width: min(560px, 86vw); margin-top: -10px; }
.ford { display: block; width: 100%; height: auto; }
.whisper {
  position: absolute;
  inset: -2px 0 auto;
  margin: 0;
  font: 13px/1.4 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lamp);
  text-shadow: 0 0 18px rgba(247, 205, 69, 0.5);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
}
.whisper.on { opacity: 1; transform: none; }
.nowrap { white-space: nowrap; }

/* Notes pencilled onto the sheet that show only under the lamp. */
.secret {
  --mx: -9999px;
  --my: -9999px;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  visibility: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--lr) at var(--mx) var(--my), #000, rgba(0, 0, 0, 0.9) 35%, transparent);
  mask-image: radial-gradient(circle var(--lr) at var(--mx) var(--my), #000, rgba(0, 0, 0, 0.9) 35%, transparent);
}
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
  .lit .secret { visibility: visible; }
}
.callout { fill: none; stroke: var(--note-line); stroke-width: 1.3; stroke-linecap: round; }
.callout circle { fill: var(--note); stroke: none; }
.callout text { fill: var(--note); stroke: none; font-family: var(--mono); font-size: 16px; letter-spacing: 0.08em; }
.ford-note text { font-size: 26px; }

/* The Crossing's lamp in the logo glows a touch brighter each time the clock is wound. */
.mark { position: relative; display: inline-block; line-height: 0; }
.beacon {
  position: absolute;
  left: 14.21%;
  top: 29.13%;
  width: 13%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 233, 163, 0.95), rgba(247, 205, 69, 0.4) 45%, transparent);
  mix-blend-mode: screen;
  opacity: calc(var(--winds, 0) * 0.1);
  transition: opacity 1.4s ease;
  pointer-events: none;
}

/* The seven Chronochrome hues wait in the gap, one per second in time order. They show faintly under the lamp, and
   the pencil lights each one as it closes that second. Equal arcs: they stand for seconds, never for shares. */
.hues path, .hues-under path { fill: none; stroke-width: 3.6; stroke-linecap: round; }
.hues path { opacity: 0; transition: opacity 0.5s ease; }
.hues path.on { opacity: 0.9; }
.hues-under path { opacity: 0.7; }

/* The river in the Crossing's sketch. */
.river { transform-box: fill-box; transform-origin: center; }
.river path { transition: stroke 1s ease; }
.river.ripple path { stroke: rgba(78, 143, 223, 0.9); transition-duration: 0.25s; }

/* Hidden things: a line the pencil writes, the place the lamp hangs, and the maker's mark. */
.wait-line { fill: var(--note); font: 400 24px var(--mono); letter-spacing: 0.14em; }
:root.flood { --lr: 150vmax; }
.callout.hang { opacity: 0; transition: opacity 1.2s ease; }
.callout.hang.found { opacity: 1; }
.callout .hang-spot { fill: var(--lamp); }
.hang text { font-size: 24px; }
.signet { opacity: 0; transform-box: view-box; transform-origin: 120px 120px; pointer-events: none; }
.signet.signed { opacity: 0.2; transform: rotate(120deg); }
.s-line { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.s-core, .s-node { fill: var(--blue-deep); stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.signed .s-core, .signed .s-node { fill: var(--lamp); }

.margin-notes.secret { position: fixed; z-index: 1; display: none; }
.note {
  position: absolute;
  margin: 0;
  font: 12px/1.6 var(--mono);
  letter-spacing: 0.14em;
  text-align: left;
  color: var(--note);
  text-shadow: 0 0 14px rgba(247, 205, 69, 0.28);
}
.n1 { top: 13vh; left: 4.5vw; rotate: -2deg; }
.n2 { top: 56vh; left: 6vw; rotate: 1.5deg; }
.n3 { top: 19vh; right: 6vw; rotate: 2deg; }
.n4 { top: 58vh; right: 7vw; rotate: -1.5deg; }
.n5 { bottom: 12vh; left: 4.5vw; rotate: -1deg; }
.keyhole { display: block; width: 20px; height: 30px; margin-bottom: 8px; fill: none; stroke: var(--note-line); stroke-width: 1.4; stroke-linejoin: round; }

/* The lamp: a warm pool of light carried over the sheet. */
.lamp {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  display: none;
  width: calc(var(--lr) * 3);
  height: calc(var(--lr) * 3);
  margin: calc(var(--lr) * -1.5) 0 0 calc(var(--lr) * -1.5);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 228, 168, 0.22), rgba(255, 214, 130, 0.09) 42%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
  will-change: transform;
}
.lit .lamp { display: block; }
.lamp.on { opacity: 1; }

.foot {
  position: relative;
  z-index: 1;
  padding: 10px 24px 20px;
  text-align: center;
  font: 12px/1.6 var(--mono);
  letter-spacing: 0.05em;
  color: var(--ink-2);
}
.foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(232, 241, 255, 0.35); }
.foot a:hover { text-decoration-color: var(--lamp); }
.maker img { display: inline-block; width: 17px; height: 18px; margin: 0 7px 0 2px; vertical-align: -4px; }
.foot a:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 2px; }

.home-mark { display: block; line-height: 0; }
.home {
  font: 14px/1.4 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(232, 241, 255, 0.35);
}
/* On the 404, a line half rubbed out. It comes back if you look closely (hover, or select the page). */
.erased { margin: -4px 0 4px; font: 12px/1.5 var(--mono); letter-spacing: 0.12em; color: rgba(232, 241, 255, 0.07); transition: color 1.2s ease; }
.stage:hover .erased { color: var(--ink-3); }
.erased::selection { color: var(--ink); background: rgba(247, 205, 69, 0.3); }
.home:hover { color: var(--ink); text-decoration-color: var(--lamp); }
.home:focus-visible, .home-mark:focus-visible { outline: 2px solid var(--lamp); outline-offset: 6px; border-radius: 2px; }

@media (min-width: 900px) {
  .sheet { inset: 18px; }
  .zones { position: absolute; display: flex; justify-content: space-around; align-items: center; font: 9px/1 var(--mono); letter-spacing: 0.1em; color: var(--ink-3); opacity: 0.6; }
  .zones i { font-style: normal; }
  .zones.top, .zones.bottom { left: 0; right: 0; height: 18px; }
  .zones.top { top: -18px; }
  .zones.bottom { bottom: -18px; }
  .zones.side, .zones.right { top: 0; bottom: 0; width: 18px; flex-direction: column; }
  .zones.side { left: -18px; }
  .zones.right { right: -18px; }
  .foot { padding-bottom: 26px; }
}
@media (min-width: 1000px) {
  .margin-notes.secret { display: block; }
}
/* On a phone held upright there is room above the logo and below the bridge for two of the notes. */
@media (max-width: 999px) and (min-height: 700px) {
  .margin-notes.secret { display: block; }
  .n2, .n3, .n4 { display: none; }
  .n1 { top: 4.5vh; left: 7vw; }
  .n5 { bottom: 10vh; left: auto; right: 7vw; text-align: right; }
}
@media (min-width: 1180px) and (min-height: 700px) {
  .title-block {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, auto);
    border-top: 1px solid var(--sheet-line);
    border-left: 1px solid var(--sheet-line);
    font: 10px/1.3 var(--mono);
    letter-spacing: 0.1em;
    color: var(--ink-2);
    text-align: left;
    pointer-events: none;
  }
  .title-block > div { padding: 5px 12px 6px; border-right: 1px solid var(--sheet-line); border-bottom: 1px solid var(--sheet-line); }
  .title-block b { display: block; font-weight: 400; font-size: 8px; color: var(--ink-3); }
  .title-block .tb-name { grid-column: span 2; align-self: stretch; display: flex; align-items: center; font: 650 13px/1 "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.26em; color: var(--ink); }
}

@media (prefers-reduced-motion: no-preference) {
  /* The drawing sketches itself in, as if drafted while you watch. */
  .ink { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draft 2.2s cubic-bezier(0.45, 0.05, 0.35, 1) forwards; }
  .d1 { animation-delay: 0.1s; }
  .d2 { animation-delay: 0.4s; }
  .d3 { animation-delay: 0.75s; }
  .d4 { animation-delay: 1.05s; }
  .d5 { animation-delay: 1.35s; }
  .ink.d1 { stroke-dashoffset: 1; animation-name: draft-open; animation-duration: 2.6s; }
  @keyframes draft { to { stroke-dashoffset: 0; } }
  @keyframes draft-open { to { stroke-dashoffset: 0.1333; } }
  /* A mechanical tick: the second hand overshoots a hair and settles; the escapement wheel ticks with it. */
  .second { transition: transform 300ms cubic-bezier(0.34, 1.9, 0.5, 1); }
  .gear { transition: transform 1s linear; }
  .gear.escapement { transition: transform 320ms cubic-bezier(0.34, 1.7, 0.5, 1); }
  /* The pencil glows, slowly; faster while it strains to close the circle. */
  .tip-halo { transform-box: fill-box; transform-origin: center; animation: breathe 3.4s ease-in-out infinite; }
  .tip.strain .tip-halo { animation-duration: 0.45s; }
  @keyframes breathe { 0%, 100% { opacity: 0.7; transform: scale(0.88); } 50% { opacity: 1; transform: scale(1.15); } }
  /* On the minute, a ring passes over the dial. */
  .chime.ring { animation: chime 1.9s cubic-bezier(0.2, 0.6, 0.3, 1); }
  @keyframes chime { from { opacity: 0.6; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
  /* The dots wait their turn. */
  .dots i { animation: waiting 2.8s ease-in-out infinite; }
  .dots i:nth-child(2) { animation-delay: 0.28s; }
  .dots i:nth-child(3) { animation-delay: 0.56s; }
  @keyframes waiting { 0%, 55%, 100% { color: var(--ink); text-shadow: 0 1px 0 rgba(6, 20, 42, 0.35); } 22% { color: var(--lamp); text-shadow: 0 0 16px rgba(247, 205, 69, 0.65); } }
  /* The river ripples when the pointer crosses it. */
  .river.ripple { animation: ripple 1.3s cubic-bezier(0.3, 0.6, 0.4, 1); }
  @keyframes ripple { 0% { transform: none; } 20% { transform: translateX(-5px) scaleY(2.1); } 45% { transform: translateX(4px) scaleY(0.6); } 70% { transform: translateX(-2px) scaleY(1.3); } 100% { transform: none; } }
  /* The lamp can open over the whole sheet. */
  :root { transition: --lr 1.4s cubic-bezier(0.4, 0, 0.2, 1); }
  /* The maker's mark: drawn in pencil, its three nodes lit one after another, the centre pulses once, and it turns a
     third of the way round into a watermark. */
  .signet.signed { animation: signet 5.8s ease forwards; }
  @keyframes signet { 0%, 58% { opacity: 1; transform: none; } 100% { opacity: 0.2; transform: rotate(120deg); } }
  .signed .s-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draft 1.3s cubic-bezier(0.45, 0.05, 0.35, 1) forwards; }
  .signed .s2 { animation-delay: 0.35s; }
  .signed .s3 { animation-delay: 0.75s; }
  .signed .s-node, .signed .s-core { fill: var(--blue-deep); animation: node-light 0.45s ease forwards; }
  .signed .n-a { animation-delay: 1.6s; }
  .signed .n-b { animation-delay: 1.9s; }
  .signed .n-c { animation-delay: 2.2s; }
  .signed .s-core { transform-box: fill-box; transform-origin: center; animation: core-pulse 0.9s ease 2.55s forwards; }
  @keyframes node-light { to { fill: var(--lamp); } }
  @keyframes core-pulse { 0% { fill: var(--blue-deep); transform: none; } 40% { fill: var(--lamp); transform: scale(1.45); } 100% { fill: var(--lamp); transform: none; } }
}

/* Clockford™ Founding Startups. A pencilled button on the sheet that glows softly, with a note under the lamp
   pointing to it. It opens a taste of what is coming: inked, flooded with the seven hues, and fallen into through the
   circle's gap. */

.founding-call { position: relative; margin: 2px 0 -2px; }
.founding-btn {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 22px 11px 38px;
  border: 1.5px solid var(--lead);
  border-radius: 999px;
  background: rgba(12, 38, 72, 0.5);
  box-shadow: 0 0 22px 1px rgba(247, 205, 69, 0.2), inset 0 0 14px rgba(247, 205, 69, 0.07);
  color: var(--ink);
  font: 600 16px/1.25 "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.005em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
}
/* A second, fainter pencil stroke a hair off the first, the way a draftsman goes over a line. */
.founding-btn::after {
  content: '';
  position: absolute;
  inset: -4px -3px -3px -4px;
  border: 1px solid var(--lead-faint);
  border-radius: inherit;
  rotate: -0.7deg;
  pointer-events: none;
}
.founding-btn .seats { font: 400 13px/1.25 var(--mono); letter-spacing: 0.1em; color: var(--lamp); white-space: nowrap; }
.founding-btn .glint {
  position: absolute;
  left: 17px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #FFF4CF;
  box-shadow: 0 0 6px 2px rgba(247, 205, 69, 0.85), 0 0 16px 5px rgba(247, 205, 69, 0.35);
}
.founding-btn:hover { border-color: var(--lamp); background-color: rgba(12, 38, 72, 0.7); box-shadow: 0 0 30px 4px rgba(247, 205, 69, 0.34), inset 0 0 18px rgba(247, 205, 69, 0.12); }
.founding-btn:focus-visible { outline: 2px solid var(--lamp); outline-offset: 6px; }
.hint { inset: -40px -260px; width: auto; height: auto; }
.hint .note { position: absolute; left: calc(50% + 230px); top: 50%; translate: 0 -50%; white-space: nowrap; rotate: -2deg; }
.hint .note::before { content: '\2190\00a0'; }

@media (max-width: 999px) {
  /* On narrower sheets the note sits just below the button, over the bridge. */
  .hint { inset: -10px -40px -44px; }
  .hint .note { left: 50%; top: auto; bottom: 6px; translate: -50% 0; rotate: -1.5deg; font-size: 11px; }
  .hint .note::before { content: '\2191\00a0'; }
}
@media (max-width: 420px) {
  .founding-btn { padding: 10px 18px 11px 34px; font-size: 15px; }
  .founding-btn .glint { left: 14px; }
  .founding-btn .sep { display: none; }
}

/* ==== HEAT SHIELD: the launch from the sheet. LOCK -> GEARS -> IRIS -> MELT -> BOOM. ==== */
.founding-btn.locked { border-color: var(--lamp); background: rgba(247, 205, 69, 0.16); translate: 0 2px; box-shadow: 0 0 0 3px rgba(247, 205, 69, 0.45), 0 0 40px 8px rgba(247, 205, 69, 0.4); transition: translate 0.22s cubic-bezier(0.3, 0, 0.2, 1), box-shadow 0.22s ease; }
.stage, .sheet, .margin-notes, .title-block, .foot { translate: var(--shx, 0) var(--shy, 0); }
.arming .stage, .arming .sheet, .arming .title-block, .arming .foot { filter: brightness(0.55); transition: filter 0.2s ease; }
.arming .stage .drawing { filter: brightness(1.8); }
.arming .lamp, .arming .motes, .arming .margin-notes { opacity: 0; transition: opacity 0.2s ease; }
.arming .gear.big, .arming .gear.right { animation: rev 2.4s cubic-bezier(0.6, 0, 1, 0.5) forwards; }
.arming .gear.escapement { animation: rev-back 2.4s cubic-bezier(0.6, 0, 1, 0.5) forwards; }
@keyframes rev { to { transform: rotate(2200deg); } }
@keyframes rev-back { to { transform: rotate(-2800deg); } }
/* Seven new gears draw themselves around the dial in pencil, ink in their hues, and turn. */
.ngear { fill: none; stroke: var(--lead); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; transform-box: fill-box; transform-origin: center; animation: draw-gear 0.26s ease-out forwards, var(--spin) var(--dur) linear infinite; animation-delay: var(--d), var(--d); }
.ngear.inked { stroke: var(--hue); stroke-width: 2.2; filter: drop-shadow(0 0 4px var(--hue)); transition: stroke 0.25s ease; }
@keyframes draw-gear { to { stroke-dashoffset: 0; } }
@keyframes spin-cw { to { transform: rotate(360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }
/* The iris: the dial opens in seven blades onto deep space. */
.iris-space { fill: #050D1F; }
.iris-star { fill: #F2F6FB; }
.blade { opacity: 0; transform-box: view-box; transition: opacity 0.18s ease; }
.blades-in .blade { opacity: 0.94; }
.iris-open .blade { transform: rotate(52deg); transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.2s ease; }
/* The melt. */
.melting .stage { transform: translateY(18vh) scaleY(1.12); transition: transform 0.55s cubic-bezier(0.55, 0, 1, 0.45); }
.melting .sheet, .melting .title-block, .melting .foot { opacity: 0; transition: opacity 0.5s ease-in; }
.drips { position: absolute; inset: 0; overflow: hidden; }
.drips i { position: absolute; top: -10vh; width: 3px; height: 14vh; border-radius: 0 0 3px 3px; background: linear-gradient(transparent, var(--hue)); opacity: 0; }
.melting .drips i { animation: drip 0.6s cubic-bezier(0.55, 0, 1, 0.45) var(--d) forwards; }
@keyframes drip { 10% { opacity: 0.9; } to { opacity: 0.9; transform: translateY(120vh) scaleY(2.4); } }
.launch { position: fixed; inset: 0; z-index: 7; pointer-events: none; visibility: hidden; }
.arming .launch { visibility: visible; }
.launch .burst { position: absolute; inset: 0; width: 100%; height: 100%; }
.launch-label { position: absolute; top: 22px; left: 50%; translate: -50% 0; margin: 0; font: 12px/1 var(--mono); letter-spacing: 0.3em; color: var(--lamp); text-shadow: 0 0 14px rgba(247, 205, 69, 0.7); white-space: nowrap; }
.launch-label.blip { animation: blip 0.5s steps(2) 2; }
@keyframes blip { 50% { opacity: 0.2; } }
.flash { position: absolute; inset: 0; background: #FFF4CF; opacity: 0; }
.boom .flash { animation: flash 0.32s ease-out both; }
@keyframes flash { 25% { opacity: 0.95; } }
.landed .stage, .landed .sheet, .landed .title-block, .landed .foot { transition: none; }

/* ==== THE MISSION: seven chapters on one centred axis, deep space, a trajectory that collects their patches. ==== */
@property --sw { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --fill { syntax: '<number>'; inherits: true; initial-value: 0; }
.founding { --hue: #FF8A83; position: fixed; inset: 0; z-index: 5; display: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(120% 80% at 50% 40%, #0B1F3F, #081631 50%, #050D1F); color: var(--ink); text-align: center; outline: none; }
.founding.open, :root:not(.founding-js) .founding:target, [data-page="founding"] .founding { display: block; }
:root.founding-open, :root.founding-open body { overflow: hidden; }
.founding.arriving { animation: arrive 0.6s ease-out both; }
@keyframes arrive { from { opacity: 0; } }
.founding.calm-in { animation: calm-in 0.35s ease both; }
@keyframes calm-in { from { opacity: 0; } }
.plume { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; }
.founding.gl-ready .plume { opacity: 1; }
.space { position: fixed; inset: 0; pointer-events: none; background:
  radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 72% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 34% 72%, #fff, transparent),
  radial-gradient(1px 1px at 88% 64%, #fff, transparent), radial-gradient(1px 1px at 52% 44%, #fff, transparent), radial-gradient(1.5px 1.5px at 22% 88%, #fff, transparent),
  radial-gradient(60% 45% at 30% 30%, rgba(219, 144, 236, 0.14), transparent), radial-gradient(55% 45% at 75% 70%, rgba(17, 200, 216, 0.12), transparent); }
.founding.gl-ready .space { opacity: 0; transition: opacity 0.8s ease; }
.trails { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.frame { position: fixed; width: 18px; height: 18px; border: 0 solid rgba(247, 205, 69, 0.55); pointer-events: none; }
.frame.f1 { top: 16px; left: 16px; border-width: 1px 0 0 1px; } .frame.f2 { top: 16px; right: 16px; border-width: 1px 1px 0 0; }
.frame.f3 { bottom: 104px; left: 16px; border-width: 0 0 1px 1px; } .frame.f4 { bottom: 104px; right: 16px; border-width: 0 1px 1px 0; }
.twinkle { position: fixed; inset: 0; display: none; pointer-events: none; }
.twinkle i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.7); opacity: 0.55; }
.twinkle i.gold { background: #FFE9A3; box-shadow: 0 0 6px 1px rgba(247, 205, 69, 0.8); }
@media (max-width: 899px) { .twinkle { display: block; } }

/* The trajectory: a launch arc at the top centre; a roundel for each chapter; a craft that flies to the current one. */
.trajectory { position: fixed; top: 10px; left: 50%; z-index: 4; width: min(560px, calc(100vw - 230px)); translate: -50% 0; pointer-events: none; }
.traj { display: block; width: 100%; height: auto; overflow: visible; }
.traj-path { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; stroke-dasharray: 2 4; }
.traj-flown { fill: none; stroke: var(--lamp); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--flown, 0)); filter: drop-shadow(0 0 3px rgba(247, 205, 69, 0.8)); transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.15, 1); }
.craft { fill: #FFF4CF; filter: drop-shadow(0 0 5px rgba(247, 205, 69, 0.95)); }
.trajectory ol { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.trajectory li { position: absolute; left: var(--x, 0); top: var(--y, 0); translate: -50% -50%; pointer-events: auto; }
.trajectory button { display: grid; justify-items: center; gap: 4px; padding: 4px; border: 0; background: none; color: rgba(232, 241, 255, 0.5); font: 9px/1 var(--mono); letter-spacing: 0.14em; cursor: pointer; }
.trajectory button i { display: block; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--c); background: rgba(5, 13, 31, 0.6); transition: background-color 0.3s ease, transform 0.3s ease; }
.trajectory button span { position: absolute; top: 34px; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; }
.trajectory li.now button span, .trajectory button:hover span, .trajectory button:focus-visible span { opacity: 1; color: var(--lamp); }
.trajectory li:nth-child(1) { --c: #FF8A83; } .trajectory li:nth-child(2) { --c: #F79643; } .trajectory li:nth-child(3) { --c: #C8B222; } .trajectory li:nth-child(4) { --c: #48CD8C; }
.trajectory li:nth-child(5) { --c: #11C8D8; } .trajectory li:nth-child(6) { --c: #7AB4FE; } .trajectory li:nth-child(7) { --c: #DB90EC; }
.trajectory li.stamped button i { background: var(--c); border: 1.5px solid #fff; transform: rotate(30deg); box-shadow: 0 0 12px var(--c); }
.trajectory li.now button i { box-shadow: 0 0 0 3px rgba(247, 205, 69, 0.35), 0 0 14px rgba(247, 205, 69, 0.6); }
.trajectory button:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; border-radius: 6px; }
.collected { position: absolute; left: 50%; top: 80px; translate: -50% 0; margin: 0; font: 10px/1 var(--mono); letter-spacing: 0.2em; color: rgba(232, 241, 255, 0.6); white-space: nowrap; }
.collected b { font-weight: 400; color: var(--lamp); }
.founding.ended .trajectory { opacity: 0; transition: opacity 0.8s ease; }
.founding-close { position: fixed; top: 12px; right: 44px; z-index: 5; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(232, 241, 255, 0.4); border-radius: 999px; background: rgba(5, 13, 31, 0.6); color: var(--ink); font: 13px/1 var(--mono); letter-spacing: 0.08em; text-decoration: none; }
.founding-close:hover { border-color: var(--lamp); }
.skip-seq { position: fixed; right: 24px; bottom: 24px; z-index: 9; padding: 10px 16px; border: 1px solid rgba(247, 205, 69, 0.6); border-radius: 999px; background: rgba(5, 13, 31, 0.7); color: var(--lamp); font: 12px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; }
.founding-close:focus-visible, .channels a:focus-visible, .save a:focus-visible, .dm-link:focus-visible, .stamp:focus-visible, .skip-seq:focus-visible { outline: 2px solid var(--lamp); outline-offset: 4px; }
.patch-defs { position: absolute; }

/* Chapters. */
.mission { position: relative; }
.chapter, .arrival { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100svh; padding: 150px 16px 130px; overflow-x: clip; }
.chapter .patch { width: 200px; height: 200px; margin-bottom: 22px; overflow: visible; transition: opacity 0.5s ease, filter 0.5s ease; }
.chapter .patch.taken { opacity: 0.22; filter: grayscale(1) brightness(1.6); }
.ch-label { margin: 0 0 16px; font: 12px/1 var(--mono); letter-spacing: 0.28em; color: var(--lamp); }
.say { max-width: 19ch; margin: 0; font-size: clamp(30px, 6vw, 72px); font-weight: 680; line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; text-shadow: 0 2px 24px rgba(5, 13, 31, 0.8); }
h2.say { font-size: clamp(30px, 5vw, 60px); }
.say.title { max-width: 12ch; font-size: clamp(42px, 10vw, 140px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; }
.title .word { display: inline-block; white-space: nowrap; }
.title .tm { font: 400 0.3em/1 var(--mono); color: var(--lamp); vertical-align: 1.6em; margin-left: 0.04em; letter-spacing: 0; }
.title .ch { display: inline-block; text-align: center; }
.say .big { display: block; font-size: 2em; font-weight: 800; line-height: 1; color: var(--lamp); text-shadow: 0 0 30px rgba(247, 205, 69, 0.45); }
.say .yes { font-style: normal; color: var(--lamp); font-weight: 800; display: inline-block; }
.say.date { max-width: none; font: 400 clamp(26px, 7vw, 110px)/1 var(--mono); letter-spacing: 0.02em; color: #FFE9A3; text-shadow: 0 0 30px rgba(247, 205, 69, 0.4); }
.spec { margin: 22px 0 0; font: 12px/1.6 var(--mono); letter-spacing: 0.22em; color: rgba(232, 241, 255, 0.75); }
.sub { margin: 22px 0 0; font: 600 clamp(18px, 2.4vw, 26px)/1.3 "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; color: var(--ink-2); }
.dossier { position: relative; max-width: 560px; margin: 30px auto 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--hue); font: 15px/1.6 var(--mono); color: rgba(232, 241, 255, 0.88); text-align: left; text-wrap: pretty; }
.c1 { --hue: #FF8A83; } .c2 { --hue: #F79643; } .c3 { --hue: #C8B222; } .c4 { --hue: #48CD8C; } .c5 { --hue: #11C8D8; } .c6 { --hue: #7AB4FE; } .c7 { --hue: #DB90EC; } .arrival { --hue: #F7CD45; }
.rule { display: block; width: 48px; height: 1px; margin-top: 34px; background: var(--lamp); box-shadow: 0 0 8px rgba(247, 205, 69, 0.8); }

/* Patches, embroidered. */
.patch .cloth { stroke: none; }
.p1 { --ph: #FF8A83; } .p2 { --ph: #F79643; } .p3 { --ph: #C8B222; } .p4 { --ph: #48CD8C; } .p5 { --ph: #11C8D8; } .p6 { --ph: #7AB4FE; } .p7 { --ph: #DB90EC; } .fpatch { --ph: #F7CD45; }
.p1 .cloth { fill: url(#sat-1); } .p2 .cloth { fill: url(#sat-2); } .p3 .cloth { fill: url(#sat-3); } .p4 .cloth { fill: url(#sat-4); } .p5 .cloth { fill: url(#sat-5); } .p6 .cloth { fill: url(#sat-6); } .p7 .cloth { fill: url(#sat-7); } .fpatch .cloth { fill: url(#sat-8); }
.patch .twill { fill: none; stroke: var(--ph); stroke-width: 14; stroke-dasharray: 2.2 1.2; }
.patch .merrow { fill: none; stroke: rgba(232, 241, 255, 0.7); stroke-width: 3; stroke-dasharray: 1 1; }
.patch .arc-t { fill: #F2F0EA; font: 800 15px "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.22em; }
.patch .arc-b { fill: var(--lamp); font: 400 11px var(--mono); letter-spacing: 0.18em; }
.patch .f-arc { font-size: 12px; letter-spacing: 0.12em; } .patch .arc-b.f-arc { font-size: 10.5px; }
.m-line { fill: none; stroke: #F2F0EA; stroke-width: 3; stroke-linecap: round; }
.m-thin { fill: none; stroke: rgba(242, 240, 234, 0.6); stroke-width: 2; stroke-linecap: round; }
.m-tick { stroke: #F2F0EA; stroke-width: 2; stroke-linecap: round; }
.m-dial { fill: #0B1F3F; stroke: #F2F0EA; stroke-width: 3; }
.m-hue { fill: none; stroke-width: 4; stroke-linecap: round; }
.m-gold { fill: var(--lamp); }
.m-goldline { fill: none; stroke: var(--lamp); stroke-width: 6; stroke-linecap: round; }
.m-gold-line { fill: none; stroke: var(--lamp); stroke-width: 2; stroke-dasharray: 2 2; }
.m-star { fill: var(--lamp); }
.m-ten { fill: var(--lamp); font: 800 56px "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.04em; }
.m-keyhole { fill: #050D1F; stroke: #F2F0EA; stroke-width: 3; stroke-linejoin: round; }
.m-pass { fill: #0B1F3F; stroke: #F2F0EA; stroke-width: 3; }
.m-seal { fill: #7AB4FE; stroke: #F2F0EA; stroke-width: 2; }
.f-seg { fill: none; stroke-width: 14; stroke-dasharray: 2.2 1.2; }
.f-star { filter: drop-shadow(0 0 6px rgba(247, 205, 69, 0.8)); }
.sheen { opacity: 0; }

/* 03 · MANIFEST: ten seats (they drop in, you can fling them) and the crew manifest. */
.c3 .seats { position: relative; display: grid; grid-template-columns: repeat(5, 64px); gap: 14px; margin: 30px 0 6px; touch-action: pan-y; }
.seat { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1.5px dashed rgba(200, 178, 34, 0.9); background: rgba(5, 13, 31, 0.55); font: 12px/1 var(--mono); color: #E8DE8A; cursor: grab; will-change: transform; }
.seat b { font-weight: 400; } .seat:active { cursor: grabbing; }
.manifest { width: min(520px, 100%); margin: 26px 0 0; padding: 0; text-align: left; font: 13px/1 var(--mono); letter-spacing: 0.08em; }
.manifest > div { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(232, 241, 255, 0.1); }
.manifest dt { color: rgba(232, 241, 255, 0.6); white-space: nowrap; }
.manifest dt::after { content: ''; display: inline-block; width: 1000px; max-width: 100%; }
.manifest > div::before { content: ''; order: 1; flex: 1; border-bottom: 1px dotted rgba(232, 241, 255, 0.3); translate: 0 -3px; }
.manifest dd { order: 2; margin: 0; color: #FFE9A3; text-align: right; }
.manifest dt::after { display: none; }

/* 04 · CREW: a week of 10,080 minutes, twenty of them lit. */
.week { width: min(300px, 78vw); height: auto; margin: 26px 0 0; overflow: visible; }
.wk-ring { fill: none; stroke: rgba(72, 205, 140, 0.45); stroke-width: 1; }
.wk-ticks { fill: none; stroke: rgba(232, 241, 255, 0.35); stroke-width: 1; }
.wk-day { fill: rgba(232, 241, 255, 0.55); font: 9px var(--mono); letter-spacing: 0.12em; }
.wk-sliver { fill: none; stroke: var(--lamp); stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(247, 205, 69, 0.9)); }
.wk-dot { fill: #FFF4CF; filter: drop-shadow(0 0 6px rgba(247, 205, 69, 1)); }
.wk-big { fill: var(--lamp); font: 800 54px "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; }
.wk-small { fill: rgba(232, 241, 255, 0.75); font: 10px var(--mono); letter-spacing: 0.16em; }

/* 06 · PAYLOAD: four issued cards. */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; perspective: 900px; }
.cards li { position: relative; display: grid; gap: 6px; padding: 18px 18px 20px; border: 1px solid rgba(122, 180, 254, 0.45); border-top: 2px solid #7AB4FE; border-radius: 10px; background: linear-gradient(160deg, rgba(122, 180, 254, 0.12), rgba(5, 13, 31, 0.7)); text-align: left; transform-style: preserve-3d; }
.cards .ci { font: 10px/1 var(--mono); letter-spacing: 0.2em; color: rgba(232, 241, 255, 0.6); }
.cards b { font: 750 22px/1.1 "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; color: var(--ink); }
.cards .cs { font: 13px/1.4 var(--mono); color: var(--ink-2); }
.issued { position: absolute; right: 14px; top: 14px; padding: 4px 8px; border: 2px solid #FF8A83; border-radius: 4px; color: #FF8A83; font: 700 11px/1 var(--mono); letter-spacing: 0.18em; rotate: -6deg; opacity: 0.9; }

/* 07 · WINDOW: calendar drums, the count, and the doors opening across US time zones. */
.drums { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; font: 400 34px/1 var(--mono); color: #FFE9A3; }
.drums > i { font-style: normal; color: rgba(232, 241, 255, 0.4); }
.drum { position: relative; display: block; height: 52px; overflow: hidden; padding: 0 12px; border: 1px solid rgba(219, 144, 236, 0.55); border-radius: 8px; background: linear-gradient(rgba(5, 13, 31, 0.95), rgba(28, 40, 80, 0.85) 50%, rgba(5, 13, 31, 0.95)); box-shadow: inset 0 8px 14px rgba(0, 0, 0, 0.6), inset 0 -8px 14px rgba(0, 0, 0, 0.6); }
.drum .strip { display: block; will-change: transform; }
.drum b { display: block; height: 52px; line-height: 52px; font-weight: 400; text-align: center; }
.drum::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #DB90EC; box-shadow: 0 0 8px #DB90EC; opacity: 0; transition: opacity 0.3s ease; }
.drum.landed::after { opacity: 1; }
.tminus-big { margin: 26px 0 0; font: 400 clamp(26px, 4vw, 44px)/1 var(--mono); letter-spacing: 0.06em; color: var(--lamp); font-variant-numeric: tabular-nums; }
.tz { width: min(560px, 100%); margin: 28px 0 0; }
.tz-band { position: relative; display: grid; grid-template-columns: repeat(24, 1fr); height: 34px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(232, 241, 255, 0.18); }
.tz-band > i { border-right: 1px solid rgba(232, 241, 255, 0.08); background: rgba(219, 144, 236, 0.06); }
.tz-band > i:nth-child(n + 7):nth-child(-n + 19) { background: rgba(247, 205, 69, 0.07); }
.tz-open, .tz-you { position: absolute; top: -2px; bottom: -2px; width: 2px; left: var(--at, 0%); }
.tz-open { background: var(--lamp); box-shadow: 0 0 10px var(--lamp); }
.tz-you { background: #DB90EC; box-shadow: 0 0 10px #DB90EC; }
.tz-zones { display: flex; justify-content: space-between; margin-top: 8px; font: 10px/1 var(--mono); letter-spacing: 0.18em; color: rgba(232, 241, 255, 0.55); }
.tz-line { max-width: 560px; margin: 16px 0 0; font: 13px/1.6 var(--mono); color: var(--ink-2); }
.tz-local { color: #DB90EC; }

/* ARRIVAL: the seven patches dock around the finished clock; hold to stamp yours. */
.arrival { padding-bottom: 60px; }
.dock { position: relative; width: min(520px, 92vw); aspect-ratio: 1; margin: 6px 0 4px; }
.dock-clock { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dc-face { fill: rgba(5, 13, 31, 0.6); stroke: rgba(232, 241, 255, 0.25); stroke-width: 1; }
.dc-rim { fill: none; stroke: var(--lamp); stroke-width: 3; stroke-dasharray: 0.93 1; stroke-dashoffset: -0.035; filter: drop-shadow(0 0 4px rgba(247, 205, 69, 0.7)); transition: stroke-dasharray 0.6s cubic-bezier(0.65, 0, 0.15, 1); }
.arrival.locked .dc-rim { stroke-dasharray: 1 0; }
.dc-hand { stroke: #F2F6FB; stroke-width: 5; stroke-linecap: round; }
.dc-m { stroke-width: 3; }
.dc-pin { fill: var(--lamp); }
.dock-ring { position: absolute; inset: 0; }
.dock-ring .patch.mini { position: absolute; left: 50%; top: 50%; width: 15%; height: auto; margin: -7.5% 0 0 -7.5%; overflow: visible; -webkit-mask-image: none; mask-image: none; animation: none; }
.dock-center { position: absolute; left: 50%; top: 50%; width: 40%; translate: -50% -50%; display: grid; justify-items: center; gap: 10px; }
.dock-center .fpatch { width: 100%; height: auto; opacity: 0.18; filter: grayscale(1); transition: opacity 0.4s ease, filter 0.4s ease; }
.arrival.stamped-on .dock-center .fpatch { opacity: 1; filter: none; }
.stamp { position: relative; overflow: hidden; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--lamp); border-radius: 999px; background: rgba(5, 13, 31, 0.8); color: var(--lamp); font: 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.stamp-fill { position: absolute; inset: 0; background: rgba(247, 205, 69, 0.35); transform: scaleX(var(--fill)); transform-origin: left; }
.stamp span { position: relative; }
.arrival.stamped-on .stamp { visibility: hidden; }
.stamped { min-height: 1.6em; margin: 6px 0 0; font: 12px/1.6 var(--mono); letter-spacing: 0.18em; color: var(--lamp); }
.go-line { margin: 10px 0 0; font: 13px/1 var(--mono); letter-spacing: 0.3em; color: var(--lamp); text-shadow: 0 0 14px rgba(247, 205, 69, 0.6); }
.credits { margin: 54px 0 10px; text-transform: uppercase; }
.credits p { margin: 0; }
.cr-a { font: 12px/1 var(--mono); letter-spacing: 0.5em; color: rgba(232, 241, 255, 0.7); }
.cr-b { margin-top: 26px !important; font: 800 clamp(40px, 8vw, 96px)/1 "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.08em; }
.cr-c { margin-top: 8px !important; font: 600 clamp(16px, 2.4vw, 26px)/1 "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.4em; color: var(--lamp); }
.cr-d { margin-top: 22px !important; font: 12px/1 var(--mono); letter-spacing: 0.3em; color: rgba(232, 241, 255, 0.7); }

/* OPEN A CHANNEL: the follow links as three mission comms channels. */
.comms { width: min(920px, 100%); margin: 70px 0 0; }
.comms-tag { margin: 0; font: 11px/1 var(--mono); letter-spacing: 0.4em; color: var(--lamp); }
.comms-title { margin: 14px 0 0; font: 780 clamp(34px, 6vw, 76px)/1 "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.03em; background: linear-gradient(90deg, #FF8A83, #F79643, #C8B222, #48CD8C, #11C8D8, #7AB4FE, #DB90EC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 34px 0 0; padding: 0; list-style: none; }
.channels a { position: relative; display: grid; gap: 6px; padding: 22px 20px 20px; overflow: hidden; border: 1px solid rgba(247, 205, 69, 0.5); border-radius: 14px; background: linear-gradient(170deg, rgba(247, 205, 69, 0.1), rgba(5, 13, 31, 0.85) 60%); color: var(--ink); text-align: left; text-decoration: none; box-shadow: 0 0 30px rgba(247, 205, 69, 0.08); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.channels a::before { content: ''; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: linear-gradient(transparent, rgba(247, 205, 69, 0.14), transparent); pointer-events: none; }
.channels a:hover { border-color: #FFE9A3; box-shadow: 0 0 40px rgba(247, 205, 69, 0.3); }
.chn { font: 10px/1 var(--mono); letter-spacing: 0.3em; color: var(--lamp); }
.channels b { font: 780 30px/1 "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.01em; }
.hd { font: 13px/1 var(--mono); color: var(--ink-2); }
.sig { position: absolute; right: 18px; top: 20px; display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.sig i { width: 3px; background: var(--lamp); border-radius: 1px; opacity: 0.35; }
.sig i:nth-child(1) { height: 20%; } .sig i:nth-child(2) { height: 40%; } .sig i:nth-child(3) { height: 60%; } .sig i:nth-child(4) { height: 80%; } .sig i:nth-child(5) { height: 100%; }
.abroad { margin: 26px auto 0; padding: 4px 10px; width: fit-content; border-radius: 4px; background: rgba(5, 13, 31, 0.55); font: 400 14px/1.5 var(--mono); letter-spacing: 0.06em; color: var(--ink); }
.comms .dossier { margin-left: auto; margin-right: auto; }
.save { margin: 22px 0 0; font: 13px/1 var(--mono); letter-spacing: 0.12em; }
.save a { color: var(--lamp); text-decoration: underline; text-underline-offset: 4px; }

/* The flight manual. */
.brief { position: relative; max-width: 760px; margin: 0 auto; padding: 40px 16px 190px; text-align: left; overflow-wrap: anywhere; }
.brief::before { content: ''; position: absolute; inset: 0 0 150px; border: 1px solid rgba(232, 241, 255, 0.16); border-top: 3px solid var(--lamp); background: rgba(5, 13, 31, 0.82); pointer-events: none; }
.brief > * { position: relative; margin-left: 28px; margin-right: 28px; }
.brief-tag { margin-top: 26px; font: 11px/1 var(--mono); letter-spacing: 0.3em; color: var(--lamp); }
.brief h2 { margin-top: 12px; margin-bottom: 14px; font-size: clamp(26px, 4vw, 40px); font-weight: 760; line-height: 1.1; letter-spacing: -0.02em; }
.brief .faq-title { margin-top: 44px; }
.brief h3 { margin: 26px 0 8px; font: 400 13px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lamp); }
.brief p, .brief li { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.brief p { margin-top: 0; margin-bottom: 0; }
.brief-lead { font-size: 19px !important; color: var(--ink) !important; }
.brief ul { margin: 0; padding-left: 1.1em; } .brief li { margin: 4px 0; } .brief li::marker { color: var(--lamp); }
.brief a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(247, 205, 69, 0.6); }
.brief a:focus-visible, .faq summary:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 2px; }
.brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } .brief-grid > * { min-width: 0; }
.faq details { border-top: 1px solid rgba(232, 241, 255, 0.12); } .faq details:last-child { border-bottom: 1px solid rgba(232, 241, 255, 0.12); }
.faq summary { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; margin-left: auto; font: 18px/1 var(--mono); color: var(--lamp); }
.faq details[open] summary::after { content: '\2013'; }
.faq .qn { flex: none; font: 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--lamp); }
.faq h3 { margin: 0; color: var(--ink); text-transform: none; letter-spacing: 0.02em; font-size: 15px; }
.faq details p { padding: 0 0 16px 50px; }

/* The mission log. */
.founding-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; padding: 0 0 env(safe-area-inset-bottom); border-top: 1px solid rgba(247, 205, 69, 0.25); background: rgba(5, 13, 31, 0.84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink-2); }
.track { position: relative; height: 26px; margin: 0 44px; container-type: inline-size; }
.ground { position: absolute; inset: 4px 0; width: 100%; height: 18px; overflow: visible; }
.gt { fill: none; stroke: rgba(247, 205, 69, 0.55); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.founding-foot.on .gt { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s cubic-bezier(0.65, 0, 0.15, 1); }
.rider { position: absolute; left: 0; top: 50%; width: 22px; height: 23px; margin: -11px 0 0 -11px; }
.rider .dm { width: 22px; height: 23px; }
.mbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 44px; }
.mbar p { margin: 0; white-space: nowrap; }
.mb-l, .mb-r { display: flex; gap: 22px; font: 11px/1 var(--mono); letter-spacing: 0.16em; color: rgba(232, 241, 255, 0.6); }
.mb-r { justify-content: flex-end; }
.mb-l b, .mb-r .tminus { font-weight: 400; color: var(--lamp); }
.mb-k { font: 700 13px/1 "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.32em; color: var(--ink); }
.mb-c { display: flex; justify-content: center; align-items: center; gap: 0.5ch; margin: 6px 0 8px; font: 11px/1.6 var(--mono); letter-spacing: 0.05em; }
.mb-c .nowrap { display: inline-flex; align-items: center; gap: 0.6ch; }
.dm-link { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(232, 241, 255, 0.35); }
.dm { flex: none; overflow: visible; width: 22px; height: 23px; }
.dm-ring { fill: none; stroke: #9BA0A5; stroke-opacity: 0.7; stroke-width: 10; }
.dm-edge { fill: none; stroke: url(#fd-edge); stroke-width: 7; stroke-linejoin: round; }
.dm-ride .dm-edge { stroke: url(#fd-edge2); }
.dm-spoke { fill: none; stroke: #858A8F; stroke-width: 6; stroke-linecap: round; }
.dm-run { fill: none; stroke: var(--lamp); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0.08 0.92; opacity: 0; }
.dm-core { fill: url(#fd-core); stroke: #D9DCDF; stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.dm-ride .dm-core { fill: url(#fd-core2); }
.dm-node { fill: #E9EBED; }
.dm-rig, .dm-spin { transform-box: view-box; transform-origin: 205px 190px; }

/* Phones. */
@media (max-width: 899px) {
  .mbar { grid-template-columns: 1fr; justify-items: center; gap: 6px; padding: 0 12px; }
  .mb-l { display: none; }
  .mb-k { font-size: 11px; letter-spacing: 0.24em; }
  .track { margin: 0 14px; }
  .channels { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .frame.f3, .frame.f4 { bottom: 122px; }
}
@media (max-width: 600px) {
  .trajectory { top: 62px; width: calc(100vw - 32px); }
  .collected { top: 70px; }
  .founding-close { right: 16px; }
  .chapter, .arrival { padding: 170px 16px 150px; }
  .chapter .patch { width: 168px; height: 168px; }
  .say { font-size: clamp(28px, 8vw, 72px); }
  .dossier { font-size: 14px; }
  .c3 .seats { grid-template-columns: repeat(5, 54px); gap: 10px; }
  .seat { width: 54px; height: 54px; }
  .manifest { font-size: 11px; letter-spacing: 0.04em; }
  .cards { grid-template-columns: 1fr; width: 100%; }
  .drums { font-size: 24px; gap: 6px; } .drum { height: 40px; padding: 0 8px; } .drum b { height: 40px; line-height: 40px; }
  .dock-center { width: 46%; }
  .brief > * { margin-left: 18px; margin-right: 18px; }
  .brief-grid { grid-template-columns: 1fr; }
  .brief p, .brief li { font-size: 16px; } .brief-lead { font-size: 17px !important; }
  .faq details p { padding-left: 0; }
  .credits { margin-top: 40px; }
}

@media (prefers-reduced-motion: no-preference) {
  .founding-btn { animation: beckon 3.4s ease-in-out infinite; }
  .founding-btn .glint { animation: breathe 3.4s ease-in-out infinite; }
  @keyframes beckon { 0%, 100% { box-shadow: 0 0 18px 0 rgba(247, 205, 69, 0.16), inset 0 0 12px rgba(247, 205, 69, 0.05); } 50% { box-shadow: 0 0 30px 4px rgba(247, 205, 69, 0.32), inset 0 0 18px rgba(247, 205, 69, 0.11); } }
  .founding-btn:hover, .founding-btn.locked { animation-play-state: paused; }
  .twinkle i { animation: twinkle var(--d) ease-in-out var(--o) infinite alternate; }
  @keyframes twinkle { from { opacity: 0.12; transform: scale(0.6); } to { opacity: 1; transform: scale(1.15); } }
  .founding.still .twinkle i, .founding.still .sig i, .founding.still .rider { animation-play-state: paused !important; }

  /* Chapters arrive on time: the patch stitches itself round, the label and line settle, the dossier follows. */
  .chapter > .patch { -webkit-mask-image: conic-gradient(#000 var(--sw), transparent 0); mask-image: conic-gradient(#000 var(--sw), transparent 0); }
  .chapter.in > .patch { animation: stitch 0.9s cubic-bezier(0.5, 0, 0.3, 1) forwards; }
  @keyframes stitch { to { --sw: 360deg; } }
  .chapter > .ch-label, .chapter > .say, .chapter > h2.say, .chapter > .dossier, .chapter > .spec, .chapter > .sub, .chapter > .manifest, .chapter > .week,
  .chapter > .cards, .chapter > .drums, .chapter > .tminus-big, .chapter > .tz, .chapter > .tz-line, .chapter > .rule { opacity: 0; transform: translateY(14px); }
  .chapter.in > .ch-label { animation: settle 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards; }
  .chapter.in > .say, .chapter.in > h2.say { animation: settle 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards; }
  .chapter.in > .spec, .chapter.in > .sub, .chapter.in > .week, .chapter.in > .drums, .chapter.in > .cards { animation: settle 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards; }
  .chapter.in > .manifest, .chapter.in > .tminus-big, .chapter.in > .tz { animation: settle 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards; }
  .chapter.in > .dossier, .chapter.in > .tz-line { animation: settle 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.3s forwards; }
  .chapter.in > .rule { animation: settle 0.6s ease 1.5s forwards; }
  @keyframes settle { to { opacity: 1; transform: none; } }
  .patch .sheen { opacity: 1; animation: sheen 9s ease-in-out infinite; }
  @keyframes sheen { 0%, 70% { transform: translateX(0); } 100% { transform: translateX(380px); } }

  /* 02 · IDENT: the title swells through the variable weight, letter by letter (widths locked, so nothing moves). */
  .title .ch { font-variation-settings: 'wght' 200; opacity: 0.2; }
  .chapter.in .title .ch { animation: swell 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.55s + var(--i) * 18ms) forwards; }
  @keyframes swell { 0% { font-variation-settings: 'wght' 200; opacity: 0.2; } 55% { font-variation-settings: 'wght' 800; opacity: 1; color: #FFF4CF; text-shadow: 0 0 30px rgba(247, 205, 69, 0.8); } 100% { font-variation-settings: 'wght' 800; opacity: 1; } }

  /* 04 · CREW: the week draws itself round; then the twenty minutes light. */
  .wk-ring { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .chapter.in .wk-ring { animation: draw 1.6s cubic-bezier(0.65, 0, 0.15, 1) 0.9s forwards; }
  .wk-sliver, .wk-dot { opacity: 0; }
  .chapter.in .wk-sliver, .chapter.in .wk-dot { animation: pop 0.5s ease 2.4s forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes pop { 0% { opacity: 0; } 40% { opacity: 1; filter: drop-shadow(0 0 16px #FFF4CF); } 100% { opacity: 1; } }

  /* 05 · COMMAND: the Stillness. The words come; at "without" the whole page stops; then "your yes" strikes. */
  .still-line .yes { opacity: 0; transform: scale(1.3); }
  .chapter.c5.yes-on .still-line .yes { animation: strike 0.36s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
  @keyframes strike { from { opacity: 0; transform: scale(1.6); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
  .chapter.c5 .still-ring { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border: 2px solid var(--lamp); border-radius: 50%; opacity: 0; pointer-events: none; }
  .chapter.c5.yes-on .still-ring { animation: ring-out 1.2s cubic-bezier(0.2, 0.6, 0.3, 1); }
  @keyframes ring-out { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(28); } }

  /* 06 · PAYLOAD: cards flip in, then each is stamped ISSUED. */
  .cards li { opacity: 0; transform: rotateX(70deg); }
  .chapter.in .cards li { animation: card-in 0.6s cubic-bezier(0.2, 1.2, 0.4, 1) forwards; }
  .chapter.in .cards li:nth-child(1) { animation-delay: 0.9s; } .chapter.in .cards li:nth-child(2) { animation-delay: 1.02s; } .chapter.in .cards li:nth-child(3) { animation-delay: 1.14s; } .chapter.in .cards li:nth-child(4) { animation-delay: 1.26s; }
  @keyframes card-in { to { opacity: 1; transform: none; } }
  .issued { opacity: 0; }
  .chapter.in .issued { animation: issue 0.18s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; }
  .chapter.in .cards li:nth-child(1) .issued { animation-delay: 1.7s; } .chapter.in .cards li:nth-child(2) .issued { animation-delay: 1.9s; } .chapter.in .cards li:nth-child(3) .issued { animation-delay: 2.1s; } .chapter.in .cards li:nth-child(4) .issued { animation-delay: 2.3s; }
  @keyframes issue { from { opacity: 0; transform: scale(1.8); filter: blur(2px); } to { opacity: 0.9; transform: none; filter: none; } }

  /* Arrival. */
  .arrival .go-line, .arrival .credits p { opacity: 0; transform: translateY(12px); }
  .arrival.locked .go-line { animation: settle 0.5s ease 0.3s forwards; }
  .arrival.locked .credits .cr-a { animation: settle 0.8s ease 0.9s forwards; }
  .arrival.locked .credits .cr-b { animation: credit 1.4s cubic-bezier(0.2, 0.8, 0.1, 1) 1.3s forwards; }
  .arrival.locked .credits .cr-c { animation: settle 0.8s ease 2s forwards; }
  .arrival.locked .credits .cr-d { animation: settle 0.8s ease 2.4s forwards; }
  @keyframes credit { from { opacity: 0; letter-spacing: 0.4em; } to { opacity: 1; transform: none; letter-spacing: 0.08em; } }
  .dock-ring .patch.mini { transition: transform 0.9s cubic-bezier(0.65, 0, 0.15, 1), opacity 0.5s ease; }
  .arrival.stamped-on .dock-center .fpatch { animation: press 0.5s ease; }
  @keyframes press { 40% { transform: scale(1.12); filter: drop-shadow(0 0 30px rgba(247, 205, 69, 0.95)) brightness(1.4); } }
  .arrival.locked .dock { animation: lock-pulse 0.7s ease; }
  @keyframes lock-pulse { 30% { filter: drop-shadow(0 0 40px rgba(247, 205, 69, 0.9)); } }

  /* Comms. */
  .channels a::before { animation: scan 4.5s linear infinite; }
  .channels li:nth-child(2) a::before { animation-delay: -1.5s; } .channels li:nth-child(3) a::before { animation-delay: -3s; }
  @keyframes scan { to { transform: translateY(380%); } }
  .sig i { animation: sig 1.6s ease-in-out infinite; }
  .sig i:nth-child(2) { animation-delay: 0.1s; } .sig i:nth-child(3) { animation-delay: 0.2s; } .sig i:nth-child(4) { animation-delay: 0.3s; } .sig i:nth-child(5) { animation-delay: 0.4s; }
  @keyframes sig { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
  .channels a:hover { transform: translate(var(--mx, 0), var(--my, 0)); }

  /* The mission log: the Deimos AI mark rides the ground track (rising and falling with it), turning as it goes. */
  .rider { animation: ride 60s linear infinite; }
  .rider .dm { animation: bob 7.5s ease-in-out infinite alternate, ride-turn 12s linear infinite; }
  @keyframes ride { from { transform: translateX(0); } to { transform: translateX(100cqw); } }
  @keyframes bob { from { translate: 0 -7px; } to { translate: 0 7px; } }
  @keyframes ride-turn { to { rotate: 360deg; } }
}
/* The calm version and the no-JavaScript version stand complete. */
@media (prefers-reduced-motion: reduce) { .arrival .dc-rim { stroke-dasharray: 1 0; } }
:root:not(.founding-js) .chapter > *, :root:not(.founding-js) .arrival * { opacity: 1 !important; transform: none !important; }
:root:not(.founding-js) .chapter > .patch, :root:not(.founding-js) .dock-center .fpatch { -webkit-mask-image: none; mask-image: none; opacity: 1; filter: none; }
:root:not(.founding-js) .title .ch, :root:not(.founding-js) .cards li, :root:not(.founding-js) .issued, :root:not(.founding-js) .still-line .yes { opacity: 1; transform: none; }
:root:not(.founding-js) .trajectory, :root:not(.founding-js) .stamp, :root:not(.founding-js) .mb-l, :root:not(.founding-js) .mb-r, :root:not(.founding-js) .tminus-big, :root:not(.founding-js) .drums, :root:not(.founding-js) .tz, :root:not(.founding-js) .c3 .seats { display: none; }
:root:not(.founding-js) .dc-rim { stroke-dasharray: 1 0; }
/* A soft fade behind the trajectory, so whatever scrolls beneath it stays quiet. */
.trajectory::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 150px; z-index: -1; background: linear-gradient(rgba(5, 13, 31, 0.92), rgba(5, 13, 31, 0.6) 60%, transparent); pointer-events: none; }
@media (max-width: 600px) { .trajectory::before { height: 190px; } }
.founding-btn.locked .seats { visibility: hidden; position: absolute; }
.founding-btn.locked { justify-content: center; }