/* Coldframe
   Reset first: the standalone page must not rely on a host-injected one. */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body,h1,h2,h3,p,figure,blockquote,table{margin:0;}
img,canvas,svg{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:none;}

:root{
  --bakelite:#E6DFCC; --bakelite-2:#DCD4BE; --bakelite-3:#D0C6AC;
  --chassis:#C4B99C;
  --well:#22332D; --well-2:#1A2823;
  --ink:#1B322C; --ink-2:#3C6154; --ink-3:#6B8479;
  --brass:#8A6A1B; --brass-2:#A8842C;
  --lamp-green:#3F7A48; --lamp-amber:#B4770F; --lamp-red:#9A2C1C;
  --on-well:#D9D0B8; --on-well-2:#93A79C;
  --rule:rgba(27,50,44,.22); --rule-2:rgba(27,50,44,.11);
  --emboss-hi:rgba(255,255,255,.60); --emboss-lo:rgba(27,50,44,.30);
  --glow:0 0 0 rgba(0,0,0,0);
  --f-fascia:"Fascia","Arial Narrow",sans-serif;
  --f-manual:"Manual",Georgia,serif;
  --f-read:"Readout","Courier New",monospace;
  --measure:66ch;
  --s1:.42rem; --s2:.75rem; --s3:1.1rem; --s4:1.7rem; --s5:2.6rem; --s6:4rem; --s7:6rem;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bakelite:#17211E; --bakelite-2:#1D2A25; --bakelite-3:#243129;
    --chassis:#0D1412;
    --well:#0D1513; --well-2:#080E0C;
    --ink:#DCD3BC; --ink-2:#9DB0A4; --ink-3:#71857A;
    --brass:#C9A146; --brass-2:#DFBB63;
    --lamp-green:#5FB06B; --lamp-amber:#E0A234; --lamp-red:#D2503A;
    --on-well:#DCD3BC; --on-well-2:#8FA398;
    --rule:rgba(220,211,188,.20); --rule-2:rgba(220,211,188,.10);
    --emboss-hi:rgba(255,255,255,.07); --emboss-lo:rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="light"]{
  --bakelite:#E6DFCC; --bakelite-2:#DCD4BE; --bakelite-3:#D0C6AC;
  --chassis:#C4B99C; --well:#22332D; --well-2:#1A2823;
  --ink:#1B322C; --ink-2:#3C6154; --ink-3:#6B8479;
  --brass:#8A6A1B; --brass-2:#A8842C;
  --lamp-green:#3F7A48; --lamp-amber:#B4770F; --lamp-red:#9A2C1C;
  --on-well:#D9D0B8; --on-well-2:#93A79C;
  --rule:rgba(27,50,44,.22); --rule-2:rgba(27,50,44,.11);
  --emboss-hi:rgba(255,255,255,.60); --emboss-lo:rgba(27,50,44,.30);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bakelite:#17211E; --bakelite-2:#1D2A25; --bakelite-3:#243129;
  --chassis:#0D1412; --well:#0D1513; --well-2:#080E0C;
  --ink:#DCD3BC; --ink-2:#9DB0A4; --ink-3:#71857A;
  --brass:#C9A146; --brass-2:#DFBB63;
  --lamp-green:#5FB06B; --lamp-amber:#E0A234; --lamp-red:#D2503A;
  --on-well:#DCD3BC; --on-well-2:#8FA398;
  --rule:rgba(220,211,188,.20); --rule-2:rgba(220,211,188,.10);
  --emboss-hi:rgba(255,255,255,.07); --emboss-lo:rgba(0,0,0,.55);
  color-scheme:dark;
}

body{
  background:var(--chassis);
  background-image:
    repeating-linear-gradient(90deg,rgba(0,0,0,.045) 0 1px,transparent 1px 3px),
    radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.10),transparent 60%);
  color:var(--ink);
  font-family:var(--f-manual);
  font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  padding:var(--s4) var(--s3) var(--s6);
}
@media (max-width:640px){ body{padding:var(--s3) var(--s2) var(--s5); font-size:16px;} }

/* ---------- chassis ---------- */
.chassis{
  max-width:1140px; margin:0 auto; position:relative;
  background:var(--bakelite);
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.017) 0 2px,transparent 2px 4px),
    radial-gradient(140% 60% at 50% -5%,var(--emboss-hi),transparent 55%);
  border:1px solid var(--rule);
  border-radius:3px;
  box-shadow:
    inset 0 1px 0 var(--emboss-hi),
    inset 0 -1px 0 var(--emboss-lo),
    0 1px 0 var(--emboss-hi),
    0 22px 60px rgba(0,0,0,.34);
  padding:var(--s5) var(--s5) var(--s6);
}
@media (max-width:760px){ .chassis{padding:var(--s4) var(--s3) var(--s5);} }

