/* Machina Institute. Style 02: The Layer Map.
   One stack, top to bottom. Depth from offset and hairline edges, never blur. */

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

:root{
  color-scheme:light;
  --ground:#F7F8FA;
  --ink:#0E1116;
  --ink-2:#454C55;
  --ink-3:#5A6069;
  --edge:#CED4DC;
  --edge-2:#6C747E;
  --drop:rgba(14,17,22,.10);
  --plate:rgba(255,255,255,.72);
  --band:var(--ground);
  --rail:#28598A;

  /* layer spectrum, input at the top to output at the bottom */
  --l1:#E7EDF7; --r1:#28598A;
  --l2:#E1EEF1; --r2:#12666B;
  --l3:#E3F0E7; --r3:#286440;
  --l4:#EDF0DF; --r4:#565B14;
  --l5:#F6EEDE; --r5:#845110;
  --l6:#F9E9E4; --r6:#98392A;
  --l7:#F2E6EF; --r7:#763768;
  --l8:#E8E8F6; --r8:#413E8D;

  --wrap:1120px;
  --gut:16px;
  --skew:-6deg;
  --off:0px;
  --font:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;overflow-x:clip;background:var(--ground);color:var(--ink);
  font-family:var(--font);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}
p{margin:0 0 10px}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.024em;line-height:1.16}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--r1);outline-offset:2px;border-radius:2px}
.band.ink :focus-visible{outline-color:#9CC4EA}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tnum{font-variant-numeric:tabular-nums}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ---------- bands: the page is a stack you descend ---------- */
.band{position:relative;overflow-x:clip;background:var(--band);padding:26px 0 30px;border-top:1px solid var(--edge)}
.band::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--rail);opacity:.85}
.band.l1{--band:var(--l1);--rail:var(--r1)}
.band.l2{--band:var(--l2);--rail:var(--r2)}
.band.l3{--band:var(--l3);--rail:var(--r3)}
.band.l4{--band:var(--l4);--rail:var(--r4)}
.band.l5{--band:var(--l5);--rail:var(--r5)}
.band.l6{--band:var(--l6);--rail:var(--r6)}
.band.l7{--band:var(--l7);--rail:var(--r7)}
.band.l8{--band:var(--l8);--rail:var(--r8)}
.band.ink{
  --band:#0E1116;--ink:#F7F8FA;--ink-2:#C9CFD8;--ink-3:#B4BBC5;
  --edge:#59636F;--edge-2:#96A0AC;--plate:rgba(247,248,250,.075);--drop:rgba(0,0,0,.55);
  color:#F7F8FA;
}

.band-head{margin-bottom:14px}
.idx{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
  border-left:3px solid var(--rail);padding-left:7px;margin-bottom:8px;
}
.kick{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px;font-weight:600}
.band-head h2{font-size:19px;max-width:22ch}
.lede{font-size:13.5px;color:var(--ink-2);margin:8px 0 0;max-width:56ch;line-height:1.62}

/* ---------- the plate: one plane in the stack ---------- */
.stack{padding:2px 22px 8px 4px}
.plate{
  position:relative;display:block;background:var(--plate);
  border:1px solid var(--edge);
  box-shadow:4px 4px 0 0 var(--drop);
  transform:skewX(var(--skew)) translateX(var(--off));
}
.plate>.in{transform:skewX(calc(-1 * var(--skew)));padding:10px 13px}
.plate::after{
  content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--rail);
}
.stack>li+li{margin-top:8px}
/* precise offsets, cycling, so the stack reads as exploded */
.stack>li:nth-child(4n+2){--off:6px}
.stack>li:nth-child(4n+3){--off:12px}
.stack>li:nth-child(4n){--off:6px}

