/* ============================================================================
   pullrequest.me — "The Open File", rev b
   A dark records room by default: warm near-black, paper-white type, one
   vermillion stamp, and phosphor reserved strictly for data that came back.
   The light cut is the original dossier palette, unchanged — this page is a
   staging of the existing brand, not a replacement for it.
   ============================================================================ */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --void:    #0b0a09;
  --carbon:  #100e0c;
  --panel:   #16120f;
  --panel-2: #1c1713;
  --line:    #241f1a;
  --line-2:  #362e26;
  --bone:    #f6f2ea;          /* the paper colour, now the ink */
  --ash:     #a99e8c;
  --dim:     #6b6254;
  --stamp:   #ff5a35;          /* vermillion, lifted for a black ground */
  --stamp-hi:#ff7554;
  --phos:    #4fe3a0;          /* returned / yours */
  --amber:   #e0a832;          /* clock running */

  /* surfaces — lighter than the ground on a dark page, inverted on paper */
  --glass:     rgba(16,14,12,.80);
  --glass-2:   rgba(11,10,9,.68);
  --bar-bg:    rgba(11,10,9,.74);
  --term-bg:   rgba(8,7,6,.92);
  --tb-bg:     rgba(22,18,15,.92);
  --cell-bg:   rgba(22,18,15,.52);
  --truth-bg:  rgba(22,18,15,.46);
  --hover:     rgba(255,255,255,.035);
  --shadow-lg: 0 40px 90px -50px #000;

  /* atmosphere + film */
  --atmos-1:  rgba(96,78,60,.30);
  --atmos-2:  rgba(255,90,53,.085);
  --atmos-a:  #0d0b0a;
  --atmos-b:  #0b0a09;
  --atmos-c:  #060505;
  --vig:      rgba(0,0,0,.58);
  --grain-op: .055;
  --grain-blend: overlay;
  --cur-blend: screen;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:    'Instrument Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono:    'Spline Sans Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --edge: clamp(20px, 5vw, 88px);
  --rail: 64px;
  --ease: cubic-bezier(.22,.68,.16,1);
}

/* ── light cut ──────────────────────────────────────────────────────────────
   The original dossier tokens verbatim. Both signal colours darken: #ff5a35
   and #4fe3a0 are display colours for black and fail contrast on paper. */
:root[data-theme="light"] {
  color-scheme: light;
  --void:    #f6f2ea;
  --carbon:  #fbf8f2;
  --panel:   #f0e6cf;
  --panel-2: #ece5d8;
  --line:    #ddd4c4;
  --line-2:  #c3b8a3;
  --bone:    #1a1611;
  --ash:     #6b6254;
  --dim:     #8d8272;
  --stamp:   #cf3f21;
  --stamp-hi:#a52f16;
  --phos:    #2c6e49;
  --amber:   #9a6c08;

  --glass:     rgba(251,248,242,.88);
  --glass-2:   rgba(246,242,234,.74);
  --bar-bg:    rgba(246,242,234,.82);
  --term-bg:   rgba(26,22,17,.96);   /* a terminal stays a terminal on paper */
  --tb-bg:     rgba(38,32,25,.96);
  --cell-bg:   rgba(251,248,242,.72);
  --truth-bg:  rgba(240,230,207,.60);
  --hover:     rgba(0,0,0,.028);
  /* paper needs real shadows or nothing floats */
  --shadow-lg: 0 30px 70px -38px rgba(70,58,40,.45);

  --atmos-1:  rgba(150,132,104,.20);
  --atmos-2:  rgba(207,63,33,.07);
  --atmos-a:  #fbf8f2;
  --atmos-b:  #f6f2ea;
  --atmos-c:  #ece5d8;
  --vig:      rgba(246,242,234,.70);
  --grain-op: .038;
  --grain-blend: multiply;
  --cur-blend: normal;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.loading { overflow: hidden; height: 100vh; }
a { color: inherit; text-decoration: none; }
li { list-style: none; }
::selection { background: color-mix(in srgb, var(--stamp) 28%, transparent); color: var(--bone); }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; }