.screw{
  position:absolute; width:13px; height:13px; border-radius:50%;
  background:
    linear-gradient(150deg,var(--brass-2),var(--brass) 55%,rgba(0,0,0,.45));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.4);
}
.screw::after{
  content:""; position:absolute; inset:4px 2px; border-top:1.5px solid rgba(0,0,0,.55);
  transform:rotate(38deg); transform-origin:center;
}
.screw--tl{top:13px;left:13px} .screw--tr{top:13px;right:13px}
.screw--bl{bottom:13px;left:13px} .screw--br{bottom:13px;right:13px}
@media (max-width:760px){ .screw{display:none} }

/* ---------- typography primitives ---------- */
.legend{
  font-family:var(--f-fascia); font-weight:700;
  text-transform:uppercase; letter-spacing:.20em;
  font-size:.70rem; color:var(--ink-2);
  text-shadow:0 1px 0 var(--emboss-hi);
}
.measure{max-width:var(--measure);}
.lede{font-size:1.16rem; line-height:1.60; color:var(--ink); }
p{margin:0;}
.stack{display:flex; flex-direction:column; gap:var(--s3);}
.stack--tight{display:flex; flex-direction:column; gap:var(--s2);}
em{font-style:italic;}
strong{font-weight:700;}
a{color:inherit;}
a:focus-visible,button:focus-visible{outline:2px solid var(--brass-2); outline-offset:3px;}

/* ---------- masthead ---------- */
.masthead{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3);
  justify-content:space-between;
  padding-bottom:var(--s2);
  border-bottom:2px solid var(--rule);
}
.badge{display:flex; align-items:center; gap:.6rem;}
.badge__dial{
  width:26px;height:26px;border-radius:50%;flex:none;
  border:2px solid var(--ink-2);
  background:radial-gradient(circle at 50% 50%,transparent 0 3px,var(--ink-2) 3px 4.5px,transparent 4.5px);
  position:relative;
}
.badge__dial::after{
  content:"";position:absolute;left:50%;top:4px;width:1.5px;height:9px;
  background:var(--lamp-red); transform-origin:bottom center; transform:translateX(-50%) rotate(34deg);
}
.badge__name{
  font-family:var(--f-fascia); font-weight:700; font-size:1.15rem;
  letter-spacing:.30em; text-transform:uppercase; color:var(--ink);
  text-shadow:0 1px 0 var(--emboss-hi);
}
.mastnav{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center;}
.mastnav a{
  font-family:var(--f-fascia); text-transform:uppercase; letter-spacing:.16em;
  font-size:.68rem; color:var(--ink-2); text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.mastnav a:hover{color:var(--ink); border-bottom-color:var(--brass);}
/* External links are marked as such: a rule separates them from the in-page
   anchors, and the glyph is inline SVG rather than a font character (U+2197
   falls outside the shipped latin subsets). */
.mastnav__sep{width:1px; height:13px; background:var(--rule); flex:none;}
.mastnav__ext{display:inline-flex; align-items:center; gap:.38rem; color:var(--brass);}
.mastnav__ext svg{width:9px; height:9px; flex:none;}
.mastnav__ext:hover{color:var(--ink);}

/* ---------- hero ---------- */
.hero{
  display:grid; gap:var(--s5); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  padding:var(--s5) 0 var(--s4);
}
@media (max-width:900px){ .hero{grid-template-columns:1fr; gap:var(--s4);} }
.hero__title{
  font-family:var(--f-manual); font-weight:700;
  font-size:clamp(2.1rem,5.2vw,3.4rem); line-height:1.08;
  letter-spacing:-.015em; text-wrap:balance; margin:0;
  text-shadow:0 1px 0 var(--emboss-hi);
}
.hero__title .soft{color:var(--ink-2); font-style:italic; font-weight:400;}
.hero__sub{margin-top:var(--s3); color:var(--ink-2); font-size:1.1rem; max-width:46ch;}
.hero__meta{margin-top:var(--s3); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3);}
.tag{
  font-family:var(--f-fascia); text-transform:uppercase; letter-spacing:.16em;
  font-size:.64rem; color:var(--ink-2);
  border:1px solid var(--rule); border-radius:2px; padding:.3rem .6rem;
  background:var(--bakelite-2);
  box-shadow:inset 0 1px 0 var(--emboss-hi);
}

