/* ═══════════════════════════════════════════════════════════════════════════
   SITE · crypto signals landing · direction 02 "Card"
   ───────────────────────────────────────────────────────────────────────────
   Every colour, type size, space, radius, shadow, easing and duration comes
   from brand/tokens.css. What is written here is composition: how this page
   arranges those values. The few measures no token covers (the card's size in
   this layout, the specification's label column, the camera) are named once in
   the block below and never typed again.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --spec-width:  30rem;    /* the specification's measure */
  --spec-label:  8.5rem;   /* its label column */
  --card-width:  30rem;    /* the card at rest beside the copy... */
  --card-share:  100%;     /* ...and how much of its stage it may take */
  --stage-min:   22rem;    /* room for the card's tilt beside the copy */
  --camera:      1400px;   /* perspective distance: the card's depth */
  --masthead-height: 5.25rem;  /* the header, so the hero still fills the first screen under it */
  --section-head: 64rem;   /* a section headline: each voice on one line on a laptop */
  --plate-width: 64rem;    /* the record's plate at its widest... */
  --plate-ratio: 2.35;     /* ...its proportions beside nothing... */
  --plate-ratio-tall: 0.8; /* ...and on a phone, standing up */
  --plate-sweep: 1.5;      /* the beam takes this many --dur-4 across the plate: it is wider than the card */
  --plate-code-dim: 0.22;  /* the code behind the lit record, faint so the figures lead */
  --faq-sign: 0.875rem;    /* the plus that turns to a cross beside each question */
  --rail-node: 0.75rem;    /* a station on the call's rail */
  --leg-measure: 34ch;     /* one step's sentence under it */
  --terms-width: 38rem;    /* the terms in Access: room for a sentence beside each label */
  --card-still:  22rem;    /* the card when it returns in Access, smaller and still */
  --section-pad: var(--space-2xl);  /* above and below each section after the hero: halved on Ghady's note, 2026-09-21 */
  --pulse:       1.5rem;   /* the light that runs the call's rail */
  --pulse-light: radial-gradient(closest-side, var(--night-text-1) 30%, var(--holo-violet) 55%, transparent);
  /* The page's own colours under other names, so the metal inside a night band
     can keep them while the band swaps its roles. */
  --day-text-1:  var(--text-1);
  --day-text-2:  var(--text-2);
  --day-border:  var(--border);
}

*, *::before, *::after { box-sizing: border-box; }

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

/* Header, the sections, the risk line. The hero fills the first screen under
   the header; the pool of light behind the card lives on the hero now that
   the page runs on past it (the record arrived, 2026-09-19). */
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--selection); color: var(--accent); }

a {
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-s);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: var(--space-3xs);
}

/* ── The ground ───────────────────────────────────────────────────────────────
   Two fields of thin ink lines sweeping from the top left to the bottom right
   behind the hero, after the 21st.dev Background Paths (Ghady's call,
   2026-09-19). site.js draws them with the reference's curves and weights, and
   turns them a quarter on a phone so they fill a tall screen the way they fill
   a wide one. Each line slides a stretch of itself along its curve until the
   whole line is drawn, then back, over its own time, brightening and dimming as
   it goes, and never stops: the one thing on the page that moves on its own. At
   rest (reduced motion, ?still=1) every line is whole and at its quietest. The
   lines pass behind the copy the way they pass behind the card (site.js cuts
   each line of text out of them), and stop at the hero's edges, so the risk
   line always sits on bare ground. */
.paths {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  color: var(--text-1);
  pointer-events: none;
}

/* Each line has its own pace and starts somewhere of its own in its pass, so
   the ground is never empty and never in step. It fades in once, when drawn. */
.paths path {
  --drift: calc(var(--dur-drift) + var(--pace) * var(--dur-drift-spread));
  stroke-opacity: calc(var(--strength) * 0.3);
  animation: drift var(--drift) var(--ease-drift) calc(var(--phase) * var(--drift) * -2) infinite alternate;
}
.paths.is-drawn { animation: ground-in var(--dur-4) var(--ease-entrance) backwards; }

@keyframes ground-in {
  from { opacity: 0; }
}

/* The lines' colour follows the card (Ghady's call, 2026-09-19). At rest they
   are ink. Scanned to its code, the card's holographic hues run into them from
   the top left to the bottom right, in step with the beam; scanned back, the
   ink returns the other way. */
