/* ============================================================
   SCR-X — Experiment 001
   Brand system v0.1. Light canvas only, per SCR-X Corporate Identity.
   Signal Cobalt is reserved for action and change. Nothing else.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* Palette — SCR-X Corporate Identity */
  --navy:#061A4E;          /* brand navy — a SURFACE, identical in both schemes */
  --heading:#061A4E;       /* heading/emphasis ink — this is what flips */
  --cobalt:#0D42F2;
  --op-blue:#1637A2;
  --ice:#EEF3FF;
  --sky:#DCE7FF;
  --ink:#101828;
  --slate:#5B667A;

  /* Derived surface tones */
  --paper:#FFFFFF;
  --wash:#F7F9FD;
  --line:#DCE2F0;
  --line-soft:#E9EEF9;
  --body:#344054;

  /* surfaces and muted inks that flip with the colour scheme */
  --row-alt:#FBFCFF;
  --nav-ink:#4B5568;
  --muted:#9AA6BC;
  --muted-soft:#C3CCDC;
  --muted-num:#B4BECD;
  --bar-empty:#F2F5FA;
  --bar-empty-line:#E2E8F4;
  --veil:rgba(255,255,255,.88);
  --shadow-sm:rgba(16,24,40,.03);
  --shadow-md:rgba(16,24,40,.025);
  --shadow-lg:rgba(6,26,78,.06);
  --grid-line:rgba(6,26,78,.045);

  /* Falsifier ink — deliberately NOT cobalt. Cobalt means action; this means
     "the condition under which we are wrong", which is a different register. */
  --refute:#8A3324;
  --refute-bg:#FCF4F1;
  --refute-line:#EFD9D2;

  --rail-w:264px;
  --gutter:7.5vw;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--wash);
  color:var(--ink);
  font-family:Manrope,'Helvetica Neue',Arial,sans-serif;
  font-size:15px;
  line-height:1.65;
  font-feature-settings:"liga" 1,"kern" 1;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--cobalt)}

/* --- shared type primitives ------------------------------------------- */
.mono{
  font-family:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:500;
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.eyebrow{ composes:mono; }
h1,h2,h3{letter-spacing:-.035em;color:var(--heading);font-weight:800;margin:0}
h2{font-size:clamp(22px,2.4vw,28px);line-height:1.18}
h3{font-size:16px;line-height:1.3}
p{margin:0 0 16px;max-width:74ch}



/* ============================================================
   DARK MODE — automatic, follows the OS.
   The identity specifies a white canvas, so light stays the
   reference rendering. Dark re-tints the *surfaces* only: the
   navy/cobalt relationship, and cobalt's meaning as "action and
   change", are preserved. Cobalt is lifted to keep contrast on a
   dark ground — the one value that shifts.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root{
    --heading:#E7EDFB;       /* ink inverts; --navy stays the navy surface */
    --cobalt:#5B87FF;
    --op-blue:#93B0FF;
    --ice:#12244C;
    --sky:#274681;
    --ink:#E6ECF8;
    --slate:#93A1B8;

    --paper:#0B1B3E;
    --wash:#050E23;
    --line:#1E3162;
    --line-soft:#17274F;
    --body:#BCCAE4;

    --row-alt:#0D2049;
    --nav-ink:#A9B8D4;
    --muted:#7C8CA9;
    --muted-soft:#5D6D8B;
    --muted-num:#5D6D8B;
    --bar-empty:#122A55;
    --bar-empty-line:#1E3162;
    --veil:rgba(5,14,35,.9);
    --shadow-sm:rgba(0,0,0,.32);
    --shadow-md:rgba(0,0,0,.34);
    --shadow-lg:rgba(0,0,0,.45);
    --grid-line:rgba(143,173,255,.05);

    --refute:#FF9F86;
    --refute-bg:#2A1410;
    --refute-line:#4B2A21;
  }
}

/* ============================================================
   MOBILE TOP BAR — replaces the rail below 900px.
   A long page with seven sections needs navigation on a phone too.
   ============================================================ */
.topbar{display:none}

@media (max-width:900px){
  .topbar{
    display:flex;align-items:stretch;gap:10px;
    position:sticky;top:0;z-index:60;
    height:54px;
    padding-left:max(14px, env(safe-area-inset-left));
    padding-right:max(0px, env(safe-area-inset-right));
    background:var(--veil);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .topbar-brand{
    display:flex;align-items:center;gap:9px;flex:0 0 auto;
    text-decoration:none;padding-right:14px;
  }
  .topbar-brand img,.topbar-brand picture{width:62px;display:block}
  .topbar-brand span{
    font-family:'DM Mono',monospace;font-size:8.5px;font-weight:500;
    letter-spacing:.1em;text-transform:uppercase;color:var(--slate);white-space:nowrap;
  }
  .topbar-nav{
    display:flex;align-items:center;gap:5px;flex:1 1 auto;
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding-right:max(14px, env(safe-area-inset-right));
  }
  .topbar-nav::-webkit-scrollbar{display:none}
  .topbar-nav a{
    display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
    scroll-snap-align:center;
    padding:8px 13px;min-height:36px;border-radius:100px;
    text-decoration:none;white-space:nowrap;
    font-size:13px;font-weight:600;color:var(--nav-ink);
    background:var(--wash);border:1px solid transparent;
    transition:background .16s ease,color .16s ease,border-color .16s ease;
  }
  .topbar-nav a i{
    font-family:'DM Mono',monospace;font-style:normal;font-size:9.5px;
    letter-spacing:.06em;color:var(--muted);transition:color .16s ease;
  }
  .topbar-nav a[aria-current="true"]{
    background:var(--ice);border-color:var(--sky);color:var(--heading);
  }
  .topbar-nav a[aria-current="true"] i{color:var(--cobalt)}
  /* anchors must clear the sticky bar */
  section{scroll-margin-top:66px}
  .hero{scroll-margin-top:0}
}
@media (max-width:400px){
  .topbar-brand span{display:none}
}

/* ============================================================
   SHELL
   ============================================================ */
.shell{max-width:none;margin:0;display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr)}