/* ---------- header ---------- */
.top{position:relative;z-index:5;background:var(--ground);border-bottom:1px solid var(--edge)}
.top .wrap{display:flex;align-items:center;column-gap:10px;row-gap:3px;flex-wrap:wrap;padding-top:5px;padding-bottom:5px;overflow-x:clip}
.mark{display:flex;align-items:center;gap:6px;min-width:0;min-height:26px;text-decoration:none;font-weight:680;font-size:12.5px;line-height:1.25;letter-spacing:-.012em}
.mark .glyph{display:block;width:15px;height:15px;flex:none}
.topnav{display:flex;align-items:center;gap:12px;flex-basis:100%;flex-wrap:wrap;min-height:44px}
.topnav a{display:inline-flex;align-items:center;min-height:44px;font-size:10px;line-height:1.3;letter-spacing:.045em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;font-weight:600}
.topnav a:hover{color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding-top:7px;padding-bottom:26px}
.hero h1{font-size:19px;line-height:1.12;letter-spacing:-.032em;max-width:20ch;overflow-wrap:anywhere}
.hero .sub{font-size:12.8px;line-height:1.38;color:var(--ink-2);margin:5px 0 0;max-width:44ch}
.meta{margin:6px 0 0;font-size:11px;line-height:1.18;color:var(--ink-2)}
.meta li{position:relative;padding:0 0 2px 12px;min-width:0}
.meta li b{color:var(--ink);font-weight:650}
.meta .tick{position:absolute;left:0;top:.5em;width:5px;height:5px;background:var(--r1)}
.meter{height:4px;background:rgba(14,17,22,.12);margin:4px 0 0;border:0}
.meter>span{display:block;height:100%;background:var(--r1)}
.signup{display:flex;gap:6px;margin:8px 0 0}
.signup input{
  flex:1 1 60px;min-width:0;height:46px;padding:0 11px;font:inherit;font-size:14px;
  background:#fff;color:var(--ink);border:1px solid var(--edge-2);border-radius:0;
}
.signup input::placeholder{color:#6A727C}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:46px;padding:0 15px;font:inherit;font-size:13.5px;font-weight:650;letter-spacing:-.01em;
  background:var(--ink);color:var(--ground);border:1px solid var(--ink);border-radius:0;
  text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 0 var(--drop);white-space:nowrap;
}
.btn:hover{background:#22282F}
.btn.alt{background:transparent;color:var(--ink);border-color:var(--edge-2);box-shadow:none}
.band.ink .btn{background:var(--ground);color:#0E1116;border-color:var(--ground)}
.band.ink .btn:hover{background:#E4E8ED}
.micro{font-size:11.5px;color:var(--ink-3);margin:6px 0 0}

/* hero figure: the exploded stack */
.fig{margin:20px 0 0}
.fig figcaption{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em;margin:0 0 9px}
.fig figcaption b{color:var(--ink-2);font-weight:650}
.lay .in{display:flex;gap:9px;align-items:flex-start;min-height:44px}
.lay .in>.nm{min-width:0}
.lay .id{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);flex:none;min-width:34px;padding-top:2px;font-variant-numeric:tabular-nums}
.lay .nm{font-size:12.5px;line-height:1.34;font-weight:560;letter-spacing:-.012em;min-width:0;overflow-wrap:anywhere}
.lay.mod{--off:0px !important}
.lay.mod .in{min-height:0;padding:7px 13px;background:rgba(14,17,22,.045)}
.lay.mod .nm{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);font-weight:680}
.lay.hi .in{background:rgba(255,255,255,.5)}
.lay.hi .nm{font-weight:700}
.fig .note{font-size:11.5px;color:var(--ink-3);margin:10px 0 0;max-width:46ch}

/* ---------- proof ---------- */
.proof>li .in{display:flex;align-items:baseline;gap:10px;min-height:40px}
.proof .n{font-size:24px;font-weight:680;letter-spacing:-.04em;line-height:1;min-width:44px;font-variant-numeric:tabular-nums}
.proof .lb{font-size:12.5px;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}

/* ---------- differentiator ---------- */
.diff h2{font-size:21px;letter-spacing:-.03em;max-width:18ch}
.diff .body{font-size:14px;color:var(--ink-2);margin:12px 0 0;max-width:54ch;line-height:1.62}

/* ---------- anatomy ---------- */
.ana .in{display:grid;grid-template-columns:minmax(22px,auto) minmax(0,1fr) minmax(42px,auto);gap:9px;align-items:start;min-height:46px}
.ana .n{font-family:var(--mono);font-size:11px;color:var(--ink-3);padding-top:3px;font-variant-numeric:tabular-nums}
.ana .nm{font-size:13.5px;font-weight:650;letter-spacing:-.015em}
.ana .ds{font-size:12px;color:var(--ink-2);margin:3px 0 0;line-height:1.45}
.ana .mn{font-family:var(--mono);font-size:12px;text-align:right;font-variant-numeric:tabular-nums;padding-top:2px;white-space:nowrap}
.ana .bar{height:3px;background:rgba(14,17,22,.1);margin:6px 0 0}
.ana .bar>span{display:block;height:100%;background:var(--rail)}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:10px 22px 0 4px;padding-top:9px;border-top:2px solid var(--ink);font-size:12.5px;font-weight:650}
.total .v{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}