.paths path { stroke: url(#ground-ink) var(--text-1); }
.paths stop {
  stop-color: var(--text-1);
  transition: stop-color var(--dur-3) var(--ease-move) calc((1 - var(--at)) * var(--dur-4));
}
.hero:has(.card[aria-pressed="true"]) .paths stop {
  stop-color: var(--hue);
  transition-delay: calc(var(--at) * var(--dur-4));
}

/* pathLength is 1 on every line, so the dashes are shares of the line: the
   stretch drawn, and where along the line it starts. The dimming rides
   stroke-opacity rather than opacity, which keeps seventy-two lines painting
   as one picture instead of seventy-two layers. */
@keyframes drift {
  from { stroke-dasharray: 0.3 1; stroke-dashoffset: 0; stroke-opacity: calc(var(--strength) * 0.3); }
  50%  { stroke-dashoffset: -1; stroke-opacity: calc(var(--strength) * 0.6); }
  to   { stroke-dasharray: 1 1; stroke-dashoffset: 0; stroke-opacity: calc(var(--strength) * 0.3); }
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-m) var(--gutter);
}

.wordmark {
  padding-block: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--label);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-mark);
  text-transform: uppercase;
}

.masthead nav {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  color: var(--text-2);
}

.masthead nav a:not(.pill) {
  padding-block: var(--space-2xs);
  transition: color var(--dur-1) var(--ease-move);
}

/* Outlined: a line of ink, never a fill. The filled action lives in the copy. */
.pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-2xs) var(--space-s);
  border: var(--border-width) solid var(--text-1);
  border-radius: var(--radius-full);
  color: var(--text-1);
  transition: color var(--dur-2) var(--ease-move);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

main { display: grid; }

/* The card comes first in the source so a phone reads it first. On a wide
   screen the grid puts it on the right, beside copy that sits on the floor. */
.hero {
  position: relative;
  isolation: isolate;   /* the ground sits under the hero's content, over the pool */
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  grid-template-areas: "copy stage";
  align-items: end;
  gap: var(--space-l) var(--gutter);
  min-height: calc(100svh - var(--masthead-height));
  padding: var(--space-m) var(--gutter) var(--space-xl);
  background: radial-gradient(80% 60% at 72% 46%, var(--surface) 0%, transparent 62%);
}

.hero-copy { grid-area: copy; }

.kicker {
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--label);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-2);
  text-wrap: balance;
}

/* Two voices: the ink line states, the grey line answers. */
.hero h1 {
  margin: var(--space-s) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--step-7);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: pretty;
}
.hero h1 span { display: block; color: var(--text-2); }

.lede {
  margin: var(--space-m) 0 0;
  max-width: var(--measure-lede);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--text-2);
}

/* The terms, set the way a watch sets its specification. */
.spec {
  margin: var(--space-l) 0 0;
  max-width: var(--spec-width);
  border-top: var(--border-width) solid var(--border);
  font-family: var(--font-data);
  font-size: var(--label);
  line-height: var(--leading-body);
}
.spec > div {
  display: grid;
  grid-template-columns: var(--spec-label) minmax(0, 1fr);
  gap: var(--space-s);
  padding-block: var(--space-xs);
  border-bottom: var(--border-width) solid var(--border);
}
.spec dt {
  color: var(--text-2);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.spec dd { margin: 0; }

/* Ink, filled: the one solid shape on the screen. */
.action {
  display: inline-block;
  margin-top: var(--space-l);
  padding: var(--space-s) var(--space-m);
  border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--dur-2) var(--ease-move);
}

/* Hovered, a rainbow wipes across each Request access button from the left,
   the way the beam crosses the card, and runs through it for as long as the
   pointer stays; when the pointer goes it leaves to the right, holding where
   it was (Ghady's calls, 2026-09-19). The label is ink on it. */
.pill::before,
.action::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--holo-rainbow) 0 0 / 200% 100% repeat-x;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-2) var(--ease-move);
  animation: flow var(--dur-flow) var(--ease-flow) infinite paused;
}

/* Two widths of band is one tile of it, so the run loops without a seam. */
@keyframes flow {
  to { background-position: 200% 0; }
}

/* The header's quiet links roll their letters on hover (site.js, with GSAP).
   Each word clips its letters to one line; each letter carries its ink copy
   one line below as a shadow, which rolls up into its place. */
.roll-word { display: inline-block; overflow: hidden; vertical-align: top; }
.roll-char { text-shadow: 0 calc(var(--leading-snug) * 1em) var(--text-1); }

@media (hover: hover) {
  .masthead nav a:not(.pill):hover { color: var(--text-1); }
  .pill:hover::before,
  .action:hover::before {
    transform: scaleX(1);
    transform-origin: left;
    animation-play-state: running;
  }
  .pill:hover,
  .action:hover { color: var(--text-1); }
}

/* ── The card ─────────────────────────────────────────────────────────────── */

.stage {
  grid-area: stage;
  align-self: center;
  display: grid;
  place-items: center;
  min-height: var(--stage-min);
  perspective: var(--camera);
}