/* ---------- instrument ---------- */
.instrument{
  background:var(--well);
  background-image:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.055),transparent 62%);
  border-radius:4px;
  border:1px solid rgba(0,0,0,.5);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(255,255,255,.045),
    0 1px 0 var(--emboss-hi);
  padding:var(--s3) var(--s3) var(--s2);
  display:flex; flex-direction:column; gap:var(--s2);
}
.instrument__head{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2);}
.instrument__head .legend{color:var(--on-well-2); text-shadow:none;}
.gauge{width:100%; height:auto; display:block;}
.readout{
  font-family:var(--f-read); font-size:.78rem; letter-spacing:.02em;
  color:var(--on-well-2); font-variant-numeric:tabular-nums;
  display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; align-items:center;
  border-top:1px solid rgba(255,255,255,.09); padding-top:var(--s2);
}
.readout__val{color:var(--on-well);}

/* lamps */
.lamps{display:flex; flex-wrap:wrap; gap:var(--s3); padding-top:var(--s1);}
.lamp{display:flex; align-items:center; gap:.5rem;}
.lamp__bulb{
  width:11px;height:11px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.10);
  transition:background .18s linear,box-shadow .18s linear;
}
.lamp__label{
  font-family:var(--f-fascia); text-transform:uppercase; letter-spacing:.15em;
  font-size:.62rem; color:var(--on-well-2);
}
.lamp.is-on .lamp__label{color:var(--on-well);}
.lamp.is-on[data-hue="green"] .lamp__bulb{background:var(--lamp-green); box-shadow:0 0 9px var(--lamp-green),inset 0 0 0 1px rgba(255,255,255,.3);}
.lamp.is-on[data-hue="amber"] .lamp__bulb{background:var(--lamp-amber); box-shadow:0 0 9px var(--lamp-amber),inset 0 0 0 1px rgba(255,255,255,.3);}
.lamp.is-on[data-hue="red"]   .lamp__bulb{background:var(--lamp-red);   box-shadow:0 0 11px var(--lamp-red),inset 0 0 0 1px rgba(255,255,255,.3);}

.caption{
  font-family:var(--f-fascia); font-size:.68rem; letter-spacing:.09em;
  color:var(--ink-3); text-transform:uppercase; margin-top:var(--s2);
}

/* ---------- sections ---------- */
.plate{padding:var(--s5) 0; border-top:1px solid var(--rule);}
.plate__head{display:flex; align-items:baseline; gap:var(--s2); margin-bottom:var(--s3);}
.plate__no{
  font-family:var(--f-read); font-size:.72rem; color:var(--brass);
  letter-spacing:.06em; flex:none;
}
.plate__title{
  font-family:var(--f-manual); font-weight:700; margin:0;
  font-size:clamp(1.45rem,3.1vw,2.05rem); line-height:1.16; text-wrap:balance;
  text-shadow:0 1px 0 var(--emboss-hi);
}
.plate__title .soft{color:var(--ink-2); font-weight:400; font-style:italic;}

.pull{
  font-family:var(--f-manual); font-style:italic;
  font-size:clamp(1.2rem,2.6vw,1.55rem); line-height:1.38;
  color:var(--ink); border-left:3px solid var(--brass);
  padding-left:var(--s3); margin:var(--s3) 0; max-width:52ch;
  text-wrap:balance;
}

/* ---------- stage ladder ---------- */
.ladder{display:flex; flex-direction:column; gap:0; margin-top:var(--s3);}
.ladder__row{
  display:grid; grid-template-columns:1.6fr .7fr 2.6fr 1.5fr; gap:var(--s3);
  align-items:center; padding:var(--s2) 0;
  border-bottom:1px solid var(--rule-2);
}
.ladder__row--head{border-bottom:1.5px solid var(--rule); padding-bottom:var(--s1);}
@media (max-width:760px){
  .ladder__row{grid-template-columns:1fr 1fr; gap:var(--s1) var(--s2);}
  .ladder__bar{grid-column:1/-1;}
  .ladder__row--head{display:none;}
}
.ladder__name{font-family:var(--f-fascia); text-transform:uppercase; letter-spacing:.14em; font-size:.76rem;}
.ladder__pc{font-family:var(--f-read); font-variant-numeric:tabular-nums; font-size:.9rem; color:var(--ink);}
.ladder__bar{height:9px; background:var(--bakelite-3); border-radius:1px; position:relative; overflow:hidden;
  box-shadow:inset 0 1px 2px var(--emboss-lo);}
.ladder__fill{position:absolute; inset:0 auto 0 0; background:var(--ink-2);}
.ladder__gate{font-family:var(--f-fascia); font-size:.64rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-2);}

