/* SOEI site. Page layout and the site patterns from 03-website/design-system.md §6.
   Reads only tokens.css variables; bundle.css supplies the brand components unchanged. */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface-000);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  --gutter: var(--space-6);
  --nav-h: 64px;
}
@media (min-width: 1024px) { body { --gutter: var(--space-12); } }

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Paper grain (the deck's photocopier noise). Over the 3D the canvas paper already carries grain. */
.sheet,
.foot { position: relative; }
.sheet::after,
.foot::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  opacity: .14; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .08 0 0 0 0 .08 0 0 0 0 .08 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-theme="ink"] .sheet::after,
.foot::after { mix-blend-mode: screen; opacity: .08; }

/* Focus and skip link */
:focus-visible { outline: var(--stroke-mark) solid var(--focus); outline-offset: 2px; }
.skip {
  position: fixed; left: var(--space-4); top: var(--space-4); z-index: 50;
  background: var(--surface-100); color: var(--ink); border: var(--stroke-rule) solid var(--border);
  padding: var(--space-2) var(--space-4); font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--nav-h);
  display: flex; align-items: center; gap: var(--space-8);
  padding: 0 var(--gutter);
  background: var(--surface-000); color: var(--ink);
  border-bottom: var(--stroke-rule) solid var(--border);
}
.nav__brand { display: block; flex: none; }
.nav .wm { width: 104px; height: auto; }
.nav .wm--paper { display: none; }
.nav[data-theme="ink"] .wm--ink { display: none; }
.nav[data-theme="ink"] .wm--paper { display: block; }
.nav__links {
  display: flex; gap: var(--space-6); list-style: none; margin: 0 0 0 auto; padding: 0;
  font-size: var(--fs-readout); line-height: var(--lh-readout); font-weight: 700;
  letter-spacing: var(--ls-readout); text-transform: uppercase;
}
.nav__links a { text-decoration: none; padding: var(--space-2) 0; }
.nav__links a:hover { text-decoration: underline; text-decoration-thickness: var(--stroke-rule); text-underline-offset: 4px; }
.nav__cta { flex: none; }
@media (max-width: 899px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
}

/* ---------- Canvas ---------- */
#stage {
  display: none;
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100vh; height: 100lvh;
  pointer-events: none;
}
.has-3d #stage { display: block; }
.has-3d:not(.is-3d-ready) #stage { visibility: hidden; }
main, .foot { position: relative; z-index: 1; }

/* ---------- Story sections ---------- */
.story { position: relative; }
.pin {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding: calc(var(--nav-h) + var(--space-8)) var(--gutter) var(--space-16);
}
@media (min-width: 1024px) {
  .pin { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); align-items: center; }
}

/* With 3D: each story is a tall scroll track with a pinned viewport. */
.has-3d .story { height: calc(var(--h) * 1vh); }
.has-3d .pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  align-content: start;
  padding-bottom: var(--space-8);
}
@media (min-width: 1024px) { .has-3d .pin { align-content: center; } }
@media (prefers-reduced-motion: reduce) { .has-3d .story { height: calc(clamp(110, var(--h), 140) * 1vh); } }

/* Illustrations used only when the 3D does not run */
.art { margin: 0; justify-self: center; width: min(22rem, 70vw); }
.has-3d .art { display: none; }

/* ---------- The sheet: a flat paper patch every section's type sits on ---------- */
.sheet {
  background: var(--surface-000);
  color: var(--ink);
  padding: var(--space-8) var(--space-6);
  max-width: 34rem;
}
/* Over the 3D the type sits straight on the paper: no lighter box, one surface top to bottom. */
.has-3d .sheet { background: transparent; }
.has-3d .sheet::after { display: none; }
@media (min-width: 1024px) {
  .sheet { padding: var(--space-12) var(--space-8) var(--space-8) 0; }
  .has-3d .sheet { margin-left: calc(-1 * var(--gutter)); padding-left: var(--gutter); max-width: calc(34rem + var(--gutter)); }
}
@media (max-width: 1023px) {
  .sheet { padding: var(--space-6) 0 var(--space-4); }
  .has-3d .sheet { margin: 0 calc(-1 * var(--gutter)); padding: var(--space-4) var(--gutter) var(--space-6); max-width: none; }
}