/* Where the beam is, in hundredths of the card's width. It rests just off the
   card, left of it before a scan and right of it after. A plain number, so it
   can become a percentage for the clips and a container length for the beam.
   Registered so it can travel rather than jump. */
@property --scan {
  syntax: "<number>";
  inherits: true;
  initial-value: -4;
}

/* Brushed titanium, once per view, and the one thing on the page that answers a
   hand. It rests tilted. Under a fine pointer it tilts toward wherever the
   pointer is on it. A click or a tap sends a spectrum beam across it, and the
   engraving behind the beam breaks into holographic code; the next click sends
   the beam back. Built after the 21st.dev ScannerCardStream Ghady picked, with
   its colour on his call. At rest the card is still the approved titanium. */
.card {
  --rx: 9deg;
  --ry: -16deg;
  --rz: -2deg;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --turn-x: 0deg;   /* where a hand has turned it: site.js */
  --turn-y: 0deg;
  --scan: -4;
  --scanned: clamp(0, var(--scan), 100);   /* the beam's place, held to the card */

  position: relative;
  display: block;
  width: min(var(--card-width), var(--card-share));
  aspect-ratio: 1.586;           /* a bank card's proportions */
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-l);
  background: none;
  font: inherit;
  color: var(--metal-ink);
  text-align: start;
  text-shadow: var(--metal-deboss);
  container-type: inline-size;   /* the engraving is sized in shares of this card */
  transform:
    rotateX(calc(var(--rx) + var(--tilt-x) + var(--turn-x)))
    rotateY(calc(var(--ry) + var(--tilt-y) + var(--turn-y)))
    rotateZ(var(--rz));
  transform-style: preserve-3d;   /* two sides, back to back */
  transition:
    transform var(--dur-3) var(--ease-signature),
    --scan var(--dur-4) var(--ease-scan);
  will-change: transform;
  touch-action: pan-y;            /* a finger turns it sideways; the page still scrolls */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.card:enabled { cursor: grab; }
.card.is-held { cursor: grabbing; }
.card[aria-pressed="true"] { --scan: 104; }

/* Under the pointer it answers at once; let go, it settles back slowly. The
   scan keeps its own pace either way. In the hand, or settling from it, the
   turn is drawn frame by frame by site.js, so nothing smooths it. */
.card.is-tilting { transition-duration: var(--dur-1), var(--dur-4); }
.card.is-turning { transition-duration: 0s, var(--dur-4); }

/* Each side is the metal, and shows only while it faces the viewer. */
.card-side {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-l);
  background: var(--metal-brush), var(--metal);
  box-shadow: var(--metal-edge), var(--shadow-3);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card-side-back { transform: rotateY(180deg); }

/* The back: a dark band where a stripe would run, the name and the specimen
   mark engraved under it. */
.card-band {
  position: absolute;
  inset-inline: 0;
  top: 14%;
  height: 19%;
  background: var(--metal-brush), var(--metal-band);
}
.card-back {
  display: grid;
  align-content: end;
  padding: var(--engrave-inset);
}

.card-face {
  position: absolute;
  inset: 0;
  font-family: var(--font-data);
  font-size: var(--engrave-small);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-engrave);
  text-transform: uppercase;
}

/* Ahead of the beam, the engraving; behind it, the code. Both are clipped to
   the card's own rounded shape, since the beam is allowed past its edges. */
.card-front {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--engrave-inset);
  clip-path: inset(0 0 0 calc(var(--scanned) * 1%) round var(--radius-l));
}
.card-code {
  clip-path: inset(0 calc(100% - var(--scanned) * 1%) 0 0 round var(--radius-l));
}

.card-row { display: flex; justify-content: space-between; align-items: flex-start; }
.card-row:last-child { align-items: flex-end; }

/* The code: characters edge to edge, thinning toward the right the way the
   reference's do, and coloured by the holographic spectrum running across the
   card. site.js writes them and reshuffles them while the beam moves. They are
   printed, not cut, so they carry no deboss. */
.card-chars,
.plate-code {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: pre;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  color: transparent;
  background: var(--scan-holo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-mask-image: var(--scan-fade);
  mask-image: var(--scan-fade);
}

/* The card stays marked SPECIMEN on both sides of the beam. */
.card-code .card-mark {
  position: absolute;
  right: var(--engrave-inset);
  bottom: var(--engrave-inset);
}

/* The beam: a strip of spectrum, violet through blue, in a violet halo with a
   blurred rainbow behind it, a little taller than the card and there only while
   it moves. It travels by translate, so the blur is drawn once and slid. */
.card-beam,
.plate-beam {
  position: absolute;
  inset-block: -6%;
  left: 0;
  width: var(--scan-width);
  translate: calc(var(--scan) * 1cqi - 50%) 0;
  border-radius: var(--radius-full);
  background: var(--scan-spectrum);
  box-shadow: var(--scan-halo);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-move);
  will-change: transform, opacity;
}
.card-beam::before,
.plate-beam::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: var(--scan-glow-width);
  translate: -50% 0;
  background: var(--scan-spectrum);
  filter: blur(var(--scan-blur));
}
.card.is-scanning .card-beam,
.plate.is-scanning .plate-beam { opacity: 1; }