/* ---------- courses ---------- */
.crs .in{display:grid;grid-template-columns:minmax(20px,auto) minmax(0,1fr);gap:10px;min-height:52px}
.crs .n{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);padding-top:3px;font-variant-numeric:tabular-nums}
.crs .ti{font-size:14px;font-weight:650;letter-spacing:-.018em;display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-width:0}
.crs .ti>span{min-width:0;overflow-wrap:anywhere}
.crs .facts{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin:4px 0 0;font-variant-numeric:tabular-nums}
.crs dl{margin:6px 0 0;font-size:12px;line-height:1.45}
.crs dt{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:650}
.crs dd{margin:1px 0 5px;color:var(--ink-2)}
.tag{
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  border:1px solid var(--rail);color:var(--rail);padding:2px 5px;white-space:nowrap;
}
.crs>li.flag{--off:12px}
.crs>li.flag .in{background:rgba(255,255,255,.55)}
.note{font-size:12.5px;color:var(--ink-2);margin:12px 22px 0 4px;max-width:54ch}

/* ---------- certificate honesty plate ---------- */
.stamp{margin:14px 22px 0 4px;background:var(--plate);border:2px solid var(--ink);box-shadow:5px 5px 0 0 var(--drop);padding:14px}
.stamp q{display:block;overflow-wrap:anywhere;font-size:16px;font-weight:680;letter-spacing:-.02em;line-height:1.24;quotes:none}
.stamp .ex{font-size:12.5px;color:var(--ink-2);margin:9px 0 0;line-height:1.55}
.stamp .rule{display:block;height:2px;background:var(--rail);margin:10px 0 0;width:44px}

/* ---------- lists of points ---------- */
.pts>li .in{display:flex;gap:9px;min-height:44px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--ink-2)}
.pts>li .in>span{min-width:0;overflow-wrap:anywhere}
.pts .ic{flex:none;width:18px;height:18px;color:var(--rail);margin-top:2px}
.aud{margin-top:0}
.aud h3{font-size:15px;margin:0 0 9px;letter-spacing:-.02em}
.aud+.aud{margin-top:22px}

/* ---------- final + footer ---------- */
.fin h2{font-size:21px;letter-spacing:-.03em;max-width:20ch}
.fin .sub{font-size:14px;color:var(--ink-2);margin:9px 0 0}
.fin .cond{font-size:12px;color:var(--ink-3);margin:14px 0 0;max-width:52ch;line-height:1.55}
.foot{background:var(--ground);border-top:1px solid var(--edge);padding:22px 0 84px}
.foot .fn{font-size:11.5px;color:var(--ink-3);margin:10px 0 0;max-width:52ch}
.foot nav{display:flex;flex-wrap:wrap;gap:0 16px;margin:4px 0 0}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;font-size:12px;color:var(--ink-2);text-decoration:none}
.foot nav a:hover{text-decoration:underline}

/* ---------- sticky mobile CTA ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--ground);
  border-top:1px solid var(--edge-2);box-shadow:0 -3px 0 0 rgba(14,17,22,.06);
  padding:8px var(--gut);display:flex;align-items:center;gap:10px;
}
.sticky .lb{font-size:11px;color:var(--ink-2);line-height:1.25;min-width:0;overflow-wrap:anywhere}
.sticky .btn{margin-left:auto;min-height:44px}

/* ================= path.html ================= */
.skip{position:absolute;left:-9999px;top:0;z-index:60;display:inline-flex;align-items:center;min-height:44px;background:var(--ink);color:var(--ground);padding:0 14px;font-size:13px;font-weight:650;text-decoration:none}
.skip:focus{left:8px;top:8px}