/* ---------------------------------------------------------------- stage --- */
/* opacity + defocus are written per frame by the stage, so no CSS transition */
#stage {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh; display: block;
}
#atmos {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 74% 16%, var(--atmos-1), transparent 62%),
    radial-gradient(90% 70% at 10% 84%, var(--atmos-2), transparent 60%),
    linear-gradient(180deg, var(--atmos-a) 0%, var(--atmos-b) 55%, var(--atmos-c) 100%);
}
#grain {
  position: fixed; inset: -50%; z-index: 40; pointer-events: none;
  opacity: var(--grain-op); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainshift 6s steps(6) infinite;
}
@keyframes grainshift {
  0%,100% { transform: translate(0,0); }  16% { transform: translate(-3%,2%); }
  33% { transform: translate(2%,-3%); }   50% { transform: translate(-2%,-2%); }
  66% { transform: translate(3%,1%); }    83% { transform: translate(1%,3%); }
}
#vignette {
  position: fixed; inset: 0; z-index: 39; pointer-events: none;
  background: radial-gradient(130% 105% at 50% 45%, transparent 42%, var(--vig) 100%);
}

/* ------------------------------------------------------------ preloader --- */
#boot {
  position: fixed; inset: 0; z-index: 100; background: var(--void);
  display: grid; place-content: center; justify-items: center; gap: 24px;
  transition: opacity .7s var(--ease), visibility .7s;
}
#boot.done { opacity: 0; visibility: hidden; }
.boot-mark { font-family: var(--mono); font-size: .82rem; letter-spacing: .32em; color: var(--dim); }
.boot-mark b { color: var(--stamp); font-weight: 600; }
.boot-bar { width: min(280px, 60vw); height: 1px; background: var(--line-2); position: relative; overflow: hidden; }
.boot-bar i { position: absolute; inset: 0 100% 0 0; background: var(--stamp); transition: right .35s var(--ease); }
.boot-pct { font-family: var(--mono); font-size: .7rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.boot-log { font-family: var(--mono); font-size: .66rem; color: var(--dim); opacity: .72; letter-spacing: .06em; min-height: 1em; }

/* --------------------------------------------------------------- chrome --- */
header.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--edge);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
}
header.bar.stuck {
  background: var(--bar-bg); backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line); padding-block: 12px;
}
.logo {
  display: inline-flex; align-items: baseline; gap: .55em;
  font-family: var(--mono); font-weight: 600; font-size: .95rem; letter-spacing: -.02em;
}
.logo::before { content: '\276F'; color: var(--stamp); font-weight: 400; margin-right: -.25em; }
.logo em { font-style: normal; color: var(--stamp); }
.logo .rev { font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; color: var(--dim); text-transform: uppercase; }
.bar nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.bar nav a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ash); transition: color .25s; position: relative; padding-block: 4px;
}
.bar nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--stamp); transition: right .3s var(--ease);
}
.bar nav a:hover { color: var(--bone); }
.bar nav a:hover::after { right: 0; }
.btn-top {
  border: 1px solid var(--line-2); padding: 9px 15px; border-radius: 2px;
  color: var(--bone) !important; white-space: nowrap;
  transition: border-color .25s, background .25s;
}
.cta-short { display: none; }
.btn-top:hover { border-color: var(--stamp); background: color-mix(in srgb, var(--stamp) 9%, transparent); }
.btn-top::after { display: none; }

.theme-btn {
  display: inline-flex; align-items: center; gap: .55em; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 2px;
  padding: 8px 12px; color: var(--ash);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  transition: color .25s, border-color .25s;
}
.theme-btn:hover { color: var(--bone); border-color: var(--line-2); }
.theme-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
:root[data-theme="dark"] .theme-btn .sun,
:root[data-theme="light"] .theme-btn .moon { display: none; }
@media (max-width: 900px) {
  .nav-hide { display: none !important; }
  .theme-btn span { display: none; }
  .theme-btn { padding: 8px 9px; }
  /* the full label wraps to three lines at phone widths and shoves the bar
     down over the hero — swap it for the short one */
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .btn-top { font-size: .64rem; padding: 8px 11px; }
  header.bar { padding-inline: 18px; }
}
@media (max-width: 420px) { .logo .rev { display: none; } .logo { font-size: .86rem; } }

/* chapter rail — a focus scale down the left edge */
#rail {
  position: fixed; left: 26px; top: 50%; transform: translateY(-50%); z-index: 45;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
#rail button {
  display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); padding: 0; transition: color .3s;
}
#rail i { display: block; width: 14px; height: 1px; background: var(--line-2); transition: width .4s var(--ease), background .3s; }
/* labels stay hidden until hover — an always-on label collides with the copy column */
#rail span { opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; white-space: nowrap; }
#rail:hover button span { opacity: 1; transform: none; }
#rail button:hover { color: var(--bone); }
#rail button.on { color: var(--ash); }
#rail button.on i { width: 30px; background: var(--stamp); }
@media (max-width: 1180px) { #rail { display: none; } }

/* ----------------------------------------------------------------- type --- */
.eyebrow {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--stamp); display: inline-flex; align-items: center; gap: .85em;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .6; }