.card-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--engrave-name);
  letter-spacing: var(--tracking-mark);
}

/* Tracking is restated here: an em set on the face would be inherited as the
   face's pixels, which is far too tight at this size. */
.card-number {
  align-self: center;
  font-size: var(--engrave-number);
  letter-spacing: var(--tracking-engrave);
}

/* ── Night ────────────────────────────────────────────────────────────────────
   How it works and the record sit on ink (Ghady's call, 2026-09-21: "the
   website looks very plain and dead"), one band from the top of the first to
   the foot of the second, so the page runs light, dark, light. Inside, the
   page's roles take their night values; the metal keeps its day ones. */
.how,
.record {
  --bg: var(--night-bg);
  --text-1: var(--night-text-1);
  --text-2: var(--night-text-2);
  --border: var(--night-border);
  --focus: var(--night-text-1);
  background: var(--bg);
  color: var(--text-1);
}
.plate {
  --text-1: var(--day-text-1);
  --text-2: var(--day-text-2);
  --border: var(--day-border);
}
/* ── How it works ─────────────────────────────────────────────────────────────
   "The call on the beam's line", Ghady's pick from three pictures (2026-09-20).
   One rail across the section carrying the scan's own spectrum, a station on it
   for each step, the steps in a column under each station. The rail draws in
   from the left the first time the section is scrolled to, the way hairlines do
   (direction.md), and the stations arrive after it. On a phone the rail stands
   up and runs down the left of the stack. The only colour in the section. */

.how { padding: var(--section-pad) var(--gutter); }

/* The rail shares the steps' grid, so a station sits exactly on its column. */
.rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: var(--gutter);
  height: var(--space-l);
  margin-top: var(--space-2xl);
}
.rail::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: calc(var(--border-width) * 2);
  translate: 0 -50%;
  transform-origin: left;
  border-radius: var(--radius-full);
  background: var(--holo-rainbow);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ground-full) 10%, var(--ground-full) 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--ground-full) 10%, var(--ground-full) 90%, transparent);
  transition: transform var(--dur-4) var(--ease-move);
}
.rail span {
  justify-self: start;
  width: var(--rail-node);
  aspect-ratio: 1;
  border: var(--border-width) solid var(--text-1);
  border-radius: var(--radius-full);
  background: var(--bg);
  transition: opacity var(--dur-3) var(--ease-move);
}
.rail span:nth-child(2) { transition-delay: var(--dur-2); }
.rail span:nth-child(3) { transition-delay: calc(var(--dur-2) * 2); }

.legs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin: var(--space-m) 0 0;
  padding: 0;
  list-style: none;
}
/* Each step is a column, so the tags line up along the bottom whatever the
   sentences do. */
.legs li { display: flex; flex-direction: column; }
.legs h3 {
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
}
.legs p:not([class]) { margin: var(--space-s) 0 0; max-width: var(--leg-measure); color: var(--text-2); }
.step-num,
.step-tag {
  font-family: var(--font-data);
  font-size: var(--label);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-2);
}
.step-num { margin: 0; }
.step-tag { margin: auto 0 0; padding-top: var(--space-m); }

/* The rail draws itself in, then the stations land. */
.how.is-ready:not(.is-in) .rail::before { transform: scaleX(0); }
.how.is-ready:not(.is-in) .rail span { opacity: 0; }

/* Then a light runs it, the way a call does: from the first station to the
   last, lighting each as it passes, then rests and runs again (Ghady's call,
   2026-09-21). The track spans station to station; the light slides along it. */
.rail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--rail-node) / 2 - var(--pulse) / 2);
  width: calc((200% + 2 * var(--gutter)) / 3 + var(--pulse));
  height: var(--pulse);
  translate: 0 -50%;
  background: var(--pulse-light) 0 50% / var(--pulse) var(--pulse) no-repeat;
  opacity: 0;
  pointer-events: none;
  animation: pulse-run var(--dur-pulse) var(--ease-flow) infinite;
}
.rail span { animation: station-lit var(--dur-pulse) var(--ease-flow) infinite; }
.rail span:nth-child(2) { animation-delay: calc(var(--dur-pulse) * 0.3); }
.rail span:nth-child(3) { animation-delay: calc(var(--dur-pulse) * 0.6); }
.how.is-ready:not(.is-in) .rail::after,
.how.is-ready:not(.is-in) .rail span { animation: none; }

