/* ============================================================================
   ALLURING COFFEE / CLASSIFIED FILE 069420
   The site is a dossier someone compiled on a one-person studio. Every section
   is a differently-shaped page of that file. Paper over espresso; neon only
   where the grid leaks in. Nothing here is a card grid twice.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

:root{
  --void:#080605; --bg:#0b0806; --bg2:#110c09; --ink:#0a0807;
  --paper:#17110d; --paper2:#1e1610; --paper3:#241a13;
  --rule:rgba(232,180,100,.16); --rule2:rgba(232,180,100,.34);
  --text:#f6e9d6; --muted:#b6a086; --dim:#9a8068;
  --gold:#e8b464; --amber:#ff9d4d; --stamp:#e0563f; --roast:#8a4b2a;
  --cyan:#2ee6f6; --magenta:#ff2e97; --lime:#7bff9e; --violet:#b06cff;
  --maxw:1200px;
  --display:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
.neon{--rule:rgba(126,146,255,.18);--rule2:rgba(126,146,255,.38);--gold:var(--cyan);
  --paper:#0e0b22;--paper2:#141038;--paper3:#191347;--text:#e9eaff;--muted:#9ba2d4;--dim:#767ca8}

html{scroll-behavior:smooth}
/* The sideways guard sits on <html> as `clip` rather than on <body> as
   `hidden`. `overflow-x:hidden` on <body> turns the body into a real scroll
   container, which is a footgun for fixed children and scroll anchoring;
   `clip` guards the same overflow without creating a scroll box at all.
   (For the record: deep links were fine under both. I spent a while
   convinced they were broken before noticing the browser window was
   occluded, which freezes rAF and therefore freezes smooth scrolling.
   Verified with scroll-behavior forced to auto: both configurations land
   on the target exactly.) */
html{overflow-x:clip}
@supports not (overflow:clip){html{overflow-x:hidden}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);
  font-size:16.5px;line-height:1.66;-webkit-font-smoothing:antialiased}
/* the rider canvas lives here, behind everything */
#grid-life{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85}
/* NB: do not use `body > *:not(#grid-life)` here - :not() carries the id's
   specificity and silently beats header.site's position:sticky. */
main,footer.site,.boot,#toast,.lb{position:relative;z-index:1}
img,video{max-width:100%;display:block;height:auto}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:600;background:var(--gold);color:#170e05;padding:10px 16px;border-radius:8px;font-weight:700}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.1;margin:0}
p{margin:0 0 1em}
.lead{font-size:1.12rem;color:#e0cfb6;max-width:66ch}
.neon .lead{color:#c9cdf0}
.muted{color:var(--muted)}
.tiny{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* ---------------------------------------------------------------- paper ---
   Every block of content is a sheet in the file: punched margin, faint grain,
   and a hair of rotation so it never reads machine-set.                    */
.paper{position:relative;background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),
    linear-gradient(157deg,var(--paper2),var(--paper));
  border:1px solid var(--rule);border-radius:3px;padding:30px 30px 30px 62px;
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.03)}
.paper::before{ /* margin rule + punch holes */
  content:"";position:absolute;left:38px;top:0;bottom:0;width:1px;
  background:linear-gradient(rgba(224,86,63,.42),rgba(224,86,63,.12))}
.paper::after{content:"";position:absolute;left:14px;top:44px;width:11px;height:11px;border-radius:50%;
  background:var(--void);box-shadow:0 92px 0 var(--void),0 184px 0 var(--void),inset 0 1px 2px rgba(0,0,0,.9)}
.paper.tilt-l{transform:rotate(-.35deg)}
.paper.tilt-r{transform:rotate(.4deg)}
@media (max-width:700px){.paper{padding:24px 20px}.paper::before,.paper::after{display:none}}

/* file tab heading */
.tab{display:inline-flex;align-items:baseline;gap:12px;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--gold);
  padding:6px 16px 5px;border-radius:4px 4px 0 0;font-weight:700;transform:translateY(1px)}
.tab b{font-weight:700}
.tab i{font-style:normal;opacity:.62}

/* rubber stamps */
.stamp{position:absolute;font-family:var(--display);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--stamp);border:3px solid var(--stamp);border-radius:5px;
  padding:5px 13px;font-size:.9rem;opacity:.82;transform:rotate(-11deg);pointer-events:none;
  mix-blend-mode:screen;text-shadow:0 0 1px currentColor;white-space:nowrap}
.stamp.green{color:var(--lime);border-color:var(--lime)}
.stamp.gold{color:var(--gold);border-color:var(--gold)}
.stamp.thunk{animation:thunk .45s var(--ease) both}
@keyframes thunk{0%{opacity:0;transform:rotate(-11deg) scale(2.6)}
  60%{opacity:.95;transform:rotate(-11deg) scale(.94)}100%{opacity:.82;transform:rotate(-11deg) scale(1)}}

/* redaction: click to declassify */
.rd{position:relative;background:#0a0807;color:transparent;border-radius:2px;padding:0 .3em;
  cursor:pointer;user-select:none;box-shadow:0 0 0 1px rgba(255,255,255,.07);
  transition:background .35s var(--ease),color .35s var(--ease)}
.rd::after{content:"";position:absolute;inset:0;background:#0a0807;border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s var(--ease);transform-origin:left}
.rd:hover::after{background:#161010}
.rd.open{background:transparent;color:var(--amber)}
.rd.open::after{transform:scaleX(0);opacity:0}

/* typewriter form rows */
.form{display:grid;grid-template-columns:auto 1fr;gap:0}
.form dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim);padding:10px 22px 10px 0;border-bottom:1px dashed var(--rule);white-space:nowrap}
.form dd{margin:0;padding:10px 0;border-bottom:1px dashed var(--rule);font-family:var(--mono);
  font-size:.92rem;color:var(--text)}
@media (max-width:620px){.form{grid-template-columns:1fr}.form dt{border-bottom:0;padding-bottom:0}
  .form dd{padding-top:2px}}

/* ---------------------------------------------------------------- chrome --- */
header.site{position:sticky;top:0;z-index:80;background:rgba(11,8,6,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;gap:18px;height:62px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;
  color:var(--text);font-size:1rem;letter-spacing:.02em}
.brand:hover{text-decoration:none}
.brand .mark{width:28px;height:28px;flex:none}

/* The studio mark. A cup, but the steam turns at ninety degrees, because in this
   house everything does. Drawn as inline SVG so it takes the page's theme colour
   and so it is still legible at 24px — the old PNG was 3% opaque line art and
   vanished completely at that size. */
.mark{display:block;overflow:visible;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--gold) 55%,transparent))}
.mk-cup,.mk-node{stroke:none}
.mk-cup{fill:var(--gold)}
.mk-node{fill:rgba(0,0,0,.5)}
.mk-handle{fill:none;stroke:var(--gold);stroke-width:2.2}
.mk-steam{fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:square}
.mk-steam2{opacity:.65}
/* the steam drifts. slowly. it has nowhere to be. */
@keyframes markdrift{
  0%,100%{transform:translateY(0);opacity:1}
  50%{transform:translateY(-1.1px);opacity:.55}}
.mk-steam{animation:markdrift 3.6s var(--ease) infinite}
.mk-steam2{animation-delay:-1.5s}
@media (prefers-reduced-motion:reduce){.mk-steam{animation:none}}
.brand:hover .mk-node{fill:rgba(0,0,0,.18)}
.brand b{color:var(--gold)}
.brand s{text-decoration:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  color:var(--dim);border:1px solid var(--rule);padding:2px 5px;border-radius:3px}
.nav nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav nav a{color:var(--muted);font-size:.9rem;padding:8px 11px;border-radius:7px;font-weight:500;
  font-family:var(--mono);letter-spacing:.04em;transition:.18s var(--ease)}
.nav nav a:hover{color:var(--text);background:rgba(232,180,100,.1);text-decoration:none}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;
  font-size:.94rem;letter-spacing:.03em;padding:12px 21px;border-radius:4px;border:1px solid var(--rule2);
  color:var(--text);background:rgba(232,180,100,.07);transition:.2s var(--ease);white-space:nowrap;cursor:pointer}
.btn:hover{text-decoration:none;border-color:var(--gold);background:rgba(232,180,100,.16);transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--gold),#c68c3a);color:#170e05;border-color:transparent;
  box-shadow:0 7px 24px rgba(232,180,100,.28)}