.kicker {
  font-size: var(--fs-readout); line-height: var(--lh-readout); font-weight: 700;
  letter-spacing: var(--ls-readout); text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: var(--space-4);
}
.h1, .h2 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; margin: 0; color: var(--ink);
}
.h1 {
  /* two lines by design: "AI TO" / "COMBAT AI." */
  font-size: clamp(64px, 18vw, var(--fs-display-xl)); line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl);
  white-space: nowrap;
}
/* "COMBAT AI." is wider than "FIGHT AI.": sized so the second line stays inside the 34rem sheet */
@media (min-width: 1024px) { .h1 { font-size: min(calc(var(--fs-display-xl) * 1.28), 9.6vw); } }
.h2 {
  font-size: var(--fs-display-lg-fluid); line-height: var(--lh-display-lg); letter-spacing: var(--ls-display-lg);
  max-width: 13ch;
}
#bouncer .h2 { line-height: 1.02; }
.h2--bouncer { max-width: 15ch; }
.body strong { font-weight: 700; }
.h2--long { font-size: var(--fs-display-md-fluid); line-height: var(--lh-display-md); max-width: 18ch; }
.body { margin-top: var(--space-4); max-width: 38ch; }
.lede { margin-top: var(--space-6); font-weight: 700; }
.source { margin-top: var(--space-6); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); max-width: 52ch; }
.marker {
  margin-top: var(--space-6); font-family: var(--font-marker); font-size: calc(var(--fs-note) * 1.2); line-height: var(--lh-note);
  color: var(--ink); transform: rotate(var(--stroke-tilt)); transform-origin: left center; max-width: 24ch;
}
/* The blue marker voice: baby blue can't carry text alone (1.3:1), so it prints with a hard ink
   offset, like a misregistered screen print. Decorative; the section's one blue element. */
.marker--blue { color: var(--blue); text-shadow: 2px 2px 0 var(--ink); }

.ink-highlight {
  /* hard-stop band sized to the cap height, so the inverse block never covers the next line */
  background: linear-gradient(transparent 14%, var(--ink) 14%, var(--ink) 86%, transparent 86%);
  color: var(--surface-000);
  padding: 0 var(--space-2); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* The bundle scopes .soei-ul to .soei-headline; the same hand-drawn-style underline for the site's H2s */
.h2 .soei-ul { background: linear-gradient(transparent 70%, var(--blue) 70%, var(--blue) 92%, transparent 92%); background-repeat: no-repeat; }
/* ink variant: for a section whose one blue element is elsewhere (the token) */
.h2 .soei-ul--ink { background-image: linear-gradient(transparent 76%, var(--ink) 76%, var(--ink) 90%, transparent 90%); }

/* Visible placeholder tag for anything unconfirmed */
.ph {
  display: inline-block; vertical-align: middle;
  font-family: var(--font-mono); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink-muted);
  border: var(--stroke-rule) dashed var(--ash); border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
}
.ph--h { font-size: 15px; vertical-align: .4em; }
.ph-row { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Ink stamp variant (new, design-system §6): shares a viewport with another blue ---------- */
.soei-stamp--ink { background: var(--surface-100); color: var(--ink); border-color: var(--ink); }

/* ---------- Hero ---------- */
.sheet--hero { padding-top: var(--space-12); }
.sheet--hero .kicker { font-size: var(--fs-body); letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 700; }
.tape {
  position: absolute; top: -2px; width: 88px; height: 22px; background: var(--ash); opacity: .85;
}
.tape--l { left: 28px; transform: rotate(var(--stroke-tilt)); }
.tape--r { right: 16%; transform: rotate(4deg); }
@media (max-width: 1023px) { .tape--l { left: var(--gutter); } }
.stamp-slam { position: absolute; right: var(--space-8); bottom: var(--space-4); font-size: 30px; }
.sheet--hero { padding-bottom: var(--space-12); }
.sheet--hero .lede { margin-top: var(--space-8); }
@media (max-width: 1023px) { .has-3d .sheet--hero { padding-top: var(--space-8); } }
@media (max-width: 1023px) { .stamp-slam { right: var(--gutter); bottom: var(--space-4); font-size: 22px; } }
@media (max-width: 1023px) { .sheet--hero .lede { max-width: 55%; } }
.cue {
  position: absolute; left: var(--gutter); bottom: var(--space-6);
  font-size: var(--fs-readout); line-height: var(--lh-readout); font-weight: 700; letter-spacing: var(--ls-readout);
  text-transform: uppercase; color: var(--ink-muted);
}
.cue span { display: inline-block; }
html:not(.has-3d) .cue { display: none; }

/* ---------- Loop ---------- */
.nodes { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-2); max-width: 30rem; }
.node {
  display: grid; grid-template-columns: 4.5rem 1fr; column-gap: var(--space-3);
  border: var(--stroke-rule) solid var(--border); background: transparent; padding: var(--space-2) var(--space-3);
}
.node__n { grid-row: span 2; font-size: var(--fs-readout); font-weight: 700; letter-spacing: var(--ls-readout); line-height: 28px; }
.node__t { font-family: var(--font-display); font-size: var(--fs-display-sm); line-height: var(--lh-display-sm); letter-spacing: var(--ls-display-sm); text-transform: uppercase; }
.node__c { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); }
.has-3d .node:not(.is-on) .node__c { display: none; }
.node.is-on { background: var(--ink); color: var(--surface-000); border-color: var(--ink); }
.node.is-on .node__c { color: var(--surface-000); }
@media (max-width: 1023px) {
  .has-3d .node:not(.is-on) { display: none; }
  .nodes { margin-top: var(--space-4); }
}
.loop-centre {
  display: none;
  position: absolute; left: 0; top: 0; z-index: 2;
  background: var(--surface-100); border: var(--stroke-rule) solid var(--border);
  padding: var(--space-2) var(--space-3); text-align: center;
  transform: translate(-50%, -100%) rotate(var(--stroke-tilt));
  will-change: transform;
}
.loop-centre b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-lg); line-height: 1; }
.loop-centre span { display: block; font-size: var(--fs-readout); font-weight: 700; letter-spacing: var(--ls-readout); text-transform: uppercase; margin-top: var(--space-1); }
.has-3d .loop-centre.is-on { display: block; }
@media (max-width: 1023px) { .has-3d .loop-centre.is-on { display: none; } }