@keyframes pulse-run {
  0%        { background-position-x: 0%; opacity: 0; }
  5%        { opacity: 1; }
  60%       { background-position-x: 100%; opacity: 1; }
  68%, 100% { background-position-x: 100%; opacity: 0; }
}
@keyframes pulse-fall {
  0%        { background-position-y: 0%; opacity: 0; }
  5%        { opacity: 1; }
  60%       { background-position-y: 100%; opacity: 1; }
  68%, 100% { background-position-y: 100%; opacity: 0; }
}
@keyframes station-lit {
  0%, 16%, 100% { box-shadow: none; }
  3%            { box-shadow: var(--scan-halo); }
}

/* ── The record ───────────────────────────────────────────────────────────────
   Ghady's pick from the record lab, round two (2026-09-19): "Scan the record".
   A titanium plate engraved with the record, the one metal object in its view.
   The card's own beam crosses it the first time it is scrolled to and again
   for each period chosen; behind the beam the figures turn holographic and
   count up as it reaches each one (site.js). It turns over for the ten
   highest. Every figure is Rick's and unverified, and the plate says so. */

/* Clipped at the sides: after a sweep the beam rests just past the plate's
   right edge, and when the plate is as wide as the screen that would widen the
   page. Clip, not hidden, so nothing becomes a scroller and the plate keeps
   its depth. */
.record {
  padding: var(--section-pad) var(--gutter);
  overflow-x: clip;
}

.record h2,
.faq h2,
.how h2,
.access h2 {
  margin: var(--space-s) 0 0;
  max-width: var(--section-head);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--step-6);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.record h2 span,
.faq h2 span,
.how h2 span,
.access h2 span { display: block; color: var(--text-2); }

/* The period switch: the chosen period is underlined in the beam's rainbow,
   and the line slides to the next (after 21st.dev's Animated Tabs). site.js
   writes it; without JavaScript there is only the whole record, so no switch. */
.record-switch {
  position: relative;
  display: flex;
  gap: var(--space-l);
  margin-top: var(--space-2xl);
  border-bottom: var(--border-width) solid var(--border);
}
.record-switch:empty { display: none; }
.record-switch button {
  margin: 0;
  padding: var(--space-xs) 0;
  border: 0;
  background: none;
  font-family: var(--font-data);
  font-size: var(--label);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-move);
}
.record-switch button[aria-pressed="true"] { color: var(--text-1); }
.record-switch-line {
  position: absolute;
  left: 0;
  bottom: calc(var(--border-width) * -1);
  width: var(--w, 0);
  height: calc(var(--border-width) * 2);
  border-radius: var(--radius-full);
  background: var(--holo-rainbow) 0 0 / 200% 100%;
  translate: var(--x, 0) 0;
  transition: translate var(--dur-2) var(--ease-move), width var(--dur-2) var(--ease-move);
}
.record-switch:not(.is-set) .record-switch-line { transition: none; }

.plate-stage {
  display: grid;
  place-items: center;
  margin-top: var(--space-2xl);
  padding-block: var(--space-l);
  perspective: var(--camera);
}

/* The plate rests leaning, like the card. Its engraving is sized in shares of
   the plate itself, so it keeps its proportions at any size. */
.plate {
  --rx: 7deg;
  --ry: -9deg;
  --turn: 0deg;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --scan: -4;
  --scanned: clamp(0, var(--scan), 100);
  --plate-inset: 4cqi;
  --plate-gap:   2cqi;
  --plate-name:  max(0.6rem, 1.45cqi);
  --plate-small: max(0.5rem, 1.05cqi);
  --plate-value: 5.4cqi;
  --plate-row:   max(0.55rem, 1.35cqi);
  --plate-rank:  2.6em;   /* the back's rank column... */
  --plate-lit-column: 5.5em;  /* ...and its multiples, */
  --plate-lit-size:   1.3em;  /* set a little larger */

  position: relative;
  width: min(100%, var(--plate-width));
  aspect-ratio: var(--plate-ratio);
  color: var(--metal-ink);
  text-shadow: var(--metal-deboss);
  container-type: inline-size;
  transform:
    rotateX(calc(var(--rx) + var(--tilt-x)))
    rotateY(calc(var(--ry) + var(--tilt-y) + var(--turn)));
  transform-style: preserve-3d;
  transition: transform var(--dur-4) var(--ease-signature);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.js .plate { cursor: pointer; }
.plate.is-turned { --turn: 180deg; }
.plate[data-scan="on"] {
  --scan: 104;
  transition:
    transform var(--dur-4) var(--ease-signature),
    --scan calc(var(--dur-4) * var(--plate-sweep)) var(--ease-scan);
}
/* Under the pointer it answers at once; the beam keeps its own pace. */
.plate.is-tilting { transition-duration: var(--dur-1), calc(var(--dur-4) * var(--plate-sweep)); }

.plate-side {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-l);
  background: var(--metal-brush), var(--metal);
  box-shadow: var(--metal-edge), var(--shadow-3);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.plate-back { transform: rotateY(180deg); }

.plate-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--plate-inset);
  font-family: var(--font-data);
  font-size: var(--plate-small);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-engrave);
  text-transform: uppercase;
}

