/* Shared by every page: tokens, type, the paper tags on their cable, the concept label and the colophon.
   Pages scroll by default. The fixed, no-scroll opening screen lives in home.css only. */
@font-face{font-family:"Apfel Grotezk";src:url(../fonts/ApfelGrotezk-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Apfel Grotezk";src:url(../fonts/ApfelGrotezk-Fett.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Commit Mono";src:url(../fonts/CommitMono-400.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--enamel:#3d5a4a;--deep:#16241d;--paper:#e7e6d8;--ink:#14201a;--lamp:#ff5a1f;--rubber:#0f1311;
  --sans:"Apfel Grotezk",Helvetica,Arial,sans-serif;--mono:"Commit Mono",Menlo,monospace;--edge:clamp(16px,2.6vw,40px)}

*{box-sizing:border-box}
[hidden]{display:none!important}
p{margin:0}
html{background:#16241d}
html,body{overflow-x:clip}
body{margin:0;color:var(--paper);font:400 17px/1.4 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--enamel);color:var(--paper)}
.sr-only{position:absolute;width:1px;height:1px;overflow:clip;clip-path:inset(50%);white-space:nowrap}

/* ---- Wordmark. */
.word{font-weight:700;color:var(--paper);text-decoration:none}
.word:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---- Paper tags threaded on the cable. The cable runs edge to edge behind them. */
.tags{display:flex;flex-wrap:wrap;gap:8px;position:relative}
.tags::before{content:"";position:absolute;z-index:0;top:14px;height:4px;left:calc(-1*var(--edge));right:calc(-1*var(--edge));background:var(--rubber);border-radius:2px;pointer-events:none}
.tags a{position:relative;z-index:1;display:inline-flex;align-items:center;height:32px;padding:0 12px;background:var(--paper);color:var(--ink);font-size:15px;line-height:20px;border-radius:2px;white-space:nowrap;text-decoration:none}
.tags a:hover{background:#ffffff}
/* You are here: the conductor's punch. Shape and weight, never colour alone. */
.tags a[aria-current="page"],.tags a[aria-current="page"]:hover{padding-left:24px;font-weight:700}
.tags a[aria-current="page"]::before{content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--deep)}

/* ---- Concept label: plain words, nothing to make it look like a feature. */
.concept{font:inherit;color:var(--paper)}

/* ---- Colophon. */
.colophon{font-size:15px;line-height:20px}
.colophon p+p{margin-top:4px}
.colophon a,.back{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.colophon a:hover,.back:hover{text-decoration-thickness:2px}

a:focus-visible,button:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

/* ---- Shell pages: the cover sheet of a document that has not been issued yet. */
body.shell{min-height:100svh;display:flex;flex-direction:column;padding:var(--edge)}
.topline{display:flex;justify-content:space-between;align-items:baseline}
.shell-head .tags{margin-top:12px}
main.cover{padding-top:96px}
h1{font-size:clamp(46px,6.9vw,116px);font-weight:700;line-height:.93;letter-spacing:-.03em;max-width:13.2em;text-wrap:balance;margin:0}
.purpose{margin-top:16px;max-width:34em}
.revision{margin-top:32px;font-size:15px;line-height:20px}
.back{display:inline-block;margin-top:8px;font-size:15px;line-height:20px}
.shell .colophon{margin-top:auto;padding-top:48px}

@media (pointer: coarse){
  .tags a{height:40px}
  .tags::before{top:18px}
  .colophon a,.back,.word{padding-block:12px;margin-block:-12px}
  .back{margin-top:-4px}
}

@media (max-width:760px),(max-aspect-ratio:1/1){
  body{font-size:15px}
  .topline{flex-direction:column;align-items:flex-start;gap:4px}
  main.cover{padding-top:64px}
  h1{font-size:clamp(40px,12vw,76px)}
}

/* ---- Page-to-page fade (Chrome, Edge, Safari). The page background stays #16241d on both sides,
   so no white shows between pages. The WebGL canvas is not named: it joins the plain root fade. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-group(root){animation-duration:.18s}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
}
::view-transition{background:#16241d}