h1, h2, h3 {
  font-family: var(--display); font-optical-sizing: auto;
  font-weight: 600; letter-spacing: -.03em; line-height: .95; text-wrap: balance;
}
h1 { font-size: clamp(44px, 6.6vw, 108px); line-height: .9; letter-spacing: -.038em; margin: 24px 0 26px; }
h2 { font-size: clamp(32px, 4.4vw, 68px); margin: 20px 0 22px; }
h3 { font-size: clamp(20px, 1.9vw, 27px); letter-spacing: -.02em; }
.stamp-text { color: var(--stamp); }

.lead { font-size: clamp(16.5px, 1.2vw, 19px); line-height: 1.6; color: var(--ash); max-width: 46ch; }
.lead strong { color: var(--bone); font-weight: 600; }
.lead em, .cell em { font-style: italic; color: var(--bone); }
p + p { margin-top: 1.05em; }
.cite {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
}
.link { color: var(--stamp); border-bottom: 1px solid color-mix(in srgb, var(--stamp) 40%, transparent); }
.link:hover { border-bottom-color: var(--stamp); }

/* word-by-word reveal */
.rv { display: inline-block; overflow: hidden; vertical-align: bottom; }
.rv > span { display: inline-block; transform: translateY(105%); transition: transform .95s var(--ease); }
.in .rv > span, .rv.in > span { transform: none; }
.fade { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.fade.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv > span { transform: none !important; }
  .fade { opacity: 1 !important; transform: none !important; }
  #grain { animation: none; }
}

/* --------------------------------------------------------------- layout --- */
main { position: relative; z-index: 10; }
.beat {
  min-height: 100svh; display: flex; position: relative;
  padding: clamp(90px,12vh,150px) var(--edge);
  align-items: center; align-items: safe center;
}
.beat.tall { min-height: 130svh; }
.panel { width: min(48ch, 100%); }
.beat.right { justify-content: flex-end; }
.beat.right .panel { margin-left: auto; }
.beat.centre { justify-content: center; text-align: center; }
.beat.centre .panel { width: min(64ch, 100%); }
.beat.centre .lead { margin-inline: auto; }
.beat.centre .actions { justify-content: center; }
.beat.wide .panel { width: min(108ch, 100%); }
.beat.wide .lead { max-width: 62ch; }

/* frosted reading surface so type stays legible over the stage */
.plate {
  background: linear-gradient(180deg, var(--glass), var(--glass-2));
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid var(--line);
  padding: clamp(22px,2.4vw,34px);
  position: relative;
  box-shadow: var(--shadow-lg);
}
/* crop marks — the dossier tic, kept */
.plate::before, .plate::after {
  content: ''; position: absolute; width: 9px; height: 9px; border: 1px solid var(--line-2);
}
.plate::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.plate::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
/* a near-white panel on near-white paper needs a real edge or it dissolves */
:root[data-theme="light"] .plate { border-color: var(--line-2); }

/* ----------------------------------------------------------------- hero --- */
#hero .panel { width: min(58ch, 100%); }
#hero .lead { max-width: 48ch; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 34px 0 16px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim);
}
.hero-meta b { color: var(--ash); font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 30px; }
.btn {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 600; padding: 15px 24px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--stamp); background: var(--stamp); color: #14100e;
  display: inline-flex; align-items: center; gap: .8em;
  transition: transform .3s var(--ease), background .3s, box-shadow .3s;
}
.btn:hover { background: var(--stamp-hi); border-color: var(--stamp-hi); transform: translateY(-2px);
  box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--stamp) 80%, transparent); }
.btn.ghost { background: none; color: var(--bone); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--ash); background: var(--hover); box-shadow: none; transform: translateY(-2px); }
/* the solid button's label is the page ground; the ghost's stays ink, or it
   vanishes on paper */
:root[data-theme="light"] .btn:not(.ghost) { color: var(--void); }

.scroll-cue {
  position: absolute; bottom: 30px; left: var(--edge);
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--dim);
}
.scroll-cue i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--stamp), transparent); }
@media (max-width: 900px) { .scroll-cue { display: none; } }