/* Ahead of the beam the engraving; behind it the lit record, as on the card. */
.plate-engraved { clip-path: inset(0 0 0 calc(var(--scanned) * 1%) round var(--radius-l)); }
.plate-lit {
  clip-path: inset(0 calc(100% - var(--scanned) * 1%) 0 0 round var(--radius-l));
  color: var(--text-1);
  text-shadow: none;
}
.plate-lit > :not(.plate-code) { position: relative; }
.plate-code { opacity: var(--plate-code-dim); }

/* What the beam has lit: its hues across the letters. */
.plate .holo {
  color: transparent;
  background: var(--scan-holo);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}

.plate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--plate-gap);
  margin: 0;
}
.plate-row b { font-weight: inherit; }
.plate-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--plate-name);
  letter-spacing: var(--tracking-mark);
}

.plate-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-self: center;
  gap: var(--plate-gap);
  margin: 0;
}
.plate-figures > div { display: grid; gap: calc(var(--plate-gap) / 2); }
.plate-figures dd {
  margin: 0;
  font-size: var(--plate-value);
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
}

/* The back: the ten highest, engraved, their multiples lit. */
.plate-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  align-content: center;
  gap: calc(var(--plate-gap) / 2) calc(var(--plate-gap) * 2.5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--plate-row);
}
.plate-list li {
  display: grid;
  grid-template-columns: var(--plate-rank) minmax(0, 1fr) auto var(--plate-lit-column);
  align-items: baseline;
  gap: calc(var(--plate-gap) / 2);
  padding-bottom: calc(var(--plate-gap) / 2.5);
  border-bottom: var(--border-width) solid var(--border);
}
.plate-multiple {
  text-align: end;
  font-size: var(--plate-lit-size);
  color: transparent;
  background: var(--scan-holo);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}

/* The turn, for a keyboard and a screen reader; a hand can click the plate. */
.plate-turn {
  margin-top: var(--space-m);
  padding: var(--space-2xs) 0;
  border: 0;
  background: none;
  font-family: var(--font-data);
  font-size: var(--label);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-move);
}
html:not(.js) .plate-turn { display: none; }

.record-method {
  margin: var(--space-xl) 0 0;
  max-width: var(--measure);
  font-family: var(--font-data);
  font-size: var(--label);
  line-height: var(--leading-body);
  color: var(--text-2);
}

@media (hover: hover) {
  .record-switch button:hover,
  .plate-turn:hover { color: var(--text-1); }
}

/* It arrives once, the first time it is scrolled to: a short rise and a fade,
   then the beam. Held back only once site.js has set it up (.is-ready), so
   if the script never runs the record is simply there. Every other section
   that reveals itself (data-reveal) does the same, without the beam. */
.record.is-ready:not(.is-in) > *,
[data-reveal].is-ready:not(.is-in) > * { opacity: 0; }
.record.is-in > *,
[data-reveal].is-in > * {
  transition: opacity var(--dur-3) var(--ease-entrance);
}
/* The motion is the letters' own now: they decode in (site.js, "Decode",
   Ghady's pick, 2026-09-21), so the section itself only fades. */

/* ── Access ───────────────────────────────────────────────────────────────────
   The card returns and the specification becomes the offer (direction.md,
   section 6). The terms on the left, set like the hero's specification but
   with each value at reading size, since some are sentences; the one action
   under them. The card on the right, the hero's own, smaller and still,
   turned toward the terms. Stacked on a phone, the card first as in the hero. */

.access { padding: var(--section-pad) var(--gutter); }

.access-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2xl) var(--gutter);
  margin-top: var(--space-2xl);
}

.terms {
  margin-top: 0;
  max-width: var(--terms-width);
}
.terms > div {
  align-items: baseline;
  padding-block: var(--space-s);
}
.terms dd {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}

.access-note {
  margin: var(--space-s) 0 0;
  font-family: var(--font-data);
  font-size: var(--label);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-2);
}
.access-note span { text-transform: none; }   /* a handle is written the way its owner writes it */