/* --- left rail --------------------------------------------------------- */
.rail{
  position:sticky;top:0;height:100vh;
  padding:34px 26px 26px;
  border-right:1px solid var(--line);
  background:var(--veil);
  backdrop-filter:blur(12px);
  display:flex;flex-direction:column;
  overflow:auto;
}
.rail-mark,.rail-mark img{display:block;width:118px;margin-bottom:2px}
.rail-sub{
  font-family:'DM Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.11em;color:var(--slate);text-transform:uppercase;
  margin:0 0 34px;
}
.rail-label{
  font-family:'DM Mono',monospace;font-size:9.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
  margin:0 0 12px;
}
.rail nav{display:flex;flex-direction:column;gap:1px}
.rail nav a{
  display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:baseline;
  padding:7px 9px;border-radius:7px;
  text-decoration:none;color:var(--nav-ink);font-size:12.5px;line-height:1.3;
  transition:background .16s ease,color .16s ease;
}
.rail nav a span:first-child{
  font-family:'DM Mono',monospace;font-size:9.5px;color:var(--muted);letter-spacing:.06em;
  transition:color .16s ease;
}
.rail nav a:hover{background:var(--ice);color:var(--cobalt)}
.rail nav a:hover span:first-child{color:var(--cobalt)}
.rail nav a[aria-current="true"]{background:var(--ice);color:var(--heading);font-weight:700}
.rail nav a[aria-current="true"] span:first-child{color:var(--cobalt)}
.rail-foot{
  margin-top:auto;padding-top:26px;
  font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.09em;
  color:var(--slate);line-height:1.7;
}
.rail-foot b{display:block;color:var(--heading);letter-spacing:.11em}

main{padding:0 var(--gutter) 0;min-width:0;position:relative}
section{scroll-margin-top:24px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  margin:0 calc(var(--gutter) * -1) 0;
  padding:64px var(--gutter) 56px;
  color:#fff;
  background:linear-gradient(125deg,#061A4E,#0B235F);
  position:relative;overflow:hidden;isolation:isolate;
}
/* drifting cobalt light — two slow, out-of-phase fields so the motion
   never reads as a loop point */
.hero-aurora{
  position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 46% at 22% 24%, rgba(38,94,255,.85) 0%, transparent 62%),
    radial-gradient(34% 40% at 74% 12%, rgba(13,66,242,.55) 0%, transparent 60%),
    radial-gradient(46% 52% at 58% 88%, rgba(11,35,95,.9) 0%, transparent 64%);
  filter:blur(6px);
}
html.anim .hero-aurora{animation:aurora 34s ease-in-out infinite alternate}
@keyframes aurora{
  0%  {transform:translate3d(-3%,-2%,0) scale(1.04)}
  50% {transform:translate3d(4%,3%,0)  scale(1.12)}
  100%{transform:translate3d(-2%,4%,0) scale(1.06)}
}
/* measured-rule texture: the page's one piece of atmosphere, drawn as a ruler */
.hero::after{
  content:"";position:absolute;inset:auto -60px 0 -60px;height:64px;z-index:1;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.20) 0 1px,transparent 1px 34px);
  mask-image:linear-gradient(to top,#000,transparent);
  -webkit-mask-image:linear-gradient(to top,#000,transparent);
  pointer-events:none;
}
html.anim .hero::after{animation:tape 24s linear infinite}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(34px)}}