/* ---------------------------------------------------------------- steps --- */
.steps { margin: 30px 0 26px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: 16px 18px; background: var(--cell-bg); transition: background .3s;
}
.step:hover { background: var(--hover); }
.step .idx { font-family: var(--mono); font-size: .68rem; color: var(--stamp); letter-spacing: .1em; padding-top: .25em; }
.step .nm { display: block; font-weight: 600; font-size: .98rem; }
.step .ds { display: block; color: var(--ash); font-size: .9rem; line-height: 1.55; margin-top: 3px; }

/* ---------------------------------------------------------------- cells --- */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 34px; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.cell {
  background: var(--cell-bg); padding: clamp(18px,1.8vw,26px);
  transition: background .35s var(--ease);
}
.cell:hover { background: var(--hover); }
.cell .lyr {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim);
}
.cell .cite { display: block; margin: 4px 0 12px; color: var(--stamp); }
.cell h3 { margin-bottom: 9px; }
.cell p { color: var(--ash); font-size: .92rem; line-height: 1.58; }
.cell.hollow { background: var(--void); }
.cell.hollow .cite { color: var(--amber); }

/* ------------------------------------------------------------ clockline --- */
.clockline { margin: 30px 0 26px; border-left: 1px solid var(--line-2); padding-left: 22px; display: grid; gap: 16px; }
.clockline li { position: relative; display: grid; grid-template-columns: 5.4em 1fr; gap: 14px; align-items: baseline; }
.clockline li::before {
  content: ''; position: absolute; left: -26px; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--line-2);
  box-shadow: 0 0 0 3px var(--void);
}
.clockline li.amber::before { background: var(--amber); }
.clockline li.phos::before  { background: var(--phos); }
.clockline li.ember::before { background: var(--stamp); }
.clockline b {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone); font-weight: 500; font-variant-numeric: tabular-nums;
}
.clockline li.amber b { color: var(--amber); }
.clockline li.phos b  { color: var(--phos); }
.clockline li.ember b { color: var(--stamp); }
.clockline span { color: var(--ash); font-size: .92rem; }

/* ---------------------------------------------------------------- truth --- */
.truth {
  margin-top: 26px; padding: 16px 18px; background: var(--truth-bg);
  border-left: 2px solid var(--line-2); color: var(--ash); font-size: .9rem; line-height: 1.58;
}
.truth b {
  display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); font-weight: 500; margin-bottom: 6px;
}

/* ------------------------------------------------------------- terminal --- */
.term {
  margin: 28px 0 24px; border: 1px solid var(--line-2); border-radius: 4px;
  overflow: hidden; box-shadow: var(--shadow-lg);
}
.t-bar {
  display: flex; align-items: center; gap: 7px; padding: 9px 12px;
  background: var(--tb-bg); border-bottom: 1px solid rgba(255,255,255,.06);
}
.t-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a322a; }
.t-bar i:first-child { background: var(--stamp); }
.t-bar span {
  margin-left: 8px; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .1em; color: #8b8073;
}
.t-body {
  background: var(--term-bg); color: #cfc6b8; padding: 16px 15px;
  font-family: var(--mono); font-size: .78rem; line-height: 1.85;
  min-height: 236px; white-space: pre-wrap;
}
.t-body .l { display: block; }
.t-body .p { color: var(--stamp); }
.t-body .c { color: #7a7064; }
.t-body .g { color: #4fe3a0; }
.t-body .y { color: #e0a832; }
.t-body .cur {
  display: inline-block; width: 7px; height: 1em; background: var(--stamp);
  vertical-align: text-bottom; animation: blink 1.05s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------- points --- */
.points { display: grid; gap: 13px; margin-top: 4px; }
.points li { color: var(--ash); font-size: .92rem; line-height: 1.55; padding-left: 16px; position: relative; }
.points li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: var(--stamp); }
.points strong { color: var(--bone); font-weight: 600; display: block; }

/* ------------------------------------------------------------ price box --- */
.pricebox {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px,3vw,40px);
  align-items: center; margin: 30px 0 28px; padding: 24px;
  border: 1px solid var(--line-2); background: var(--cell-bg);
}
.amount {
  font-family: var(--display); font-size: clamp(62px,8vw,104px); font-weight: 600;
  line-height: .85; letter-spacing: -.04em; color: var(--bone); position: relative;
}
.amount sup { font-size: .38em; vertical-align: super; color: var(--stamp); font-weight: 500; }
.amount span {
  display: block; font-family: var(--mono); font-size: .1em; letter-spacing: .22em;
  text-transform: uppercase; color: var(--dim); margin-top: 14px;
}
.inc { display: grid; gap: 9px; }
.inc li { color: var(--ash); font-size: .9rem; padding-left: 20px; position: relative; }
.inc li::before {
  content: '\2713'; position: absolute; left: 0; top: -1px;
  color: var(--phos); font-size: .82rem;
}

/* ----------------------------------------------------------------- tiers --- */
.tier { display: flex; flex-direction: column; }
/* the middle tier is the one we actually want people on, so it gets the
   accent edge rather than a louder background */
.tier.on { background: var(--panel); box-shadow: inset 2px 0 0 var(--stamp); }
/* must out-specify `.cell p` (0,1,1), which otherwise pins this to body size */
.cell .amt {
  font-family: var(--display); font-size: clamp(44px,4.4vw,62px); font-weight: 600;
  line-height: .9; letter-spacing: -.04em; color: var(--bone); margin: 10px 0 4px;
}
.amt sup { font-size: .42em; vertical-align: super; color: var(--stamp); font-weight: 500; }
.amt sup.c { margin-left: -.06em; }         /* the cents ride tight against the dollars */
.amt em {
  display: block; font-style: normal; font-family: var(--mono); font-size: .17em;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin-top: 12px;
}
.tier .tag { font-size: .86rem; color: var(--ash); margin-bottom: 14px; min-height: 2.6em; }
.tier .tag b { color: var(--bone); font-weight: 600; }
.tier .inc { margin-top: auto; }

/* ----------------------------------------------------------------- spec --- */
.spec { width: 100%; border-collapse: collapse; margin: 28px 0 8px; font-size: .9rem; }
.spec th, .spec td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th {
  width: 9.5em; font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); font-weight: 500; padding-right: 16px;
}
.spec td { color: var(--ash); }
.spec .q { color: var(--dim); font-size: .84em; }

/* ---------------------------------------------------------------- stamp --- */
/* the ragged rubber stamp from the original dossier system, unchanged */
.stamp {
  display: inline-block; font-family: var(--mono);
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--stamp); border: 2px solid var(--stamp); border-radius: 4px;
  padding: 4px 10px; transform: rotate(-4deg); white-space: nowrap;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 .6 .9 1 1 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-size: 120px;
}
.stamp.big { font-size: 16px; padding: 7px 16px; border-width: 3px; }