.access-card {
  display: grid;
  place-items: center;
  perspective: var(--camera);
}
.card.card-still {
  --card-width: var(--card-still);
  --ry: 16deg;
  --rz: 2deg;
  animation: none;
}

/* ── Questions ────────────────────────────────────────────────────────────────
   The questions people ask, as rows that open (direction.md, Access). Native
   details, so they open without JavaScript and to any assistive technology;
   where the browser can, the answer slides open over --dur-2 on --ease-move.
   The open question is underlined in the beam's rainbow, the way the record's
   chosen period is. Heading on the left, rows on the right; stacked on a phone. */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--space-2xl) var(--gutter);
  padding: var(--section-pad) var(--gutter);
  interpolate-size: allow-keywords;
}

.faq-list { border-top: var(--border-width) solid var(--border); }
.faq details { border-bottom: var(--border-width) solid var(--border); }

.faq summary {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-m);
  padding-block: var(--space-m);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-s);
}
.faq summary::-webkit-details-marker { display: none; }

/* The rainbow under an open question, drawn in from the left. */
.faq summary::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--border-width) * 2);
  border-radius: var(--radius-full);
  background: var(--holo-rainbow) 0 0 / 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-move);
}
.faq details[open] summary::after { transform: scaleX(1); }

/* A plus of two hairlines that turns to a cross when the answer is open. */
.faq-sign {
  position: relative;
  flex: none;
  width: var(--faq-sign);
  aspect-ratio: 1;
  color: var(--text-2);
  transition: rotate var(--dur-2) var(--ease-move), color var(--dur-1) var(--ease-move);
}
.faq-sign::before,
.faq-sign::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
}
.faq-sign::before { height: var(--border-width); }
.faq-sign::after { width: var(--border-width); }
.faq details[open] .faq-sign { rotate: 45deg; color: var(--text-1); }

.faq-answer { padding: var(--space-m) 0 var(--space-l); }
.faq-answer p {
  margin: 0;
  max-width: var(--measure);
  color: var(--text-2);
}
.faq-answer a {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: var(--space-3xs);
}

/* Where the browser can animate to auto, the answer slides open. */
.faq details::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size var(--dur-2) var(--ease-move),
    content-visibility var(--dur-2) var(--ease-move) allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }

/* A placeholder, in development only: never ships (CLAUDE.md section 2). */
.to-confirm {
  display: inline-block;
  padding: 0 var(--space-2xs);
  border: var(--border-width) dashed var(--warning);
  border-radius: var(--radius-s);
  font-family: var(--font-data);
  font-size: var(--label);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--warning);
}

@media (hover: hover) {
  .faq summary:hover .faq-sign { color: var(--text-1); }
}

/* ── Risk line ────────────────────────────────────────────────────────────── */

.risk {
  padding: var(--space-m) var(--gutter);
  border-top: var(--border-width) solid var(--border);
  font-family: var(--font-data);
  font-size: var(--label);
  line-height: var(--leading-body);
  color: var(--text-2);
}
.risk p { margin: 0; }

/* ── Arrival ──────────────────────────────────────────────────────────────────
   Once, then still. The card swings in and settles in CSS. The copy is written
   in by site.js ("Beam write": the card's spectrum beam writes each headline
   line, the rest draws in behind a wipe). The inline script in the head decides
   whether that runs, and marks the page:
     .js        JavaScript is on
     .arriving  the beam write is about to play; the copy waits, unseen
   Without JavaScript the copy rises in CSS instead, so no path is ever blank.
   Only `from` states are written, so the settled page is the page's own style,
   and the card's entrance rides the individual rotate and translate properties,
   which leaves transform free for the tilt. */

@keyframes copy-rise {
  from { opacity: 0; translate: 0 var(--space-s); }
}

@keyframes card-arrive {
  from { opacity: 0; translate: 0 var(--space-l); rotate: 15 -18 -4 24deg; }
}

/* If the beam write never starts (a script that failed, fonts that never came),
   the copy shows itself anyway after two entrance-lengths. */
@keyframes copy-unhold {
  to { opacity: 1; }
}

html:not(.js) .hero-copy { animation: copy-rise var(--dur-4) var(--ease-entrance) var(--dur-1) backwards; }
.arriving .hero-copy     { opacity: 0; animation: copy-unhold 0s calc(var(--dur-4) * 2) forwards; }
.card                    { animation: card-arrive var(--dur-4) var(--ease-entrance) var(--dur-2) backwards; }

/* The beam that writes a headline line: the scan's own spectrum and halo. */
.write-beam {
  position: absolute;
  left: 0;
  width: var(--scan-width);
  border-radius: var(--radius-full);
  background: var(--scan-spectrum);
  box-shadow: var(--scan-halo);
  pointer-events: none;
}