.btn-primary:hover{background:linear-gradient(135deg,#ffd591,var(--gold));color:#170e05}
.btn-pink{border-color:rgba(255,46,151,.5);color:#ffd7ec;background:rgba(255,46,151,.1)}
.btn-pink:hover{border-color:var(--magenta);background:rgba(255,46,151,.2)}
.nav nav a.btn{color:var(--text)}
.nav nav a.btn-primary,.nav nav a.btn-primary:hover{color:#170e05}
.neon .btn-primary{background:linear-gradient(135deg,var(--cyan),#12b8d8);color:#04121a}
.neon .btn-primary:hover{color:#04121a}

/* ---------------------------------------------------------------- files --- */
section{padding:70px 0;position:relative}
.fileno{display:flex;align-items:center;gap:14px;margin-bottom:-1px}
/* .gridbg sits inside .pagehead on /404 and /press with aria-hidden and nothing
   else — its sibling wrap already carries `position:relative;z-index:2`, which
   is only there to sit ON TOP of something. Nothing ever defined it, so both
   page headers have been rendering an empty div where the grid should be. */
.gridbg{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(90deg,transparent 0 63px,var(--rule) 63px 64px),
    repeating-linear-gradient(0deg,transparent 0 63px,var(--rule) 63px 64px);
  -webkit-mask-image:radial-gradient(120% 90% at 18% 0,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 18% 0,#000 0%,transparent 72%)}
/* the sign-off line at the foot of the manual — likewise never styled */
.vnote{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--dim)}
.vnote a{color:var(--muted)}
.fileno hr{flex:1;border:0;border-top:1px solid var(--rule);margin:0}

/* --------------------------------------------------- FILE 00 / the cover --- */
.cover{padding:0;border-bottom:1px solid var(--rule);overflow:hidden;position:relative}
.cover .sheet{position:relative;padding:64px 0 58px;
  background:radial-gradient(90% 70% at 20% 0%,rgba(232,180,100,.11),transparent 60%),
             radial-gradient(70% 60% at 88% 96%,rgba(138,75,42,.2),transparent 66%)}
.coverhead{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--stamp);margin:0 0 34px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid rgba(224,86,63,.3)}
.coverhead span{border:1px solid rgba(224,86,63,.5);padding:4px 10px;border-radius:2px;white-space:nowrap}
.covermain{display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:center}
.cup{width:clamp(86px,10vw,124px);padding:10px 14px;cursor:pointer;
  background:radial-gradient(closest-side,rgba(2,7,10,.9),rgba(2,7,10,.5) 62%,transparent);
  filter:drop-shadow(0 0 18px rgba(46,230,246,.45));transition:filter .4s var(--ease)}
.cup:hover{filter:drop-shadow(0 0 30px rgba(46,230,246,.75)) brightness(1.12)}
.cup.jolt{animation:jolt .55s var(--ease)}
@keyframes jolt{0%,100%{transform:none}25%{transform:translateY(-9px) rotate(-3deg)}
  55%{transform:translateY(3px) rotate(2deg)}}
.subject{font-family:var(--display);font-weight:700;line-height:.94;letter-spacing:.005em;
  font-size:clamp(2.3rem,6.4vw,4.6rem);margin:0 0 6px}
.subject span{display:block;color:var(--gold);text-shadow:0 0 40px rgba(232,180,100,.35)}
.covermain .lead{margin:16px 0 0}
.coverfoot{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;padding-top:20px;
  border-top:1px dashed var(--rule);font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.coverfoot b{color:var(--gold);font-weight:600}
.coverfoot .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);display:inline-block;
  margin-right:7px;box-shadow:0 0 9px var(--lime);animation:blip 2.2s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}
.cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
@media (max-width:760px){.covermain{grid-template-columns:1fr;gap:18px}}

/* screening room - the trailer, framed like a reel can */
.reel{margin-top:40px;position:relative;border:1px solid var(--rule2);border-radius:4px;
  background:#000;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.reel video{width:100%;aspect-ratio:16/9;background:#000}
.reel figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 15px;border-top:1px solid var(--rule);background:rgba(11,8,6,.8);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}

/* ------------------------------------------------ FILE 02 / evidence ------- */
.evidence{display:grid;gap:22px}
.item{position:relative;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:0;
  background:linear-gradient(157deg,var(--paper2),var(--paper));border:1px solid var(--rule);
  border-radius:3px;overflow:hidden;box-shadow:0 22px 56px rgba(0,0,0,.5);transition:.3s var(--ease)}
.item:hover{transform:translateY(-3px);border-color:var(--rule2)}
.item:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.item:nth-child(even) .shotcol{order:2}
.item .shotcol{position:relative;background:#000;min-height:190px}
.item .shotcol img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.item .meta{padding:26px 28px;display:flex;flex-direction:column;gap:10px}
.item h3{font-size:1.5rem}
.item p{margin:0;color:var(--muted);font-size:.96rem}
.tagrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:12px}
.tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;border:1px solid var(--rule);color:var(--muted)}
.tag.live{color:var(--lime);border-color:rgba(123,255,158,.45);background:rgba(123,255,158,.08)}
.tag.hot{color:var(--amber);border-color:rgba(255,157,77,.5);background:rgba(255,157,77,.09)}
.item.unroasted{grid-template-columns:1fr;background:
  repeating-linear-gradient(45deg,rgba(232,180,100,.035) 0 12px,transparent 12px 24px),var(--paper);
  border-style:dashed}
@media (max-width:820px){.item,.item:nth-child(even){grid-template-columns:1fr}
  .item .shotcol{min-height:180px;order:0!important}}

/* ------------------------------------------- FILE 03 / survival protocols -- */
.protocols{counter-reset:p;display:grid;gap:2px;margin-top:26px}
.proto{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:20px 22px;
  background:var(--paper);border-left:3px solid var(--rule2);transition:.25s var(--ease)}
.proto:hover{background:var(--paper2);border-left-color:var(--gold)}
.proto::before{counter-increment:p;content:"0" counter(p);font-family:var(--display);font-weight:700;
  font-size:1.5rem;color:var(--gold);opacity:.5;line-height:1}
.proto h3{font-size:1.05rem;margin-bottom:4px}
.proto p{margin:0;color:var(--muted);font-size:.95rem}
.proto.green{border-left-color:var(--lime)} .proto.green h3{color:var(--lime)}
.proto.amber{border-left-color:#ffb347}     .proto.amber h3{color:#ffb347}

/* ---------------------------------------------------- FILE 04 / the game --- */
.rig{max-width:1000px;margin:0 auto;border:1px solid var(--rule2);border-radius:4px;padding:15px;
  background:linear-gradient(157deg,var(--paper2),var(--paper));box-shadow:0 26px 70px rgba(0,0,0,.6)}
.rigbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:12px}
.seg{display:flex;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.seg button{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  padding:7px 11px;background:transparent;border:0;color:var(--dim);cursor:pointer;transition:.15s}
.seg button+button{border-left:1px solid var(--rule)}
.seg button:hover{color:var(--text);background:rgba(126,146,255,.08)}
.seg button.on{background:var(--cyan);color:#04121a;font-weight:700}
.stat{display:flex;flex-direction:column;gap:1px;padding:5px 13px;background:rgba(5,4,15,.7);
  border:1px solid var(--rule);border-radius:4px;min-width:80px}
.stat span{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.stat b{font-family:var(--display);font-size:1.15rem;line-height:1;color:var(--cyan);font-variant-numeric:tabular-nums}
.gwrap{position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--rule);background:#05040f}
#gr{display:block;width:100%;background:#05040f;touch-action:none}
#gr:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.gover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:26px;background:radial-gradient(90% 90% at 50% 50%,rgba(5,4,15,.88),rgba(5,4,15,.97))}
.gover[hidden]{display:none}
.gtitle{font-family:var(--display);font-weight:700;margin:0;font-size:clamp(1.4rem,3.6vw,2.1rem);
  text-shadow:0 0 28px rgba(46,230,246,.45)}
.gsub{margin:0;color:var(--muted);max-width:48ch;font-size:.94rem}
.gsub b{color:var(--cyan)}
.powers{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.powers button{position:relative;flex:1;min-width:112px;overflow:hidden;text-align:left;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 11px;border:1px solid var(--rule);border-radius:4px;background:rgba(5,4,15,.6);
  color:var(--dim);cursor:pointer;transition:.15s}
.powers button::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--fill,100%);
  background:rgba(46,230,246,.13);transition:width .2s linear}
.powers button.ready{color:var(--cyan);border-color:rgba(46,230,246,.4)}
.powers button:hover{background:rgba(46,230,246,.1)}
.powers button i{position:relative;display:block;font-style:normal;font-size:.58rem;color:var(--dim);
  letter-spacing:.14em;margin-bottom:2px}
.powers button b{position:relative}
.inv{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-height:1.2em}
.inv i{display:inline-block;width:9px;height:9px;background:var(--c);border-radius:2px;
  box-shadow:0 0 8px var(--c);margin-right:5px}
.inv .none{color:var(--dim);opacity:.65;letter-spacing:.08em;text-transform:none;font-style:italic}
.keys{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-family:var(--mono);font-size:.7rem;
  color:var(--dim);letter-spacing:.06em}
.keys kbd{background:rgba(126,146,255,.13);border:1px solid var(--rule);border-radius:4px;
  padding:1px 6px;margin-right:3px;color:var(--muted);font-family:var(--mono);font-size:.68rem}
.gpad{display:none;flex-direction:column;align-items:center;gap:7px;margin-top:12px}
.gpad div{display:flex;gap:7px}
.gpad button{width:60px;height:48px;border-radius:5px;border:1px solid var(--rule2);
  background:rgba(126,146,255,.1);color:var(--cyan);font-size:1rem;cursor:pointer}
@media (pointer:coarse){.gpad:not([hidden]){display:flex}}

/* ------------------------------------------- FILE 05 / interrogation ------- */
.crt{border:1px solid rgba(123,255,158,.28);border-radius:5px;overflow:hidden;background:#040a05;
  box-shadow:0 26px 70px rgba(0,0,0,.65),inset 0 0 90px rgba(123,255,158,.05)}
.crt .bar{display:flex;align-items:center;gap:8px;padding:8px 13px;background:#08130a;
  border-bottom:1px solid rgba(123,255,158,.2);font-family:var(--mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:#5f9c74}
.crt .bar i{width:8px;height:8px;border-radius:50%;background:#26402d;flex:none}
.crt .bar i:first-child{background:#7bff9e}
.crt .screen{position:relative;height:min(58vh,470px);overflow-y:auto;padding:16px 16px 8px;
  font-family:var(--mono);font-size:.85rem;line-height:1.65;color:#9dffbe;cursor:text}
.crt .screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
.crt p{margin:0 0 2px;white-space:pre-wrap;word-break:break-word}
.crt .c{color:#4f8562} .crt .k{color:#7bff9e;font-weight:600} .crt .w{color:#ffb347}
.crt .e{color:#ff6b6b}
/* The manual's WARNING.txt panel: same chrome as the live shell, but a static
   <pre> instead of a scrolling screen. It carried class="term", which no
   stylesheet has ever defined, so for its whole life it rendered as bare text
   with three invisible dots above it. pre-wrap so it also stops shoving phones
   sideways. */
.crt pre{margin:0;padding:16px 16px 20px;color:#c9ffd8;font-family:var(--mono);
  font-size:.86rem;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.crt .inline{display:flex;gap:8px;align-items:baseline}
.crt input{flex:1;background:transparent;border:0;outline:0;color:#c9ffd8;font-family:var(--mono);
  font-size:.85rem;caret-color:#7bff9e;min-width:0}
.crt .prompt{color:#4f8562;white-space:nowrap}
.crt a{color:#7bff9e;text-decoration:underline}

/* ------------------------------------------------- FILE 06 / exhibits ----- */
.exhibits{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr));gap:26px 20px;margin-top:34px}
.ex{position:relative;padding:11px 11px 42px;background:#141210;border:1px solid rgba(255,255,255,.05);
  border-radius:2px;cursor:zoom-in;display:block;width:100%;text-align:left;
  box-shadow:0 16px 40px rgba(0,0,0,.55);transition:.3s var(--ease)}
.ex:nth-child(3n){transform:rotate(-1.1deg)}
.ex:nth-child(3n+2){transform:rotate(.9deg)}
.ex:hover{transform:rotate(0) translateY(-5px) scale(1.02);z-index:2;box-shadow:0 26px 60px rgba(0,0,0,.7)}
.ex img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000}
.ex figcaption,.ex .cap{position:absolute;left:12px;right:12px;bottom:12px;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.06em;color:#a98d6f;line-height:1.4}
.ex::before{ /* tape */
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:82px;height:20px;background:rgba(232,180,100,.16);border:1px solid rgba(232,180,100,.12);
  border-radius:1px;backdrop-filter:blur(1px)}

/* manual page strip */
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:11px;margin-top:24px}
.pages a{position:relative;border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  background:#050b06;aspect-ratio:4/5;transition:.25s var(--ease);display:block}
.pages a:hover{border-color:#7bff9e;transform:translateY(-4px)}
.pages img{width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:brightness(1.3) contrast(1.06)}
.pages b{position:absolute;left:0;right:0;bottom:0;padding:13px 6px 4px;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.1em;color:#9dffbe;text-align:center;
  background:linear-gradient(transparent,rgba(0,0,0,.92))}
.pages a.redacted img{filter:grayscale(1) brightness(.3)}
.pages a.redacted::after{content:"[DATA EXPUNGED]";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;color:#ff5f5f;text-align:center;padding:6px}
.pages a.redacted.open img{filter:none} .pages a.redacted.open::after{display:none}

/* ticker of the manual's real page footers */
.ticker{overflow:hidden;border-block:1px solid var(--rule);background:rgba(8,6,5,.6);padding:9px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker ul{display:flex;gap:40px;list-style:none;padding:0;margin:0;width:max-content;
  animation:slide 52s linear infinite;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}
.ticker:hover ul{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* --------------------------------------------------------- lightbox ------- */
.lb{position:fixed;inset:0;z-index:400;background:rgba(5,3,2,.96);display:none;
  align-items:center;justify-content:center;padding:26px}
.lb.on{display:flex}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:13px}
.lb img{max-width:min(1400px,95vw);max-height:78vh;border-radius:4px;border:1px solid var(--rule2)}
.lb figcaption{color:var(--muted);font-size:.88rem;max-width:70ch;text-align:center;font-family:var(--mono)}
.lb button{background:rgba(232,180,100,.14);color:var(--text);border:1px solid var(--rule2);
  border-radius:5px;font-size:1.3rem;line-height:1;width:42px;height:42px;cursor:pointer}
.lb > button{position:absolute;top:18px;right:22px}
.lbnav{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;
  gap:6px;padding:6px 8px;background:rgba(8,6,5,.9);border:1px solid var(--rule2);border-radius:999px}
.lbnav button{width:38px;height:38px;font-size:.95rem}
.count{font-family:var(--mono);font-size:.8rem;color:var(--muted);min-width:58px;text-align:center}

/* ------------------------------------------------------ boot + toast ------ */
.boot{position:fixed;inset:0;z-index:600;background:#040302;display:grid;place-items:center;
  font-family:var(--mono);color:#9dffbe;font-size:.88rem;padding:24px;cursor:pointer}
.boot[hidden]{display:none}
.boot div{max-width:540px;width:100%;line-height:1.95}
.boot .cur{display:inline-block;width:9px;height:1.05em;background:#7bff9e;vertical-align:-2px;
  animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.boot small{display:block;margin-top:22px;color:#456b52;letter-spacing:.16em;font-size:.66rem}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(18px);z-index:500;
  pointer-events:none;opacity:0;transition:.38s var(--ease)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast p{margin:0;font-family:var(--mono);font-size:.8rem;background:rgba(8,6,5,.96);
  border:1px solid var(--rule2);border-radius:3px;padding:10px 18px;color:var(--gold);
  box-shadow:0 14px 44px rgba(0,0,0,.7)}

/* konami */
body.sudo{--gold:#7bff9e;--amber:#7bff9e;--stamp:#7bff9e;--text:#c9ffd8;--muted:#6fb583;--dim:#4a7358;
  --bg:#020603;--bg2:#040a06;--paper:#061008;--paper2:#08170b;--void:#010402;
  --rule:rgba(123,255,158,.2);--rule2:rgba(123,255,158,.42)}
body.sudo::before{content:"root@grid:~# ";position:fixed;left:10px;bottom:8px;z-index:450;
  font-family:var(--mono);font-size:.68rem;color:#7bff9e;opacity:.55;pointer-events:none}

.reveal{opacity:0;transform:translateY(15px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------------------------------------------------------- footer -------- */
footer.site{border-top:1px solid var(--rule);background:var(--void);padding:52px 0 30px;font-size:.92rem}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px;margin-bottom:30px}
footer.site h2{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 13px;font-weight:600}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
footer ul a{color:var(--muted)} footer ul a:hover{color:var(--gold)}
.fbot{border-top:1px solid var(--rule);padding-top:20px;display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;color:var(--dim);font-size:.8rem;font-family:var(--mono)}
.fbrand{display:flex;align-items:center;gap:10px;margin-bottom:11px;font-family:var(--display);
  font-weight:700;color:var(--text)}
.fbrand .mark{width:24px;height:24px;flex:none}

/* ------------------------------------------------- prose pages ------------ */
.prose{max-width:74ch}
.prose h2{margin:2.2rem 0 .8rem;font-size:1.5rem}
.prose h3{margin:1.7rem 0 .5rem;color:var(--gold)}
.prose ul{color:var(--muted);padding-left:22px}
.prose li{margin-bottom:.5em}
.pagehead{padding:54px 0 28px;border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.pagehead h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:.35rem}
.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;font-size:.7rem;
  font-weight:600;color:var(--gold);margin:0 0 .8rem}
.eyebrow::before{content:"// "}
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:3px;background:var(--paper)}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:.93rem}
th,td{padding:12px 17px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);background:rgba(232,180,100,.06)}
tbody th{color:var(--muted);font-weight:600;white-space:nowrap;font-family:var(--body);font-size:.89rem}
tr:last-child th,tr:last-child td{border-bottom:0}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ticks li{padding-left:26px;position:relative;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:3px;top:.62em;width:8px;height:8px;
  background:var(--gold);box-shadow:0 0 9px var(--gold);transform:rotate(45deg)}
.ticks li b{color:var(--text);font-weight:600}
/* minmax(300px,...) forces a 300px column even when the container is 266px
   wide, which pushed the press kit two pixels past the viewport at 320px and
   gave the whole page a horizontal scrollbar. min(300px,100%) lets the track
   give up its minimum when there is genuinely no room. */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px}
.shot{border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:var(--paper);
  cursor:zoom-in;padding:0;display:block;width:100%}
.shot img{aspect-ratio:16/9;object-fit:cover;width:100%}

@media (max-width:980px){.nav{gap:10px}.nav nav{gap:1px}.nav nav a{padding:8px 8px;font-size:.84rem}}
@media (max-width:860px){.nav nav a.hide-sm{display:none}}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:640px){section{padding:52px 0}.fgrid{grid-template-columns:1fr}
  .crt .screen{height:64vh;font-size:.8rem}.exhibits{gap:22px 14px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}#grid-life{display:none}}
section{scroll-margin-top:76px}

@media (max-width:700px){.brand s{display:none}}

/* Phones. Four links, a file badge and a wishlist button do not fit across
   390px, and the old header simply overflowed — every page scrolled sideways
   on a phone. The brand keeps row one; everything else drops to a scrollable
   strip underneath, with the wishlist button pulled to the front of it so the
   one button that matters is never the one you have to scroll for. */
@media (max-width:620px){
  .nav{flex-wrap:wrap;height:auto;padding:9px 0;gap:8px}
  .brand{flex:1 1 auto;min-width:0}
  .nav nav{order:2;width:100%;margin-left:0;gap:3px;padding-bottom:2px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav a{flex:none;white-space:nowrap}
  .nav nav a.hide-sm{display:block}
  .nav nav a.btn-primary{order:-1}
  section{scroll-margin-top:104px}
}

/* alice spool-up: the loader is a light-cycle laying wall across a grid.
   Fresh trail is amber, settled trail is green. Same rule as the game. */
.loadgrid{margin:8px 0 4px;font-family:var(--mono);font-size:.72rem;line-height:1.06;
  letter-spacing:.6px;white-space:pre;overflow:hidden}
.loadgrid .off{color:#16281d}
.loadgrid .cool{color:#2f8a54}
.loadgrid .hot{color:#ffb347}
.loadgrid .head{color:#fff8ee;text-shadow:0 0 9px #ffb347,0 0 18px #ff8a2b}
.loadstat{margin:0 0 8px;color:#5f9c74;font-family:var(--mono);font-size:.76rem}
.loadstat b{color:#9dffbe;font-weight:600}
.loadstat .pct{color:#ffb347;font-variant-numeric:tabular-nums}

/* ---------------- the cup clicker ---------------- */
.cupbox{position:relative;display:inline-block;line-height:0;margin-bottom:16px}
.cupcount{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);
  display:none;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  background:rgba(8,6,5,.94);border:1px solid var(--rule2);border-radius:999px;
  padding:4px 11px;color:var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.6)}
.cupcount.on{display:flex}
.cupcount b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.cupcount i{font-style:normal;color:var(--amber)}
.cupcount.bump{animation:cupbump .28s var(--ease)}
@keyframes cupbump{0%{transform:translateX(-50%) scale(1)}45%{transform:translateX(-50%) scale(1.16)}
  100%{transform:translateX(-50%) scale(1)}}

.prestige{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);
  z-index:520;width:min(430px,92vw);opacity:0;pointer-events:none;transition:.35s var(--ease);
  background:linear-gradient(157deg,var(--paper2),var(--paper));border:1px solid var(--rule2);
  border-radius:5px;padding:18px 20px;box-shadow:0 24px 70px rgba(0,0,0,.75)}
.prestige.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.prestige h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stamp);margin:0 0 8px}
.prestige p{margin:0 0 14px;font-size:.92rem;color:var(--muted);line-height:1.5}
.prestige p b{color:var(--text)}
.prestige .row{display:flex;gap:9px;flex-wrap:wrap}
.prestige button{font-family:var(--display);font-weight:600;font-size:.88rem;padding:9px 16px;
  border-radius:4px;cursor:pointer;border:1px solid var(--rule2);background:rgba(232,180,100,.08);
  color:var(--text);transition:.18s var(--ease)}
.prestige button.yes{background:linear-gradient(135deg,var(--gold),#c68c3a);color:#170e05;border-color:transparent}
.prestige button:hover{transform:translateY(-1px);border-color:var(--gold)}

/* 69420 — the reward is that everything becomes unusable and beautiful.
   NB: the saturation lives INSIDE the keyframe. An animation that sets `filter`
   replaces the whole property, so a static `filter: saturate()` on the same rule
   is silently discarded the moment the animation starts. */
@keyframes huecycle{
  from{filter:hue-rotate(0deg) saturate(2.1) contrast(1.06)}
  to  {filter:hue-rotate(360deg) saturate(2.1) contrast(1.06)}}
body.rainbow .cupcount{border-color:var(--lime);color:var(--lime)}

/* visually-hidden headings that still give the page a real outline */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================================
   1984 BUT THE FUTURE — chrome, CRT, and far too much equipment for a game
   about a line.
   ========================================================================== */

/* CRT: scanlines + a vignette over the whole document. Kept faint on purpose;
   the joke is the equipment, not eye strain. */
html::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  background:
    repeating-linear-gradient(rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%,transparent 58%,rgba(0,0,0,.42) 100%);
  mix-blend-mode:multiply;opacity:.55}
@media (max-width:640px){html::after{opacity:.35}}

/* the wordmark is chrome now, because it is 1986 and we have a gradient */
.subject span{
  background:linear-gradient(178deg,#fffdf8 0%,#ffe9c2 20%,#e8b464 44%,#7a4d14 51%,
    #e8b464 59%,#fff6e2 78%,#c07f2c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(232,180,100,.35))}

/* ---------------- SYSTEM TELEMETRY: the over-engineering ---------------- */
#sys{position:fixed;right:14px;bottom:14px;z-index:210;font-family:var(--mono);
  width:222px;transition:transform .35s var(--ease)}
#sys[data-open="0"]{transform:translateY(calc(100% - 30px))}
/* Collapsed, it shrinks to a stub in the corner and stops catching clicks —
   the full-width strip was sitting on top of the cabinet legend. */
#sys .sysbar{transition:width .3s var(--ease)}
#sys[data-open="0"]{pointer-events:none}
#sys[data-open="0"] .sysbar{width:104px;margin-left:auto;border-radius:5px 5px 0 0;
  pointer-events:auto}
/* Stand down over the footer — the small print was there first. */
#sys[data-dock="1"]{transform:translateY(calc(100% + 20px));opacity:0;pointer-events:none}
@media (max-width:1100px){#sys{display:none}}

.sysbar{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;cursor:pointer;
  background:linear-gradient(180deg,#2a2018,#171009);border:1px solid var(--rule2);
  border-bottom:0;border-radius:5px 5px 0 0;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);user-select:none}
.sysbar .pwr{width:8px;height:8px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 8px var(--lime);flex:none;animation:blip 2.4s ease-in-out infinite}
.sysbar b{margin-left:auto;font-weight:400;opacity:.6}

.sysbody{background:linear-gradient(180deg,#141009,#0c0806);border:1px solid var(--rule2);
  border-radius:0 0 5px 5px;padding:11px 11px 12px;
  box-shadow:0 20px 50px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05)}

.gauge{margin-bottom:7px}
.gauge span{display:flex;justify-content:space-between;font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.gauge span i{font-style:normal;color:var(--gold)}
.bars{display:flex;gap:2px}
.bars i{flex:1;height:7px;background:#241a12;border-radius:1px;transition:background .3s,box-shadow .3s}
.bars i.on{background:var(--lime);box-shadow:0 0 6px var(--lime)}
.bars i.on.warn{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.bars i.on.crit{background:var(--stamp);box-shadow:0 0 6px var(--stamp)}

#scope{display:block;width:100%;height:34px;background:#050b06;border:1px solid rgba(123,255,158,.22);
  border-radius:3px;margin:8px 0}

.leds{display:grid;gap:4px;margin-bottom:9px}
.led{display:flex;align-items:center;gap:7px;font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.led u{width:7px;height:7px;border-radius:50%;background:#33261a;flex:none;text-decoration:none}
.led.ok u{background:var(--lime);box-shadow:0 0 7px var(--lime)}
.led.busy u{background:var(--amber);box-shadow:0 0 7px var(--amber);animation:blip 1s ease-in-out infinite}
.led b{margin-left:auto;color:var(--muted);font-weight:400}

/* seven-segment-ish counter */
.seg{display:flex;gap:2px;justify-content:center;margin:2px 0 10px;padding:5px 6px;
  background:#0a0604;border:1px solid rgba(232,180,100,.2);border-radius:3px}
.seg i{font-style:normal;font-family:var(--mono);font-size:.95rem;font-weight:700;
  color:var(--amber);text-shadow:0 0 9px rgba(255,157,77,.85);width:.66em;text-align:center}
.seg i.off{color:#2b1d10;text-shadow:none}

/* MASTER RESET, under a cover, because of course */
.reset{position:relative;border:1px solid rgba(210,67,47,.5);border-radius:4px;overflow:hidden;
  background:repeating-linear-gradient(45deg,rgba(224,86,63,.12) 0 7px,transparent 7px 14px)}
.reset .cover{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;
  cursor:pointer;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stamp);
  background:linear-gradient(180deg,#2b1611,#1a0d0a);transition:transform .4s var(--ease);
  transform-origin:top;border-bottom:1px solid rgba(210,67,47,.4)}
.reset.open .cover{transform:rotateX(-105deg)}
.reset .sw{display:flex;align-items:center;justify-content:center;height:36px;margin-top:-36px;
  font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.1em;color:#fff;
  background:linear-gradient(180deg,#e0563f,#9c2f1e);cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .3s .18s}
.reset.open .sw{opacity:1;pointer-events:auto}
.reset .sw:hover{background:linear-gradient(180deg,#ff6a50,#b83824)}
.reset .sw:active{background:linear-gradient(180deg,#8c2416,#6e1c11)}

/* ---------------- RAINBOW MODE, properly this time ---------------- */
body.rainbow{--rb:linear-gradient(90deg,#ff2e97,#ff7b3d,#ffe74d,#7bff9e,#2ee6f6,#7d7bff,#b06cff,#ff2e97);
  /* The spectrum used BEHIND DARK TEXT is not the same spectrum used for borders
     and washes. Rainbow mode hue-cycles the whole document through
     hue-rotate(0..360) saturate(2.1) contrast(1.06), and I measured every stop
     against the near-black tab/button text at every 10 degrees of that cycle.
     Six of the seven stops never drop below 5:1. The magenta does: #ff2e97
     bottoms out at 3.31:1 around 280deg, so for roughly a fifth of every five
     second cycle the word "Wishlist" was failing AA. Lightened to #ff62b1 the
     worst case across the whole rotation is 5.32:1. Nothing else changes. */
  --rb-text:linear-gradient(90deg,#ff62b1,#ff7b3d,#ffe74d,#7bff9e,#2ee6f6,#7d7bff,#b06cff,#ff62b1);
}
body.rainbow header.site,body.rainbow main,body.rainbow footer.site{
  animation:huecycle 5s linear infinite}
body.rainbow main{animation-delay:-1.6s}
body.rainbow footer.site{animation-delay:-3.2s}
body.rainbow h1,body.rainbow h2,body.rainbow .subject span,
body.rainbow .price,body.rainbow .gtitle{
  background:var(--rb);background-size:400% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.75)) brightness(1.25);
  animation:rbslide 3.4s linear infinite}
/* h3 sits inside cards on real content - leave it solid and readable */
body.rainbow h3{color:var(--text)}
body.rainbow .tab,body.rainbow .btn-primary{
  background:var(--rb-text);background-size:400% 100%;color:#140a04;
  animation:rbslide 3.4s linear infinite;border-color:transparent}
/* Rainbow BORDER, not a rainbow wash. The opaque panel layer must be listed
   FIRST (topmost) and clipped to padding-box; the spectrum sits underneath and
   is only visible in the border area. Getting this order wrong paints the
   gradient over the card and the text stops being readable. */
body.rainbow .paper,body.rainbow .item,body.rainbow .rig,body.rainbow .crt,body.rainbow .reel{
  border:1px solid transparent;
  background-image:linear-gradient(157deg,var(--paper2),var(--paper)),var(--rb);
  background-size:100% 100%,400% 100%;
  background-origin:padding-box,border-box;
  background-clip:padding-box,border-box;
  animation:rbborder 3.4s linear infinite}
@keyframes rbborder{to{background-position:0 0,400% 0}}
body.rainbow::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:var(--rb);background-size:400% 100%;opacity:.06;mix-blend-mode:screen;
  animation:rbslide 3.4s linear infinite}
body.rainbow .bars i.on{background:var(--lime)}
@keyframes rbslide{to{background-position:400% 0}}
@media (prefers-reduced-motion:reduce){
  body.rainbow header.site,body.rainbow main,body.rainbow footer.site{
    animation:none;filter:hue-rotate(115deg) saturate(1.7)}
  body.rainbow h1,body.rainbow h2,body.rainbow .tab,
  body.rainbow .btn-primary,body.rainbow .paper,body.rainbow .item,
  body.rainbow .rig,body.rainbow .crt,body.rainbow .reel,body.rainbow::after{animation:none}
}

/* buttons default to black text; if an exhibit image ever fails to load, the alt
   text would render invisible on the dark card. Give them an inherited colour. */
.ex,.shot,.pages a{color:var(--muted)}

/* ---------------- GRID LADDER ---------------- */
.ladder{max-width:1000px;margin:20px auto 0;border:1px solid var(--rule2);border-radius:4px;
  background:linear-gradient(157deg,var(--paper2),var(--paper));overflow:hidden}
.lhead{display:flex;align-items:baseline;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.lhead b{margin-left:auto;font-weight:400;color:var(--dim);letter-spacing:.12em}
.ladder ol{list-style:none;margin:0;padding:0}
.ladder li{display:grid;grid-template-columns:44px minmax(0,1fr) auto minmax(0,1.5fr);gap:12px;
  align-items:baseline;padding:8px 14px;border-bottom:1px solid rgba(126,146,255,.07);
  font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.ladder li:last-child{border-bottom:0}
.ladder li .rk{color:var(--dim);font-size:.7rem}
.ladder li .who{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.ladder li .sc{color:var(--cyan);font-variant-numeric:tabular-nums}
.ladder li .nb{color:var(--dim);font-size:.7rem;overflow:hidden;text-overflow:ellipsis}
.ladder li.me{background:rgba(46,230,246,.07)}
.ladder li.me .who{color:var(--cyan)}
.ladder li.boss .who{color:var(--gold)}
.ladder li.fuzz{background:repeating-linear-gradient(45deg,rgba(224,86,63,.07) 0 8px,transparent 8px 16px);
  border-top:1px dashed rgba(224,86,63,.4)}
.ladder li.fuzz .who{color:var(--stamp)}
.ladder li.fuzz .sc{color:var(--stamp)}
.lfoot{margin:0;padding:10px 14px;border-top:1px solid var(--rule);font-family:var(--mono);
  font-size:.68rem;color:var(--dim);line-height:1.6}
@media (max-width:700px){
  .ladder li{grid-template-columns:32px minmax(0,1fr) auto}
  .ladder li .nb{display:none}
}

/* ============================================================================
   PERFECTLY IMPERFECT
   Buttons are screwed to the page badly. Click one and it comes loose. Only one
   is ever broken at a time — clicking another puts the last one back.
   ========================================================================== */
.btn{transform-origin:center;will-change:transform}

@keyframes k-hang{
  0%{transform:none}
  22%{transform:rotate(-6deg)}
  100%{transform:rotate(82deg) translate(2px,4px)}}
@keyframes k-slump{
  0%{transform:none}
  30%{transform:rotate(4deg) translateY(-3px)}
  100%{transform:rotate(-8deg) translateY(6px)}}
@keyframes k-drop{
  0%{transform:none}
  35%{transform:translateY(-5px) rotate(1deg)}
  70%{transform:translateY(11px) rotate(4deg)}
  100%{transform:translateY(8px) rotate(3deg)}}
@keyframes k-peel{
  0%{transform:none}
  100%{transform:perspective(420px) rotateX(58deg) translateY(5px)}}

.btn.k1,.nav nav a.k1{animation:k-hang .78s cubic-bezier(.3,1.4,.5,1) forwards;
  transform-origin:9% 14%;z-index:3}
.btn.k2,.nav nav a.k2{animation:k-slump .62s cubic-bezier(.3,1.5,.5,1) forwards;
  transform-origin:14% 88%}
.btn.k3,.nav nav a.k3{animation:k-drop .7s cubic-bezier(.34,1.5,.5,1) forwards;
  transform-origin:50% 0}
.btn.k4,.nav nav a.k4{animation:k-peel .55s var(--ease) forwards;transform-origin:50% 100%}
.btn.k1,.btn.k2,.btn.k3,.btn.k4,
.nav nav a.k1,.nav nav a.k2,.nav nav a.k3,.nav nav a.k4{position:relative}
/* the screw that gave up */
.btn.k1::after,.nav nav a.k1::after{content:"";position:absolute;left:7%;top:11%;
  width:5px;height:5px;border-radius:50%;
  background:var(--dim);box-shadow:0 0 0 1px rgba(0,0,0,.6)}
/* The nav breaks on the way out and is STILL broken when the next page loads.
   You click Manual, you arrive at the manual, and Manual is hanging off its
   screw. Clicking any other one puts it back, because only one thing in this
   building is allowed to be broken at a time. */
.nav nav a.k1,.nav nav a.k2,.nav nav a.k3,.nav nav a.k4{will-change:transform}
header.site{overflow:visible}

/* a coffee ring, because someone put a mug down on the paperwork */
.stain{position:absolute;pointer-events:none;width:104px;height:104px;border-radius:50%;
  opacity:.5;mix-blend-mode:screen;
  background:radial-gradient(circle,transparent 58%,rgba(138,75,42,.5) 60%,rgba(138,75,42,.24) 66%,
    transparent 71%),radial-gradient(circle,transparent 62%,rgba(232,180,100,.14) 64%,transparent 70%)}

/* rules that were not drawn with a ruler */
.fileno hr{transform:rotate(-.12deg)}
.paper::before{transform:rotate(.15deg)}

@media (prefers-reduced-motion:reduce){
  .btn.k1,.btn.k2,.btn.k3,.btn.k4,
  .nav nav a.k1,.nav nav a.k2,.nav nav a.k3,.nav nav a.k4{animation:none}
  .btn.k1,.nav nav a.k1{transform:rotate(6deg)}
  .btn.k2,.nav nav a.k2{transform:rotate(-4deg)}
  .btn.k3,.nav nav a.k3{transform:translateY(3px)}
  .btn.k4,.nav nav a.k4{transform:rotate(2deg)}
}
.ladder li .who a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.ladder li .who a:hover{text-decoration:none;opacity:.8}

/* ---------------- sticky section jump bar ---------------- */
.subnav{position:sticky;top:62px;z-index:70;background:rgba(11,8,6,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
/* Scrollbars. The default Chrome bar is a light grey slab and it landed in the
   middle of a green phosphor terminal looking like a fire door in a submarine.
   Everything that scrolls now scrolls in the page's own colour. */
*{scrollbar-width:thin;scrollbar-color:var(--rule2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rule2);border-radius:6px;
  border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:padding-box;
  border:2px solid transparent}
::-webkit-scrollbar-corner{background:transparent}
.crt .screen{scrollbar-color:color-mix(in srgb,var(--gold) 45%,transparent) transparent}
.crt .screen::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--gold) 40%,transparent);
  background-clip:padding-box;border:2px solid transparent}
.crt .screen::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--gold) 70%,transparent);
  background-clip:padding-box;border:2px solid transparent}

.subnav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{position:relative;flex:none;padding:11px 15px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap;
  border-bottom:2px solid transparent;transition:.18s var(--ease)}
.subnav a:hover{color:var(--text);text-decoration:none;background:rgba(232,180,100,.07)}
.subnav a.on{color:var(--gold);border-bottom-color:var(--gold)}
.subnav a i{font-style:normal;opacity:.45;margin-right:7px}
.neon .subnav a.on{color:var(--cyan);border-bottom-color:var(--cyan)}
@media (max-width:640px){.subnav{top:62px}.subnav a{padding:10px 11px;font-size:.62rem}}
section{scroll-margin-top:118px}

/* ============================================================================
   TWO MACHINES, ONE BUILDING
   .t-studio — 1986 office. Amber monochrome, paper, typewriter, coffee.
   .t-arcade — 1986 arcade. Cyan/magenta vector, chrome, scanlines, no warmth.
   .t-shell  — the green phosphor terminal, which belongs to neither.
   They contaminate each other constantly. See .bleed, further down.
   ========================================================================== */

/* ---------------- STUDIO: the office ---------------- */
body.t-studio{
  --bg:#0e0a06; --bg2:#140d07; --void:#080503;
  --paper:#1a120b; --paper2:#221809; --paper3:#2b1f0e;
  --text:#f7e6c8; --muted:#c3a97f; --dim:#a08a63;
  --gold:#ffb545; --amber:#ff9d4d; --stamp:#e0563f;
  --rule:rgba(255,181,69,.16); --rule2:rgba(255,181,69,.36);
}
/* amber monochrome phosphor wash - the whole office runs on one colour */
body.t-studio main::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,rgba(255,181,69,.07),transparent 62%)}
/* headings are typed, not set */
body.t-studio .tab,body.t-studio .eyebrow,body.t-studio .kicker{font-family:var(--mono)}
body.t-studio h2,body.t-studio h3{font-family:var(--mono);letter-spacing:-.01em;font-weight:700}
body.t-studio .item h3,body.t-studio .paper h2{text-transform:none}
/* perforated tractor-feed edge down the left of every sheet */
body.t-studio .paper{border-left:0;padding-left:70px}
body.t-studio .paper::after{content:"";position:absolute;left:12px;top:0;bottom:0;width:16px;
  background-image:radial-gradient(circle at 50% 50%,var(--void) 3.2px,transparent 3.4px);
  background-size:16px 26px;opacity:.9;box-shadow:none;border-radius:0;height:auto}
body.t-studio .paper::before{left:44px}
@media (max-width:700px){body.t-studio .paper{padding-left:20px}body.t-studio .paper::after{display:none}}
/* a fax header on the cover */
body.t-studio .coverhead{font-family:var(--mono)}

/* ---------------- ARCADE: the cabinet ---------------- */
body.t-arcade{
  --bg:#04030e; --bg2:#070519; --void:#020108;
  --paper:#0b0822; --paper2:#12103a; --paper3:#191650;
  --text:#eaf7ff; --muted:#97a9d8; --dim:#7183ba;
  --gold:#2ee6f6; --amber:#ff2e97; --stamp:#ff2e97;
  --rule:rgba(126,180,255,.18); --rule2:rgba(126,180,255,.4);
}
/* the horizon. It is 1986 and there is always a grid running to a vanishing point. */
body.t-arcade::before{content:"";position:fixed;left:-25%;right:-25%;bottom:0;height:46vh;z-index:0;
  pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(46,230,246,.34) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(46,230,246,.34) 1px,transparent 1px);
  background-size:74px 74px;
  transform:perspective(320px) rotateX(72deg);transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top,#000 2%,transparent 68%);
  mask-image:linear-gradient(to top,#000 2%,transparent 68%);
  animation:horizon 6s linear infinite}
@keyframes horizon{to{background-position:0 74px,0 0}}
/* heavier CRT in the arcade */
body.t-arcade main{position:relative;z-index:1}
body.t-arcade .paper,body.t-arcade .item,body.t-arcade .rig{
  box-shadow:0 0 0 1px rgba(46,230,246,.08),0 24px 60px rgba(0,0,0,.7),
             inset 0 1px 0 rgba(126,220,255,.09)}
body.t-arcade h1,body.t-arcade h2{letter-spacing:.02em}
body.t-arcade .pagehead h1{
  background:linear-gradient(178deg,#ffffff 0%,#d8f7ff 22%,#2ee6f6 47%,#0a5a75 53%,
    #2ee6f6 60%,#eafcff 80%,#1d9fc0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(46,230,246,.4))}

/* ---------------- SHELL: green phosphor ---------------- */
body.t-shell{--gold:#7bff9e;--amber:#7bff9e;--text:#d8ffe4;--muted:#84c79a;--dim:#5d9770;
  --bg:#050a06;--bg2:#07100a;--void:#020603;--paper:#08150c;--paper2:#0c1f11;
  --rule:rgba(123,255,158,.18);--rule2:rgba(123,255,158,.4);--stamp:#7bff9e}
body.t-shell .pagehead h1{color:#9dffbe;text-shadow:0 0 30px rgba(123,255,158,.4)}

/* ============================================================================
   THEME BLEED — the two systems contaminate each other and we gave up pretending
   ========================================================================== */
.bleed{position:relative;margin:34px 0 0;padding:20px 22px;border-radius:4px;overflow:hidden}
.bleed p{margin:0;font-size:.95rem;line-height:1.55}
.bleedtag{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;border-radius:2px}
.bleedtag::before{content:"\26A0";font-size:.8rem}

/* neon leaking into the office */
.bleed-neon{background:linear-gradient(157deg,#12103a,#0b0822);
  border:1px dashed rgba(46,230,246,.5);color:#c9d8ff;
  box-shadow:0 0 34px rgba(46,230,246,.13),inset 0 0 40px rgba(46,230,246,.06)}
.bleed-neon b{color:#2ee6f6}
.bleed-neon .bleedtag{background:rgba(46,230,246,.12);color:#2ee6f6;border:1px solid rgba(46,230,246,.4)}
.bleed-neon::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(rgba(46,230,246,.05) 0 1px,transparent 1px 3px)}

/* paperwork leaking into the arcade */
.bleed-paper{background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),
    linear-gradient(157deg,#221809,#1a120b);
  border:1px dashed rgba(255,181,69,.5);color:#e8d6b4;
  box-shadow:0 0 30px rgba(255,181,69,.12)}
.bleed-paper b{color:#ffb545}
.bleed-paper .bleedtag{background:rgba(255,181,69,.12);color:#ffb545;border:1px solid rgba(255,181,69,.42)}
.bleed-paper::after{content:"";position:absolute;right:14px;bottom:10px;width:74px;height:74px;
  border-radius:50%;pointer-events:none;opacity:.45;
  background:radial-gradient(circle,transparent 58%,rgba(138,75,42,.55) 60%,
    rgba(138,75,42,.22) 66%,transparent 71%)}

/* ============================================================================
   THE CABINET. A full arcade machine built around a browser game with four
   modes. The marquee is backlit. There is a coin slot. It takes no coins.
   ========================================================================== */
.cab{max-width:1040px;margin:26px auto 0;border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg,#191340,#0d0a24 40%,#0a0820);
  border:1px solid rgba(126,180,255,.28);
  box-shadow:0 40px 90px rgba(0,0,0,.75),inset 0 1px 0 rgba(160,220,255,.14),
             inset 0 0 60px rgba(46,230,246,.05)}

.marquee{position:relative;text-align:center;padding:16px 18px 14px;overflow:hidden;
  border-radius:9px 9px 0 0;border-bottom:2px solid rgba(46,230,246,.3);
  background:linear-gradient(180deg,#2a2170,#14103c);
  box-shadow:inset 0 -14px 34px rgba(46,230,246,.16),inset 0 2px 0 rgba(190,230,255,.2)}
.marquee::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 2px,transparent 2px 5px)}
.mtitle{display:block;font-family:var(--display);font-weight:700;letter-spacing:.16em;
  font-size:clamp(1.5rem,4vw,2.5rem);line-height:1;
  background:linear-gradient(178deg,#fff 0%,#d6f6ff 26%,#2ee6f6 50%,#0b5f7c 56%,#5df0ff 66%,#fff 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(46,230,246,.6))}
.msub{display:block;margin-top:6px;font-family:var(--mono);font-size:.6rem;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(190,225,255,.62)}
.cabbody{padding:14px}
.cabbody .rig{max-width:none;margin:0;border-radius:5px;
  border-color:rgba(126,180,255,.3);background:linear-gradient(180deg,#0a0820,#070518)}

.cpanel{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:12px 16px 14px;
  border-top:1px solid rgba(126,180,255,.2);
  background:linear-gradient(180deg,#141133,#0b0920);border-radius:0 0 4px 4px}
.coin{display:flex;align-items:center;gap:10px;padding:7px 13px;border-radius:4px;cursor:pointer;
  border:1px solid rgba(46,230,246,.32);background:linear-gradient(180deg,#1c1748,#100d2e);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);transition:.18s var(--ease);user-select:none}
.coin:hover{border-color:var(--cyan);background:linear-gradient(180deg,#241d5c,#151038)}
.coin:active{transform:translateY(1px)}
.coin .slot{width:5px;height:20px;border-radius:2px;background:#04030d;flex:none;
  box-shadow:inset 0 0 5px rgba(0,0,0,.95),0 0 0 1px rgba(126,180,255,.3)}
.coin i{font-style:normal;color:var(--amber);font-variant-numeric:tabular-nums}
.coin.flash{animation:coinflash .5s var(--ease)}
@keyframes coinflash{0%,100%{background:linear-gradient(180deg,#1c1748,#100d2e)}
  40%{background:linear-gradient(180deg,#2ee6f6,#0d7f95)}}
.cplegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-left:auto;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.cplegend b{color:var(--muted);font-weight:400}
.plate{width:100%;display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:10px;margin-top:2px;
  border-top:1px dashed rgba(126,180,255,.18);font-family:var(--mono);font-size:.56rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(120,140,190,.6)}
.plate span::before{content:"\25AA";margin-right:6px;opacity:.5}
@media (max-width:760px){.cplegend{margin-left:0}.cab{border-radius:6px}}

/* ============================================================================
   TEMPLE — the 16-colour window that opens under /dev/grid.

   Everything else on this site is dark, rounded, glowing and gradient-lit.
   This is white, square, flat and has exactly sixteen colours in it, because
   that is what TempleOS is, and softening it would miss the entire point.
   No border-radius. No box-shadow. No gradients. Not one.
   ========================================================================== */
.temple{margin:26px 0 0;padding:0;background:#ffffff;color:#000000;border:3px solid #000000;
  font-family:'Courier New',ui-monospace,SFMono-Regular,Menlo,monospace;
  transform-origin:50% 0;transform:scaleY(.02);opacity:0;
  transition:transform .34s cubic-bezier(.2,1.5,.4,1),opacity .18s linear}
.temple.up{transform:scaleY(1);opacity:1}
/* pinned by JS half a second after opening — see the failsafe in temple.js */
.temple.settled{transition:none;transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.temple{transition:none;transform:none;opacity:1}}

.temple .tbleed{display:flex;align-items:center;gap:8px;background:#0000aa;color:#ffffff;
  padding:5px 10px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:3px solid #000000}
.temple .tbar{display:flex;align-items:center;gap:14px;padding:4px 8px;
  background:#aaaaaa;border-bottom:3px solid #000000;font-size:.82rem}
.temple .tmenu{color:#000000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.temple .tgrow{flex:1}
.temple .tx{background:#ffffff;color:#000000;border:2px solid #000000;font:inherit;
  font-weight:700;line-height:1;padding:2px 9px;cursor:pointer;border-radius:0}
.temple .tx:hover{background:#ffff55}
.temple .tx:focus-visible{outline:3px solid #0000aa;outline-offset:2px}

.temple .tstage{background:#000000;border-bottom:3px solid #000000;line-height:0;
  display:flex;justify-content:center}
/* `display:flex` from an author sheet beats the UA's [hidden]{display:none},
   so the game stage sat there as a 480px black slab with nothing in it. */
.temple .tstage[hidden]{display:none}
.temple .tstage canvas{width:100%;max-width:640px;height:auto;display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;outline:0}

.temple .tscreen{height:min(50vh,400px);overflow-y:auto;padding:12px 14px 10px;
  background:#ffffff;font-size:.84rem;line-height:1.5;
  scrollbar-color:#555555 #ffffff}
.temple.playing .tscreen{height:150px}
.temple .tscreen::-webkit-scrollbar{width:14px}
.temple .tscreen::-webkit-scrollbar-track{background:#aaaaaa}
.temple .tscreen::-webkit-scrollbar-thumb{background:#000000;border-radius:0;border:0}
.temple .tscreen p{margin:0 0 1px;white-space:pre-wrap;word-break:break-word}
.temple b{font-weight:700}

/* Only the palette members that clear AA on white are allowed to carry text.
   The other ten live on the canvas, where they belong. */
.temple .tk{color:#0000aa}                       /* BLUE      13.3:1 */
.temple .tc{color:#555555}                       /* DKGRAY     7.5:1 */
.temple .te{color:#aa0000}                       /* RED        7.8:1 */
.temple .tw{color:#aa5500}                       /* BROWN      5.2:1 */
.temple .tp{color:#0000aa;font-weight:700}
.temple .tgo{color:#0000aa;font-weight:700}
.temple .tno{color:#555555}
.temple .tgod{color:#aa00aa;font-weight:700;font-size:1.5rem;letter-spacing:.06em}
.temple .talice{color:#aa0000;background:#ffff55;padding:2px 6px;margin:4px 0}
.temple .tal{color:#000000}
.temple .tsw{display:inline-block;width:22px;height:14px;border:1px solid #000000;
  vertical-align:-2px;margin-right:5px}
.temple .tswl{display:inline-block;width:118px;color:#000000}

.temple .tline{display:flex;gap:8px;align-items:baseline}
.temple .tline input{flex:1;min-width:0;background:#ffff55;border:2px solid #000000;
  border-radius:0;outline:0;color:#000000;font:inherit;padding:1px 6px;caret-color:#aa0000}
.temple .tline input:focus{background:#ffffff;border-color:#0000aa}

.temple .tstatus{background:#000000;color:#ffffff;padding:5px 10px;font-size:.7rem;
  letter-spacing:.06em;border-top:3px solid #000000}
.temple .tstatus b{color:#ffff55}

@media (max-width:620px){
  .temple .tscreen{font-size:.76rem;height:min(46vh,320px)}
  .temple .tmenu{font-size:.7rem}
  .temple .tswl{width:96px;font-size:.72rem}
  .temple .tgod{font-size:1.15rem}
}

/* ----------------------------------------------------------------------------
   Rainbow: the stamp colour, declared LAST on purpose.

   The three theme blocks (.t-studio/.t-arcade/.t-shell) sit further down this
   file than the rainbow block and each re-declares --stamp. Same specificity,
   later wins, so setting --stamp up there had no effect at all — the rubber
   stamps and the TOP SECRET chips kept #e0563f, which bottoms out at 3.62:1 and
   4.31:1 partway through the hue cycle. #f07a63 holds 5.16:1 and 6.23:1 across
   the whole rotation. This rule has to stay at the end of the file.
   -------------------------------------------------------------------------- */
body.rainbow{--stamp:#f07a63}

/* ----------------------------------------------------------------------------
   Rainbow mode: the four colours the hue cycle pushes under AA.

   Every one of these passes in normal mode. Rainbow runs the whole document
   through hue-rotate(0..360) saturate(2.1) contrast(1.06) on a five second
   loop, and I measured each pair against its real backdrop at every ten
   degrees of that rotation. These four dip below 4.5:1 for part of the cycle,
   so they get a nudge for the duration of the joke and are untouched otherwise.

     .coin i  CREDIT 00   #ff2e97 bottoms out at 2.28:1  ->  #ff86c3  4.60:1
     --dim    arcade      #767ca8 bottoms out at 3.87:1  ->  #898eb4  4.66:1
     .msub    cabinet     #bee1ff bottoms out at 4.24:1  ->  #cbe7ff  4.60:1
     .crt .c  shell       #4f8562 bottoms out at 4.07:1  ->  #5d8f6f  4.68:1

   These live at the end of the file because .t-arcade and .t-shell are declared
   after body.rainbow and would otherwise win on source order.
   -------------------------------------------------------------------------- */
body.rainbow.t-arcade,body.rainbow .neon{--dim:#898eb4}
body.rainbow .msub{color:#cbe7ff}
body.rainbow .coin i{color:#ff86c3}
body.rainbow .crt .c,body.rainbow .crt .prompt{color:#5d8f6f}

/* ============================================================================
   LADDER — now with a door in it.

   The two appointed seats stay pinned while the middle scrolls: management at
   the top, the Count at the bottom, and everyone who registers sorts honestly
   in the gap between them. Scrolling past the man who is permanently last and
   having him refuse to leave the viewport is the entire joke, so `position:
   sticky` here is load-bearing comedy.
   ========================================================================== */
.ladder.full ol{max-height:min(52vh,360px);overflow-y:auto;overscroll-behavior:contain}
/* The pinned row needs an opaque backdrop or the scrolling rows show through
   it. It must match the panel it sits in, though: my first attempt used
   paper3 -> paper2, which is a shade lighter than the ladder's own background
   and quietly pushed the rank number and the note on that row from 4.6:1 down
   to 4.26:1. Same two stops as the container, and it passes again. */
.ladder.full li.boss{position:sticky;top:0;z-index:2;
  background:linear-gradient(180deg,var(--paper2),var(--paper));
  box-shadow:0 6px 14px -6px rgba(0,0,0,.8)}
.ladder.full li.fuzz{position:sticky;bottom:0;z-index:2;
  box-shadow:0 -6px 14px -6px rgba(0,0,0,.8)}
.ladder.full li.fuzz::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper)}
.ladder li{position:relative}
.ladder li.reg .who{color:var(--lime)}
.ladder li.reg.me .who{color:var(--cyan)}

/* per-row controls, kept out of the way until you want them */
.ladder li .nb{display:flex;align-items:baseline;gap:6px}
.ltake,.lx{flex:none;margin-left:auto;background:none;border:1px solid var(--rule2);
  color:var(--dim);font:inherit;font-size:.62rem;line-height:1;padding:2px 6px;border-radius:3px;
  cursor:pointer;opacity:0;transition:.15s var(--ease)}
.lx{margin-left:0}
.ladder li:hover .ltake,.ladder li:hover .lx,
.ltake:focus-visible,.lx:focus-visible{opacity:1}
.ltake:hover{color:var(--gold);border-color:var(--gold)}
.lx:hover{color:var(--stamp);border-color:var(--stamp)}
@media (hover:none){.ltake,.lx{opacity:1}}

/* ---- registration ---- */
.lreg{border-top:1px solid var(--rule)}
.regtoggle{display:flex;align-items:baseline;gap:12px;width:100%;text-align:left;background:none;
  border:0;padding:11px 14px;cursor:pointer;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);transition:.15s var(--ease)}
.regtoggle:hover{background:rgba(126,180,255,.06)}
.regtoggle i{margin-left:auto;font-style:normal;text-transform:none;letter-spacing:.04em;
  color:var(--dim);font-size:.66rem}
.regform{padding:2px 14px 16px;border-top:1px dashed var(--rule)}
.regnote{margin:12px 0 14px;font-family:var(--mono);font-size:.7rem;line-height:1.6;color:var(--muted)}
.regrow{margin-bottom:12px}
.regrow label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.regrow input{width:100%;max-width:380px;background:rgba(4,3,13,.7);border:1px solid var(--rule2);
  border-radius:3px;padding:8px 11px;color:var(--text);font-family:var(--mono);font-size:.82rem;
  transition:.15s var(--ease)}
.regrow input:focus{outline:0;border-color:var(--gold);background:rgba(4,3,13,.95)}
/* Chrome dims a placeholder to roughly half the text colour, which landed at
   3.93:1. Placeholder text is still text. */
.regrow input::placeholder{color:var(--muted);opacity:1}
.regrow small{display:block;margin-top:5px;font-family:var(--mono);font-size:.62rem;color:var(--dim)}
.regerr{margin:0 0 12px;padding:8px 11px;border-radius:3px;font-family:var(--mono);font-size:.72rem;
  line-height:1.55;color:var(--stamp);border:1px solid var(--stamp);
  background:rgba(224,86,63,.09)}
.regacts{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.regacts .btn{font-size:.78rem;padding:8px 15px}
.regprivacy{margin:14px 0 0;font-family:var(--mono);font-size:.64rem;line-height:1.7;color:var(--dim);
  max-width:66ch}
.regprivacy b{color:var(--muted)}
.regsend{margin:0 14px 16px;padding:12px 14px;border:1px dashed var(--rule2);border-radius:3px;
  background:rgba(126,180,255,.05)}
.regsend p{margin:0 0 10px;font-family:var(--mono);font-size:.7rem;line-height:1.65;color:var(--muted)}
.regsend code{display:block;margin-bottom:11px;padding:9px 11px;border-radius:3px;
  background:rgba(4,3,13,.75);border:1px solid var(--rule);color:var(--gold);
  font-family:var(--mono);font-size:.7rem;word-break:break-all;user-select:all}
@media (max-width:640px){
  .regtoggle{flex-wrap:wrap;gap:4px}
  .regtoggle i{margin-left:0;flex-basis:100%}
  .ladder.full ol{max-height:min(60vh,420px)}
}


/* ================================================================ marketing pass, 2 Sep 2026
   The cover leads with the game now. The studio is the byline, the dossier is the framing,
   and the first thing anyone sees is the thing for sale — moving, and with a button next to it. */
.covermain{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:44px}
.coverblurb .eyebrow{margin-bottom:.9rem}
.coverblurb .lead a{color:var(--gold);text-decoration:underline dotted;text-underline-offset:3px}
.coverblurb .lead a:hover{text-decoration-style:solid}
.why{margin:14px 0 0;max-width:54ch;font-family:var(--mono);font-size:.74rem;line-height:1.65;
  letter-spacing:.02em;color:var(--dim)}
.why::before{content:"// ";color:var(--stamp)}
.reel-hero{margin:0}  /* <figure> carries 40px side margins by default; in a grid cell that is just lost width */
.coverblurb .btn,.herogrid .btn{padding-left:19px;padding-right:19px}
.reel .reelstage{position:relative;background:#000}
.reel video{display:block}
.reel .reelbtn{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:9px;
  padding:9px 13px;border:1px solid rgba(246,233,214,.38);border-radius:3px;background:rgba(4,3,2,.74);
  color:var(--text);font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.reel .reelbtn:hover,.reel .reelbtn:focus-visible{background:rgba(232,180,100,.24);border-color:var(--gold);color:#fff}
.reel .reelbtn[hidden]{display:none}
.reel .reelbtn-ico{font-size:.58rem;color:var(--gold)}
.reel.playing-trailer .reelbtn{display:none}
@media (max-width:760px){
  .coverhead{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:22px;padding-bottom:12px;
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .coverhead::-webkit-scrollbar{display:none}
  /* the two-column rule above is declared after the original mobile collapse, so restate it */
  .covermain{grid-template-columns:1fr;gap:22px}
}

/* the cup is the mugshot on the personnel record now */
.record{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr);gap:26px;align-items:start}
.mugshot{margin:0;text-align:center}
.mugshot .cup{width:100%;max-width:130px;padding:6px 10px;display:inline-block}
.mugshot figcaption{margin-top:6px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;line-height:1.55;
  color:var(--dim);text-transform:uppercase}
@media (max-width:640px){.record{grid-template-columns:1fr;gap:14px}.mugshot{text-align:left}.mugshot .cup{max-width:92px}}

/* the game page hero gets the same reel beside the words */
.herogrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.pagehead-game{padding-bottom:40px}
@media (max-width:820px){.herogrid{grid-template-columns:1fr;gap:22px}}

/* ============================================================================
   NEWCAPTAINS: body.t-rail, "the departure hall"                    [rl-begin]
   A brass-and-signal timetable look for /newcaptains/ and the announcement
   strip on the home page. Deep station-hall blue-black, brass, signal red and
   signal green, chrome-blue accents.

   This block sits BEFORE the MULTI-THEME ENGINE banner on purpose. The theme
   picker adds body.theme-*; same specificity, later rule wins, so a picked
   theme still replaces this palette. Components below therefore read the
   shared tokens (--gold, --lime, --stamp, --cyan, ...) and derive their rl-*
   tokens from them instead of hard-coding colours. Only the departure board
   and its tiles are always dark, because a departure board is.
   Contrast (measured): text 16.5:1, muted 9.4:1, dim 6.8:1 on --bg; brass,
   amber, signal green and chrome blue all 8.5:1 or better on --bg.
   ========================================================================== */
body.t-rail{
  --bg:#0b1219; --bg2:#101c27; --void:#060a0f; --ink:#04080c;
  --paper:#121e2a; --paper2:#182837; --paper3:#1f3346;
  --rule:rgba(240,184,74,.22); --rule2:rgba(240,184,74,.46);
  --text:#eef3f7; --muted:#a4b7ca; --dim:#7990a4;
  --gold:#f0b84a; --amber:#f59e0b; --stamp:#ef4444; --roast:#78350f;
  --lime:#10b981; --cyan:#22d3ee; --magenta:#ec4899;
  --rl-brass:#f0b84a; --rl-wood:#c88b48; --rl-red:#ef4444; --rl-green:#10b981; --rl-blue:#22d3ee;
  --rl-hall:radial-gradient(130% 50% at 50% 0%,rgba(34,211,238,.07) 0%,transparent 60%),
            radial-gradient(90% 40% at 15% 0%,rgba(240,184,74,.08) 0%,transparent 55%),
            radial-gradient(120% 60% at 50% 0%,#101c27 0%,transparent 80%);
  background:var(--rl-hall),var(--bg);
}
body.t-rail h1,body.t-rail h2,body.t-rail h3{font-family:var(--display)}
body.t-rail h2{letter-spacing:.01em}
body.t-rail .nav nav a[aria-current="page"]{color:var(--text);background:rgba(216,166,58,.14);
  box-shadow:inset 0 -2px 0 var(--rl-brass)}
/* file tabs become platform signs */
body.t-rail .tab{border-radius:2px 2px 0 0;box-shadow:inset 0 -2px 0 rgba(0,0,0,.28)}
/* the file rule is a length of track: two rails over sleepers */
body.t-rail .fileno hr{flex:1;height:12px;border:0;margin:0;transform:none;opacity:.85;
  background:
    linear-gradient(var(--rule2),var(--rule2)) 0 3px/100% 2px no-repeat,
    linear-gradient(var(--rule2),var(--rule2)) 0 7px/100% 2px no-repeat,
    repeating-linear-gradient(90deg,var(--rule) 0 5px,transparent 5px 16px) 0 0/100% 12px no-repeat}
/* sheets are timetable boards: brass header bar, no punch holes */
body.t-rail .paper{padding:30px;border-top:3px solid var(--rl-brass);border-radius:2px;transform:none}
body.t-rail .paper::before,body.t-rail .paper::after{display:none}
body.t-rail .paper.tilt-l,body.t-rail .paper.tilt-r{transform:none}
body.t-rail .tablewrap{background:var(--paper)}
body.t-rail thead th{color:var(--rl-brass)}
body.t-rail .eyebrow,body.t-rail .tiny{color:var(--rl-brass)}
body.t-rail .tiny{color:var(--dim)}
body.t-rail .coverhead{color:var(--rl-red);border-bottom-color:var(--rule2);margin-bottom:30px}
body.t-rail .coverhead span{border-color:var(--rule2)}
body.t-rail .sr{white-space:nowrap}

/* ---------------------------------------------------------------- strip ----
   The announcement under the header on the home page. Theme-independent. */
.rl-strip{display:block;background:var(--gold);color:var(--ink);text-align:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:8px 0;border-bottom:1px solid rgba(0,0,0,.35);line-height:1.5}
.rl-strip:hover{text-decoration:none;filter:brightness(1.08)}
.rl-strip .wrap{display:flex;justify-content:center;align-items:center;gap:6px 14px;flex-wrap:wrap}
.rl-strip .wrap>span{text-transform:none;letter-spacing:.04em;font-size:.78rem}
.rl-strip i{font-style:normal}
.rl-strip:focus-visible{outline:3px solid var(--ink);outline-offset:-5px}

/* ----------------------------------------------------------------- cover --- */
.rl-head{background:
    linear-gradient(180deg,color-mix(in srgb,var(--cyan) 7%,transparent),transparent 62%),
    repeating-linear-gradient(90deg,transparent 0 119px,rgba(216,166,58,.055) 119px 120px)}
.rl-head .herogrid{grid-template-areas:"copy hero" "board hero" "cta hero";
  grid-template-rows:auto auto 1fr;gap:20px 40px;align-items:start}
.rl-copy{grid-area:copy}
.rl-boardwrap{grid-area:board}
.rl-cta{grid-area:cta;margin-top:0}
.rl-herofig{grid-area:hero;margin:0;align-self:center}
.rl-logo{margin:0 0 20px;line-height:0}
.rl-logo img{width:min(560px,98%);height:auto;filter:drop-shadow(0 14px 34px rgba(0,0,0,.85)) drop-shadow(-10px 4px 24px rgba(240,184,74,.18)) drop-shadow(15px 4px 28px rgba(34,211,238,.16));transition:transform .3s var(--ease),filter .3s var(--ease)}
.rl-logo img:hover{transform:scale(1.025) translateY(-2px);filter:drop-shadow(0 18px 40px rgba(0,0,0,.92)) drop-shadow(-14px 6px 30px rgba(240,184,74,.26)) drop-shadow(18px 6px 36px rgba(34,211,238,.24))}

/* Era timeline pills in hero */
.rl-eras-pills{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px}
.rl-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:4px;background:rgba(18,30,42,.85);border:1px solid rgba(240,184,74,.22);font-family:var(--mono);font-size:.72rem;color:var(--muted);text-decoration:none;transition:all .25s var(--ease)}
.rl-pill .p-lt{font-family:var(--display);font-weight:700;color:var(--gold);padding-right:4px;border-right:1px solid rgba(240,184,74,.25)}
.rl-pill .p-nm{font-weight:500}
.rl-pill:hover{transform:translateY(-2px);color:var(--text);border-color:var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.rl-pill.p-1:hover{border-color:#c88b48;box-shadow:0 4px 16px rgba(200,139,72,.35)}
.rl-pill.p-2:hover{border-color:#f0b84a;box-shadow:0 4px 16px rgba(240,184,74,.35)}
.rl-pill.p-3:hover{border-color:#a4b7ca;box-shadow:0 4px 16px rgba(164,183,202,.35)}
.rl-pill.p-4:hover{border-color:#38bdf8;box-shadow:0 4px 16px rgba(56,189,248,.35)}
.rl-pill.p-5:hover{border-color:#22d3ee;box-shadow:0 4px 16px rgba(34,211,238,.35)}
.rl-pill.p-s{background:linear-gradient(135deg,rgba(255,122,41,.15),rgba(240,184,74,.15));border-color:rgba(255,122,41,.4)}
.rl-pill.p-s .p-lt{color:#ff9d4d;border-right-color:rgba(255,122,41,.35)}
.rl-pill.p-s:hover{border-color:#ff7a29;box-shadow:0 4px 20px rgba(255,122,41,.45)}
.rl-copy .lead{margin:0 0 14px}
.rl-quote{margin:0;max-width:56ch;font-family:var(--display);font-size:1.12rem;font-weight:600;
  line-height:1.4;color:var(--rl-brass);border-left:3px solid var(--rl-brass);padding:2px 0 2px 14px}
.rl-quote::before{content:"\201C"}.rl-quote::after{content:"\201D"}
.rl-herofig.reel{margin:0}
.rl-herofig img{width:100%;aspect-ratio:16/9;object-fit:cover}
.rl-coming{margin:12px 0 0;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--dim)}
.rl-coming::before{content:"// ";color:var(--rl-red)}

/* the departure board */
.rl-board{position:relative;background:linear-gradient(180deg,#0b141c,#070d13);
  border:1px solid var(--rule2);border-radius:4px;overflow:hidden;color:#eaf0f4;
  box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 0 0 3px #05090d,inset 0 0 0 4px var(--rule)}
.rl-board-top{display:flex;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;padding:9px 16px;
  background:var(--rl-brass);color:var(--ink);font-family:var(--mono);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.rl-board-row{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;
  padding:20px 16px 12px}
.rl-dest{display:flex;flex-direction:column;gap:3px}
.rl-dest b{font-family:var(--display);font-size:1.25rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rl-brass)}
.rl-dest small{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#a9b9c6}
.rl-eta{display:flex;align-items:center;min-height:42px}
.rl-src{font-family:var(--mono);font-weight:700;font-size:2rem;letter-spacing:.06em;
  color:var(--rl-brass);text-transform:uppercase}
.rl-flaps{display:none}
.rl-js .rl-flaps{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:100%;--rl-tw:clamp(25px,7.2vw,40px)}
.rl-js .rl-src{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The headline wraps by word onto rows (site.js builds .rl-row > .rl-word > .rl-flap, at most 9 tiles a row, 7 on a phone).
   The board row gives .rl-eta whatever width is left beside the destination (or the whole row when it wraps below it);
   the tile width is then the widest row's share of that width, never more than 40px: --rl-u is the row's width in tiles
   (a word gap counts 0.4), --rl-s the number of 4px gaps. Tiles may also shrink (flex), so a row can never overflow. */
.rl-js .rl-eta{flex:1 1 220px;min-width:0;max-width:100%;container-type:inline-size}
@supports (width:1cqw){.rl-js .rl-flaps{--rl-tw:min(40px,calc((100cqw - var(--rl-s,0) * 4px) / var(--rl-u,8)))}}
.rl-row{display:flex;flex-wrap:nowrap;column-gap:calc(var(--rl-tw) * .4);max-width:100%;min-width:0}
.rl-word{display:flex;gap:4px;min-width:0}
.rl-flap{position:relative;display:grid;place-items:center;flex:0 1 var(--rl-tw);width:var(--rl-tw);min-width:0;
  aspect-ratio:1/1.45;overflow:hidden;border-radius:4px;
  background:linear-gradient(180deg,#222c35 0 49%,#0d1217 51% 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.09)}
.rl-flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
  background:#04070a;box-shadow:0 1px 0 rgba(255,255,255,.07)}
/* the real letter is the face's text (clean for copy, find and readers); the letter on show is its data-c, drawn here */
.rl-face{display:block;font-size:0;transform-origin:50% 50%}
.rl-face::before{content:attr(data-c);display:block;font-family:var(--mono);font-weight:700;font-size:calc(var(--rl-tw) * .85);
  line-height:1;color:#f4efe0}
.rl-flap.rl-a .rl-face{animation:rl-flipA .1s ease-in-out}
.rl-flap.rl-b .rl-face{animation:rl-flipB .1s ease-in-out}
@keyframes rl-flipA{0%{transform:rotateX(0)}48%{transform:rotateX(-78deg);opacity:.7}100%{transform:rotateX(0)}}
@keyframes rl-flipB{0%{transform:rotateX(0)}48%{transform:rotateX(-78deg);opacity:.7}100%{transform:rotateX(0)}}
.rl-board-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:0;
  border-top:1px dashed rgba(216,166,58,.3)}
.rl-board-meta>div{padding:11px 16px;border-right:1px dashed rgba(216,166,58,.2)}
.rl-board-meta>div:last-child{border-right:0}
.rl-board-meta dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#8a9dac}
.rl-board-meta dd{margin:3px 0 0;font-family:var(--mono);font-size:.84rem;color:#eaf0f4;line-height:1.45}
.rl-board-meta dd b{color:var(--rl-brass);font-size:1.05rem}
.rl-board-meta small{color:#a9b9c6;font-size:.7rem}
.rl-lamp{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 9px var(--lime);margin-right:6px;vertical-align:0;animation:blip 2.2s ease-in-out infinite}
.rl-board-note{margin:0;padding:9px 16px;border-top:1px dashed rgba(216,166,58,.3);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:#a9b9c6}
.rl-board-note b{color:#eaf0f4}

/* ----------------------------------------------------------- shared bits --- */
.rl-h2{margin:22px 0 10px;font-size:clamp(1.6rem,3.4vw,2.4rem)}
.rl-h3{margin:44px 0 6px;font-size:1.3rem;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.rl-h3 small{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);font-weight:400}
.rl-note{margin:0 0 4px;max-width:70ch;color:var(--muted);font-size:.95rem}
.rl-stamped{position:relative}
.rl-kind{position:absolute;top:8px;left:8px;font-style:normal;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:3px 7px;border-radius:2px;
  background:rgba(5,9,13,.86);border:1px solid currentColor;line-height:1.3}
.rl-kind.k-in{color:var(--lime)}
.rl-kind.k-show{color:var(--cyan)}
.rl-kind.k-dbg{color:var(--amber)}
.rl-kind.k-concept{color:var(--rl-red)}
.rl-kindkey{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 4px;padding:12px 16px;
  border:1px dashed var(--rule2);border-radius:3px;background:var(--paper);font-size:.9rem;color:var(--muted)}
.rl-kindkey p{margin:0;flex:1 1 260px}
.rl-kindkey .rl-kind{position:static;display:inline-block;margin-right:7px}

/* ----------------------------------------------------------------- pitch --- */
.rl-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;counter-reset:rls}
.rl-step{position:relative;counter-increment:rls;padding:22px 20px 20px;border:1px solid var(--rule);
  border-radius:3px;background:linear-gradient(157deg,var(--paper2),var(--paper));overflow:hidden}
.rl-step::before{content:counter(rls);position:absolute;top:8px;right:14px;font-family:var(--display);
  font-weight:700;font-size:3.4rem;line-height:1;color:var(--rl-brass);opacity:.28}
.rl-step::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:repeating-linear-gradient(90deg,var(--rl-brass) 0 10px,transparent 10px 16px);opacity:.55}
.rl-step h3{font-size:1.15rem;margin:0 0 6px;padding-right:44px}
.rl-step p{margin:0;color:var(--muted);font-size:.94rem}
.rl-box{margin-top:30px;border:1px solid var(--rule2);border-radius:3px;background:var(--paper);overflow:hidden}
.rl-box-h{display:flex;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;padding:9px 16px;
  background:var(--rl-brass);color:var(--ink);font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700}
.rl-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.rl-facts li{padding:16px 14px;border-right:1px dashed var(--rule);text-align:center}
.rl-facts li:last-child{border-right:0}
.rl-facts b{display:block;font-family:var(--display);font-size:2rem;line-height:1;color:var(--rl-brass);
  font-variant-numeric:tabular-nums}
.rl-facts span{display:block;margin-top:6px;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);line-height:1.45}
.rl-boxnote{margin:0;padding:11px 16px;border-top:1px dashed var(--rule);font-size:.84rem;color:var(--dim);
  font-family:var(--mono);line-height:1.6}

/* ---------------------------------------------------------- the five eras --- */
.rl-eras-sec{padding:60px 0;border-bottom:1px solid var(--rule);position:relative;background:radial-gradient(80% 50% at 50% 0%,rgba(34,211,238,.05) 0%,transparent 60%),radial-gradient(60% 40% at 85% 100%,rgba(255,122,41,.05) 0%,transparent 60%)}
.rl-eras-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
@media (max-width:980px){.rl-eras-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.rl-eras-grid{grid-template-columns:1fr}}

.rl-era-card{display:flex;flex-direction:column;position:relative;padding:22px;background:linear-gradient(180deg,#121e2a 0%,#0c141d 100%);border:1px solid rgba(240,184,74,.22);border-radius:4px;box-shadow:0 12px 30px rgba(0,0,0,.4);transition:all .3s var(--ease)}
.rl-era-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.6)}

.rl-era-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.rl-era-letters{font-family:var(--display);font-size:1.45rem;font-weight:700;letter-spacing:.08em;line-height:1}
.rl-era-badge{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:2px;background:rgba(0,0,0,.45);border:1px solid currentColor}

.rl-era-title{margin:0 0 10px;font-family:var(--display);font-size:1.18rem;letter-spacing:.02em;line-height:1.25}
.rl-era-desc{margin:0 0 16px;font-size:.9rem;line-height:1.55;color:var(--muted);flex:1}

.rl-era-traits{list-style:none;padding:0;margin:0;display:grid;gap:6px;border-top:1px dashed rgba(240,184,74,.18);padding-top:12px;font-family:var(--mono);font-size:.76rem;color:var(--dim)}
.rl-era-traits li{display:flex;gap:6px}
.rl-era-traits span{color:var(--muted);font-weight:600}

.rl-era-card.era-1{border-color:rgba(200,139,72,.35)}
.rl-era-card.era-1 .rl-era-letters{color:#e6a765}
.rl-era-card.era-1 .rl-era-badge{color:#c88b48;border-color:rgba(200,139,72,.4)}
.rl-era-card.era-1:hover{border-color:#c88b48;box-shadow:0 18px 40px rgba(200,139,72,.2)}

.rl-era-card.era-2{border-color:rgba(240,184,74,.35)}
.rl-era-card.era-2 .rl-era-letters{color:#f0b84a}
.rl-era-card.era-2 .rl-era-badge{color:#f0b84a;border-color:rgba(240,184,74,.4)}
.rl-era-card.era-2:hover{border-color:#f0b84a;box-shadow:0 18px 40px rgba(240,184,74,.2)}

.rl-era-card.era-3{border-color:rgba(164,183,202,.35)}
.rl-era-card.era-3 .rl-era-letters{color:#d4e1ed}
.rl-era-card.era-3 .rl-era-badge{color:#a4b7ca;border-color:rgba(164,183,202,.4)}
.rl-era-card.era-3:hover{border-color:#cbd5e1;box-shadow:0 18px 40px rgba(164,183,202,.2)}

.rl-era-card.era-4{border-color:rgba(56,189,248,.35)}
.rl-era-card.era-4 .rl-era-letters{color:#7dd3fc}
.rl-era-card.era-4 .rl-era-badge{color:#38bdf8;border-color:rgba(56,189,248,.4)}
.rl-era-card.era-4:hover{border-color:#38bdf8;box-shadow:0 18px 40px rgba(56,189,248,.22)}

.rl-era-card.era-5{border-color:rgba(34,211,238,.45)}
.rl-era-card.era-5 .rl-era-letters{color:#22d3ee;text-shadow:0 0 12px rgba(34,211,238,.5)}
.rl-era-card.era-5 .rl-era-badge{color:#22d3ee;border-color:rgba(34,211,238,.5);box-shadow:0 0 8px rgba(34,211,238,.2)}
.rl-era-card.era-5:hover{border-color:#22d3ee;box-shadow:0 18px 40px rgba(34,211,238,.28)}

.rl-era-card.era-rocket{border-color:rgba(255,122,41,.45);background:linear-gradient(180deg,#161e2b 0%,#15101b 100%)}
.rl-era-card.era-rocket .rl-era-letters{color:#ff9d4d;text-shadow:0 0 12px rgba(255,122,41,.5)}
.rl-era-card.era-rocket .rl-era-badge{color:#ff7a29;border-color:rgba(255,122,41,.5);box-shadow:0 0 8px rgba(255,122,41,.2)}
.rl-era-card.era-rocket:hover{border-color:#ff7a29;box-shadow:0 18px 40px rgba(255,122,41,.3)}

/* ---------------------------------------------------------- grades, cards --- */
.rl-grade{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:4px 10px 4px 8px;border-radius:3px;
  border:2px solid currentColor;background:var(--ink);white-space:nowrap;line-height:1.3}
.rl-grade i{flex:none;width:11px;height:11px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px currentColor}
.rl-grade b{display:inline-grid;place-items:center;min-width:1.5em;padding:0 .3em;border-radius:2px;
  background:currentColor}
.rl-grade b span{color:var(--ink)}
.rl-grade.a{color:var(--lime)}
.rl-grade.b{color:var(--amber)}
.rl-grade.b i{box-shadow:0 0 8px currentColor,0 0 0 2px var(--ink),0 0 0 3px currentColor}
.rl-grade.c{color:var(--rl-red)}
.rl-grade.c i{background:transparent;border:2px solid currentColor;box-shadow:none}
.rl-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 8px}
.rl-legend>div{padding:14px 16px;border:1px solid var(--rule);border-radius:3px;background:var(--paper)}
.rl-legend p{margin:8px 0 0;font-size:.9rem;color:var(--muted)}
.rl-legend-foot{margin:6px 0 0;font-family:var(--mono);font-size:.74rem;color:var(--dim);letter-spacing:.03em}
.rl-legend-foot b{color:var(--text)}
.rl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:18px;margin-top:26px}
.rl-card{--rl-gc:var(--lime);position:relative;display:flex;flex-direction:column;gap:12px;
  padding:20px 20px 18px;border:1px solid var(--rule);border-left:5px solid var(--rl-gc);border-radius:3px;
  background:linear-gradient(157deg,var(--paper2),var(--paper));box-shadow:0 16px 40px rgba(0,0,0,.4)}
.rl-card.g-b{--rl-gc:var(--amber)}
.rl-card.g-c{--rl-gc:var(--rl-red);border-style:dashed;border-left-style:dashed;background:
  repeating-linear-gradient(45deg,rgba(240,122,99,.045) 0 10px,transparent 10px 20px),var(--paper)}
.rl-card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.rl-num{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--rl-brass);opacity:.8}
.rl-card h3{font-size:1.18rem;line-height:1.2;margin:0}
.rl-dl{margin:0;display:grid;gap:9px}
.rl-dl>div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;align-items:baseline;font-size:.92rem}
.rl-dl dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  border-right:1px solid var(--rule);padding-right:6px}
.rl-dl dt.lim{color:var(--rl-red)}
.rl-dl dd{margin:0;color:var(--muted);line-height:1.55}
.rl-nope{margin-top:34px;padding:22px 24px;border:2px dashed var(--rl-red);border-radius:3px;
  background:repeating-linear-gradient(-45deg,rgba(240,122,99,.055) 0 12px,transparent 12px 24px),var(--paper)}
.rl-nope h3{font-size:1.15rem;margin:0 0 4px;color:var(--rl-red);letter-spacing:.04em;text-transform:uppercase}
.rl-nope>p{margin:0 0 14px;color:var(--muted);font-size:.94rem}
.rl-nope ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.rl-nope li{position:relative;padding-left:22px;color:var(--muted);font-size:.93rem;line-height:1.55}
.rl-nope li::before{content:"\00D7";position:absolute;left:2px;top:-.05em;font-weight:700;font-size:1.2rem;color:var(--rl-red)}
.rl-nope li b{color:var(--text)}

/* --------------------------------------------------------------- gallery --- */
.rl-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;margin-top:22px}
.rl-gallery .shot,.rl-pair .shot,.rl-concepts .shot{font:inherit;text-align:left;color:var(--muted);
  background:var(--paper);border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  transition:transform .25s var(--ease),border-color .25s var(--ease)}
.rl-gallery .shot:hover,.rl-pair .shot:hover{transform:translateY(-3px);border-color:var(--rl-brass)}
.rl-thumb{position:relative;display:block;background:#000;line-height:0}
.rl-thumb img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.rl-gallery .cap,.rl-pair .cap{display:block;padding:10px 12px 12px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.7rem;line-height:1.55;letter-spacing:.02em;color:var(--muted)}
.rl-pair-block{margin-top:14px}
.rl-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:12px;position:relative}
.rl-pair .rl-day{position:absolute;right:8px;top:8px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:2px;background:var(--rl-brass);color:var(--ink);
  font-style:normal;line-height:1.3}

/* -------------------------------------------------------------- workings --- */
.rl-split{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:28px;align-items:center;margin-top:16px}
.rl-diagram{margin:0;padding:12px;border:1px solid var(--rule2);border-radius:3px;background:var(--paper);position:relative}
.rl-diagram svg{display:block;width:100%;height:auto}
.rl-diagram figcaption{margin-top:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.rl-diagram.is-paper{border-style:dashed;border-color:var(--rl-red)}
.rl-svg-box{fill:var(--paper2);stroke:var(--rule2);stroke-width:1.5}
.rl-svg-box.client{stroke:var(--cyan)}
.rl-svg-box.kernel{stroke:var(--rl-brass)}
.rl-svg-box.drawn{fill:none;stroke:var(--rl-red);stroke-dasharray:7 5}
.rl-svg-title{fill:var(--text);font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.06em}
.rl-svg-line{fill:var(--muted);font-family:var(--body);font-size:14px}
.rl-svg-small{fill:var(--dim);font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.rl-svg-label{fill:var(--rl-brass);font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.08em}
.rl-svg-arrow{fill:none;stroke:var(--rl-brass);stroke-width:2.6}
.rl-svg-arrow.red{stroke:var(--rl-red);stroke-dasharray:6 4}
.rl-svg-ah{fill:var(--rl-brass)}
.rl-svg-ah.red{fill:var(--rl-red)}
.rl-svg-stamp{fill:var(--rl-red);font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.1em}
.rl-points{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.rl-points li{position:relative;padding-left:26px;color:var(--muted)}
.rl-points li::before{content:"";position:absolute;left:3px;top:.62em;width:8px;height:8px;background:var(--rl-brass);
  transform:rotate(45deg)}
.rl-points li b{color:var(--text);font-weight:600}
.rl-speed{width:100%;min-width:0}
.rl-speed th,.rl-speed td{padding:11px 14px;vertical-align:middle}
.rl-speed td{font-family:var(--mono);font-size:.9rem;color:var(--text);white-space:nowrap}
.rl-speed td small{display:block;color:var(--dim);font-size:.68rem}
.rl-bar{display:flex;align-items:center;gap:10px}
.rl-bar i{display:block;height:10px;border-radius:2px;background:var(--rl-green);min-width:6px}
.rl-bar.hs i{background:var(--rl-blue)}
.rl-rule{margin:14px 0 0;padding:12px 16px;border:1px dashed var(--rule2);border-radius:3px;font-family:var(--mono);
  font-size:.8rem;line-height:1.7;color:var(--muted);background:var(--paper)}
.rl-rule b{color:var(--rl-brass)}
.rl-dials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.rl-dial{padding:18px 16px;border:1px solid var(--rule2);border-radius:3px;background:var(--paper);text-align:center}
.rl-dial b{display:block;font-family:var(--display);font-size:1.9rem;line-height:1.05;color:var(--rl-brass)}
.rl-dial span{display:block;margin-top:6px;font-size:.88rem;color:var(--muted)}
.rl-fixes{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:fx}
.rl-fixes li{counter-increment:fx;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:baseline;
  color:var(--muted);font-size:.93rem}
.rl-fixes li::before{content:counter(fx);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  border:2px dashed var(--rl-red);color:var(--rl-red);font-family:var(--mono);font-weight:700;font-size:.74rem}

/* tables: scenario table and telemetry stack into labelled lines on a phone */
.rl-table{min-width:0;width:100%}
.rl-table th,.rl-table td{padding:11px 14px}
.rl-table tbody th{white-space:normal;color:var(--text);font-family:var(--display);font-size:.88rem;letter-spacing:.04em}
.rl-table td{font-family:var(--mono);font-size:.88rem;color:var(--text)}
.rl-table td.src{font-family:var(--body);color:var(--muted);font-size:.86rem}
.rl-table tr.rl-last th,.rl-table tr.rl-last td{background:rgba(216,166,58,.09);font-weight:700}
.rl-table tr.rl-last td{color:var(--rl-brass)}
.rl-table td.likely,.rl-table th.likely{background:rgba(216,166,58,.06)}
.rl-table-note{margin:10px 0 0;font-family:var(--mono);font-size:.7rem;line-height:1.65;color:var(--dim)}

/* ------------------------------------------------------------------- toy --- */
.rl-toy-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:0 0 24px}
.rl-toy-h .rl-grade{margin-left:auto}
.rl-toycap{margin:0;max-width:70ch;color:var(--muted)}
.rl-toy-meta{display:flex;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;align-items:center}
.rl-toy-actions{display:flex;gap:10px;flex-wrap:wrap}
.rl-toy-status{margin-top:12px;font-family:var(--mono);font-size:.85rem;color:var(--text);min-height:2.7em}
.rl-toy-foot{margin:12px 0 0;font-family:var(--mono);font-size:.7rem;color:var(--dim);line-height:1.6}

/* --------------------------------------------------------------- concept --- */
.rl-concept-sec{background:
    linear-gradient(rgba(95,180,255,.05) 1px,transparent 1px) 0 0/100% 32px,
    linear-gradient(90deg,rgba(95,180,255,.05) 1px,transparent 1px) 0 0/32px 100%;
  border-block:1px dashed var(--rule2)}
.rl-concept-banner{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;margin:22px 0 8px;padding:14px 20px;
  border:3px solid var(--rl-red);border-radius:3px;color:var(--rl-red);
  background:repeating-linear-gradient(-45deg,rgba(240,122,99,.14) 0 14px,rgba(5,9,13,.6) 14px 28px)}
.rl-concept-banner b{font-family:var(--display);font-size:clamp(1.3rem,3.4vw,2rem);letter-spacing:.08em;
  text-transform:uppercase;line-height:1.1;background:var(--bg);padding:4px 12px;border-radius:2px}
.rl-concept-banner span{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text);background:var(--bg);padding:4px 10px;border-radius:2px}
.rl-concepts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 22px;margin-top:30px}
.rl-concepts .shot{position:relative;padding:10px 10px 0;background:#e9e4d6;border:0;border-radius:2px;
  color:#201a10;box-shadow:0 18px 44px rgba(0,0,0,.6);transition:transform .3s var(--ease)}
.rl-concepts .c-wide{grid-column:span 4}
.rl-concepts .c-side{grid-column:span 2;align-self:center}
.rl-logos{grid-column:span 2;display:grid;gap:26px;align-self:start}
.rl-concepts .shot:nth-of-type(odd){transform:rotate(-.7deg)}
.rl-concepts .shot:nth-of-type(even){transform:rotate(.8deg)}
.rl-concepts .shot:hover{transform:rotate(0) translateY(-4px)}
.rl-concepts .shot::before{content:"";position:absolute;top:-10px;left:50%;width:84px;height:21px;
  transform:translateX(-50%) rotate(-2deg);background:rgba(216,166,58,.55);border:1px solid rgba(216,166,58,.35)}
.rl-concepts .rl-thumb{background:#fff}
.rl-concepts .cap{display:block;padding:10px 4px 12px;font-family:var(--mono);font-size:.7rem;line-height:1.55;color:#2a2418}
.rl-concepts .cap b{color:#8c1d0b;letter-spacing:.04em}
.rl-concepts .rl-kind{background:#8c1d0b;color:#fff;border-color:#8c1d0b}

/* ----------------------------------------------------------------- goals --- */
.rl-two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px;margin-top:22px;align-items:start}
.rl-pillars{counter-reset:pl;display:grid;gap:10px;margin:0;padding:0;list-style:none}
.rl-pillar{counter-increment:pl;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:16px 18px;
  background:var(--paper);border-left:4px solid var(--rl-brass);border-radius:0 3px 3px 0}
.rl-pillar::before{content:"0" counter(pl);font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;
  color:var(--rl-brass);opacity:.65}
.rl-pillar h3{font-size:1.05rem;margin:0 0 3px}
.rl-pillar p{margin:0;color:var(--muted);font-size:.93rem}
.rl-pillar p.st{margin-top:5px;font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--dim)}
.rl-pillar p.st b{color:var(--text);font-weight:600}
.rl-nongoals{padding:20px 22px;border:1px dashed var(--rule2);border-radius:3px;background:var(--paper)}
.rl-nongoals h3{font-size:1.05rem;margin:0 0 10px}
.rl-nongoals ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.rl-nongoals li{position:relative;padding-left:22px;color:var(--muted);font-size:.93rem}
.rl-nongoals li::before{content:"\00D7";position:absolute;left:2px;top:-.1em;font-weight:700;font-size:1.2rem;color:var(--rl-red)}

/* -------------------------------------------------------------- progress --- */
.rl-timeline{list-style:none;margin:26px 0 0;padding:0 0 0 30px;position:relative}
.rl-timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:6px;border-radius:3px;
  background:repeating-linear-gradient(180deg,var(--rl-brass) 0 12px,transparent 12px 18px);opacity:.85}
.rl-timeline li{position:relative;padding:0 0 22px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 18px}
.rl-timeline li:last-child{padding-bottom:0}
.rl-timeline li::before{content:"";position:absolute;left:-29px;top:.32em;width:16px;height:16px;border-radius:50%;
  background:var(--bg);border:3px solid var(--rl-brass)}
.rl-timeline li.now::before{background:var(--rl-green);border-color:var(--rl-green);box-shadow:0 0 10px var(--rl-green)}
.rl-timeline time,.rl-timeline .when{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--rl-brass);padding-top:.15em}
.rl-timeline p{margin:0;color:var(--muted);font-size:.95rem}
.rl-timeline p b{color:var(--text);font-weight:600}
.rl-status{margin-top:40px;padding:22px 22px 18px;border:1px solid var(--rule2);border-radius:3px;
  background:linear-gradient(157deg,var(--paper2),var(--paper));border-top:3px solid var(--rl-brass)}
.rl-status h3{font-size:1.25rem;margin:0 0 4px}
.rl-status-cap{margin:0 0 14px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.rl-stack{display:flex;height:36px;border:1px solid var(--rule2);border-radius:3px;overflow:hidden;background:var(--ink)}
.rl-stack span{display:block;height:100%;min-width:2px}
.rl-stack .s-closed{background:var(--lime)}
.rl-stack .s-running{background:var(--amber)}
.rl-stack .s-ready{background:var(--cyan)}
.rl-stack .s-wait{background:repeating-linear-gradient(135deg,#46596a 0 6px,#2d3d4b 6px 12px)}
.rl-stack .s-sup{background:var(--rl-red)}
.rl-key{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px}
.rl-key li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;align-items:center;font-size:.88rem;color:var(--muted)}
.rl-key i{display:block;width:14px;height:14px;border-radius:2px}
.rl-key b{display:block;font-family:var(--display);font-size:1.15rem;line-height:1.1;color:var(--text)}
.rl-key .k-closed{background:var(--lime)} .rl-key .k-running{background:var(--amber)}
.rl-key .k-ready{background:var(--cyan)}
.rl-key .k-wait{background:repeating-linear-gradient(135deg,#46596a 0 3px,#2d3d4b 3px 6px)}
.rl-key .k-sup{background:var(--rl-red)}
.rl-honest{margin:16px 0 0;padding:12px 16px;border-left:4px solid var(--amber);background:rgba(240,184,74,.07);
  color:var(--text);font-size:.95rem}

/* ------------------------------------------------------------------- eta --- */
.rl-stamp-corner{top:18px;right:22px}
@media (max-width:820px){.rl-stamp-corner{position:static;display:inline-block;margin:0 0 20px}}
.rl-formula{margin:18px 0 0;padding:18px 20px;border:1px solid var(--rule2);border-radius:3px;background:var(--ink);
  font-family:var(--mono);color:#eaf0f4;line-height:1.8;font-size:clamp(.82rem,2.4vw,1rem)}
.rl-formula em{font-style:normal;color:var(--rl-brass)}
.rl-formula span{display:block}
.rl-formula .op{color:#a9b9c6}
.rl-obs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
.rl-obs>div{padding:16px 18px;border:1px solid var(--rule);border-radius:3px;background:var(--paper)}
.rl-obs b{display:block;font-family:var(--display);font-size:1.9rem;line-height:1.05;color:var(--rl-brass)}
.rl-obs>div>span{display:block;margin-top:5px;color:var(--muted);font-size:.9rem}
.rl-obs .bad b{color:var(--rl-red)}
.rl-scen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.rl-scen>div{padding:16px 18px;border:1px solid var(--rule);border-top:3px solid var(--rl-brass);border-radius:3px;
  background:var(--paper)}
.rl-scen .fast{border-top-color:var(--lime)}
.rl-scen .slow{border-top-color:var(--rl-red)}
.rl-scen h4{font-family:var(--display);font-size:1.05rem;margin:0 0 2px;text-transform:uppercase;letter-spacing:.06em}
.rl-scen .m{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--rl-brass);margin:0 0 8px}
.rl-scen p{margin:0 0 8px;font-size:.9rem;color:var(--muted);line-height:1.55}
.rl-scen p b{color:var(--text)}
.rl-move{margin:14px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 26px}
.rl-move li{position:relative;padding-left:24px;color:var(--muted);font-size:.93rem;line-height:1.55}
.rl-move li::before{content:"";position:absolute;left:3px;top:.55em;width:9px;height:9px;
  background:var(--rl-red);transform:rotate(45deg)}
.rl-move li b{color:var(--text)}
.rl-plain{margin-top:22px;padding:18px 22px;border:2px solid var(--rl-brass);border-radius:3px;background:var(--paper);
  font-size:1.02rem;color:var(--text)}
.rl-announce{margin:16px 0 0;font-family:var(--mono);font-size:.78rem;color:var(--dim);letter-spacing:.03em}
.rl-announce::before{content:"\266A  "}

/* ------------------------------------------------------------------- faq --- */
.rl-faq{display:grid;gap:10px;margin-top:22px;max-width:860px}
.rl-faq details{border:1px solid var(--rule);border-radius:3px;background:var(--paper)}
.rl-faq summary{list-style:none;cursor:pointer;padding:14px 18px 14px 46px;position:relative;
  font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--text)}
.rl-faq summary::-webkit-details-marker{display:none}
.rl-faq summary::before{content:"+";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;
  text-align:center;font-family:var(--mono);font-weight:700;color:var(--rl-brass);font-size:1.2rem}
.rl-faq details[open] summary::before{content:"\2212"}
.rl-faq details[open]{border-color:var(--rule2)}
.rl-faq details>div{padding:0 18px 16px 46px;color:var(--muted);font-size:.96rem}
.rl-faq details>div p{margin:0 0 .7em}
.rl-faq details>div p:last-child{margin:0}
.rl-small{margin:0 0 22px;padding:12px 16px;border:1px dashed var(--rule2);border-radius:3px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;color:var(--muted)}

/* ---------------------------------------------------------- small screens --- */
@media (max-width:980px){
  .rl-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rl-facts li:nth-child(3){border-right:0}
  .rl-facts li:nth-child(n+4){border-top:1px dashed var(--rule)}
  .rl-concepts .c-wide,.rl-concepts .c-side{grid-column:span 6}
  .rl-logos{grid-column:span 6;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .rl-head .herogrid{grid-template-areas:"copy" "board" "cta" "hero";grid-template-rows:auto;gap:20px}
  .rl-herofig{align-self:stretch}
  .rl-split,.rl-two{grid-template-columns:1fr}
  .rl-steps,.rl-legend,.rl-scen,.rl-dials{grid-template-columns:1fr}
  .rl-nope ul,.rl-move{grid-template-columns:1fr}
  .rl-dials .rl-dial{text-align:left}
}
@media (max-width:620px){
  body.t-rail .subnav{top:96px}
  .rl-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rl-facts li:nth-child(n){border-right:1px dashed var(--rule);border-top:0}
  .rl-facts li:nth-child(even){border-right:0}
  .rl-facts li:nth-child(n+3){border-top:1px dashed var(--rule)}
  .rl-pair{grid-template-columns:1fr}
  .rl-concepts{gap:22px 14px}
  .rl-logos{grid-template-columns:1fr}
  .rl-timeline li{grid-template-columns:1fr}
  .rl-board-meta>div{border-right:0;border-bottom:1px dashed rgba(216,166,58,.2)}
  .rl-board-meta>div:last-child{border-bottom:0}
  .rl-board-row{padding-top:16px}
  .rl-src{font-size:1.5rem}
  .rl-dl>div{grid-template-columns:1fr;gap:2px}
  .rl-dl dt{border-right:0;padding-right:0}
  .rl-speed th,.rl-speed td{padding:9px 8px}
  .rl-speed td{font-size:.76rem}
  .rl-speed th{font-size:.82rem}
  .rl-bar{gap:6px}
  .rl-strip{letter-spacing:.04em;font-size:.62rem}
  .rl-strip .wrap>span{font-size:.68rem;letter-spacing:.02em}
  .rl-strip .wrap{gap:0 7px}
  /* the scenario and telemetry tables turn into labelled lines, no sideways scroll */
  .rl-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rl-table,.rl-table tbody,.rl-table tr,.rl-table th,.rl-table td{display:block;width:100%}
  .rl-table tr{border-bottom:1px solid var(--rule2);padding:6px 0}
  .rl-table th,.rl-table td{border:0;padding:5px 14px}
  .rl-table tbody th{padding-top:9px;color:var(--rl-brass)}
  .rl-table td{display:flex;justify-content:space-between;gap:14px;text-align:right}
  .rl-table td::before{content:attr(data-l);flex:none;text-align:left;font-family:var(--mono);font-size:.64rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-top:.2em}
  .rl-table td.src{display:block;text-align:left}
  .rl-table td.src::before{display:block;margin-bottom:2px}
  .rl-table td.likely{background:none}
}
@media (prefers-reduced-motion:reduce){
  .rl-flap .rl-face{animation:none!important}
  .rl-lamp{animation:none}
  .rl-gallery .shot:hover,.rl-pair .shot:hover,.rl-concepts .shot:hover{transform:none}
}
/* toy v2: the self-running passing siding (canvas drawn by ncSidingToy in site.js) */
.rl-toy-box{container-type:inline-size}
.rl-toy-clock{font-family:var(--mono);color:var(--rl-brass);letter-spacing:.12em}
.rl-toy-canvas{position:relative;width:100%;aspect-ratio:1000/340;margin:14px 0 10px;background:#070b10;
  border:1px solid var(--rule);border-radius:3px;overflow:hidden}
@container (max-width:480px){.rl-toy-canvas{aspect-ratio:1000/470}}
.rl-toy-canvas canvas{display:block;width:100%;height:100%;touch-action:manipulation}
.rl-toy-run{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 6px 24px rgba(0,0,0,.6)}
.rl-toy-run[hidden]{display:none}
.rl-toy-ticker{list-style:none;margin:0 0 12px;padding:8px 12px;height:5.9em;overflow:hidden;font-family:var(--mono);
  font-size:.78rem;line-height:1.8;color:var(--dim);background:rgba(0,0,0,.28);border:1px solid var(--rule);
  border-left:3px solid var(--rl-brass);border-radius:2px}
.rl-toy-ticker li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-toy-ticker li:first-child{color:var(--text)}
.rl-toy-ticker li:nth-child(2){color:var(--muted)}
.rl-toy-actions .btn,.rl-toy-actions .sound-btn{min-height:44px}
.rl-toy-btn[aria-pressed="true"]{border-color:var(--rl-brass);color:var(--rl-brass);background:rgba(216,166,58,.1)}
.rl-toy-actions button:focus-visible,.rl-toy-run:focus-visible{outline:2px solid var(--rl-brass);outline-offset:2px}
.rl-toy-issues{margin:16px 0 0;padding:14px 16px 12px;border:1px dashed var(--rl-red);border-radius:3px;background:rgba(240,122,99,.06)}
.rl-toy-issues h3{margin:0 0 8px;font-family:var(--display);font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rl-red)}
.rl-toy-issues ul{margin:0;padding-left:1.1em;font-size:.86rem;color:var(--muted);line-height:1.55}
.rl-toy-issues li+li{margin-top:4px}
@media (max-width:560px){
  .rl-toy-ticker{height:9.4em;font-size:.72rem;line-height:1.55}
  .rl-toy-ticker li{white-space:normal}
  .rl-toy-ticker li+li{margin-top:3px}
}

/* ---- toy v3: treasury HUD (a brass-and-LED departures display, toy dollars) ---- */
.rl-toy-hud{display:grid;grid-template-columns:minmax(0,1.9fr) repeat(3,minmax(0,1fr));gap:10px 10px;margin:14px 0 0;
  padding:12px 12px 10px;background:linear-gradient(180deg,#0c1015,#0a0d11);border:1px solid var(--rl-brass);border-radius:3px;
  box-shadow:inset 0 0 0 3px #05080b,inset 0 0 0 4px var(--rule2),inset 0 0 26px rgba(240,184,74,.07),0 6px 18px rgba(0,0,0,.45)}
.rl-toy-cell{display:flex;flex-direction:column;gap:5px;min-width:0}
.rl-toy-k{display:block;font-family:var(--mono);font-size:.6rem;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;
  color:#b8923a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-toy-cell output,.rl-toy-cell b{display:block;box-sizing:border-box;min-width:0;max-width:100%;padding:7px 10px 6px;border-radius:3px;
  font-family:var(--mono);font-weight:700;font-size:clamp(.92rem,2.3vw,1.4rem);line-height:1.2;letter-spacing:.03em;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;color:#f0b84a;
  text-shadow:0 0 7px rgba(240,184,74,.55),0 0 1px rgba(255,214,130,.9);
  background:linear-gradient(180deg,#1a222b 0,#141b23 calc(50% - 1px),#020406 calc(50% - 1px),#020406 calc(50% + 1px),#0f151b calc(50% + 1px),#0b1015 100%);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.06);
  transition:filter .5s ease-out}
.rl-toy-cell b.is-bump,.rl-toy-cell output.is-bump{filter:brightness(1.7) saturate(1.2);transition-duration:.06s}
.rl-toy-cash.is-neg output{color:#f07a63;text-shadow:0 0 7px rgba(240,122,99,.5),0 0 1px rgba(255,170,150,.9)}
.rl-toy-tag{align-self:flex-start;margin-top:1px;padding:1px 7px;border:1px solid #f07a63;border-radius:2px;font-family:var(--mono);
  font-size:.6rem;font-weight:700;letter-spacing:.16em;line-height:1.5;color:#f07a63;background:rgba(240,122,99,.1)}
.rl-toy-tag[hidden]{display:none}
.rl-toy-days{grid-column:1/-1;margin-top:2px;padding-top:8px;border-top:1px dashed var(--rule2);text-align:center;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--rl-brass);line-height:1.5}
.rl-toy-days b{display:inline;padding:0;background:none;box-shadow:none;font-size:.95rem;letter-spacing:.06em;color:#f0b84a;
  font-variant-numeric:tabular-nums}
.rl-toy-days.is-zero b{color:#ff4a3a;text-shadow:0 0 7px rgba(255,74,58,.5)}

/* bankruptcy penalty: alternating red / white blocks, one cycle a second at most */
#rl-toy-cash.is-penalty{font-size:clamp(.78rem,2vw,1.05rem);line-height:1.25;letter-spacing:.02em;white-space:normal;
  overflow-wrap:anywhere;text-shadow:none;background:#c8261b;color:#fff;border-radius:3px;
  animation:rl-toy-flash 1s steps(1,end) infinite}
@keyframes rl-toy-flash{
  0%{background:#c8261b;color:#fff}
  50%{background:#fff;color:#c8261b}
  100%{background:#c8261b;color:#fff}}

@media (max-width:560px){
  .rl-toy-hud{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 10px;padding:10px 10px 9px}
  .rl-toy-cell output,.rl-toy-cell b{font-size:clamp(.88rem,4.6vw,1.12rem);padding:6px 8px 5px}
  #rl-toy-cash.is-penalty{font-size:clamp(.72rem,3.6vw,.92rem)}
  .rl-toy-k{font-size:.56rem;letter-spacing:.14em}
  .rl-toy-days{font-size:.6rem;letter-spacing:.08em}
}
@container (max-width:520px){
  .rl-toy-hud{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rl-toy-cell output,.rl-toy-cell b{font-size:clamp(.88rem,4.6cqw,1.12rem)}
}

/* ---- toy v3: the big caged red button ---- */
.rl-toy-dnp{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:0 1 270px;
  min-height:56px;padding:10px 24px 12px;overflow:hidden;cursor:pointer;color:#fff;text-align:center;
  border:2px solid #4a0a04;border-radius:16px;font-family:var(--display);
  background:linear-gradient(180deg,#e23c2c 0,#d73526 45%,#b3200f 100%);
  box-shadow:0 5px 0 #4a0a04,0 9px 20px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.25);
  transition:transform .08s ease-out,box-shadow .08s ease-out,filter .15s}
.rl-toy-cage{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:14px;
  background:
    repeating-linear-gradient(45deg,rgba(20,0,0,.62) 0 1.5px,transparent 1.5px 10px),
    repeating-linear-gradient(-45deg,rgba(20,0,0,.62) 0 1.5px,transparent 1.5px 10px);
  box-shadow:inset 0 0 0 3px rgba(20,0,0,.55),inset 0 0 0 5px rgba(255,255,255,.12)}
.rl-toy-dnp-l,.rl-toy-dnp small{position:relative;z-index:1}
.rl-toy-dnp-l{font-size:1.25rem;font-weight:800;letter-spacing:.16em;line-height:1.15;text-transform:uppercase;
  text-shadow:0 2px 0 rgba(60,6,0,.7),0 0 6px rgba(60,6,0,.8)}
.rl-toy-dnp small{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.06em;line-height:1.3;
  text-shadow:0 1px 0 rgba(60,6,0,.8),0 0 5px rgba(60,6,0,.8)}
.rl-toy-dnp:hover{filter:brightness(1.1)}
.rl-toy-dnp:active{transform:translateY(4px);box-shadow:0 1px 0 #4a0a04,0 3px 8px rgba(0,0,0,.55),inset 0 3px 8px rgba(0,0,0,.4)}
.rl-toy-actions .rl-toy-dnp:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 5px 0 #4a0a04,0 0 0 3px #000}
.rl-toy-dnp:disabled{cursor:not-allowed;opacity:.8}

/* ---- toy v3: incident state, lockout and notes ---- */
.rl-toy-btn:disabled{cursor:not-allowed;opacity:.8;color:var(--text)}
.rl-toy-btn.is-caff{border:1px dashed #f0b84a;color:#f0b84a;animation:rl-toy-jit .3s steps(1,end) infinite}
@keyframes rl-toy-jit{
  0%{transform:translate(1px,0) rotate(.5deg)}
  25%{transform:translate(-1px,1px) rotate(-.5deg)}
  50%{transform:translate(1px,-1px) rotate(.3deg)}
  75%{transform:translate(-1px,0) rotate(-.3deg)}
  100%{transform:translate(1px,0) rotate(.5deg)}}
#nc-siding.is-caff{animation:rl-toy-shake 1.2s steps(1,end) infinite}
@keyframes rl-toy-shake{
  0%{transform:translate(.6px,0)}
  25%{transform:translate(0,.6px)}
  50%{transform:translate(-.6px,0)}
  75%{transform:translate(0,-.6px)}
  100%{transform:translate(.6px,0)}}
.rl-toy-lockmsg,.rl-toy-note{margin:10px 0 0;font-family:var(--mono);font-size:.72rem;line-height:1.55;letter-spacing:.02em}
.rl-toy-lockmsg{padding:7px 10px;color:#f0b84a;border:1px dashed #f0b84a;border-radius:2px;background:rgba(240,184,74,.07)}
.rl-toy-lockmsg[hidden]{display:none}
.rl-toy-note{color:var(--dim)}
.rl-toy-note::before{content:"// ";color:var(--rl-red)}

@media (max-width:560px){
  .rl-toy-dnp{flex:1 1 100%}
  .rl-toy-dnp-l{font-size:1.1rem;letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){
  #rl-toy-cash.is-penalty{animation:none;background:#c8261b;color:#fff}
  .rl-toy-btn.is-caff,#nc-siding.is-caff{animation:none}
  .rl-toy-cell output,.rl-toy-cell b,.rl-toy-dnp{transition:none}
}
/* the coffee cup on the locked-out buttons is decoration only (empty alt text where supported) */
.rl-toy-btn.is-caff::before{content:"\2615";content:"\2615" / "";margin-right:.4em}
/* long lockout labels must wrap rather than spill out of the toy box on phones */
.rl-toy-actions .rl-toy-btn{max-width:100%;white-space:normal}
/* ---- daily updates (.rl-upd-*): train-ticket cards for /newcaptains/updates/, the compact "Latest updates" block
   on /newcaptains/, and the one-line teaser on the home page. Tokens only, so a picked theme still recolours them.
   Contrast: ink on brass 8.9:1, muted 9:1 and dim 6.4:1 on paper. The teaser uses --gold because --rl-brass is
   only defined under body.t-rail and the home page is not. ---- */
.rl-upd-head .lead{margin:0 0 14px}
.rl-upd-goal{margin:0 0 16px;max-width:68ch;padding:10px 14px;border:1px dashed var(--rule2);border-radius:3px;
  background:var(--paper);font-family:var(--mono);font-size:.78rem;line-height:1.75;letter-spacing:.02em;color:var(--muted)}
.rl-upd-goal b{color:var(--rl-brass);font-weight:700}
.rl-upd-goal a{color:var(--rl-brass)}
.rl-upd-links{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.rl-upd-sec{padding-top:34px}
.rl-upd-lh{margin:0 0 4px;font-size:1.15rem}
.rl-upd-sec .rl-legend{margin-top:12px}
.rl-upd-feed{display:grid;gap:22px;margin-top:34px}

.rl-upd{--rl-gc:var(--rl-brass);position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);
  border:1px solid var(--rule2);border-radius:4px;overflow:hidden;scroll-margin-top:124px;
  background:linear-gradient(157deg,var(--paper2),var(--paper));box-shadow:0 16px 40px rgba(0,0,0,.4)}
.rl-upd:target{border-color:var(--rl-brass);box-shadow:0 0 0 2px rgba(216,166,58,.4),0 16px 40px rgba(0,0,0,.4)}
.rl-upd-stub{display:flex;justify-content:center;align-items:flex-start;padding:18px 8px;
  background:var(--rl-brass);color:var(--ink);border-right:3px dashed rgba(5,9,13,.5)}
.rl-upd-date{display:flex;flex-direction:column;align-items:center;line-height:1;text-align:center;
  font-family:var(--mono);text-transform:uppercase;color:var(--ink)}
.rl-upd-date b{margin:5px 0 3px;font-family:var(--display);font-size:2.6rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
.rl-upd-dow{font-size:.62rem;letter-spacing:.2em;font-weight:700}
.rl-upd-mon{font-size:.82rem;letter-spacing:.18em;font-weight:700}
.rl-upd-yr{margin-top:4px;font-size:.62rem;letter-spacing:.14em}
.rl-upd-body{display:flex;flex-direction:column;gap:13px;min-width:0;padding:20px 22px 18px}
.rl-upd-title{margin:0;font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.2}
.rl-upd-title a{color:var(--text);text-decoration:none}
.rl-upd-title a:hover{color:var(--rl-brass);text-decoration:underline}
.rl-upd-title a:focus-visible{outline:2px solid var(--rl-brass);outline-offset:3px}
.rl-upd-sum{margin:0;max-width:68ch;color:var(--muted)}
.rl-upd-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.rl-upd-b{--rl-gc:var(--rl-green);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding-left:12px;
  border-left:3px solid var(--rl-gc)}
.rl-upd-b.g-b{--rl-gc:var(--amber)}
.rl-upd-b.g-c{--rl-gc:var(--rl-red);border-left-style:dashed}
.rl-upd-b .rl-grade{flex:none}
.rl-upd-b p{flex:1 1 280px;margin:0;color:var(--text);font-size:.95rem;line-height:1.55}
.rl-upd-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:12px}
.rl-upd-shots .shot{font:inherit;text-align:left;color:var(--muted);background:var(--paper);border:1px solid var(--rule);
  border-radius:3px;overflow:hidden;transition:transform .25s var(--ease),border-color .25s var(--ease)}
.rl-upd-shots .shot:hover{transform:translateY(-3px);border-color:var(--rl-brass)}
/* a picture-day entry with exactly 4 pictures reads as a 2 x 2 grid where 3 columns would leave one orphan; 5 and 6 wrap 3 + 2 and 3 + 3 */
@media (min-width:760px){.rl-upd-shots:has(>.shot:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
.rl-upd-shots .cap{display:block;padding:9px 11px 11px;border-top:1px solid var(--rule);font-family:var(--mono);
  font-size:.68rem;line-height:1.55;letter-spacing:.02em;color:var(--muted)}
.rl-upd-counts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  border:1px dashed var(--rule2);border-radius:3px;background:var(--paper)}
.rl-upd-counts li{padding:9px 12px;border-right:1px dashed var(--rule);text-align:center}
.rl-upd-counts li:last-child{border-right:0}
.rl-upd-counts b{display:block;font-family:var(--display);font-size:1.25rem;line-height:1.1;color:var(--rl-brass);
  font-variant-numeric:tabular-nums}
.rl-upd-counts span{display:block;margin-top:3px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.rl-upd-note{margin:0;font-family:var(--mono);font-size:.7rem;line-height:1.6;letter-spacing:.03em;color:var(--dim)}
.rl-upd-note::before{content:"// ";color:var(--rl-red)}

/* compact variant: the three newest on /newcaptains/ */
.rl-upd-latest{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;margin-top:22px}
.rl-upd-compact{grid-template-columns:minmax(0,1fr);align-content:start}
.rl-upd-thumb{display:block;background:#000;line-height:0;border-bottom:1px solid var(--rule)}
.rl-upd-thumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.rl-upd-compact .rl-upd-body{gap:11px;padding:14px 16px 16px}
.rl-upd-ch{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.rl-upd-compact .rl-upd-date{flex:none;flex-direction:row;align-items:baseline;gap:6px;padding:6px 10px;
  border-radius:2px;background:var(--rl-brass);white-space:nowrap}
.rl-upd-compact .rl-upd-date b{margin:0;font-size:1.05rem}
.rl-upd-compact .rl-upd-dow,.rl-upd-compact .rl-upd-mon,.rl-upd-compact .rl-upd-yr{margin:0;font-size:.64rem;letter-spacing:.12em}
.rl-upd-compact .rl-upd-title{flex:1 1 150px;font-size:1.1rem}
.rl-upd-compact .rl-upd-b p{flex-basis:100%;font-size:.88rem}
.rl-upd-more{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.rl-sec-updates-top{padding-top:34px;background:radial-gradient(ellipse at 50% 0%, rgba(216,166,58,.08) 0%, transparent 68%)}
.subnav a.subnav-pulse{color:var(--rl-brass);font-weight:700;border-bottom:2px solid var(--rl-brass)}

/* home page card teaser (no t-rail tokens there) */
.rl-upd-tease{margin:14px 0 2px;padding:6px 0 6px 12px;border-left:3px solid var(--gold);font-family:var(--mono);
  font-size:.78rem;line-height:1.5;letter-spacing:.03em;color:var(--muted)}
.rl-upd-tease a{color:var(--gold)}
.rl-upd-tease a:hover{text-decoration:underline}

@media (max-width:700px){
  .rl-upd{grid-template-columns:minmax(0,1fr)}
  .rl-upd-stub{justify-content:flex-start;padding:9px 16px;border-right:0;border-bottom:3px dashed rgba(5,9,13,.5)}
  .rl-upd-stub .rl-upd-date{flex-direction:row;align-items:baseline;gap:8px}
  .rl-upd-stub .rl-upd-date b{margin:0;font-size:1.6rem}
  .rl-upd-stub .rl-upd-yr{margin:0}
  .rl-upd-body{padding:16px 16px 16px}
  .rl-upd-b p{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .rl-upd-shots .shot{transition:none}
  .rl-upd-shots .shot:hover{transform:none}
}
/* ============================================================== [rl-end] === */

/* ============================================================================
   MULTI-THEME ENGINE (Railway, Blueprint, Dossier, Coffee, Neon)
   ========================================================================== */
body.t-railway, body.theme-railway {
  --bg: #0b1219; --bg2: #101c27; --ink: #04080c;
  --paper: #121e2a; --paper2: #182837; --paper3: #1f3346;
  --rule: rgba(240, 184, 74, .22); --rule2: rgba(240, 184, 74, .46);
  --text: #eef3f7; --muted: #a4b7ca; --dim: #7990a4;
  --gold: #f0b84a; --amber: #f59e0b; --stamp: #ef4444; --roast: #78350f;
  --lime: #10b981; --cyan: #22d3ee; --magenta: #ec4899;
}
body.t-blueprint, body.theme-blueprint {
  --bg: #061523; --bg2: #091e32; --ink: #030d17;
  --paper: #0c2740; --paper2: #113454; --paper3: #174269;
  --rule: rgba(0, 212, 255, .24); --rule2: rgba(0, 212, 255, .5);
  --text: #e1f5fe; --muted: #81d4fa; --dim: #4fc3f7;
  --gold: #00e5ff; --amber: #ffb74d; --stamp: #ff5252; --roast: #01579b;
  --lime: #69f0ae; --cyan: #00e5ff; --magenta: #ff4081;
}
body.t-dossier, body.theme-dossier {
  --bg: #13100c; --bg2: #1a1611; --ink: #0d0a08;
  --paper: #221c16; --paper2: #2b241c; --paper3: #342b22;
  --rule: rgba(212, 160, 80, .22); --rule2: rgba(212, 160, 80, .45);
  --text: #f7eedf; --muted: #c2b297; --dim: #99886e;
  --gold: #e2b055; --amber: #e67e22; --stamp: #c0392b; --roast: #795548;
  --lime: #27ae60; --cyan: #16a085; --magenta: #d81b60;
}
body.t-neon, body.theme-neon {
  --bg: #080614; --bg2: #0c0920; --ink: #04030a;
  --paper: #0e0b24; --paper2: #141038; --paper3: #1b154a;
  --rule: rgba(126, 146, 255, .22); --rule2: rgba(126, 146, 255, .45);
  --text: #edf0ff; --muted: #9ba5df; --dim: #757eb3;
  --gold: #2ee6f6; --amber: #ff9d4d; --stamp: #ff2e97; --roast: #2c1b69;
  --lime: #7bff9e; --cyan: #2ee6f6; --magenta: #ff2e97;
}

/* Theme picker UI */
.theme-switch-wrap {
  display: inline-flex; align-items: center; gap: 6px; position: relative; margin-left: 6px;
}
.theme-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  background: rgba(232, 180, 100, .08); border: 1px solid var(--rule); border-radius: 4px;
  color: var(--muted); font-family: var(--mono); font-size: .75rem; letter-spacing: .06em;
  cursor: pointer; transition: .2s var(--ease);
}
.theme-btn:hover {
  background: rgba(232, 180, 100, .18); color: var(--text); border-color: var(--gold);
}
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 100;
  background: var(--paper2); border: 1px solid var(--rule2); border-radius: 4px;
  padding: 6px; display: none; flex-direction: column; gap: 3px;
  box-shadow: 0 16px 40px rgba(0,0,0,.65); min-width: 170px;
}
.theme-menu.open { display: flex; }
.theme-opt {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 3px;
  border: none; background: transparent; color: var(--text); font-family: var(--mono);
  font-size: .78rem; text-align: left; cursor: pointer; transition: .15s;
}
.theme-opt:hover { background: rgba(232, 180, 100, .14); color: var(--gold); }
.theme-opt.active { color: var(--gold); font-weight: 700; background: rgba(232, 180, 100, .1); }

/* ============================================================================
   NEWCAPTAINS CUSTOM PRESENTATION & COMPONENTS
   ========================================================================== */
.pagehead-nc {
  position: relative; padding: 50px 0 40px; overflow: hidden;
  background: radial-gradient(85% 65% at 50% 0%, rgba(56,178,172,.14), transparent 70%);
}
.pagehead-nc .brand-hero {
  max-width: 380px; width: 100%; height: auto; margin-bottom: 22px;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.6));
}
.nc-badge-row {
  display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 18px 0;
}
.nc-badge {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 3px; border: 1px solid var(--rule);
  background: rgba(232, 180, 100, .05); color: var(--text);
}
.nc-badge.green { border-color: rgba(72,187,120,.5); color: var(--lime); background: rgba(72,187,120,.09); }
.nc-badge.cyan { border-color: rgba(56,178,172,.5); color: var(--gold); background: rgba(56,178,172,.09); }
.nc-badge.amber { border-color: rgba(236,201,75,.5); color: var(--amber); background: rgba(236,201,75,.09); }
.nc-badge.purple { border-color: rgba(176,108,255,.5); color: #c499ff; background: rgba(176,108,255,.09); }

/* Comparison Cards: What Makes It Different */
.diff-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; margin-top: 28px;
}
.diff-card {
  background: linear-gradient(157deg, var(--paper2), var(--paper));
  border: 1px solid var(--rule); border-radius: 4px; padding: 26px 24px;
  box-shadow: 0 16px 44px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 14px;
  position: relative; transition: .25s var(--ease);
}
.diff-card:hover { transform: translateY(-3px); border-color: var(--rule2); }
.diff-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.diff-num {
  font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: var(--gold); opacity: .7;
}
.diff-card h3 { font-size: 1.3rem; margin: 0; line-height: 1.2; color: var(--text); }
.diff-compare {
  display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 6px;
  padding: 12px; border-radius: 3px; background: rgba(0,0,0,.35); border: 1px dashed var(--rule);
}
.diff-row {
  display: grid; grid-template-columns: 88px 1fr; gap: 10px; align-items: baseline; font-size: .88rem;
}
.diff-tag-them {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); border-right: 1px solid var(--rule); padding-right: 6px;
}
.diff-tag-nc {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; border-right: 1px solid var(--rule); padding-right: 6px;
}
.diff-body p { margin: 0; font-size: .94rem; color: var(--muted); line-height: 1.6; }

/* Interactive Calculated ETA Engine */
.eta-calc-box {
  background: linear-gradient(150deg, var(--paper2), var(--paper));
  border: 1px solid var(--rule2); border-radius: 4px; padding: 34px 30px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6); margin: 32px 0; position: relative;
}
.eta-meter-display {
  background: rgba(4, 5, 8, .85); border: 1px solid var(--rule); border-radius: 4px;
  padding: 22px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px; align-items: center; margin-bottom: 28px;
}
.eta-digit-group { text-align: center; }
.eta-digit-label {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 6px;
}
.eta-digit-val {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  color: var(--gold); line-height: 1; text-shadow: 0 0 16px rgba(56,178,172,.35);
}
.eta-digit-sub {
  font-family: var(--mono); font-size: .75rem; color: var(--muted); margin-top: 4px;
}
.eta-sliders-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-bottom: 26px;
}
.eta-slider-card {
  background: rgba(0,0,0,.25); border: 1px solid var(--rule); border-radius: 3px; padding: 14px 18px;
}
.eta-slider-head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px;
}
.eta-slider-head label {
  font-family: var(--display); font-weight: 600; font-size: .92rem; color: var(--text);
}
.eta-slider-head span {
  font-family: var(--mono); font-size: .8rem; color: var(--gold); font-weight: 700;
}
.eta-slider-card input[type=range] {
  width: 100%; accent-color: var(--gold); cursor: pointer;
}
.eta-slider-hint {
  font-family: var(--mono); font-size: .68rem; color: var(--dim); margin-top: 6px;
}
.eta-actions {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  padding-top: 18px; border-top: 1px dashed var(--rule);
}
.eta-formula-note {
  font-family: var(--mono); font-size: .74rem; color: var(--dim); max-width: 58ch; line-height: 1.5;
}

/* Gallery and Exhibits */
.gallery-filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 20px;
}
.gallery-tab {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; padding: 7px 15px;
  background: rgba(232, 180, 100, .06); border: 1px solid var(--rule); border-radius: 3px;
  color: var(--muted); cursor: pointer; transition: .2s var(--ease);
}
.gallery-tab:hover { background: rgba(232, 180, 100, .14); color: var(--text); border-color: var(--rule2); }
.gallery-tab.active { background: var(--gold); color: #061118; border-color: var(--gold); font-weight: 700; }
.nc-gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px;
}
.nc-shot-card {
  background: #000; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden;
  position: relative; transition: .25s var(--ease); cursor: pointer; display: flex; flex-direction: column;
}
.nc-shot-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.nc-shot-thumb {
  position: relative; aspect-ratio: 16/9; width: 100%; overflow: hidden; background: #07090b;
}
.nc-shot-thumb img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease);
}
.nc-shot-card:hover .nc-shot-thumb img { transform: scale(1.03); }
.nc-shot-badge {
  position: absolute; top: 10px; left: 10px; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px;
  background: rgba(0,0,0,.75); border: 1px solid var(--rule); color: var(--gold); backdrop-filter: blur(4px);
}
.nc-shot-info {
  padding: 12px 14px; background: var(--paper); border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 4px;
}
.nc-shot-info b { font-size: .95rem; color: var(--text); font-family: var(--display); }
.nc-shot-info span { font-size: .8rem; color: var(--muted); line-height: 1.45; }

/* Interactive Mini-Dispatcher Widget */
.mini-dispatcher-box {
  background: linear-gradient(150deg, var(--paper2), var(--paper));
  border: 1px solid var(--rule); border-radius: 4px; padding: 26px 24px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5); margin: 30px 0;
}
.dispatcher-canvas-wrap {
  position: relative; width: 100%; height: 170px; background: #080c10;
  border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; margin: 16px 0;
}
.dispatcher-controls {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}

/* Master Milestone Tracker */
.milestone-stepper {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 24px;
}
.step-item {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.step-item.done { border-color: rgba(72,187,120,.5); }
.step-tag {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
}
.step-item.done .step-tag { color: var(--lime); }
.step-item.wip .step-tag { color: var(--amber); }
.step-item.next .step-tag { color: var(--dim); }
.step-item h4 { font-size: 1rem; color: var(--text); }
.step-item p { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.45; }

/* Audio effect trigger buttons */
.sound-btn {
  background: none; border: 1px solid var(--rule); border-radius: 3px; color: var(--muted);
  font-family: var(--mono); font-size: .75rem; padding: 5px 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: .2s;
}
.sound-btn:hover { color: var(--gold); border-color: var(--gold); }