/* --------------------------------------------------------------- footer --- */
footer {
  position: relative; z-index: 10; padding: 48px var(--edge) 40px;
  border-top: 1px solid var(--line); background: var(--glass-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.foot-in { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot-nav a {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); transition: color .25s;
}
.foot-nav a:hover { color: var(--bone); }
.fine { margin-top: 26px; max-width: 96ch; color: var(--dim); font-size: .78rem; line-height: 1.66; }

/* --------------------------------------------------------------- cursor --- */
#cur {
  position: fixed; z-index: 90; top: 0; left: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 1px solid color-mix(in srgb, var(--stamp) 45%, transparent); border-radius: 50%;
  pointer-events: none; mix-blend-mode: var(--cur-blend);
  transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), border-color .3s;
}
#cur::after { content: ''; position: absolute; inset: 11px; background: var(--stamp); border-radius: 50%; }
#cur.hot { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-color: var(--stamp); }
@media (pointer: coarse) { #cur { display: none; } }

/* ================================================================ mobile == */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .beat, .beat.right { justify-content: flex-start; }
  .beat .panel { width: 100%; margin-left: 0; }
  .beat { min-height: auto; padding-block: clamp(72px,10vh,110px); }
  .beat.tall { min-height: auto; }
  #hero { min-height: 92svh; padding-top: 104px; }   /* clear the fixed bar */
  /* the hero has no plate, so give its copy a scrim over the stage */
  #hero .panel {
    background: radial-gradient(120% 90% at 0% 45%, var(--void) 30%,
                color-mix(in srgb, var(--void) 70%, transparent) 68%, transparent 100%);
  }
  .beat.centre, .beat.centre .panel { text-align: left; }
  .beat.centre .lead { margin-inline: 0; }
  .beat.centre .actions { justify-content: flex-start; }
  .grid.c3 { grid-template-columns: 1fr; }
  .pricebox { grid-template-columns: 1fr; gap: 22px; }
  .clockline li { grid-template-columns: 1fr; gap: 2px; }
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
  .spec tr { padding: 9px 0; border-bottom: 1px solid var(--line); }
  .spec th, .spec td { border: 0; padding: 0; }
  .spec td { margin-top: 3px; }
  .t-body { min-height: 0; font-size: .72rem; }
  .btn { padding: 13px 18px; }
  .foot-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .actions { gap: 10px; }
  .actions .btn { width: 100%; justify-content: center; }
}