.phead{background:var(--ground);border-bottom:1px solid var(--edge);padding:10px 0}
.phead .row{display:flex;align-items:center;gap:10px;min-width:0}
.av{
  flex:none;min-width:38px;min-height:38px;padding:0 6px;background:var(--ink);color:var(--ground);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:680;letter-spacing:.02em;
}
.who{min-width:0;display:block}
.who .nm,.who .wh{display:block}
.who .nm{font-size:13.5px;font-weight:650;letter-spacing:-.015em;line-height:1.2;overflow-wrap:anywhere}
.who .wh{font-size:11px;color:var(--ink-3);margin:2px 0 0;font-variant-numeric:tabular-nums}
.phead .mark{display:none;margin-left:auto;font-size:12px;color:var(--ink-2);align-self:flex-start}
@media (min-width:560px){.phead .mark{display:flex}}

.cad{margin:10px 0 0;padding:9px 11px;background:var(--plate);border:1px solid var(--edge);box-shadow:3px 3px 0 0 var(--drop)}
.cad .hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 8px;font-size:11.5px;color:var(--ink-2)}
.cad .hd b{font-size:12.5px;color:var(--ink);font-weight:650}
.segs{display:flex;gap:5px;margin:7px 0 0}
.segs li{flex:1;height:8px;border:1px solid var(--edge-2);background:transparent}
.segs li.on{background:var(--r3);border-color:var(--r3)}