/* page ground: a faint measurement grid, barely moving */
body::before{
  content:"";position:fixed;inset:-2px;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 100%),
    linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 100%);
  background-size:72px 72px;
}
html.anim body::before{animation:ground 90s linear infinite}
@keyframes ground{from{background-position:0 0}to{background-position:72px 72px}}
.hero-inner{max-width:1320px;margin-inline:auto;position:relative;z-index:1}
.hero-kicker{
  font-family:'DM Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#8FADFF;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px;
}
.hero-kicker .sep{width:26px;height:1px;background:rgba(143,173,255,.45)}
.hero h1{
  color:#fff;font-size:clamp(34px,5.1vw,64px);line-height:1.02;
  letter-spacing:-.045em;max-width:24ch;margin:0 0 20px;
}
.hero h1 em{font-style:normal;color:#8FADFF}
.hero-lede{font-size:17.5px;line-height:1.62;color:#DCE7FF;max-width:60ch;margin:0}

.hero-grid{
  display:grid;grid-template-columns:1.35fr .85fr;gap:52px;align-items:end;
  margin-top:38px;
}
.status-card{
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.07);
  border-radius:14px;padding:22px 24px;
  backdrop-filter:blur(6px);
}
.status-card .rail-label{color:#8FADFF;margin-bottom:14px}
.status-dot{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;font-weight:500;
}
.status-dot i{
  width:7px;height:7px;border-radius:50%;background:#8FADFF;
  box-shadow:0 0 0 4px rgba(143,173,255,.22);
  animation:breathe 3.2s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
.status-card dl{margin:18px 0 0;display:grid;grid-template-columns:1fr auto;gap:9px 12px;font-size:12.5px}
.status-card dt{color:#A9C0FF}
.status-card dd{margin:0;text-align:right;color:#fff;font-family:'DM Mono',monospace;font-size:11.5px}

.hero-meta{
  display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;
  font-family:'DM Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:#8FADFF;
}

/* ============================================================
   SECTION FRAME
   ============================================================ */
.band{padding:74px 0 0;max-width:1120px;margin-inline:auto;width:100%}
.band-head{margin-bottom:30px;max-width:78ch}
.band-num{
  font-family:'DM Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.15em;
  color:var(--cobalt);text-transform:uppercase;display:block;margin-bottom:11px;
}
.band-head p{color:var(--body);font-size:16px;margin:14px 0 0}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ============================================================
   THESIS
   ============================================================ */
.thesis-quote{
  margin:0 0 34px;padding:32px 34px;
  background:var(--paper);border:1px solid var(--sky);border-left:3px solid var(--cobalt);
  border-radius:0 14px 14px 0;
  font-size:clamp(18px,2vw,22px);line-height:1.5;letter-spacing:-.02em;
  color:var(--heading);font-weight:600;max-width:none;
}
.thesis-quote strong{font-weight:800;box-shadow:inset 0 -.5em 0 var(--sky)}

.def-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
@media(min-width:1000px){.def-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.def-grid{grid-template-columns:1fr}}
.def{background:var(--paper);padding:22px 22px 24px}
.def h3{font-size:13px;color:var(--heading);margin-bottom:10px;letter-spacing:-.01em}
.def p{font-size:13px;line-height:1.6;color:var(--body);margin:0}
.def .target{
  display:block;margin-top:13px;padding-top:12px;border-top:1px dashed var(--line);
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.02em;color:var(--heading);
  text-transform:none;
}
.def .target b{color:var(--cobalt);font-weight:500}


/* ============================================================
   DEFINITION GLYPHS — one small animated mark per claim
   ============================================================ */
.def-glyph{width:34px;height:34px;display:block;margin:0 0 14px;color:var(--cobalt);overflow:visible}

/* the governance loop: a hand sweeping a short arc */
/* fill-box would use the line's own (zero-width) bbox — the hand must
   pivot about the dial centre, which is a viewBox coordinate */
.g-hand{transform-box:view-box;transform-origin:20px 20px}
html.anim .g-hand{animation:sweepHand 6s cubic-bezier(.6,0,.35,1) infinite}
@keyframes sweepHand{0%,8%{transform:rotate(0)}45%,55%{transform:rotate(78deg)}92%,100%{transform:rotate(0)}}
.g-sweep{stroke-dasharray:22;stroke-dashoffset:22}
html.anim .g-sweep{animation:sweepArc 6s cubic-bezier(.6,0,.35,1) infinite}
@keyframes sweepArc{0%,8%{stroke-dashoffset:22}45%,55%{stroke-dashoffset:6}92%,100%{stroke-dashoffset:22}}

/* eligible work: bars filling to roughly two-thirds, never to the end */
.g-fill{transform-box:fill-box;transform-origin:left center;transform:scaleX(0)}
html.anim .g-fill.f1{animation:fillBar 5.4s ease-in-out infinite 0s}
html.anim .g-fill.f2{animation:fillBar 5.4s ease-in-out infinite .22s}
html.anim .g-fill.f3{animation:fillBar 5.4s ease-in-out infinite .44s}
@keyframes fillBar{0%{transform:scaleX(0)}38%,62%{transform:scaleX(.66)}96%,100%{transform:scaleX(0)}}

/* verified outcomes: the check draws itself */
.g-check{stroke-dasharray:26;stroke-dashoffset:26}
html.anim .g-check{animation:drawCheck 5s cubic-bezier(.3,.7,.3,1) infinite}
@keyframes drawCheck{0%,10%{stroke-dashoffset:26}40%,80%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:26}}

/* still governed: the shackle seats, the core pulses */
.g-shackle{stroke-dasharray:34;stroke-dashoffset:0;transform-box:fill-box;transform-origin:center bottom}
html.anim .g-shackle{animation:seat 5.6s ease-in-out infinite}
@keyframes seat{0%,12%{transform:translateY(-2.4px)}40%,88%{transform:translateY(0)}100%{transform:translateY(-2.4px)}}
.g-core{transform-box:fill-box;transform-origin:center}
html.anim .g-core{animation:corePulse 5.6s ease-in-out infinite}
@keyframes corePulse{0%,38%{opacity:.35;transform:scale(.8)}52%,86%{opacity:1;transform:scale(1)}100%{opacity:.35;transform:scale(.8)}}

@media (prefers-reduced-motion:reduce){
  .g-sweep,.g-check{stroke-dashoffset:0}
  .g-fill{transform:scaleX(.66)}
  .g-hand,.g-shackle,.g-core{animation:none;transform:none;opacity:1}
}

/* ============================================================
   HYPOTHESIS CARDS — the page's signature
   Threshold and falsifier are given equal weight, side by side.
   ============================================================ */
.hyp-list{display:flex;flex-direction:column;gap:14px}
.hyp{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 2px var(--shadow-sm);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.hyp:hover{border-color:var(--sky);box-shadow:0 6px 20px var(--shadow-lg)}
.hyp-top{
  display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:start;
  padding:20px 22px 18px;
}
.hyp-id{
  font-family:'DM Mono',monospace;font-size:15px;font-weight:500;color:var(--cobalt);
  letter-spacing:.02em;padding-top:1px;
}
.hyp-claim{font-size:16.5px;font-weight:700;color:var(--heading);letter-spacing:-.022em;line-height:1.35;margin:0}
.hyp-state{
  font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);border:1px solid var(--line);border-radius:100px;
  padding:4px 11px;white-space:nowrap;background:var(--wash);
}
.hyp-split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-soft)}
.hyp-cell{padding:17px 22px 19px}
.hyp-cell + .hyp-cell{border-left:1px solid var(--line-soft)}
.hyp-cell .k{
  font-family:'DM Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;display:flex;align-items:center;gap:7px;margin-bottom:9px;
}
.hyp-cell .k::before{content:"";width:6px;height:6px;border-radius:1px;transform:rotate(45deg)}
.pass .k{color:var(--op-blue)}
.pass .k::before{background:var(--cobalt)}
.pass{background:var(--paper)}
.fail{background:var(--refute-bg)}
.fail .k{color:var(--refute)}
.fail .k::before{background:var(--refute)}
.hyp-cell p{font-size:13.5px;line-height:1.58;color:var(--body);margin:0}
.fail p{color:#6B4A40}

.note-strip{
  margin-top:20px;padding:17px 20px;background:var(--ice);border:1px solid var(--sky);
  border-radius:12px;font-size:13.5px;line-height:1.6;color:var(--heading);max-width:none;
}
.note-strip b{font-weight:800}

/* ============================================================
   PROTOCOL RAIL
   ============================================================ */
.protocol{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:28px 26px 24px;overflow:hidden}
.ruler{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:0 0 6px}
.tick{position:relative;padding-top:26px}
.tick .bar{
  height:9px;border-radius:2px;position:relative;overflow:hidden;
  background:var(--bar-empty);box-shadow:inset 0 0 0 1px var(--bar-empty-line);
}
.tick.baseline .bar{background:var(--sky);box-shadow:inset 0 0 0 1px #BFD2F8}
.tick .bar::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.55) 0 3px,transparent 3px 6px);
}
.tick .wk{
  position:absolute;top:0;left:0;
  font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.08em;color:var(--muted);
}
.tick.done .bar{background:var(--cobalt)}
.tick.done .bar::after{opacity:0}
.tick.done .wk{color:var(--heading)}
.tick.mark .wk{color:var(--cobalt)}
.tick.mark .bar{box-shadow:inset 0 0 0 1px var(--sky)}
.ruler-ends{display:none}
.ruler-legend{
  display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);
}
.ruler-legend i{display:inline-block;width:16px;height:8px;border-radius:2px;vertical-align:-1px;margin-right:8px}
.now{
  margin-top:22px;padding:14px 16px;border-radius:10px;background:var(--wash);
  border:1px dashed var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--heading);
}
.now b{color:var(--cobalt);font-weight:500}