/* ---------- Roadmap ---------- */
.rail { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: r; }
.rail__item { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border: var(--stroke-rule) solid var(--border); background: transparent; }
.rail__label { font-size: var(--fs-readout); line-height: var(--lh-readout); font-weight: 700; letter-spacing: var(--ls-readout); text-transform: uppercase; }
.rail__title { font-family: var(--font-display); font-size: var(--fs-display-sm); line-height: var(--lh-display-sm); text-transform: uppercase; }
.rail__line { font-size: var(--fs-small); line-height: var(--lh-small); }
.has-3d .rail__item:not(.is-on) .rail__line { display: none; }
.rail__item.is-on { background: var(--ink); color: var(--surface-000); border-color: var(--ink); }
.rail__item.is-on .ph { color: var(--surface-000); border-color: var(--ink-muted); }
@media (max-width: 1023px) { .has-3d .rail__item:not(.is-on) { display: none; } }

/* ---------- Partners ---------- */
.story--wide .pin { grid-template-columns: minmax(0, 1fr); }
.sheet--wide { max-width: 64rem; }
@media (min-width: 1024px) { .has-3d .sheet--wide { max-width: calc(64rem + var(--gutter)); } }
.slots {
  list-style: none; margin: var(--space-8) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6);
}
@media (min-width: 768px) { .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sticker-slot {
  aspect-ratio: 5 / 3; display: grid; place-items: center;
  background: var(--surface-100); border: var(--stroke-rule) solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-offset);
  transform: rotate(var(--r, 0deg));
}
.sticker-slot span { font-family: var(--font-marker); font-size: 44px; line-height: 1; color: var(--ash); }

/* ---------- Why SOEI ---------- */
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.taped-note { transform: rotate(var(--r)); transition: transform .15s steps(2), box-shadow .15s steps(2); max-width: 26rem; }
.taped-note:hover { transform: rotate(var(--r)) translate(-4px, -4px); box-shadow: var(--shadow-offset); }
.taped-note h3 { font-size: var(--fs-display-sm); line-height: var(--lh-display-sm); letter-spacing: var(--ls-display-sm); margin-bottom: var(--space-2); }
.taped-note p { font-size: var(--fs-small); line-height: var(--lh-small); }
@media (min-width: 1200px) {
  .pin--notes { grid-template-columns: minmax(0, 26rem) minmax(0, 22rem) minmax(0, 1fr); }
  .pin--notes .notes { align-self: center; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .pin--notes { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); }
  .pin--notes .notes { grid-column: 1; gap: var(--space-4); }
}
@media (max-width: 1023px) {
  .has-3d .pin--notes .notes { gap: var(--space-2); }
  .has-3d .taped-note { padding: var(--space-2) var(--space-3); }
  .has-3d .taped-note h3 { font-size: 18px; margin: 0; }
  .has-3d .taped-note p, .has-3d .taped-note .soei-card__tape { display: none; }
}