/* ?still=1: the settled state, for screenshots. */
.still .hero-copy,
.still .card,
.still .paths.is-drawn,
.still .paths path { animation: none; }
.still .record > *,
.still [data-reveal] > *,
.still .plate[data-scan] { transition: none; }
.still .rail::after,
.still .rail span,
.still .legs::after { animation: none; }

/* Reduced motion: no arrival, no tilt, no beam write (the head script never
   marks the page as arriving), no drift in the ground, and the card's scan is
   an instant change from engraving to code. It still happens, because it is
   the answer to a click. */
@media (prefers-reduced-motion: reduce) {
  html:not(.js) .hero-copy,
  .card,
  .paths.is-drawn,
  .paths path,
  .pill::before,
  .action::before,
  .rail::after,
  .rail span,
  .legs::after { animation: none; }
  .card { transition: none; }
}

/* ── Phone and narrow tablet: the card first, smaller ─────────────────────── */

@media (max-width: 860px) {
  :root {
    --card-width: 24rem;
    --card-share: 92%;
  }
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "copy";
    align-items: start;
    align-content: center;
  }
  .stage {
    min-height: 0;
    padding: var(--space-s) 0 var(--space-2xs);
  }
  /* Turned on a phone, the lines reach the top of the hero, so they come in
     softly under the header rather than start at a hard edge. */
  .paths {
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ground-full) 8%);
    mask-image: linear-gradient(to bottom, transparent, var(--ground-full) 8%);
  }
  .masthead nav a:not(.pill) { display: none; }

  .access-body { grid-template-columns: minmax(0, 1fr); }
  .access-card { order: -1; }

  /* The plate stands up on a phone: the figures two by two, the ten highest
     in one column without their market caps. */
  .plate {
    --rx: 5deg;
    --ry: -4deg;
    --plate-inset: 6cqi;
    --plate-gap:   4cqi;
    --plate-name:  max(0.6rem, 3.2cqi);
    --plate-small: max(0.5rem, 2.6cqi);
    --plate-value: 11cqi;
    --plate-row:   max(0.55rem, 3.1cqi);
    aspect-ratio: var(--plate-ratio-tall);
  }
  .plate-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(var(--plate-gap) * 1.25); }
  .plate-row { flex-wrap: wrap; row-gap: calc(var(--plate-gap) / 4); }
  .plate-list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: calc(var(--plate-gap) / 2.5);
  }
  .plate-list li { grid-template-columns: var(--plate-rank) minmax(0, 1fr) var(--plate-lit-column); }
  .plate-rise { display: none; }

  .faq { grid-template-columns: minmax(0, 1fr); }

  /* The rail stands up: it runs down the left of the stack, a station beside
     each step. */
  .rail { display: none; }
  .legs {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
    margin-top: var(--space-2xl);
    padding-left: var(--space-xl);
  }
  .legs::before {
    content: "";
    position: absolute;
    left: var(--space-xs);
    top: var(--space-2xs);
    bottom: var(--space-2xs);
    width: calc(var(--border-width) * 2);
    translate: -50% 0;
    transform-origin: top;
    border-radius: var(--radius-full);
    background: var(--scan-spectrum);
    transition: transform var(--dur-4) var(--ease-move);
  }
  .legs li { position: relative; }
  .legs li::before {
    content: "";
    position: absolute;
    left: calc(var(--space-xs) - var(--space-xl));
    top: 0.35em;
    width: var(--rail-node);
    aspect-ratio: 1;
    translate: -50% 0;
    border: var(--border-width) solid var(--text-1);
    border-radius: var(--radius-full);
    background: var(--bg);
    transition: opacity var(--dur-3) var(--ease-move);
  }
  .legs li:nth-child(2)::before { transition-delay: var(--dur-2); }
  .legs li:nth-child(3)::before { transition-delay: calc(var(--dur-2) * 2); }
  .how.is-ready:not(.is-in) .legs::before { transform: scaleY(0); }
  .how.is-ready:not(.is-in) .legs li::before { opacity: 0; }
  .legs::after {
    content: "";
    position: absolute;
    left: var(--space-xs);
    top: var(--space-2xs);
    bottom: var(--space-2xs);
    width: var(--pulse);
    translate: -50% 0;
    background: var(--pulse-light) 50% 0 / var(--pulse) var(--pulse) no-repeat;
    opacity: 0;
    pointer-events: none;
    animation: pulse-fall var(--dur-pulse) var(--ease-flow) infinite;
  }
  .how.is-ready:not(.is-in) .legs::after { animation: none; }
}