/* ---------- plan readout ---------- */
.code{
  background:var(--well); color:var(--on-well);
  border-radius:4px; border:1px solid rgba(0,0,0,.5);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6);
  padding:var(--s3); overflow-x:auto; margin-top:var(--s3);
  font-family:var(--f-read); font-size:.82rem; line-height:1.72;
  tab-size:2;
}
.code pre{margin:0;}
.code .k{color:var(--on-well-2);}
.code .v{color:var(--brass-2);}
.code .c{color:var(--ink-3);}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto; margin-top:var(--s3); border-top:1.5px solid var(--rule);}
table{border-collapse:collapse; width:100%; min-width:520px;}
th,td{text-align:left; padding:var(--s2) var(--s3) var(--s2) 0; vertical-align:top;
  border-bottom:1px solid var(--rule-2);}
th{font-family:var(--f-fascia); text-transform:uppercase; letter-spacing:.15em;
  font-size:.64rem; color:var(--ink-2); font-weight:700;}
td:first-child{font-family:var(--f-read); font-size:.85rem; color:var(--ink);}
.yes,.no{font-family:var(--f-fascia); text-transform:uppercase; letter-spacing:.12em;
  font-size:.64rem; font-weight:700; white-space:nowrap;}
.yes{color:var(--ink-2);} .no{color:var(--lamp-red);}
td:last-child{color:var(--ink-2); font-size:.95rem;}

/* ---------- reflex chain ---------- */
.chain{display:flex; flex-wrap:wrap; align-items:stretch; gap:var(--s2); margin-top:var(--s3);}
.chain__step{
  flex:1 1 150px; min-width:140px;
  background:var(--bakelite-2); border:1px solid var(--rule); border-radius:2px;
  padding:var(--s2); box-shadow:inset 0 1px 0 var(--emboss-hi);
  display:flex; flex-direction:column; gap:.3rem;
}
.chain__step--reflex{border-left:3px solid var(--lamp-red);}
.chain__step--agent{border-left:3px solid var(--brass);}
.chain__t{font-family:var(--f-fascia); text-transform:uppercase; letter-spacing:.13em; font-size:.66rem; color:var(--ink);}
.chain__d{font-size:.86rem; color:var(--ink-2); line-height:1.45;}
.chain__key{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s2);}
.chain__keyitem{display:flex; align-items:center; gap:.45rem;
  font-family:var(--f-fascia); font-size:.62rem; text-transform:uppercase; letter-spacing:.13em; color:var(--ink-2);}
.chain__swatch{width:14px;height:3px;flex:none;}

/* ---------- evidence lamps ---------- */
.evidence{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--s3); margin-top:var(--s3);}
.ev{
  background:var(--well); border-radius:4px; border:1px solid rgba(0,0,0,.5);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6); padding:var(--s3);
  display:flex; flex-direction:column; gap:.55rem;
}
.ev__top{display:flex; align-items:center; gap:.55rem;}
.ev__bulb{width:13px;height:13px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);}
.ev__name{font-family:var(--f-fascia); text-transform:uppercase; letter-spacing:.16em; font-size:.70rem; color:var(--on-well);}
.ev__d{color:var(--on-well-2); font-size:.9rem; line-height:1.5;}

/* ---------- bench notes ---------- */
.notes{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:var(--s3); margin-top:var(--s3);}
.note{
  background:var(--bakelite-2); border:1px solid var(--rule); border-radius:2px;
  padding:var(--s3); box-shadow:inset 0 1px 0 var(--emboss-hi),0 1px 2px rgba(0,0,0,.10);
  display:flex; flex-direction:column; gap:.6rem;
}
.note__claim{font-family:var(--f-manual); font-weight:700; font-size:1.02rem; line-height:1.34;}
.note__why{font-size:.92rem; color:var(--ink-2); line-height:1.55;}
.note__tag{font-family:var(--f-fascia); text-transform:uppercase; letter-spacing:.16em;
  font-size:.60rem; color:var(--brass);}

/* ---------- closing ---------- */
.colophon{
  margin-top:var(--s5); padding-top:var(--s4); border-top:2px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; align-items:flex-end;
}
.principle{max-width:38ch; font-family:var(--f-manual); font-size:1.12rem; line-height:1.5;}
.principle strong{display:block;}
.stamp{
  font-family:var(--f-fascia); text-transform:uppercase; letter-spacing:.2em; font-size:.62rem;
  color:var(--ink-3); text-align:right; line-height:2;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* --- standalone theme toggle --- */
.themebtn{
  font-family:var(--f-fascia); text-transform:uppercase; letter-spacing:.16em;
  font-size:.68rem; color:var(--ink-2); cursor:pointer;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.themebtn:hover{color:var(--ink); border-bottom-color:var(--brass);}