/* ---------- App ---------- */
.stores { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.store { display: inline-flex; align-items: center; gap: var(--space-2); }
.store svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Close (poster, Ink theme) ---------- */
.story--poster .pin { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; }
.sheet--poster { text-align: center; max-width: 44rem; padding-left: var(--space-6); padding-right: var(--space-6); }
.sheet--poster .kicker { color: var(--ink); font-size: var(--fs-body); letter-spacing: 0; text-transform: none; }
.h2--poster { max-width: 14ch; margin: 0 auto; font-size: var(--fs-display-lg-fluid); }
@media (min-width: 1024px) { .h2--poster { max-width: 20ch; } }
.cta { margin-top: var(--space-6); font-size: 18px; padding: var(--space-3) var(--space-8); }
.story--poster .sheet--poster { padding-top: var(--space-6); padding-bottom: var(--space-4); }
.has-3d .story--poster .sheet--poster { margin-left: auto; margin-right: auto; max-width: 44rem; padding-left: var(--space-6); }
.story--poster .ph-row { justify-content: center; }
[data-theme="ink"] { background: var(--surface-000); color: var(--ink); }
.has-3d .story[data-theme="ink"] { background: transparent; }
.story--poster .pin::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .10;
  background-image: radial-gradient(circle, #f2ede4 1.1px, transparent 1.2px); background-size: 9px 9px;
}

/* ---------- Footer ---------- */
.foot {
  background: var(--surface-000); color: var(--ink);
  padding: var(--space-12) var(--gutter) var(--space-8);
  border-top: var(--stroke-rule) solid var(--border);
}
.foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-6); list-style: none; margin: 0; padding: 0; font-weight: 700; }
.foot__fine { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); max-width: 72ch; margin-top: var(--space-2); }
.foot .ph { color: var(--ink-muted); }

/* ---------- Motion: short, loud cuts (design-system §9) ---------- */
@keyframes cut-in { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes slam {
  0% { visibility: hidden; }
  1% { visibility: visible; transform: rotate(var(--stroke-tilt)) scale(1.6); }
  100% { visibility: visible; transform: rotate(var(--stroke-tilt)) scale(1); }
}
@keyframes slap {
  0% { visibility: hidden; }
  1% { visibility: visible; transform: rotate(var(--r, 0deg)) scale(1.3); }
  100% { visibility: visible; transform: rotate(var(--r, 0deg)) scale(1); }
}
@keyframes tape-l { 0% { visibility: hidden; } 1% { visibility: visible; transform: rotate(var(--stroke-tilt)) scale(1.25); } 100% { transform: rotate(var(--stroke-tilt)) scale(1); } }
@keyframes tape-r { 0% { visibility: hidden; } 1% { visibility: visible; transform: rotate(4deg) scale(1.25); } 100% { transform: rotate(4deg) scale(1); } }
@keyframes ul-draw { 0% { background-size: 0% 100%; } 100% { background-size: 100% 100%; } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

@media (prefers-reduced-motion: no-preference) {
  .has-3d .tape--l { animation: tape-l 120ms steps(2) 80ms both; }
  .has-3d .tape--r { animation: tape-r 120ms steps(2) 260ms both; }
  .has-3d .stamp-slam { animation: slam 300ms steps(3) 620ms both; }
  .has-3d .cue span { animation: nudge 1.2s steps(2) infinite; }

  .js-cuts .story:not(.is-live) .cut { clip-path: inset(0 100% 0 0); }
  .js-cuts .story.is-live .cut { animation: cut-in 240ms steps(4) both; }
  .js-cuts .story.is-live .cut:nth-child(2) { animation-delay: 80ms; }
  .js-cuts .story.is-live .cut:nth-child(3) { animation-delay: 160ms; }
  .js-cuts .story.is-live .cut:nth-child(n+4) { animation-delay: 240ms; }

  .js-cuts .story:not(.is-live) .sticker-slot,
  .js-cuts .story:not(.is-live) .taped-note { visibility: hidden; }
  .js-cuts .story.is-live .sticker-slot { animation: slap 150ms steps(3) calc(300ms + var(--i) * 60ms) both; }
  .js-cuts .story.is-live .taped-note { animation: slap 150ms steps(3) calc(280ms + var(--i) * 80ms) both; }

  .soei-ul { background-repeat: no-repeat; }
  .js-cuts .story.is-live .soei-ul { animation: ul-draw 240ms steps(4) 420ms both; }
}

/* ---------- Short laptop screens (≤ 820px tall): tighter rhythm so no pinned sheet is clipped ---------- */
@media (min-width: 1024px) and (max-height: 820px) {
  .has-3d .pin { padding-top: calc(var(--nav-h) + var(--space-4)); padding-bottom: var(--space-4); }
  .has-3d .sheet { padding-top: var(--space-6); padding-bottom: var(--space-4); }
  .h2 { font-size: 52px; }
  .h2--long { font-size: 34px; }
  .body { margin-top: var(--space-3); }
  .source { margin-top: var(--space-3); }
  .nodes { margin-top: var(--space-4); gap: 6px; }
  .node { padding: 4px var(--space-3); }
  .rail { margin-top: var(--space-4); gap: var(--space-2); }
  .stores { margin-top: var(--space-4); }
  .marker { margin-top: var(--space-4); }
}