.resume{margin:12px 0 0;background:#0E1116;color:#F7F8FA;border:1px solid #0E1116;box-shadow:5px 5px 0 0 rgba(14,17,22,.22);padding:14px}
.resume .lb{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#AEB5BF;font-weight:650;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.resume .id{font-family:var(--mono);letter-spacing:.04em;color:#F7F8FA}
.resume h2{font-size:17px;letter-spacing:-.026em;margin:8px 0 0;line-height:1.22;overflow-wrap:anywhere}
.resume .st{font-size:12.5px;color:#C9CFD8;margin:8px 0 0;font-variant-numeric:tabular-nums}
.steps{display:flex;gap:5px;margin:9px 0 0;align-items:center}
.steps li{width:100%;height:6px;background:rgba(247,248,250,.42)}
.steps li.on{background:#F7F8FA}
.steps li.cur{background:#F7F8FA;height:10px}
.resume .btn{margin:12px 0 0;width:100%;background:var(--ground);color:#0E1116;border-color:var(--ground);box-shadow:3px 3px 0 0 rgba(247,248,250,.22);font-size:15px}
.resume .btn:hover{background:#E4E8ED}
.resume :focus-visible{outline-color:#9CC4EA}

.copyb{margin:14px 0 0;background:var(--plate);border:1px solid var(--edge);box-shadow:3px 3px 0 0 var(--drop);padding:11px}
.copyb .lb{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:650;margin:0 0 7px}
.copyb pre{
  margin:0;font-family:var(--mono);font-size:12px;line-height:1.5;white-space:pre-wrap;
  background:#fff;border:1px solid var(--edge);padding:9px;overflow-wrap:break-word;color:var(--ink);
}
.copyb .btn{margin:9px 0 0;min-height:44px}
.copyb .live{font-size:11.5px;color:var(--ink-3);margin:6px 0 0;min-height:1em}

/* the path */
.path{padding:14px 0 8px;overflow-x:clip}
.path h2{font-size:16px;letter-spacing:-.02em}
.nodes{position:relative;padding:12px 22px 8px 4px}
.nodes::before{content:"";position:absolute;left:20px;top:0;bottom:34px;width:2px;background:var(--edge-2)}
.nodes>li{position:relative;margin-bottom:9px}
.nodes>li:nth-child(odd){--off:0px}
.nodes>li:nth-child(even){--off:7px}

.node{display:flex;gap:10px;align-items:stretch;min-width:0}
.mk{
  flex:none;width:34px;height:34px;margin-top:7px;background:var(--ground);
  border:1px solid var(--ink-2);color:var(--ink);
  display:flex;align-items:center;justify-content:center;position:relative;z-index:2;
}
.mk svg{width:19px;height:19px}
.pl{
  flex:1 1 auto;min-width:0;min-height:56px;background:var(--plate);
  border:1px solid var(--edge);box-shadow:4px 4px 0 0 var(--drop);
  transform:skewX(var(--skew)) translateX(var(--off));
  position:relative;
}
.pl::after{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--rail)}
.pl>.in{transform:skewX(calc(-1 * var(--skew)));padding:9px 12px}
.meta-line{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.03em;font-variant-numeric:tabular-nums;margin:0 0 3px}
.ttl{font-size:13.5px;line-height:1.3;font-weight:620;letter-spacing:-.018em;margin:0}
.ttl a{text-decoration:none;display:block;padding:2px 0;overflow-wrap:anywhere}
.ttl a::after{content:"";position:absolute;inset:0;z-index:1}
.ttl a:hover{text-decoration:underline}
.stt{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;line-height:1.4;color:var(--ink-2);margin:5px 0 0}
.stt>span{min-width:0;overflow-wrap:anywhere}
.stt svg{flex:none;width:15px;height:15px;margin-top:1px;color:var(--ink)}
.out{font-size:12px;color:var(--ink-2);margin:7px 0 0;padding-top:7px;border-top:1px dashed var(--edge-2);line-height:1.45}

/* node types */
.t-module{--off:0px !important}
.t-module .node{gap:10px}
.t-module .mk{background:var(--ink);border-color:var(--ink);color:var(--ground);height:52px}
.t-module .pl{--skew:-3deg;min-height:52px;background:rgba(14,17,22,.055);border-color:var(--ink-2);border-width:1px}
.t-module .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-2);text-transform:uppercase;margin:0 0 3px}
.t-module .ttl{font-size:14px;font-weight:700}
.t-day5 .pl{--rail:var(--r5)}
.t-deliverable .pl{--rail:var(--r3)}
.t-project .pl{--rail:var(--r7)}
.t-peer_review .pl{--rail:var(--r7)}
.t-certificate .pl{--rail:var(--r8)}
.t-certificate .mk{border-color:var(--r8)}
.t-session .pl{--rail:var(--r1)}

/* cohort marker cuts across the stack */
.t-cohort{--off:0px !important;margin:14px 0 16px !important}
.cohort{display:flex;align-items:center;gap:9px;overflow:hidden}
.cohort .ln{flex:1 1 auto;height:0;border-top:2px dashed var(--r6)}
.cohort .tx{
  flex:none;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:#fff;background:var(--r6);padding:5px 8px;display:flex;gap:6px;align-items:center;
}
.cohort .tx svg{width:14px;height:14px}

/* node states */
.s-locked .pl{border-style:dashed;box-shadow:none;background:transparent}
.s-locked .mk{border-style:dashed;color:var(--ink-2);border-color:var(--ink-2)}
.s-locked .ttl{color:var(--ink-2);font-weight:560}
.s-locked .pl::after{background:var(--edge-2)}
.s-held .mk{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.s-done .mk{background:var(--ground);border-color:var(--ink)}
.s-needs_revision .pl{--rail:var(--r5);border-color:var(--r5)}
.s-needs_revision .mk{border-color:var(--r5);color:var(--r5)}
.s-retake .pl{--rail:var(--r6);border-color:var(--r6)}
.s-retake .mk{border-color:var(--r6);color:var(--r6)}
.s-skipped .pl{background:transparent}
.s-skipped .ttl{color:var(--ink-2)}
.s-skipped .mk{color:var(--ink-3)}
.s-scheduled .mk{border-style:dotted}
.t-certificate .pl{border-width:2px}
.t-certificate .pl::after{width:5px;left:-2px;top:-2px;bottom:-2px}

.today .pl{border:2px solid var(--ink);box-shadow:6px 6px 0 0 rgba(14,17,22,.2);background:rgba(255,255,255,.9)}
.today .mk{background:var(--r1);border-color:var(--r1);color:#fff}
.today .ttl{font-size:15px;font-weight:700}
.now{
  display:inline-flex;gap:6px;align-items:center;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;background:var(--ink);color:var(--ground);padding:3px 6px;margin:0 0 6px;
}

/* jump + tabs */
.jump{
  position:fixed;right:12px;bottom:76px;z-index:25;
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;
  background:var(--ink);color:var(--ground);border:1px solid var(--ink);
  box-shadow:3px 3px 0 0 rgba(14,17,22,.3);
  font-size:12px;font-weight:650;letter-spacing:.01em;text-decoration:none;
}
.jump svg{width:16px;height:16px}
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--ground);max-width:100%;
  border-top:1px solid var(--edge-2);display:flex;padding:0 2px;
}
.tabs a{
  flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-decoration:none;font-size:10.5px;color:var(--ink-2);font-weight:600;padding:6px 2px;min-width:0;overflow-wrap:anywhere;text-align:center;
  border-top:3px solid transparent;margin:0 1px;
}
.tabs a svg{width:19px;height:19px}
.tabs a[aria-current="page"]{color:var(--ink);border-top-color:var(--r1);font-weight:700}
.pbody{padding-bottom:132px}

/* ---------- motion, guarded ---------- */
@media (prefers-reduced-motion:no-preference){
  .btn,.plate,.pl,.tabs a,.jump{transition:background-color .12s linear,box-shadow .12s linear,transform .12s linear}
  .plate:hover,.pl:hover{box-shadow:6px 6px 0 0 var(--drop)}
}

/* ---------- wider screens ---------- */
@media (min-width:560px){
  :root{--gut:24px}
  .topnav{flex-basis:auto;margin-left:auto;gap:14px}
  .topnav a{font-size:11px;padding:4px 0}
  .mark{font-size:14px;gap:8px;min-height:44px}
  .top .wrap{min-height:52px}
  body{font-size:15px}
  .hero h1{font-size:30px}
  .hero .sub{font-size:15px;line-height:1.5}
  .meta{font-size:13px}
  .band-head h2,.diff h2,.fin h2{font-size:26px}
  .proof{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .proof>li+li{margin-top:0}
  .proof .n{font-size:28px}
  .lay .nm{font-size:14px}
  .lay .id{min-width:40px;font-size:11.5px}
  .stamp q{font-size:20px}
  .who .nm{font-size:15px}
  .resume h2{font-size:20px}
}
@media (min-width:900px){
  :root{--gut:32px;--skew:-8deg}
  .band{padding:44px 0 50px}
  .hero{padding-top:34px;padding-bottom:44px}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
  .hero h1{font-size:42px;letter-spacing:-.035em}
  .hero .sub{font-size:16.5px}
  .fig{margin-top:0}
  .band-head h2,.diff h2,.fin h2{font-size:32px}
  .proof{grid-template-columns:repeat(5,1fr)}
  .proof>li .in{display:block;padding:14px 13px}
  .proof .n{font-size:34px;display:block;margin-bottom:5px}
  .stack{padding:2px 30px 8px 6px}
  .stack>li:nth-child(4n+2){--off:10px}
  .stack>li:nth-child(4n+3){--off:20px}
  .stack>li:nth-child(4n){--off:10px}
  .crs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .crs>li+li{margin-top:0}
  .crs>li.flag{--off:20px}
  .ana .in{grid-template-columns:minmax(30px,auto) minmax(0,1fr) minmax(60px,auto)}
  .ana .nm{font-size:15px}
  .ana .ds{font-size:13px}
  .stamp{padding:24px;margin-right:30px}
  .stamp q{font-size:26px}
  .aud{display:block}
  .sticky{display:none}
  .foot{padding-bottom:36px}
  .pbody{padding-bottom:36px}
  .tabs{position:sticky;top:0;bottom:auto;border-top:0;border-bottom:1px solid var(--edge-2);max-width:var(--wrap);margin:0 auto}
  .tabs a{flex-direction:row;gap:8px;min-height:48px;border-top:0;border-bottom:3px solid transparent;font-size:12.5px}
  .tabs a[aria-current="page"]{border-bottom-color:var(--r1)}
  .jump{bottom:24px;right:24px}
  .nodes{padding-left:8px;padding-right:44px}
  .nodes::before{left:24px}
  .mk{width:42px;height:42px}
  .mk svg{width:22px;height:22px}
  .ttl{font-size:15px}
  .today .ttl{font-size:17px}
  .nodes>li:nth-child(even){--off:14px}
  .pbody .wrap,.pbody .tabs{max-width:900px}
  .resume{padding:24px}
  .resume h2{font-size:24px}
  .resume .btn{width:auto;min-width:200px}
}
@media (min-width:1200px){
  .hero h1{font-size:50px}
  .band-head h2,.diff h2,.fin h2{font-size:36px}
}

/* ---------- print / no-colour safety ---------- */
@media (forced-colors:active){
  .plate,.pl,.mk,.stamp,.cad,.copyb{border:1px solid CanvasText}
  .plate::after,.pl::after{background:CanvasText}
}