.steps{counter-reset:s;list-style:none;padding:0;margin:26px 0 0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.steps li{counter-increment:s;background:var(--paper);padding:18px 22px 18px 62px;position:relative;font-size:14px;line-height:1.6;color:var(--body)}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:22px;top:18px;
  font-family:'DM Mono',monospace;font-size:11px;color:var(--cobalt);letter-spacing:.06em;
}
.steps b{color:var(--heading);font-weight:700}


/* ============================================================
   THE LOOP — full-bleed band carrying the brand's own metaphor
   ============================================================ */
.loopband{
  position:relative;overflow:hidden;isolation:isolate;
  margin:78px calc(var(--gutter) * -1) 0;
  padding:64px var(--gutter) 68px;
  color:#fff;background:#061A4E;
  max-width:none;
}
.loopband-bg{
  position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 44% at 74% 30%, rgba(13,66,242,.7) 0%, transparent 62%),
    radial-gradient(36% 42% at 18% 76%, rgba(25,78,247,.45) 0%, transparent 60%);
  filter:blur(4px);
}
html.anim .loopband-bg{animation:aurora 40s ease-in-out infinite alternate-reverse}
.loopband-inner{
  position:relative;z-index:1;max-width:1320px;margin-inline:auto;
  display:grid;grid-template-columns:1fr minmax(320px,460px);gap:64px;align-items:center;
}
.loopband-copy .band-num{color:#8FADFF}
.loopband-copy h2{color:#fff;font-size:clamp(24px,2.6vw,34px);line-height:1.2;margin-bottom:18px}
.loopband-copy p{color:#DCE7FF;font-size:15.5px;line-height:1.68;max-width:56ch}
.loopband-copy em{color:#fff;font-style:italic}
.loopband-foot{color:#8FADFF !important;font-size:14px !important;padding-top:14px;border-top:1px solid rgba(143,173,255,.22)}
.loopband-figure{display:flex;justify-content:center}

.loop-svg{width:100%;max-width:440px;height:auto;overflow:visible}
.loop-svg text{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;fill:#B8C9FF}
.loop-centre{font-size:13px !important;letter-spacing:.16em;fill:#fff}
.loop-centre.sub{font-size:9.5px !important;letter-spacing:.1em;fill:#8FADFF;text-transform:none}

/* the arc draws itself, then the rider walks the same circle for ever */
.loop-trace{stroke-dasharray:830;stroke-dashoffset:830}
html.anim .loop-trace{animation:trace 2.6s cubic-bezier(.3,.7,.3,1) .2s forwards}
@keyframes trace{to{stroke-dashoffset:0}}

.loop-rider,.loop-comet .trail{
  offset-path:path("M 200 36 A 132 132 0 1 1 199.99 36 Z");
  offset-rotate:0deg;
}
/* head and trail share one animation, so the comet can never drift apart —
   each trail dot is the same motion, a fraction of a second behind */
html.anim .loop-rider,
html.anim .loop-comet .trail{
  animation-name:ride;animation-duration:14s;
  animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes ride{from{offset-distance:0%}to{offset-distance:100%}}
.loop-comet .trail{opacity:0}
html.anim .loop-comet .trail{opacity:revert}

/* ---- pixel bleed: stepped, so the burst reads as blocks, not a smooth glow ---- */
.node-dot{fill:var(--cobalt);transform-box:fill-box;transform-origin:center}
.ping-box{
  fill:none;stroke:#fff;stroke-width:1.5;opacity:0;
  transform-box:fill-box;transform-origin:center;
}
.px{fill:#8FADFF;opacity:0;transform-box:fill-box;transform-origin:center}

html.anim .loop-node .ping-box{animation:bleedBox 14s steps(5,end) infinite}
html.anim .loop-node .px{animation:bleedPx 14s steps(4,end) infinite}
html.anim .loop-node .node-dot{animation:bleedDot 14s ease-out infinite}

/* rider reaches node i at i * 2.8s; the head runs 2s ahead of the clock */
/* Node i is reached at rider-time i*2.8s. The head runs 2s ahead, so node i
   must fire at document time i*2.8 - 2 — expressed as a negative delay
   (that value minus one full cycle) so nothing sits in its start state
   waiting to fire on first load. */
/* These must sit inside html.anim and outrank it: the `animation` shorthand
   above resets animation-delay to 0, and it carries the .anim class too. */
html.anim .loop-node.n1 .ping-box,html.anim .loop-node.n1 .px,html.anim .loop-node.n1 .node-dot{animation-delay:-2s}
html.anim .loop-node.n2 .ping-box,html.anim .loop-node.n2 .px,html.anim .loop-node.n2 .node-dot{animation-delay:-13.2s}
html.anim .loop-node.n3 .ping-box,html.anim .loop-node.n3 .px,html.anim .loop-node.n3 .node-dot{animation-delay:-10.4s}
html.anim .loop-node.n4 .ping-box,html.anim .loop-node.n4 .px,html.anim .loop-node.n4 .node-dot{animation-delay:-7.6s}
html.anim .loop-node.n5 .ping-box,html.anim .loop-node.n5 .px,html.anim .loop-node.n5 .node-dot{animation-delay:-4.8s}

@keyframes bleedBox{
  0%   {opacity:.95;transform:scale(.55)}
  7%   {opacity:0;  transform:scale(3.1)}
  100% {opacity:0;  transform:scale(3.1)}
}
@keyframes bleedPx{
  0%   {opacity:1;transform:translate(0,0) scale(1)}
  6.5% {opacity:0;transform:translate(calc(var(--dx) * 17px), calc(var(--dy) * 17px)) scale(.5)}
  100% {opacity:0;transform:translate(calc(var(--dx) * 17px), calc(var(--dy) * 17px)) scale(.5)}
}
@keyframes bleedDot{
  0%  {fill:#fff;transform:scale(1.5)}
  6%  {fill:#fff;transform:scale(1.5)}
  16% {fill:var(--cobalt);transform:scale(1)}
  100%{fill:var(--cobalt);transform:scale(1)}
}

@media (max-width:1000px){
  .loopband-inner{grid-template-columns:1fr;gap:40px}
  .loopband-figure{order:-1}
}
@media (max-width:620px){
  .loopband{margin-top:52px;padding:44px var(--gutter) 48px}
  .loop-svg{max-width:330px}
  .loop-svg text{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .loop-trace{stroke-dashoffset:0}
  .loop-rider{offset-distance:8%}
  .loop-comet{display:none}
  .ping-box,.px{display:none}
  .node-dot{fill:var(--cobalt)}
  .hero-aurora,.loopband-bg,.hero::after{animation:none !important}
  html.anim body::before{animation:none}
}


/* ============================================================
   THE SPINE — six layers as strata, one scenario walking them
   ============================================================ */
.spine-figure{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px 18px;overflow:hidden;
}
.spine-cap{margin-bottom:10px}
.spine-cap .spine-eyebrow{display:block;margin-bottom:7px}
.spine-eyebrow{
  font-family:'DM Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cobalt);white-space:nowrap;
}
/* Two fixed slots on one line. The step label runs 51-80 characters depending
   on the step, so a single wrapping paragraph reflows the figure beneath it
   every few seconds. Position never wraps; the action truncates instead. */
.spine-step{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;
  margin:0;font-size:13px;line-height:1.45;height:1.45em;
}
.ss-pos{
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.06em;
  color:var(--cobalt);white-space:nowrap;
}
.ss-act{
  color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.spine-svg{width:100%;height:auto;overflow:visible;display:block;margin-top:8px}
.spine-svg .lane-rule{stroke:var(--line-soft);stroke-width:1}
.spine-svg .lane-name{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;fill:var(--heading);
}
.spine-svg .lane-stat{
  font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.05em;fill:var(--muted);
}
.spine-svg .wtrail{fill:none;stroke:var(--sky);stroke-width:6;stroke-linejoin:round;opacity:.5}
.spine-svg .wpath{
  fill:none;stroke:var(--cobalt);stroke-width:1.6;stroke-linejoin:round;
  stroke-dasharray:1700;stroke-dashoffset:1700;
}
html.anim .spine-svg .wpath{animation:spDraw 2.4s cubic-bezier(.3,.7,.3,1) .3s forwards}
@keyframes spDraw{to{stroke-dashoffset:0}}
.spine-svg .wdot{fill:var(--paper);stroke:var(--cobalt);stroke-width:2}
.spine-svg .wping{
  fill:none;stroke:var(--cobalt);stroke-width:1.4;opacity:0;
  transform-box:fill-box;transform-origin:center;
}
.spine-svg .wrider circle{fill:var(--cobalt)}
.spine-svg .wrider .halo{fill:none;stroke:var(--cobalt);stroke-width:1.2;opacity:.45}
.spine-svg .wrider{
  offset-path:path("M 132.0 26.0 L 194.0 75.6 L 256.0 26.0 L 318.0 75.6 L 380.0 224.4 L 442.0 224.4 L 504.0 174.8 L 566.0 174.8 L 628.0 125.2 L 690.0 224.4 L 752.0 274.0 L 814.0 26.0 L 876.0 274.0");
  offset-rotate:0deg;opacity:0;
}
html.anim .spine-svg .wrider{animation:spRide 11.0s linear infinite,spFade .4s ease 2.2s forwards}
@keyframes spRide{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes spFade{to{opacity:1}}
@keyframes spPing{
  0%{opacity:.9;transform:scale(.7)}
  6%{opacity:0;transform:scale(2.6)}
  100%{opacity:0;transform:scale(2.6)}
}
html.anim .spine-svg .wping{animation:spPing 11.0s steps(4,end) infinite}
html.anim .spine-svg .w1 .wping{animation-delay:-11.0s}
html.anim .spine-svg .w2 .wping{animation-delay:-10.083s}
html.anim .spine-svg .w3 .wping{animation-delay:-9.167s}
html.anim .spine-svg .w4 .wping{animation-delay:-8.25s}
html.anim .spine-svg .w5 .wping{animation-delay:-7.333s}
html.anim .spine-svg .w6 .wping{animation-delay:-6.417s}
html.anim .spine-svg .w7 .wping{animation-delay:-5.5s}
html.anim .spine-svg .w8 .wping{animation-delay:-4.583s}
html.anim .spine-svg .w9 .wping{animation-delay:-3.667s}
html.anim .spine-svg .w10 .wping{animation-delay:-2.75s}
html.anim .spine-svg .w11 .wping{animation-delay:-1.833s}
html.anim .spine-svg .w12 .wping{animation-delay:-0.917s}
html.anim .spine-svg .w13 .wping{animation-delay:0.0s}

.spine-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:14px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.spine-stats div{background:var(--paper);padding:16px 18px}
.spine-stats b{
  display:block;font-size:23px;font-weight:800;letter-spacing:-.03em;color:var(--heading);
  line-height:1.1;
}
.spine-stats span{
  display:block;margin-top:5px;font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}

@media (max-width:760px){
  .spine-figure{padding:16px 14px 12px}
  /* two lines, clamped — still a fixed box, so the figure never shifts */
  .spine-step{grid-template-columns:1fr;gap:2px;height:calc(1.45em * 3)}
  .ss-act{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .spine-svg .lane-stat{display:none}
  .spine-svg .lane-name{font-size:11px}
  .spine-stats{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .spine-svg .wpath{stroke-dashoffset:0}
  .spine-svg .wrider{offset-distance:0%;opacity:1}
  .spine-svg .wping{display:none}
}


/* ============================================================
   SPINE GRAPH — one neighbourhood at a time.
   Relations are told apart by line form, not colour: cobalt still
   means action and change, and a rainbow here would spend it.
   ============================================================ */
.graph-wrap{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.graph-bar{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line-soft);background:var(--wash);
}
.graph-crumbs{
  flex:1 1 auto;min-width:0;display:flex;gap:6px;align-items:center;
  overflow:hidden;
  /* the current unit is the one that must stay readable, so the trail is
     right-aligned and older crumbs fade out to the left rather than being
     sliced mid-word */
  justify-content:flex-end;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 26px);
  mask-image:linear-gradient(to right,transparent,#000 26px);
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.06em;
}
.graph-crumbs::-webkit-scrollbar{display:none}
.graph-crumbs span{color:var(--muted);white-space:nowrap;flex:0 0 auto}
.graph-crumbs span:last-child{color:var(--cobalt)}
.graph-crumbs span+span::before{content:"/";margin-right:6px;color:var(--line)}
.graph-back{
  flex:0 0 auto;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 12px;min-height:32px;border-radius:100px;
  border:1px solid var(--line);background:var(--paper);color:var(--nav-ink);cursor:pointer;
  transition:border-color .16s ease,color .16s ease;
}
.graph-back:hover:not(:disabled){border-color:var(--sky);color:var(--cobalt)}
.graph-back:disabled{opacity:.4;cursor:default}

.graph-body{display:grid;grid-template-columns:minmax(0,1fr) 232px}
.graph-svg{width:100%;height:auto;display:block;touch-action:manipulation}

/* --- edges: form carries the relation --- */
.graph-svg .edge{fill:none;stroke:var(--sky);stroke-width:1.4}
.graph-svg .edge.r-requires{stroke:var(--cobalt);stroke-width:1.6;opacity:.75}
.graph-svg .edge.r-invariants{stroke:var(--heading);stroke-dasharray:5 4;opacity:.5}
.graph-svg .edge.r-emits{stroke:var(--heading);stroke-dasharray:1.5 4;stroke-linecap:round;opacity:.55}
.graph-svg .edge.r-covers{stroke:var(--sky);stroke-width:3;opacity:.55}

/* --- nodes --- */
.graph-svg .gnode{cursor:pointer}
.graph-svg .gnode .disc{
  fill:var(--paper);stroke:var(--heading);stroke-width:1.5;
  transition:fill .16s ease,stroke .16s ease;
}
.graph-svg .gnode:hover .disc,
.graph-svg .gnode:focus-visible .disc{fill:var(--ice);stroke:var(--cobalt)}
.graph-svg .gnode:focus{outline:none}
.graph-svg .gnode:focus-visible .ring{opacity:1}
.graph-svg .gnode .ring{
  fill:none;stroke:var(--cobalt);stroke-width:1.5;opacity:0;
}
/* labels can land on an edge, so they carry the surface colour as a stroke
   underneath the glyphs and knock out whatever is behind them */
.graph-svg .gnode text{
  paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round;
}
.graph-svg .gnode .lab{
  font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.03em;
  fill:var(--body);pointer-events:none;
}
.graph-svg .gnode .kind{
  font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.09em;
  fill:var(--muted);pointer-events:none;text-transform:uppercase;
}
.graph-svg .focus .disc{fill:var(--cobalt);stroke:var(--cobalt)}
.graph-svg .focus .lab{fill:var(--heading);font-size:11px}
.graph-svg .more{
  paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round;
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.08em;
  fill:var(--muted);
}

/* --- detail rail --- */
.graph-detail{
  border-left:1px solid var(--line-soft);padding:18px 18px 20px;background:var(--paper);
  display:flex;flex-direction:column;
}
.graph-detail .g-id{
  font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  color:var(--cobalt);word-break:break-all;
}
.graph-detail h3{
  font-size:15px;margin:7px 0 14px;letter-spacing:-.015em;line-height:1.3;
  overflow-wrap:anywhere;word-break:break-word;
}
.graph-detail dl{
  margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 12px;
  font-family:'DM Mono',monospace;font-size:10.5px;
}
.graph-detail dt{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:9px}
.graph-detail dd{margin:0;color:var(--heading);text-align:right}
.g-hint{
  margin:16px 0 0;padding-top:13px;border-top:1px dashed var(--line);
  font-size:12px;line-height:1.5;color:var(--muted);
}

.graph-legend{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  padding:12px 16px;border-top:1px solid var(--line-soft);background:var(--wash);
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);
}
.graph-legend i{display:inline-block;width:22px;height:0;vertical-align:middle;margin-right:8px}
.graph-legend .e-requires{border-top:1.6px solid var(--cobalt)}
.graph-legend .e-invariants{border-top:1.5px dashed var(--heading);opacity:.6}
.graph-legend .e-emits{border-top:1.5px dotted var(--heading);opacity:.7}
.graph-legend .e-covers{border-top:3px solid var(--sky)}

@media (max-width:860px){
  .graph-body{grid-template-columns:1fr}
  .graph-detail{border-left:0;border-top:1px solid var(--line-soft)}
  .graph-detail dl{grid-template-columns:repeat(2,auto 1fr);gap:7px 10px}
}
@media (max-width:620px){
  .graph-svg .gnode .kind{display:none}
  .graph-detail{padding:14px}
}

/* ============================================================
   SCORECARD
   ============================================================ */
.table-wrap{border:1px solid var(--line);border-radius:12px;overflow:auto;background:var(--paper);box-shadow:0 2px 8px var(--shadow-md)}
table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.5;min-width:660px}
thead th{
  background:var(--navy);color:#fff;text-align:left;padding:12px 16px;
  font-family:'DM Mono',monospace;font-size:9.5px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
}
tbody td{padding:14px 16px;vertical-align:top;border-top:1px solid var(--line-soft);color:var(--body)}
tbody tr:nth-child(even) td{background:var(--row-alt)}
td.metric{font-weight:700;color:var(--heading);width:24%}
td.metric small{display:block;font-weight:500;color:var(--slate);font-size:11.5px;margin-top:3px;letter-spacing:0}
td.target{font-family:'DM Mono',monospace;font-size:11.5px;color:var(--heading);white-space:nowrap}
td.reading{width:15%;text-align:right;white-space:nowrap}
.reading .val{
  font-family:'DM Mono',monospace;font-size:15px;color:var(--muted-num);letter-spacing:.02em;
}
.reading .val.has{color:var(--heading);font-weight:500}
.reading .note{display:block;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}

.empty-callout{
  margin-top:18px;padding:18px 20px;border-radius:12px;
  border:1px dashed var(--line);background:var(--paper);
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
}
.empty-callout .glyph{
  font-family:'DM Mono',monospace;font-size:19px;color:var(--cobalt);line-height:1;padding-top:2px;
}
.empty-callout p{margin:0;font-size:13.5px;line-height:1.6;color:var(--body)}
.empty-callout p b{color:var(--heading)}

/* italic leaning into the following roman word — optical correction */
.cond em,.hyp-cell em,.def p em{margin-right:.09em}

/* ============================================================
   DECISION RULES
   ============================================================ */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:1120px){.rules{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.rules{grid-template-columns:1fr}}
.rule-card{
  background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:20px 20px 22px;
  display:flex;flex-direction:column;gap:11px;
  border-top:3px solid var(--line);
}
.rule-card.go{border-top-color:var(--cobalt)}
.rule-card.hold{border-top-color:var(--op-blue)}
.rule-card.revise{border-top-color:var(--slate)}
.rule-card.stop{border-top-color:var(--refute)}
.rule-card h3{font-size:14px;letter-spacing:-.015em}
.rule-card .cond{font-size:13px;line-height:1.58;color:var(--body);margin:0;flex:1}
.rule-card .then{
  font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:var(--heading);
  padding-top:12px;border-top:1px dashed var(--line);
}
.rule-card.stop .then{color:var(--refute)}
.rule-card.go .then{color:var(--cobalt)}

/* ============================================================
   LOG
   ============================================================ */
.log-empty{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:46px 30px;text-align:center;
}
.log-empty .glyph{
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.42em;color:var(--muted-soft);
  text-transform:uppercase;margin-bottom:16px;
}
.log-empty h3{font-size:18px;margin-bottom:10px}
.log-empty p{margin:0 auto;max-width:52ch;color:var(--body);font-size:14px}
.log-entry{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;margin-bottom:12px;
}
.log-entry header{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline;margin-bottom:12px}
.log-entry h3{font-size:15px}
.log-entry time{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.log-entry .learn{font-size:14px;color:var(--body);margin:0 0 10px}
.log-entry .next{font-size:13.5px;color:var(--heading);margin:0;padding-top:11px;border-top:1px dashed var(--line)}
.log-entry .next b{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt);display:block;margin-bottom:4px;font-weight:500}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  margin:86px calc(var(--gutter) * -1) 0;
  padding:52px var(--gutter) 46px;
  background:var(--navy);color:#B8C9FF;
}
.foot-grid{max-width:1320px;margin-inline:auto;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:44px}
footer img,footer picture{width:138px;display:block;margin-bottom:16px}
footer p{font-size:13px;line-height:1.65;color:#B8C9FF;margin:0 0 12px;max-width:40ch}
footer h4{
  font-family:'DM Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#8FADFF;margin:0 0 13px;
}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
footer li{font-size:13px;color:#DCE7FF}
footer li span{color:#8FADFF}
.foot-rule{max-width:1320px;margin-inline:auto;height:1px;background:rgba(184,201,255,.2);margin:40px 0 22px}
.foot-base{
  max-width:1320px;margin-inline:auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#7E96D8;
}

/* ============================================================
   MOTION
   The brand asks for an operating system, not a science-fiction
   character. So: one gesture, used consistently — content rises
   slightly into place as you reach it, in reading order. Nothing
   loops, nothing bounces, nothing moves that you are not reading.

   All of it is gated on html.anim, which is set by an inline script
   only when the visitor has not asked for reduced motion. Without
   JS — or with reduced motion — every element is simply visible.
   ============================================================ */

/* --- scroll progress: cobalt, because progress is change --------------- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--op-blue),var(--cobalt));
  z-index:200;pointer-events:none;
}
html.anim .progress{will-change:transform}

/* --- the one gesture --------------------------------------------------- */
html.anim [data-reveal]{
  opacity:0;
  transform:translateY(14px);
}
html.anim [data-reveal].in{
  opacity:1;
  transform:none;
  transition:
    opacity .58s cubic-bezier(.22,.68,.36,1) var(--d,0ms),
    transform .58s cubic-bezier(.22,.68,.36,1) var(--d,0ms);
}

/* hero: same gesture, fired on load rather than on scroll */
html.anim .hero [data-reveal]{transform:translateY(16px)}

/* the falsifier split resolves from its own two sides, so the
   structure of the card is legible before you have read it */
html.anim .hyp-cell.pass[data-reveal]{transform:translate(-10px,10px)}
html.anim .hyp-cell.fail[data-reveal]{transform:translate(10px,10px)}

/* --- protocol ruler: the ten weeks draw left to right ------------------ */
html.anim .ruler .bar{
  transform:scaleX(0);transform-origin:0 50%;
}
html.anim .ruler.drawn .bar{
  transform:scaleX(1);
  transition:transform .42s cubic-bezier(.3,.7,.4,1) calc(var(--i,0) * 42ms);
}

/* --- rail: an accent that tracks the section you are in ---------------- */
.rail nav a{position:relative}
.rail nav a::before{
  content:"";position:absolute;left:0;top:50%;
  width:2px;height:0;border-radius:2px;background:var(--cobalt);
  transform:translateY(-50%);
  transition:height .26s cubic-bezier(.22,.68,.36,1);
}
.rail nav a[aria-current="true"]::before{height:16px}

/* --- topbar chips settle in when the bar first appears ----------------- */
html.anim .topbar-nav a{transition:background .16s ease,color .16s ease,border-color .16s ease}

@media (prefers-reduced-motion:reduce){
  html.anim [data-reveal],
  html.anim .hero [data-reveal],
  html.anim .hyp-cell[data-reveal]{opacity:1;transform:none;transition:none}
  html.anim .ruler .bar{transform:none;transition:none}
  .progress{display:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}

/* ============================================================
   TABLET  ≤900px — rail out, top bar in
   ============================================================ */
@media (max-width:900px){
  :root{--gutter:22px}
  .shell{display:block}
  .rail{display:none}
  main{
    padding-left:max(var(--gutter), env(safe-area-inset-left));
    padding-right:max(var(--gutter), env(safe-area-inset-right));
  }
  .hero{padding:44px var(--gutter) 40px}
  .hero h1{font-size:clamp(32px,7.4vw,46px);max-width:none}
  .hero-lede{font-size:16px}
  .band{padding-top:52px}
  .hyp-split{grid-template-columns:1fr}
  .hyp-cell + .hyp-cell{border-left:0;border-top:1px solid var(--line-soft)}
  .foot-grid{grid-template-columns:1fr}
}

/* ============================================================
   PHONE  ≤620px
   ============================================================ */
@media (max-width:620px){
  :root{--gutter:18px}

  body{font-size:15.5px}
  h2{font-size:clamp(21px,5.6vw,25px)}
  .band{padding-top:44px}
  .band-head{margin-bottom:22px}
  .band-head p{font-size:15px}

  /* --- hero ------------------------------------------------ */
  .hero{padding:34px var(--gutter) 34px}
  .hero-kicker{gap:9px;margin-bottom:18px;font-size:9px}
  .hero-kicker .sep{width:16px}
  .hero h1{font-size:clamp(30px,8.6vw,40px);line-height:1.06;margin-bottom:16px}
  .hero-lede{font-size:15.5px;line-height:1.58}
  .hero-grid{margin-top:26px;gap:24px}
  .hero-meta{gap:8px 18px;margin-top:22px;font-size:9px}
  .status-card{padding:18px 18px 20px}
  .status-card dl{grid-template-columns:1fr auto;font-size:12px}

  /* --- thesis ---------------------------------------------- */
  .thesis-quote{padding:22px 20px;font-size:17px;line-height:1.48;margin-bottom:26px}
  .def{padding:18px 18px 20px}
  .note-strip{padding:16px 18px;font-size:13px}

  /* --- hypothesis cards ------------------------------------ */
  .hyp-top{grid-template-columns:1fr auto;gap:10px 12px;padding:17px 18px 15px;align-items:center}
  .hyp-id{grid-row:1;grid-column:1;font-size:13px;padding-top:0}
  .hyp-state{grid-row:1;grid-column:2;justify-self:end;margin:0;font-size:9px;padding:3px 9px}
  .hyp-claim{grid-row:2;grid-column:1 / -1;font-size:16px}
  .hyp-cell{padding:15px 18px 17px}

  /* --- protocol ruler: 10 segments, endpoints only ---------- */
  .protocol{padding:20px 18px 20px}
  .ruler{grid-template-columns:repeat(10,1fr);gap:3px;margin-bottom:0}
  .tick{padding-top:0}
  .tick .wk{display:none}
  .tick .bar{height:16px;border-radius:3px}
  .tick.mark .bar{box-shadow:inset 0 0 0 1.5px var(--cobalt)}
  .ruler-ends{
    display:flex;justify-content:space-between;margin-top:8px;
    font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--muted);
  }
  .ruler-legend{flex-direction:column;gap:7px;margin-top:14px;padding-top:14px;font-size:9px}
  .now{margin-top:18px;padding:12px 14px;font-size:10.5px;line-height:1.6}
  .steps li{padding:15px 18px 15px 18px;font-size:14px}
  .steps li::before{position:static;display:block;margin-bottom:5px}

  .empty-callout{padding:16px 17px;gap:11px}

  /* --- decision rules / log / footer ------------------------ */
  .rule-card{padding:18px 18px 20px}
  .log-empty{padding:34px 22px}
  .log-empty h3{font-size:17px}
  footer{padding:40px var(--gutter) 34px}
  footer{
    padding-left:max(var(--gutter), env(safe-area-inset-left));
    padding-right:max(var(--gutter), env(safe-area-inset-right));
    padding-bottom:max(34px, env(safe-area-inset-bottom));
  }
  .foot-grid{gap:28px}
  .foot-base{flex-direction:column;gap:8px}
}


/* ============================================================
   SCORECARD → CARDS  ≤760px
   Own breakpoint: the table needs 660px, so anything narrower than
   ~760 would otherwise become a horizontal scroller.
   Roles on the markup keep table semantics for assistive tech.
   ============================================================ */
@media (max-width:760px){
  .table-wrap{border:0;border-radius:0;overflow:visible;background:none;box-shadow:none}
  table{min-width:0;display:block}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  tbody{display:block}
  tbody tr{
    display:block;background:var(--paper);
    border:1px solid var(--line);border-radius:12px;
    padding:16px 17px 14px;margin-bottom:10px;
  }
  tbody tr:nth-child(even) td{background:none}
  tbody td{display:block;border:0;padding:0}

  td.metric{
    width:auto;font-size:15.5px;letter-spacing:-.015em;
    padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line-soft);
  }
  td.metric small{font-size:12px;margin-top:2px}

  tbody td[data-label]{
    display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:baseline;
    padding:6px 0;font-size:13px;
  }
  tbody td[data-label]::before{
    content:attr(data-label);
    font-family:'DM Mono',monospace;font-size:9px;font-weight:500;
    letter-spacing:.11em;text-transform:uppercase;color:var(--slate);
  }
  td.target{white-space:normal;font-size:12px}
  /* value and its note must sit on one line — grid would blockify them */
  tbody td.reading[data-label]{
    display:flex;align-items:baseline;gap:12px;
    width:auto;text-align:left;padding:6px 0;
  }
  tbody td.reading[data-label]::before{flex:0 0 76px}
  .reading .val{font-size:16px}
  .reading .note{display:inline;margin:0;font-size:9px}

}

/* very small phones */
@media (max-width:360px){
  .hero h1{font-size:28px}
  tbody td[data-label]{grid-template-columns:1fr;gap:3px}
  .tick .bar{height:14px}
}

/* landscape phones: reclaim vertical space from the hero */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-top:26px;padding-bottom:26px}
  .hero-grid{margin-top:22px}
  .topbar{position:static}
}

@media print{
  .rail,.topbar,.hero::after{display:none}
  .shell{display:block}
  body{background:#fff}
  .hero,footer{background:var(--navy) !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .progress{display:none}
  .ruler .bar{transform:none !important}
}

/* ============================================================
   DARK MODE — component fixes.
   Appended last on purpose: these override base rules, and a
   media query carries no extra specificity, only source order.
   ============================================================ */
@media (prefers-color-scheme: dark){
  .fail p{color:#E6C0B2}
  .hyp:hover{border-color:var(--sky);box-shadow:0 6px 20px rgba(0,0,0,.45)}
  .now{background:var(--row-alt)}
  .reading .val{color:var(--muted-num)}
  .hero-aurora{opacity:.85}
  /* the white favicon tile and the reversed wordmark already suit dark ground */
}


/* ---- the films -----------------------------------------------------------
   Two players side by side on a wide screen, stacked below it. `preload="none"`
   is deliberate: together these are 46 MB, and a page about not asserting things
   before they are measured should not spend a visitor's bandwidth on video they
   have not asked to watch. The poster carries the still until they do. */
.films{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
  gap:34px 30px;
}
.film{margin:0;display:flex;flex-direction:column;gap:16px}
.film video{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  display:block;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:10px;
}
.film figcaption{display:flex;flex-direction:column;gap:8px}
.film h3{margin:0;font-size:19px;letter-spacing:-.01em}
.film figcaption p{margin:0;color:var(--body);font-size:15px;line-height:1.5;max-width:56ch}
.film-meta{
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}