/* ============================================================================
   AS-BUILT — styles. One sheet of vellum, two inks.
   Print (default): graphite ink on warm vellum over an engineering grid.
   Blueprint: white line on cyanotype — the night side of the same set.
   Type: Space Grotesk (titles, title blocks) · Newsreader (prose) · JetBrains Mono
   (dimensions, marks, sheet numbers). The same three faces as the main site: same
   author, different drawing.
   Type ladder: 10 · 11 · 12 · 13 · 15 · 17 · 19 + display clamps. Two easings.
   ========================================================================== */
:root{
  --paper:#f1efe9; --paper-2:#e7e3d9; --paper-3:#dcd6c9;
  --ink:#16191c; --ink-2:#2e353b; --ink-3:#58616a; --faint:#8a929a;
  --line:rgba(22,25,28,.12); --line-2:rgba(22,25,28,.24); --line-3:rgba(22,25,28,.48);
  --grid:rgba(31,78,121,.055); --grid-2:rgba(31,78,121,.105);
  --blue:#1f5c9c; --red:#bd3a23; --sea:#3b7890;
  --env:#4a7a43; --geo:#2a63a6; --rp:#8b6a44; --ai:#6a4fae; --sci:#197f71; --edu:#a9487a;
  --c-good:#4b8847; --c-fair:#bf922a; --c-poor:#cb682c; --c-crit:#b1322a;
  --hl:rgba(255,206,64,.34); --on-fill:#fff;
  --shadow:0 18px 50px rgba(40,34,20,.16);
  --disp:"Space Grotesk",system-ui,sans-serif; --serif:"Newsreader",Georgia,serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.2,.8,.2,1);
  --mast:52px; --maxw:1260px; --gut:clamp(18px,4.2vw,60px);
  color-scheme:light;
}
html[data-theme="blueprint"]{
  /* PASS 13 · eye strain (Syed: "check the blueprint for eye strain"): a less saturated blue, off-white rather than white text
     (body ~9:1, secondary ≥4.8:1), a fainter grid and a quieter tooth. The cyanotype stays; the glare goes. */
  --paper:#193a56; --paper-2:#1e4262; --paper-3:#24496b;
  --ink:#dde6ee; --ink-2:#c1d0dd; --ink-3:#9db3c6; --faint:#7f98ae;
  --line:rgba(221,230,238,.11); --line-2:rgba(221,230,238,.22); --line-3:rgba(221,230,238,.44);
  --grid:rgba(221,230,238,.028); --grid-2:rgba(221,230,238,.06);
  --blue:#9fcff2; --red:#f5a58a; --sea:#86c7e2;
  --env:#9fd49a; --geo:#91c3ff; --rp:#e4c392; --ai:#c6b3ff; --sci:#80e0cf; --edu:#f3a9cc;
  --c-good:#9fd49a; --c-fair:#e8cf82; --c-poor:#f4b287; --c-crit:#f39a92;
  --hl:rgba(255,230,120,.16); --on-fill:#193a56;
  --shadow:0 18px 50px rgba(0,10,25,.45);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;scroll-padding-top:calc(var(--mast) + 12px)}
body{margin:0;color:var(--ink-2);font-family:var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px),
                   linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px;
  transition:background-color .5s var(--ease),color .5s var(--ease)}
/* vellum tooth — a fixed turbulence overlay, multiplied on paper, screened on cyanotype */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .32 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme="blueprint"] body::before{mix-blend-mode:screen;opacity:.14}
a{color:inherit;text-decoration:none}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;top:-60px;left:12px;z-index:9000;background:var(--ink);color:var(--paper);padding:9px 14px;font:12px var(--mono)}
.skip:focus{top:10px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sheet[tabindex="-1"]:focus{outline:none}
b,strong{font-weight:600}

/* ---------------------------------------------------------------- masthead */
.mast{position:fixed;top:0;left:0;right:0;height:var(--mast);z-index:60;display:flex;align-items:center;gap:14px;padding:0 var(--gut);
  background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-2)}
.mast .glyph{display:flex;color:var(--ink)} .mast .glyph svg{width:21px;height:21px}
.mast .nm{font:600 15px var(--disp);color:var(--ink);letter-spacing:.005em}
.mast-proj{font:500 10px var(--mono);letter-spacing:.24em;color:var(--ink-3);border:1px solid var(--line-2);padding:3px 7px 2px}
.themesw{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--line-2);color:var(--ink-2);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 10px 4px;cursor:pointer;transition:border-color .2s,color .2s}
.themesw:hover{border-color:var(--ink);color:var(--ink)}
.ts-ico{width:13px;height:13px;border:1.4px solid currentColor;position:relative;background:linear-gradient(135deg,transparent 48%,currentColor 49% 51%,transparent 52%)}
html[data-theme="print"] .ts-to-pr,html[data-theme="blueprint"] .ts-to-bp{display:none}
html[data-theme="blueprint"] .ts-ico{background:#193a56;border-color:#dde6ee}
.mast nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.mast nav a:not(.talk){font:500 13px var(--disp);color:var(--ink-2);position:relative;padding-bottom:2px}
.mast nav a:not(.talk)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.mast nav a:not(.talk):hover{color:var(--ink)} .mast nav a:not(.talk):hover::after{transform:scaleX(1)}
.mast .talk{font:500 12px var(--mono);letter-spacing:.06em;color:var(--paper);background:var(--ink);padding:7px 13px 6px;transition:background .2s}
.mast .talk:hover{background:var(--red)}
.whyq{width:24px;height:24px;border:1px solid var(--line-3);border-radius:50%;background:none;color:var(--ink-2);font:500 12px var(--mono);cursor:pointer;position:relative}
.whyq::after{content:"";position:absolute;inset:-9px}
.whyq:hover,.whyq[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.whypanel{position:fixed;top:calc(var(--mast) + 10px);right:clamp(14px,4vw,40px);z-index:70;width:min(360px,88vw);background:var(--paper);border:1px solid var(--ink);box-shadow:var(--shadow);padding:20px 22px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .25s var(--ease-out),visibility 0s linear .25s}
.whypanel.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s var(--ease-out)}
.whypanel .wp-k{font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.whypanel h2{font:600 22px var(--disp);color:var(--ink);margin:0 0 10px;letter-spacing:-.01em}
.whypanel p{font-size:15px;line-height:1.5;margin:0 0 10px}
.whypanel .wp-q{font:italic 15px var(--serif);color:var(--ink);border-top:1px solid var(--line-2);padding-top:10px;margin:4px 0 0}
.whyx{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--ink-3);font-size:20px;cursor:pointer}

/* ---------------------------------------------------------------- A-000 cover */
/* no z-index here on purpose: the model is position:fixed and has to stack against the sheets
   below the cover (as the key plan), not only inside the hero */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;flex-direction:column}
/* a sheet of tracing vellum over the model's left flank, so the copy always reads */
.hero::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 92%,transparent) 0,color-mix(in srgb,var(--paper) 80%,transparent) 34%,transparent 54%)}
#modelwrap{position:fixed;left:0;top:0;width:100px;height:100px;z-index:2;pointer-events:auto;opacity:0;transition:opacity .45s var(--ease)}
#modelwrap.on{opacity:1}
#modelwrap.slot{z-index:4;background:var(--paper);outline:1px solid var(--ink);outline-offset:0;box-shadow:var(--shadow)}
#modelwrap canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}
#modelwrap canvas:active{cursor:grabbing}
.kp-label{position:absolute;left:0;right:0;bottom:0;display:none;justify-content:space-between;padding:5px 8px 4px;border-top:1px solid var(--line-3);background:var(--paper);font:500 9.5px var(--mono);letter-spacing:.16em;color:var(--ink-3)}
.kp-label i{font-style:normal;color:var(--ink)}
#modelwrap.slot .kp-label{display:flex}
.mtags{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mtag{position:absolute;left:0;top:0;transform:translate(-50%,-100%);font:500 10px var(--mono);letter-spacing:.06em;color:var(--ink);white-space:nowrap;
  background:var(--paper);border:1px solid var(--ink);padding:3px 6px 2px;opacity:0;transition:opacity .35s;will-change:transform}
.mtag::after{content:"";position:absolute;left:clamp(3px,var(--lx,50%),calc(100% - 3px));top:100%;width:1px;height:max(0px,var(--lh,12px));background:var(--ink)}
.mtag.edge::after{display:none}
.mtag.on{opacity:1}
.mtag b{font-weight:500;color:var(--mc,var(--ink))}
.mtag.warn{border-color:var(--red);color:var(--red)} .mtag.warn::after{background:var(--red)}
.mtag .mt-f{display:block;font:italic 13px/1.3 var(--serif);letter-spacing:0;color:var(--ink-2);margin-top:3px;white-space:normal;width:max-content;max-width:300px}
.mtag .mt-go{display:block;font:500 9.5px var(--mono);color:var(--red);margin-top:4px;letter-spacing:.06em}
.mtag.now{background:var(--ink);color:var(--paper);border-color:var(--ink)} .mtag.now b{color:var(--paper)}
#modelwrap.slot:not(.in-drill) .mtag{display:none}
.mfb{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
.mfb svg{width:min(88%,900px);height:auto;color:var(--ink)}
#modelwrap.nogl .mfb{display:flex} #modelwrap.nogl canvas{display:none}

.hero-frame{position:absolute;inset:calc(var(--mast) + 12px) 14px 14px 14px;border:1px solid var(--line-3);z-index:3;pointer-events:none;opacity:0;transition:opacity .8s var(--ease) .2s}
.hero-frame::after{content:"";position:absolute;inset:18px;border:1px solid var(--line-2)}
body.drawn .hero-frame{opacity:1}
.zt{position:absolute;font:500 9px var(--mono);color:var(--ink-3);transform:translate(-50%,-50%)}
.zx{top:9px} .zx.zb{top:auto;bottom:0;transform:translate(-50%,-2px)}
.zy{left:9px} .zy.zr{left:auto;right:0;transform:translate(-3px,-50%)}
.zk{position:absolute;background:var(--line-3)}
.zkx{top:0;width:1px;height:18px} .zky{left:0;width:18px;height:1px}

.overture{position:absolute;left:calc(14px + 30px);top:calc(var(--mast) + 42px);z-index:6;pointer-events:none;font:500 11px var(--mono);letter-spacing:.14em;color:var(--ink-3);transition:opacity .6s}
.overture p{margin:0 0 5px}
.ov-cur{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
body.drawn .overture{opacity:0}

.hero-bio{position:relative;z-index:5;margin:clamp(96px,17vh,190px) 0 26px clamp(40px,6vw,96px);width:min(46%,36rem);
  opacity:0;transform:translateY(10px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
body.drawn .hero-bio{opacity:1;transform:none}
.overline{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;white-space:nowrap}
.name{font:700 clamp(46px,6.6vw,104px)/.9 var(--disp);letter-spacing:-.035em;color:var(--ink);margin:0 0 22px;display:flex;flex-direction:column}
.name em{font-style:normal;font-size:.42em;letter-spacing:.01em;color:var(--ink-3);vertical-align:.9em;margin-left:.12em}
.name .a{position:relative;display:inline-block;width:max-content}
.name .a::after{content:"";position:absolute;left:0;right:-.06em;bottom:.02em;height:.07em;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out) .6s}
body.drawn .name .a::after{transform:scaleX(1)}
.thesis{font-size:clamp(18px,1.55vw,22px);line-height:1.48;color:var(--ink);margin:0 0 14px;max-width:34em}
.thesis.aim{font-size:clamp(16px,1.25vw,18px);color:var(--ink-2);font-style:italic}
.trinity{font:500 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 0;padding-top:12px;border-top:1px solid var(--line-2);max-width:34em}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px;position:relative}
.btn{display:inline-flex;align-items:center;gap:8px;font:500 13px var(--disp);color:var(--ink);border:1px solid var(--ink);padding:11px 18px 10px;background:var(--paper);transition:background .2s,color .2s,box-shadow .2s}
.btn:hover{box-shadow:4px 4px 0 var(--ink)}
.btn.primary{background:var(--ink);color:var(--paper)} .btn.primary:hover{background:var(--red);border-color:var(--red);box-shadow:4px 4px 0 var(--ink)}
.sidx{position:relative}
.sidx-t{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);letter-spacing:.05em;color:var(--ink-2);background:none;border:1px dashed var(--line-3);padding:10px 14px 9px;cursor:pointer}
.sidx-t .sq{width:8px;height:8px;border:1.4px solid var(--red)}
.sidx-l{position:absolute;left:0;top:calc(100% + 6px);z-index:20;list-style:none;margin:0;padding:6px 0;min-width:320px;background:var(--paper);border:1px solid var(--ink);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.sidx.open .sidx-l{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.sidx-l a{display:grid;grid-template-columns:54px 1fr;column-gap:10px;padding:7px 14px;align-items:baseline}
.sidx-l a:hover{background:var(--paper-2)}
.sidx-l b{font:500 11px var(--mono);color:var(--red)} .sidx-l span{font:600 14px var(--disp);color:var(--ink)} .sidx-l i{grid-column:2;font:italic 13px var(--serif);color:var(--ink-3)}

.hero-kit{position:absolute;right:clamp(40px,5vw,80px);top:calc(var(--mast) + 46px);z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:8px;color:var(--ink);
  opacity:0;transition:opacity .8s .5s} body.drawn .hero-kit{opacity:1}
.north{width:54px;height:54px}
.scalebar{width:150px;height:25px}
.sunread{font:500 10px var(--mono);letter-spacing:.1em;color:var(--ink-3);margin:0}

/* PASS 2 — the model toolbar: two compact rows (layers · phasing) and a one-line caption */
.layers{position:absolute;left:calc(46% + 24px);right:clamp(28px,3vw,52px);bottom:34px;z-index:5;background:color-mix(in srgb,var(--paper) 88%,transparent);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid var(--ink);padding:10px 12px 9px;display:flex;flex-direction:column;gap:7px;
  opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease-out) .7s,transform .8s var(--ease-out) .7s}
body.drawn .layers{opacity:1;transform:none}
.tb-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tb-k{font:600 9.5px var(--mono);letter-spacing:.2em;color:var(--ink);width:64px;flex:none}
.ly-row{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.ly{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line-2);padding:6px 9px 5px;cursor:pointer;color:var(--ink-2);font:600 12px var(--disp);transition:border-color .2s,background .2s,color .2s}
.ly:hover{border-color:var(--ink)}
.ly[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.ly-sw{width:14px;height:8px;border:1px solid currentColor;flex:none}
.ly-model{background:var(--paper)} .ly-condition{background:linear-gradient(90deg,var(--c-good) 33%,var(--c-fair) 33% 66%,var(--c-crit) 66%)}
.ly-hazmat{background:repeating-linear-gradient(45deg,var(--red) 0 2px,transparent 2px 4px)} .ly-climate{background:linear-gradient(0deg,var(--sea) 55%,transparent 55%)}
.ly-hierarchy{background:linear-gradient(0deg,currentColor 0 1px,transparent 1px 3px,currentColor 3px 4px,transparent 4px 6px,currentColor 6px 7px,transparent 7px)}
.ly-intel{background:radial-gradient(circle,var(--blue) 0 2px,transparent 2.5px) 0 0/5px 5px}
.ly-t{white-space:nowrap}
.ly-cap{font-size:14px;line-height:1.35;color:var(--ink-2);margin:0;padding-top:7px;border-top:1px solid var(--line-2)}
.ph-row{display:flex;gap:4px;align-items:stretch}
.ph-b{display:flex;align-items:baseline;gap:6px;background:none;border:1px solid var(--line-2);padding:5px 9px 4px;cursor:pointer;color:var(--ink-2);transition:border-color .2s,background .2s}
.ph-b b{font:600 12px var(--disp)} .ph-b i{font:500 9.5px var(--mono);font-style:normal;opacity:.8}
.ph-b:hover{border-color:var(--ink)} .ph-b[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.ph-play{background:none;border:1px dashed var(--line-3);font:500 10px var(--mono);letter-spacing:.06em;color:var(--ink-2);cursor:pointer;padding:0 9px}
.ph-play:hover{border-color:var(--ink);color:var(--ink)}
.ly-sun{margin-left:auto;background:none;border:0;padding:0;font:500 10px var(--mono);letter-spacing:.06em;color:var(--blue);cursor:pointer;text-transform:uppercase}
.ly-sun:hover{text-decoration:underline} .ly-sun.run{color:var(--red)}

.hero-tb{position:absolute;left:clamp(40px,6vw,96px);right:auto;bottom:34px;z-index:5;display:grid;grid-template-columns:repeat(3,auto);max-width:calc(46% - clamp(40px,6vw,96px));border:1px solid var(--ink);background:color-mix(in srgb,var(--paper) 90%,transparent);
  opacity:0;transition:opacity .8s .9s} body.drawn .hero-tb{opacity:1}
.tb-c{display:flex;flex-direction:column;gap:2px;padding:6px 12px 5px;border-left:1px solid var(--line-3)}
.tb-c:first-child,.tb-c:nth-child(4){border-left:0} .tb-c:nth-child(n+4){border-top:1px solid var(--line-3)}
.tb-c i{font:500 8.5px var(--mono);letter-spacing:.14em;color:var(--ink-3);font-style:normal}
.tb-c b{font:500 11px var(--mono);letter-spacing:.04em;color:var(--ink);white-space:nowrap}

/* ---------------------------------------------------------------- the set */
/* no z-index on purpose: the docked model (#modelwrap, fixed) must be able to slot BETWEEN a sheet and
   that sheet's own stage chrome in A-002, so main must not form a stacking context of its own */
main#doc{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sheet{position:relative;margin:56px 0 0;padding:26px clamp(18px,3vw,40px) clamp(34px,5vw,56px);border:1px solid var(--ink);background:color-mix(in srgb,var(--paper) 72%,transparent)}
.sheet::before{content:"";position:absolute;inset:7px;border:1px solid var(--line-2);pointer-events:none}
/* backwards, not both: a filled transform keeps the sheet a stacking context forever, which traps A-002's stage
   chrome under the docked model */
.sheet.in{animation:sheetIn .7s var(--ease-out) backwards}
@keyframes sheetIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* the sheet header — a title-block strip across the top */
.sh{display:grid;grid-template-columns:auto 1.2fr 1.6fr auto auto;border:1px solid var(--ink);margin:0 0 30px;position:relative;z-index:1;background:var(--paper)}
.sh-c{display:flex;flex-direction:column;gap:2px;padding:6px 12px 6px;border-left:1px solid var(--line-3);min-width:0}
.sh-c:first-child{border-left:0}
.sh-c i{font:500 8.5px var(--mono);letter-spacing:.15em;color:var(--ink-3);font-style:normal}
.sh-c b{font:500 12px var(--mono);letter-spacing:.04em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-no b{font:700 19px var(--disp);letter-spacing:0;color:var(--red)}
.sh-t b{font:600 15px var(--disp);letter-spacing:.02em;text-transform:uppercase}
/* the drawing title: a split bubble, a heavy title over a double underline, a scale note */
.dt{display:flex;align-items:flex-start;gap:16px;margin:0 0 24px;position:relative;z-index:1}
.bub{flex:none;display:block;width:58px;height:58px;position:relative}
.bub svg{display:block;width:100%;height:100%;overflow:visible}
.bub.sm{width:38px;height:38px}
.dt-b h2{font:700 clamp(28px,3.4vw,46px)/1 var(--disp);letter-spacing:-.02em;color:var(--ink);margin:4px 0 0;text-transform:uppercase;display:inline-block;
  padding-bottom:8px;border-bottom:3px solid var(--ink);box-shadow:0 5px 0 -3.5px var(--ink);position:relative}
.dt-s{font:500 11.5px var(--mono);letter-spacing:.04em;color:var(--ink-3);margin:14px 0 0;max-width:70ch;line-height:1.5}
.lede{font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:var(--ink);max-width:44em;margin:0 0 30px}
/* match lines between sheets */
.match{display:flex;align-items:center;gap:14px;margin:34px 0 0;position:relative;z-index:3}
.match .ml{flex:1;height:0;border-top:3px dashed var(--ink);opacity:.8}
.match .mt{font:500 11px var(--mono);letter-spacing:.1em;color:var(--ink-2);white-space:nowrap}
.match .mt b{color:var(--red);font-weight:600}
.match:hover .mt{color:var(--ink)} .match:hover .ml{opacity:1}

/* the bubble reference — SEE 2 / A-501 */
.bref{display:inline-block;width:44px;height:44px;position:relative;vertical-align:middle;margin-left:5px;transition:transform .2s var(--ease-out)}
.bref svg{display:block;width:100%;height:100%;overflow:visible}
.bref circle,.bub circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.3;transition:fill .2s} .bref path,.bub path{stroke:var(--ink);stroke-width:1}
.bref .br-n,.bub .br-n{font:700 14px var(--disp);fill:var(--ink);text-anchor:middle} .bref .br-s,.bub .br-s{font:500 8.6px var(--mono);fill:var(--ink-2);text-anchor:middle}
.bref:hover{transform:scale(1.08)} .bref:hover circle{fill:var(--hl)}
.bref.inl{width:36px;height:36px;margin:0 4px}

/* ---------------------------------------------------------------- A-001 general notes */
.nt-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}
.kp-col{position:sticky;top:calc(var(--mast) + 20px);display:flex;flex-direction:column;gap:10px}
.kp-slot{width:100%;aspect-ratio:4/3.2;border:1px dashed var(--line-3)}
.kp-cap{font-size:14px;line-height:1.4;color:var(--ink-3);margin:0} .kp-cap b{display:block;font:600 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:3px}
.gn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.gn-i{display:grid;grid-template-columns:44px 1fr;gap:4px;padding:18px 18px 18px 0;border-bottom:1px solid var(--line-2);outline:none;position:relative;transition:background .25s}
.gn-i:nth-child(odd){border-right:1px solid var(--line-2)} .gn-i:nth-child(even){padding-left:18px}
.gn-i:hover,.gn-i:focus-visible{background:color-mix(in srgb,var(--hl) 50%,transparent)}
.gn-n{width:30px;height:30px;border:1.4px solid var(--ink);border-radius:50%;display:grid;place-items:center;font:700 13px var(--disp);color:var(--ink)}
.gn-b h3{font:700 19px/1.2 var(--disp);color:var(--ink);margin:3px 0 7px;letter-spacing:-.005em}
.gn-b p{font-size:16px;line-height:1.52;margin:0 0 12px}
.gn-f{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.gn-st{font:500 11px var(--mono);color:var(--ink-3);letter-spacing:.03em} .gn-st b{font:700 17px var(--disp);color:var(--ink);margin-right:7px;letter-spacing:0}
.gn-refs{display:flex;align-items:center} .gn-refs i{font:500 9.5px var(--mono);letter-spacing:.16em;color:var(--ink-3);font-style:normal;margin-right:2px}
.gn-i.in{animation:noteIn .6s var(--ease-out) both}
.gn-i:nth-child(2).in{animation-delay:.06s}.gn-i:nth-child(3).in{animation-delay:.12s}.gn-i:nth-child(4).in{animation-delay:.18s}.gn-i:nth-child(5).in{animation-delay:.24s}.gn-i:nth-child(6).in{animation-delay:.3s}
@keyframes noteIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* schedules (tables) */
.qs{margin-top:42px}
.qs-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:6px;margin:30px 0 0}
.qs-h span{font:700 14px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.qs-h i{font:italic 14px var(--serif);color:var(--ink-3)}
.sched{width:100%;border-collapse:collapse;font-size:15.5px}
.sched th{font:500 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:9px 10px 7px;border-bottom:1px solid var(--ink)}
.sched td{padding:11px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle;color:var(--ink-2);line-height:1.4}
.sched .mk{font:500 11px var(--mono);color:var(--red);white-space:nowrap;width:1%}
.sched .q{width:1%;white-space:nowrap} .sched .q b{font:700 26px var(--disp);color:var(--ink);letter-spacing:-.01em}
.sched .see{width:1%;text-align:right}
.qs-t tbody tr{cursor:pointer;transition:background .2s}
.qs-t tbody tr:hover{background:color-mix(in srgb,var(--hl) 55%,transparent)}
.qs-t tbody tr.in{animation:noteIn .5s var(--ease-out) both}

/* ---------------------------------------------------------------- A-002 diagrams */
.deck{border:1px solid var(--ink);background:var(--paper)}
.dk-tabs{display:flex;border-bottom:1px solid var(--ink);overflow-x:auto;scrollbar-width:none}
.dk-tab{flex:1;display:flex;align-items:baseline;gap:8px;background:none;border:0;border-right:1px solid var(--line-2);padding:13px 16px 11px;font:600 14px var(--disp);color:var(--ink-3);cursor:pointer;white-space:nowrap;transition:color .2s,background .2s}
.dk-tab:last-child{border-right:0}
.dk-tab .dk-n{font:500 10px var(--mono);color:var(--red)}
.dk-tab:hover{color:var(--ink)} .dk-tab[aria-selected="true"]{color:var(--paper);background:var(--ink)}
.dk-tab[aria-selected="true"] .dk-n{color:var(--paper);opacity:.7}
.dk-panel{margin:0;padding:22px clamp(14px,2.4vw,30px) 20px}
.dk-cap{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.dk-cap b{font:700 21px var(--disp);color:var(--ink);letter-spacing:-.01em} .dk-cap span{font:italic 15px var(--serif);color:var(--ink-3)}
.dk-stage svg{width:100%;height:auto;display:block}
.dk-note{font:500 12px var(--mono);letter-spacing:.02em;color:var(--ink);background:var(--paper-2);border-left:3px solid var(--red);padding:9px 12px;margin:10px 0 0;line-height:1.5}
.dk-panel.on .fig *{animation:none}
.hr{cursor:pointer;outline:none} .hr .hr-who{opacity:0;transition:opacity .25s;fill:var(--red)}
.hr.on .hr-who,.hr:focus-visible .hr-who{opacity:1}
.hr.on rect{stroke-width:1.6}
.pg{cursor:pointer;outline:none} .pg:hover rect,.pg:focus-visible rect{stroke-width:1.8} .pg:hover text{font-weight:600;fill:var(--ink)}
.lc .lc-hit{cursor:ew-resize}

/* ---------------------------------------------------------------- figures (shared) */
.fig{display:block;width:100%;height:auto;overflow:visible}
.fig .ft{font:400 8.2px var(--mono);fill:var(--ink-2)}
.fig .fts{font:400 7.2px var(--mono);fill:var(--ink-3);letter-spacing:.03em}
.fig .fth{font:600 10px var(--disp);fill:var(--ink)}
.fig .ftb{font:500 7.4px var(--mono);fill:var(--blue)}
.fig.dg .ft{font-size:10px} .fig.dg .fts{font-size:9px} .fig.dg .ftb{font-size:9px}
.fig .spin{animation:spin 16s linear infinite;animation-play-state:paused}
.fig.live .spin,.dframe:hover .fig .spin{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.fig .cells rect{transition:opacity .4s}

/* ---------------------------------------------------------------- A-100 portfolio plan */
.plan-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start}
.kplan{margin:0;border:1px solid var(--ink);background:var(--paper)}
.kp-stage{position:relative}
.kp-svg{display:block;width:100%;height:auto}
.kplan figcaption{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--ink);padding:7px 12px 6px;font:500 9.5px var(--mono);letter-spacing:.14em;color:var(--ink-3)}
.reg{cursor:pointer;outline:none} .reg .reg-p{transition:fill-opacity .25s,stroke-width .25s}
.reg.on .reg-p{stroke-width:1.8} .reg.on path:first-child{fill:var(--hl)}
.reg-l{fill:var(--ink);pointer-events:none;paint-order:stroke;stroke:var(--paper);stroke-width:4px}
.stn{cursor:pointer;outline:none;transition:transform .2s}
.stn circle{transition:r .2s}
.stn.on circle:first-child,.stn:focus-visible circle:first-child{stroke-width:2.6}
.kp-call{position:absolute;z-index:4;transform:translate(14px,-50%);max-width:250px;background:var(--paper);border:1px solid var(--ink);padding:8px 10px;box-shadow:var(--shadow);pointer-events:none}
.kp-call.flip{transform:translate(calc(-100% - 14px),-50%)}
.kp-call b{display:block;font:700 14px var(--disp);color:var(--ink)} .kp-call span{display:block;font-size:14px;line-height:1.35;color:var(--ink-2);margin-top:2px}
.kp-call em{display:block;font:500 10px var(--mono);font-style:normal;color:var(--red);margin-top:5px}
.plan-side{display:flex;flex-direction:column;gap:8px}
.ps-h{font:700 12px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:5px;margin-top:6px}
.ps-reg{list-style:none;margin:0;padding:0}
.ps-reg li{display:flex;gap:12px;align-items:baseline;padding:6px 4px;border-bottom:1px solid var(--line-2);cursor:default;transition:background .2s}
.ps-reg li.on{background:var(--hl)} .ps-reg b{font:500 10.5px var(--mono);color:var(--red)} .ps-reg span{font:600 15px var(--disp);color:var(--ink)}
.ps-note{font-size:15px;line-height:1.45;margin:4px 0 8px;color:var(--ink-2)}
.ps-stn{list-style:none;margin:0;padding:0}
.ps-stn button{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-2);padding:7px 4px;cursor:pointer;color:inherit;font:inherit}
.ps-stn button:hover,.ps-stn button:focus-visible{background:var(--paper-2)}
.ps-stn b{font:600 14px var(--disp);color:var(--ink)} .ps-stn span{font-size:14px;line-height:1.35;color:var(--ink-3)}

/* ---------------------------------------------------------------- A-200 sections */
.sec-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:34px;align-items:start}
.bldg{position:relative;padding-left:96px;margin-top:10px}
.shaft{position:absolute;left:2px;top:150px;bottom:360px;width:22px;border-left:1px solid var(--line-3);border-right:1px solid var(--line-3);
  background:repeating-linear-gradient(45deg,transparent 0 8px,var(--line) 8px 9px)}
.shaft-k{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font:500 8.5px var(--mono);letter-spacing:.14em;color:var(--ink-3)}
.shaft .car{position:absolute;left:2px;right:2px;top:0;height:30px;border:1.4px solid var(--red);background:var(--paper);will-change:transform}
.shaft .car b{position:absolute;inset:4px 5px;border-left:1px solid var(--red);border-right:1px solid var(--red)}
.roof-add{display:block;position:relative;margin:0 6% 0;padding:18px 20px 16px;border:1.4px dashed var(--ink-3);border-bottom:0;color:var(--ink-2);transition:border-color .25s,background .25s}
.roof-add:hover{border-color:var(--red);background:color-mix(in srgb,var(--hl) 40%,transparent)}
.ra-k{display:block;font:600 11px var(--mono);letter-spacing:.14em;color:var(--red);margin-bottom:5px}
.ra-b{display:block;font-size:16px;line-height:1.45;max-width:46em} .ra-go{display:block;font:500 10.5px var(--mono);color:var(--ink-3);margin-top:6px}
.roofline{position:relative;height:30px;margin:0 6%;border-bottom:3px solid var(--ink)}
.roofline .ru{position:absolute;bottom:0;border:1.3px solid var(--ink);background:var(--paper)}
.ru1{left:14%;width:64px;height:20px} .ru2{left:26%;width:40px;height:14px}
.roofline .pv{position:absolute;right:12%;bottom:0;width:120px;height:12px;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 12px);border-top:1.3px solid var(--ink);transform:skewX(-30deg)}
.rf-k{position:absolute;left:-88px;bottom:30px;font:500 9.5px var(--mono);color:var(--ink-3);letter-spacing:.06em}
.roofline::before,.roofline::after{content:"";position:absolute;bottom:-3px;width:5px;height:14px;background:var(--ink)}
.roofline::before{left:0} .roofline::after{right:0}

.lvl{position:relative;margin:0 6%}
.lvl .slab{height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='15'%3E%3Ccircle cx='4' cy='5' r='.9' fill='%2316191c' opacity='.55'/%3E%3Ccircle cx='15' cy='10' r='.8' fill='%2316191c' opacity='.5'/%3E%3Cpath d='M9 12l2-2.4 1.5 2.8z' fill='none' stroke='%2316191c' stroke-width='.6' opacity='.55'/%3E%3C/svg%3E"),var(--paper-2);
  border-top:2px solid var(--ink);border-bottom:1.4px solid var(--ink);position:relative;z-index:1}
html[data-theme="blueprint"] .lvl .slab{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='15'%3E%3Ccircle cx='4' cy='5' r='.9' fill='%23eaf3fb' opacity='.55'/%3E%3Ccircle cx='15' cy='10' r='.8' fill='%23eaf3fb' opacity='.5'/%3E%3Cpath d='M9 12l2-2.4 1.5 2.8z' fill='none' stroke='%23eaf3fb' stroke-width='.6' opacity='.55'/%3E%3C/svg%3E"),var(--paper-2)}
.lvl .storey{position:relative;padding:18px clamp(12px,2vw,24px) 26px;border-left:5px solid var(--ink);border-right:5px solid var(--ink);min-height:140px}
.lvl.tall .storey{min-height:230px;background:linear-gradient(transparent 49.6%,var(--line) 49.6% 50.4%,transparent 50.4%)}
/* the level marker: a quartered datum circle on the floor line, level name above it, elevation below */
.datum{position:absolute;left:-88px;top:-23px;width:88px;height:44px;z-index:2}
.datum svg{position:absolute;left:0;top:14px;width:18px;height:18px} .datum svg circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.3} .datum svg path{fill:var(--ink)}
.datum b{position:absolute;left:24px;top:4px;font:700 13px/1 var(--disp);color:var(--ink);white-space:nowrap} .datum span{position:absolute;left:24px;top:27px;font:500 9px/1 var(--mono);color:var(--ink-3);white-space:nowrap}
.datum::after{content:"";position:absolute;left:18px;right:0;top:23px;height:1px;background:var(--ink)}
.svc{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-4px 0 14px}
.svc-k{font:500 8.5px var(--mono);letter-spacing:.16em;color:var(--ink-3);margin-right:4px;background:var(--paper);padding:2px 4px}
.pipe{font:500 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:3px 10px 2px;border:1px solid var(--line-3);border-radius:10px;position:relative;background:var(--paper)}
.pipe::after{content:"›";margin-left:6px;color:var(--blue)}
.lvl-card{position:relative;background:var(--paper);border:1px solid var(--ink);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--line-2)}
.lvl-head{display:grid;grid-template-columns:1fr;gap:4px;width:100%;text-align:left;background:none;border:0;padding:16px 18px 14px;color:inherit;font:inherit;cursor:pointer}
.lh-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lh-yr{font:600 11px var(--mono);letter-spacing:.08em;color:var(--red)}
.lh-place{font:500 10px var(--mono);letter-spacing:.06em;color:var(--ink-3);margin-left:auto}
.dticks{display:inline-flex;gap:3px} .dticks i{width:8px;height:8px;display:block;border:1px solid var(--ink)}
.lh-org{font:700 clamp(20px,2vw,26px)/1.1 var(--disp);color:var(--ink);letter-spacing:-.01em;margin-top:4px}
.lh-ro{font:500 12px var(--mono);letter-spacing:.02em;color:var(--ink-2)}
.lh-sum{font-size:16.5px;line-height:1.48;color:var(--ink-2);margin-top:6px;max-width:48em}
.lh-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.lh-kpi{font:500 11px var(--mono);color:var(--ink-3);display:flex;align-items:baseline;gap:8px} .lh-kpi b{font:700 22px var(--disp);color:var(--ink);white-space:nowrap}
.lh-tag{font:italic 14px var(--serif);color:var(--ink-3);flex:1;min-width:14em}
.lh-x{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);padding:6px 10px 5px;white-space:nowrap}
.lvl-head:hover .lh-x{background:var(--ink);color:var(--paper)}
.lvl.open .lh-x{background:var(--red);border-color:var(--red);color:#fff}
.lvl-body{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.lvl-pad{padding:4px 18px 20px;border-top:1px dashed var(--line-3)}
.lvl-tx{font-size:17px;line-height:1.56;color:var(--ink);max-width:48em;margin:16px 0 14px}
.lvl-tx b{font-weight:600;background:linear-gradient(transparent 62%,var(--hl) 62%)}
.lvl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--line-2);margin:4px 0 18px}
.lvl-stats div{padding:10px 12px 9px;border-left:1px solid var(--line-2)} .lvl-stats div:first-child{border-left:0;padding-left:0}
.lvl-stats b{display:block;font:700 20px var(--disp);color:var(--ink)} .lvl-stats span{font:500 10.5px var(--mono);color:var(--ink-3);line-height:1.35}
.roster{margin:0 0 16px;border:1px solid var(--line-2)}
.rs-h{font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:6px 10px;border-bottom:1px solid var(--line-2)}
.rs{display:grid;grid-template-columns:70px 1fr auto;gap:10px;padding:6px 10px;border-bottom:1px solid var(--line);font-size:14.5px}
.rs:last-child{border-bottom:0} .rs span{font:500 11px var(--mono);color:var(--red)} .rs b{font:600 14px var(--disp);color:var(--ink)} .rs i{font:italic 14px var(--serif);color:var(--ink-3)}

/* floor plan: rooms with walls, door swings and room tags */
.fplan{margin-top:8px}
.fp-h{display:flex;justify-content:space-between;gap:10px;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.fp-h i{font:italic 14px var(--serif);letter-spacing:0;text-transform:none;color:var(--ink-3)}
.fp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));border:5px solid var(--ink);background:var(--ink);gap:3px}
.room{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:118px;padding:12px 12px 12px;background:var(--paper);border:0;text-align:left;cursor:pointer;color:inherit;font:inherit;transition:background .25s}
.room .door{position:absolute;right:10px;bottom:-3px;width:26px;height:26px;border-top:1px solid var(--ink);border-left:1px solid var(--ink);border-top-left-radius:26px;background:transparent;pointer-events:none}
.room .door::after{content:"";position:absolute;right:-1px;bottom:0;width:30px;height:4px;background:var(--paper);transform:translateY(3px)}
.rm-n{font:700 10.5px var(--mono);color:var(--paper);background:var(--c);padding:2px 6px 1px}
.rm-t{font:700 15px/1.2 var(--disp);color:var(--ink);max-width:14em}
.rm-k{font:500 10px var(--mono);color:var(--ink-3);letter-spacing:.02em;margin-top:auto;padding-right:28px}
.room:hover{background:color-mix(in srgb,var(--c) 11%,var(--paper))}
.room.on{background:color-mix(in srgb,var(--c) 18%,var(--paper));box-shadow:inset 0 0 0 2px var(--c)}
.rds{margin-top:14px;border:1px solid var(--ink);border-left:6px solid var(--c,var(--ink));background:var(--paper);animation:rdsIn .35s var(--ease-out)}
@keyframes rdsIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.rds-h{display:flex;align-items:baseline;gap:12px;padding:10px 14px 8px;border-bottom:1px solid var(--line-2)}
.rds-k{font:500 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .rds-h b{font:700 16px var(--disp);color:var(--ink);flex:1}
.rds-x{background:none;border:0;font-size:20px;color:var(--ink-3);cursor:pointer;line-height:1}
.rds-bl{margin:0;padding:12px 16px 4px 34px} .rds-bl li{font-size:16px;line-height:1.52;margin:0 0 9px;padding-left:4px} .rds-bl li::marker{content:"— ";color:var(--ink-3)}
.rds-bl b{font-weight:600}
.rds-ev{display:flex;align-items:center;gap:4px;font:500 11px var(--mono);letter-spacing:.04em;color:var(--ink);padding:8px 14px 12px}
.rds-ev:hover{color:var(--red)}

/* the mezzanine sits inside DFO's double height; the annex is off the main building */
.lvl-actmgr{margin-left:14%}
.lvl-actmgr .storey{border-left-style:dashed;border-left-width:2px}
.ground-row{position:relative;display:grid;grid-template-columns:1fr 0.8fr;align-items:end;margin:0 6%}
.ground-row .lvl{margin:0;grid-column:2}
.walkway{grid-column:1;grid-row:1;align-self:end;height:34px;border-top:1.3px dashed var(--ink-3);border-bottom:1.3px dashed var(--ink-3);margin:0 0 20px 0;position:relative;display:flex;align-items:center;justify-content:center}
.walkway span{font:500 9px var(--mono);letter-spacing:.16em;color:var(--ink-3)}
.lvl.annex .storey{border-left-width:3px;border-right-width:3px}
.lvl.annex .datum{left:-104px}
.grade{position:relative;height:34px;margin:0 -24px 0 -96px;border-top:3px solid var(--ink);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='18'%3E%3Cpath d='M0 18L13 5M13 18L26 5' stroke='%2316191c' stroke-width='.8' opacity='.45'/%3E%3C/svg%3E")}
html[data-theme="blueprint"] .grade{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='18'%3E%3Cpath d='M0 18L13 5M13 18L26 5' stroke='%23eaf3fb' stroke-width='.8' opacity='.45'/%3E%3C/svg%3E")}
.grade span{position:absolute;right:30px;top:6px;font:600 11px var(--mono);letter-spacing:.1em;color:var(--ink);background:var(--paper);padding:2px 8px}
/* below grade: the soil hatch outside the retaining walls */
.lvl.below,.lvl.soil{margin:0;padding:0 6%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22'%3E%3Cpath d='M0 22L15 7M15 22L30 7' stroke='%2316191c' stroke-width='.7' opacity='.28'/%3E%3Ccircle cx='24' cy='16' r='1' fill='%2316191c' opacity='.3'/%3E%3C/svg%3E")}
html[data-theme="blueprint"] .lvl.below,html[data-theme="blueprint"] .lvl.soil{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22'%3E%3Cpath d='M0 22L15 7M15 22L30 7' stroke='%23eaf3fb' stroke-width='.7' opacity='.28'/%3E%3Ccircle cx='24' cy='16' r='1' fill='%23eaf3fb' opacity='.3'/%3E%3C/svg%3E")}
.lvl.below .datum,.lvl.soil .datum{left:calc(-96px + 0px)}
.lvl.below .storey{border-left:14px solid var(--ink);border-right:14px solid var(--ink);border-image:none;background:var(--paper)}
.lvl.below .storey::before,.lvl.below .storey::after{content:"";position:absolute;top:0;bottom:0;width:14px;background:repeating-linear-gradient(45deg,var(--paper) 0 3px,transparent 3px 5px)}
.lvl.below .storey::before{left:-14px} .lvl.below .storey::after{right:-14px}
.lvl.soil{padding-bottom:30px;background:
  linear-gradient(var(--paper-3) 0 0) 0 0/100% 0,
  repeating-linear-gradient(0deg,transparent 0 22px,var(--line-2) 22px 23px),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='4' cy='4' r='1.1' fill='%2316191c' opacity='.3'/%3E%3Ccircle cx='12' cy='11' r='1.6' fill='none' stroke='%2316191c' stroke-width='.6' opacity='.3'/%3E%3C/svg%3E")}
html[data-theme="blueprint"] .lvl.soil{background:repeating-linear-gradient(0deg,transparent 0 22px,var(--line-2) 22px 23px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='4' cy='4' r='1.1' fill='%23eaf3fb' opacity='.3'/%3E%3Ccircle cx='12' cy='11' r='1.6' fill='none' stroke='%23eaf3fb' stroke-width='.6' opacity='.3'/%3E%3C/svg%3E")}
.lvl.soil .slab{display:none}
.lvl.soil .storey{border:0;padding-top:34px}
.lvl.soil .storey::before{content:"FOOTINGS · TEST PIT · THE GROUND ITSELF";position:absolute;top:10px;left:0;font:500 9.5px var(--mono);letter-spacing:.14em;color:var(--ink);background:var(--paper);padding:2px 7px}
.lvl.soil .lvl-card{box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--ink)}
.bedrock{height:48px;margin:0 -24px 0 -96px;border-top:2px solid var(--ink);position:relative;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='18'%3E%3Cpath d='M0 9h28M14 0v9M5 9v9M21 9v9' stroke='%2316191c' stroke-width='.7' opacity='.4'/%3E%3C/svg%3E")}
html[data-theme="blueprint"] .bedrock{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='18'%3E%3Cpath d='M0 9h28M14 0v9M5 9v9M21 9v9' stroke='%23eaf3fb' stroke-width='.7' opacity='.4'/%3E%3C/svg%3E")}
.bedrock span{position:absolute;right:24px;top:14px;font:600 10px var(--mono);letter-spacing:.12em;color:var(--ink);background:var(--paper);padding:2px 8px}
.lvl.in .slab{animation:slabIn .7s var(--ease-out) both}
@keyframes slabIn{from{transform:scaleX(.2);opacity:0}to{transform:none;opacity:1}}
/* the level index beside the building */
.lvl-idx{border-top:2px solid var(--ink);margin-top:6px}
.li-h{font:600 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:8px 0 4px}
.lvl-idx a{display:grid;grid-template-columns:62px 1fr;column-gap:8px;padding:6px 4px;border-bottom:1px solid var(--line-2);transition:background .2s}
.lvl-idx a:hover{background:var(--paper-2)} .lvl-idx a.on{background:var(--hl)}
.lvl-idx b{font:700 12px var(--disp);color:var(--red)} .lvl-idx span{font:600 13px var(--disp);color:var(--ink)} .lvl-idx i{grid-column:2;font:500 10px var(--mono);color:var(--ink-3);font-style:normal}

/* the elevation rod — a surveyor's levelling staff, fixed at the left edge */
.rod{position:fixed;left:14px;top:calc(var(--mast) + 60px);bottom:90px;width:18px;z-index:30;opacity:0;transform:translateX(-10px);transition:opacity .35s,transform .35s var(--ease-out);pointer-events:none}
body.in-sec .rod{opacity:1;transform:none}
.rod-staff{position:absolute;inset:0;border:1px solid var(--ink);background:
  repeating-linear-gradient(180deg,var(--red) 0 4px,transparent 4px 8px) left/7px 40px no-repeat,
  repeating-linear-gradient(180deg,transparent 0 40px,var(--ink) 40px 80px) right/5px 100% no-repeat,var(--paper);
  background-repeat:repeat-y,no-repeat;background-size:7px 40px,5px 100%}
.rod-mk{position:absolute;left:24px;top:0;transform:translateY(-50%);transition:top .5s var(--ease);background:var(--paper);border:1px solid var(--ink);padding:5px 8px 4px;white-space:nowrap;box-shadow:var(--shadow)}
.rod-mk::before{content:"";position:absolute;left:-25px;top:50%;width:25px;height:1.5px;background:var(--red)}
.rod-mk b{display:block;font:700 15px var(--disp);color:var(--ink)} .rod-mk span{display:block;font:500 10px var(--mono);color:var(--ink-2)} .rod-mk i{display:block;font:500 10px var(--mono);color:var(--red);font-style:normal}

/* ---------------------------------------------------------------- A-500 details */
.lyf{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 20px}
.lyf-k{font:500 9.5px var(--mono);letter-spacing:.18em;color:var(--ink-3);margin-right:6px}
.lyf-b{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--line-3);padding:6px 11px 5px;font:500 11px var(--mono);color:var(--ink-2);cursor:pointer;transition:all .2s}
.lyf-b i{width:9px;height:9px;background:var(--c);border:1px solid var(--ink)}
.lyf-b:hover{border-color:var(--ink)} .lyf-b.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dsheet{margin-top:26px}
.ds-h{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.ds-h b{font:700 13px var(--mono);color:var(--red)} .ds-h span{font:700 16px var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.dframe{display:flex;flex-direction:column;text-align:left;background:var(--paper);border:1px solid var(--ink);padding:0;cursor:pointer;color:inherit;font:inherit;position:relative;transition:transform .25s var(--ease-out),box-shadow .25s,opacity .3s}
.dframe:hover{transform:translateY(-3px);box-shadow:6px 6px 0 var(--ink)}
.dframe.dim{opacity:.22}
.df-fig{display:block;padding:12px 12px 6px;border-bottom:1px solid var(--line-2);aspect-ratio:3/2;overflow:hidden}
.df-fig svg{width:100%;height:100%}
.df-foot{display:flex;gap:10px;align-items:center;padding:10px 12px 4px}
.df-tt{display:flex;flex-direction:column;min-width:0} .df-tt b{font:700 14.5px/1.2 var(--disp);color:var(--ink)} .df-tt i{font:500 10px var(--mono);font-style:normal;color:var(--ink-3);margin-top:2px}
.df-o{display:block;font-size:14.5px;line-height:1.4;color:var(--ink-2);padding:2px 12px 12px}
.df-o b{font-weight:600;color:var(--ink)}
.dframe .dticks{position:absolute;top:10px;right:10px}
/* the enlargement */
.dview{position:fixed;inset:0;z-index:80;background:rgba(10,13,18,.46);display:flex;align-items:flex-start;justify-content:center;padding:calc(var(--mast) + 14px) 16px 20px;overflow-y:auto;opacity:0;transition:opacity .24s}
.dview.on{opacity:1}
.dview[hidden],.rds[hidden],.tbf-list[hidden],.kp-call[hidden],.dk-panel[hidden]{display:none}
html.dv-open{overflow:hidden}
.dv-sheet{position:relative;width:min(1180px,100%);background:var(--paper);border:1px solid var(--ink);box-shadow:var(--shadow);transform:translateY(22px);transition:transform .34s var(--ease-out)}
.dview.on .dv-sheet{transform:none}
.dv-sheet::before{content:"";position:absolute;inset:7px;border:1px solid var(--line-2);pointer-events:none}
.dv-h{display:flex;align-items:center;gap:18px;padding:22px 26px 16px;border-bottom:1px solid var(--ink)}
.dv-tt{flex:1;min-width:0} .dv-k{font:500 10px var(--mono);letter-spacing:.14em;color:var(--ink-3);margin:0 0 4px}
.dv-tt h2{font:700 clamp(22px,2.4vw,32px)/1.1 var(--disp);color:var(--ink);margin:0;letter-spacing:-.015em}
.dv-s{font:500 12px var(--mono);color:var(--ink-2);margin:6px 0 0}
.dv-x{align-self:flex-start;background:none;border:1px solid var(--ink);padding:7px 12px 6px;font:500 12px var(--mono);color:var(--ink);cursor:pointer;position:relative;z-index:1}
.dv-x:hover{background:var(--ink);color:var(--paper)}
.dv-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:30px;padding:24px 26px}
.dv-fig svg{width:100%;height:auto}
.dv-photo{margin:16px 0 0;border:1px solid var(--ink)} .dv-photo img{display:block;width:100%;height:auto} .dv-photo figcaption{font:500 10.5px var(--mono);color:var(--ink-3);padding:6px 10px;border-top:1px solid var(--line-2)}
.dv-txt p{font-size:16.5px;line-height:1.58;color:var(--ink);margin:0 0 14px}
.dv-txt .dv-o{font:700 17px/1.35 var(--disp);color:var(--ink);border-left:4px solid var(--red);padding-left:12px}
.dv-txt .dv-o b{color:var(--red)}
.dv-txt .dticks{margin:0 0 14px;display:flex}
.dv-bl{margin:6px 0 0;padding:12px 0 0 20px;border-top:1px solid var(--line-2)} .dv-bl li{font-size:15.5px;line-height:1.52;margin-bottom:8px} .dv-bl li::marker{content:"— ";color:var(--ink-3)}
.dv-f{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--ink);padding:12px 26px 16px}
.dv-nav{background:none;border:0;font:500 11px var(--mono);color:var(--ink-2);cursor:pointer;display:flex;gap:8px;align-items:baseline;max-width:48%;text-align:left;padding:4px 0}
.dv-nav span{font:italic 14px var(--serif);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-nav:hover{color:var(--red)} .dv-nav.nx{margin-left:auto;text-align:right}

/* ---------------------------------------------------------------- A-600 schedules */
.cr-t td{font-size:15px} .cr-t .kd{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);width:1%}
.cr-t td b{display:block;font:700 16px/1.25 var(--disp);color:var(--ink)} .cr-d{display:block;font-size:14.5px;color:var(--ink-2);margin-top:2px}
.cr-b{display:block;font-size:14px;line-height:1.4;color:var(--ink-3);max-height:0;overflow:hidden;opacity:0;transition:max-height .35s var(--ease),opacity .3s,margin .3s}
.cr-t tr:hover .cr-b,.cr-t tr:focus-within .cr-b,.cr-t tr:focus .cr-b{max-height:6em;opacity:1;margin-top:6px}
.cr-t tr{outline:none} .cr-t tr:focus-visible{box-shadow:inset 3px 0 0 var(--blue)}
.cr-t .yr,.tr-t .yr{font:500 12px var(--mono);white-space:nowrap;color:var(--ink);width:1%}
.cr-t tr.feat td{background:color-mix(in srgb,var(--hl) 45%,transparent)}
.tr-t td b{display:block;font:600 15px var(--disp);color:var(--ink)}
.pubs{list-style:none;margin:0;padding:0;counter-reset:pb}
.pubs li{padding:12px 0 12px 64px;border-bottom:1px solid var(--line-2);position:relative;counter-increment:pb}
.pubs li::before{content:"PB-0" counter(pb);position:absolute;left:0;top:14px;font:500 11px var(--mono);color:var(--red)}
.pub-t{font:italic 16.5px/1.4 var(--serif);color:var(--ink);margin:0 0 4px}
.pub-m{font:500 11px var(--mono);color:var(--ink-3);margin:0} .pub-m span{margin-right:8px;color:var(--ink-2)} .pub-m .ra{color:var(--red)}

/* ---------------------------------------------------------------- A-700 why */
.why{position:relative;height:190vh;margin-top:60px;z-index:3}
.why-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:980px;margin:0 auto;padding:0 var(--gut)}
.why-kick{font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 22px}
.why-line{font:500 clamp(24px,3.1vw,42px)/1.28 var(--disp);letter-spacing:-.015em;margin:0 0 .7em}
.ww{color:var(--line-2);transition:color .35s var(--ease)} .ww.lit{color:var(--ink)}
.why-close{margin:.4em 0 0} .wq{font:italic clamp(28px,3.8vw,54px)/1.1 var(--serif);color:var(--line-2);transition:color .8s var(--ease)}
.why-close.lit .wq{color:var(--red)}

/* ---------------------------------------------------------------- A-900 issued */
.issued{padding-bottom:40px}
.iss-stamp{position:absolute;right:clamp(20px,4vw,50px);top:94px;z-index:2;border:3px double var(--red);color:var(--red);padding:10px 16px 8px;transform:rotate(-7deg);text-align:center;opacity:.9;
  font:600 11px var(--mono);letter-spacing:.2em;display:flex;flex-direction:column;gap:2px;mix-blend-mode:multiply}
html[data-theme="blueprint"] .iss-stamp{mix-blend-mode:normal}
.iss-stamp b{font:700 26px var(--disp);letter-spacing:.08em} .iss-stamp i{font-style:normal;font-size:10px;letter-spacing:.14em}
.ask-p{font-size:clamp(18px,1.55vw,21px);line-height:1.55;color:var(--ink-2);max-width:40em;margin:0 0 16px}
.ask-p.lead{font-size:clamp(21px,2vw,27px);line-height:1.42;color:var(--ink)}
.ask-go{display:inline-flex;align-items:center;gap:14px;margin:18px 0 0;font:700 clamp(26px,3vw,40px) var(--disp);color:var(--ink);border-bottom:3px solid var(--ink);padding-bottom:4px;transition:color .2s,border-color .2s,gap .3s var(--ease-out)}
.ask-go:hover{color:var(--red);border-color:var(--red);gap:24px}
.ask-alt{display:flex;flex-wrap:wrap;gap:18px;margin:22px 0 0}
.ask-alt a{font:500 12px var(--mono);color:var(--ink-2);border-bottom:1px solid var(--line-3);padding-bottom:2px} .ask-alt a:hover{color:var(--ink);border-color:var(--ink)}
.rev{margin:36px 0 0;border-collapse:collapse;min-width:min(560px,100%)}
.rev th,.rev td{border:1px solid var(--ink);padding:5px 10px;font:500 11px var(--mono);text-align:left;color:var(--ink-2)}
.rev th{font-size:9.5px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
.rev td:first-child{color:var(--red);text-align:center;width:1%}
.ask-sign{font:italic 17px var(--serif);color:var(--ink-3);margin:22px 0 0}

.colophon{position:relative;z-index:3;max-width:var(--maxw);margin:60px auto 0;padding:26px var(--gut) 90px;border-top:1px solid var(--ink);font:500 11px/1.6 var(--mono);color:var(--ink-3)}
.colophon p{margin:0 0 6px} .colophon a{border-bottom:1px solid var(--line-3)}
.nojs{padding:40px var(--gut);font-size:18px}


/* ================================================================ PASS 2 — A-002 THE PORTFOLIO, ZOOMED */
.drill{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start;margin-top:6px}
.dr-stage{position:sticky;top:calc(var(--mast) + 14px);height:calc(100vh - var(--mast) - 28px);min-height:460px;z-index:2}
.dr-frame{position:relative;height:100%;border:1px solid var(--ink);background:var(--paper);overflow:hidden}
.dr-frame::before{content:"";position:absolute;inset:6px;border:1px solid var(--line-2);pointer-events:none;z-index:4}
.dr-map{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:44px 10px 70px;background:var(--paper);z-index:1;transition:opacity .55s var(--ease),transform .9s var(--ease-out)}
.dr-map svg{width:100%;height:100%}
.dr-map.off{opacity:0;transform:scale(1.35);pointer-events:none}
.drmap .dm-s0,.drmap .dm-s1,.drmap .dm-l{transition:opacity .6s var(--ease)}
.drmap .dm-s1{opacity:0}
.dr-map.s1 .drmap .dm-s1{opacity:1} .dr-map.s1 .drmap .dm-s0{opacity:0}
.drmap .dm-reg .dm-p{transition:fill-opacity .6s} .dr-map.s1 .drmap .dm-reg .dm-p{fill-opacity:.55}
.drmap .dm-l{fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:5px}
.drmap .dm-t{paint-order:stroke;stroke:var(--paper);stroke-width:4px}
.drmap .dm-went text{paint-order:stroke;stroke:var(--paper);stroke-width:4px}
@media (prefers-reduced-motion:no-preference){ .dr-map.s1 .dm-ring{animation:ring 2.4s var(--ease-out) infinite;transform-box:fill-box;transform-origin:center} }
@keyframes ring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.2)}}
.dr-slot{position:absolute;inset:0;border:0;aspect-ratio:auto;z-index:0}
#modelwrap.in-drill{z-index:1;outline:none;box-shadow:none;background:transparent}
.drill:not([data-step="0"]):not([data-step="1"]) .dr-frame{background:transparent}
.dr-frame{pointer-events:none} .dr-ladder{pointer-events:auto}   /* the model under the frame stays draggable + clickable */
/* over the live model the chrome needs its own ground, or the ladder and step number read through roofs and strata */
.dr-ladder{padding:8px 10px 7px;margin:-8px -10px 0;background:color-mix(in srgb,var(--paper) 88%,transparent)}
.dr-big{padding:4px 12px 2px 6px;margin:0 0 0 -6px;background:color-mix(in srgb,var(--paper) 88%,transparent)}
.dr-ill{background:color-mix(in srgb,var(--paper) 88%,transparent)}
#modelwrap.in-drill .kp-label{display:none}
.dr-ladder{position:absolute;top:14px;left:16px;right:16px;z-index:5;display:flex;gap:5px;list-style:none;margin:0;padding:0}
.dr-ladder li{flex:1;font:500 9.5px var(--mono);letter-spacing:.1em;color:var(--ink-3);border-top:3px solid var(--line-2);padding-top:6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s,border-color .3s}
.dr-ladder li b{font-weight:500;color:var(--red);margin-right:5px}
.dr-ladder li.on{color:var(--ink);border-color:var(--red)}
.dr-big{position:absolute;left:20px;bottom:16px;z-index:5;display:flex;align-items:baseline;gap:12px;pointer-events:none}
.dr-big b{font:700 clamp(40px,4.6vw,68px)/1 var(--disp);color:var(--red)} .dr-big span{font:700 clamp(16px,1.6vw,22px) var(--disp);letter-spacing:.16em;color:var(--ink)}
.dr-ill{position:absolute;right:18px;bottom:16px;z-index:5;font:500 9.5px var(--mono);letter-spacing:.12em;color:var(--ink-3);margin:0;max-width:46%;text-align:right;background:color-mix(in srgb,var(--paper) 80%,transparent);padding:2px 5px}
.dr-steps{padding:24vh 0 34vh}
.dr-step{min-height:74vh;display:flex;flex-direction:column;justify-content:center;opacity:.25;transition:opacity .45s var(--ease)}
.dr-step.on{opacity:1}
.dr-k{font:600 11px var(--mono);letter-spacing:.16em;color:var(--red);margin:0 0 10px}
.dr-step h3{font:700 clamp(26px,2.6vw,40px)/1.06 var(--disp);color:var(--ink);margin:0 0 18px;letter-spacing:-.018em}
.dr-who p{font-size:17px;line-height:1.52;margin:0 0 14px;padding-left:14px;border-left:3px solid var(--line-2);color:var(--ink-2)}
.dr-who b{display:block;font:600 10px var(--mono);letter-spacing:.18em;margin-bottom:4px;text-transform:uppercase}
.dr-who .dr-nr{border-left-color:var(--red);color:var(--ink)} .dr-nr b{color:var(--red)} .dr-dfo b{color:var(--ink-3)}
.dr-see{display:flex;align-items:center;gap:2px;margin:4px 0 0} .dr-see span{font:500 9.5px var(--mono);letter-spacing:.16em;color:var(--ink-3);margin-right:4px}

/* ================================================================ PASS 2 — A-003 DASHBOARD */
.dash{border:1px solid var(--ink);background:var(--paper-2);padding:14px}
.db-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:2px 2px 12px;border-bottom:1px solid var(--line-3);margin-bottom:12px}
.db-sl{display:flex;flex-wrap:wrap;align-items:center;gap:4px} .db-sl>span{font:600 9.5px var(--mono);letter-spacing:.18em;color:var(--ink);margin-right:4px}
.db-b{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line-3);padding:5px 10px 4px;font:500 11px var(--mono);color:var(--ink-2);cursor:pointer;transition:all .2s}
.db-b i{width:8px;height:8px;background:var(--c);border:1px solid var(--ink)}
.db-b:hover{border-color:var(--ink)} .db-b.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.db-meta{margin:0 0 0 auto;font:500 9.5px var(--mono);letter-spacing:.1em;color:var(--ink-3)}
.db-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:12px}
.db-k{position:relative;display:flex;flex-direction:column;gap:3px;background:var(--paper);border:1px solid var(--line-3);border-top:4px solid var(--c,var(--ink));padding:12px 13px 11px;text-align:left;cursor:pointer;color:inherit;font:inherit;transition:transform .25s var(--ease-out),box-shadow .25s,opacity .3s}
.db-k:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--ink)}
.db-k i{font:500 9px var(--mono);font-style:normal;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
.db-k b{font:700 30px/1 var(--disp);color:var(--ink);letter-spacing:-.01em}
.db-k span{font:500 11px/1.35 var(--mono);color:var(--ink-3)}
.db-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.db-p{margin:0;background:var(--paper);border:1px solid var(--line-3);padding:12px 14px 14px;min-width:0;transition:opacity .3s}
.db-p.w6{grid-column:span 6} .db-p.w4{grid-column:span 4} .db-p.w3{grid-column:span 3} .db-p.w2{grid-column:span 2}
.db-p figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line-2)}
.db-p figcaption b{font:700 13px var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.db-p figcaption i{font:500 10px var(--mono);font-style:normal;color:var(--ink-3);text-align:right}
.db-p .fig{width:100%;height:auto}
.db-gauges{display:grid;grid-template-columns:1fr;gap:4px}
.dash .dim{opacity:.16}
.dash .pg.dim{opacity:.12}
.lg-row,.lg-seg{cursor:pointer;outline:none} .lg-row:hover text,.lg-row:focus-visible text{fill:var(--red)}
@media (prefers-reduced-motion:no-preference){
  .dash.live .ln-flow{stroke-dasharray:6 7;animation:flow 1.1s linear infinite}
  .dash.live .ln-flow2{stroke-dasharray:3 6;animation:flow 1.6s linear infinite}
  .dash.live .gg-arc{stroke-dasharray:260;stroke-dashoffset:260;animation:draw 1.4s var(--ease-out) forwards}
  .dash.live .rb-bar{transform-box:fill-box;transform-origin:left;animation:grow 1s var(--ease-out) both}
}
@keyframes flow{to{stroke-dashoffset:-26}} @keyframes draw{to{stroke-dashoffset:0}} @keyframes grow{from{transform:scaleX(0)}}
@media (max-width:1180px){ .db-p.w4,.db-p.w3,.db-p.w2{grid-column:span 3} .db-gauges{grid-template-columns:1fr 1fr} }
@media (max-width:980px){
  .drill{grid-template-columns:1fr;gap:0}
  .dr-stage{height:52vh;min-height:320px;top:calc(var(--mast) + 4px)}
  .dr-steps{padding:4vh 0 8vh;position:relative;z-index:1}
  .dr-step{min-height:62vh;opacity:1;background:transparent}
  .dr-step>*{background:var(--paper);box-shadow:0 0 0 10px var(--paper)}
  .dr-ladder li{font-size:0} .dr-ladder li b{font-size:10px}
  .db-grid{grid-template-columns:1fr} .db-p.w6,.db-p.w4,.db-p.w3,.db-p.w2{grid-column:span 1}
}

/* ---------------------------------------------------------------- the fixed title block */
.tbfix{position:fixed;right:14px;bottom:14px;z-index:40;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s var(--ease-out);pointer-events:none}
body.past-hero .tbfix{opacity:1;transform:none;pointer-events:auto}
.tbf-btn{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:12px;align-items:baseline;background:var(--paper);border:1px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:7px 12px 7px;cursor:pointer;color:inherit;text-align:left;min-width:210px}
.tbf-k{font:500 8.5px var(--mono);letter-spacing:.16em;color:var(--ink-3);grid-column:1} .tbf-n{font:500 9.5px var(--mono);color:var(--ink-3);grid-column:2;grid-row:1;justify-self:end}
.tbf-no{font:700 20px var(--disp);color:var(--red);grid-column:1;grid-row:2} .tbf-t{font:600 13px var(--disp);color:var(--ink);grid-column:2;grid-row:2;text-transform:uppercase;letter-spacing:.04em}
.tbf-btn:hover{box-shadow:6px 6px 0 var(--red)}
.tbf-list{list-style:none;margin:0 0 8px;padding:6px 0;background:var(--paper);border:1px solid var(--ink);box-shadow:var(--shadow);min-width:240px}
.tbf-list a{display:grid;grid-template-columns:52px 1fr;padding:5px 12px} .tbf-list a:hover{background:var(--paper-2)} .tbf-list a.on{background:var(--hl)}
.tbf-list b{font:500 11px var(--mono);color:var(--red)} .tbf-list span{font:600 13px var(--disp);color:var(--ink)}

/* ---------------------------------------------------------------- the drafting crosshair */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html.has-xh body,html.has-xh a,html.has-xh button,html.has-xh [role="button"],html.has-xh .room,html.has-xh .dframe,html.has-xh tr,html.has-xh #modelwrap canvas{cursor:none!important}
}
.xh{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:0;transition:opacity .2s}
.xh.on{opacity:1}
.xh i{position:absolute;left:0;top:0;display:block;will-change:transform}
.xh-h{width:100vw;height:1px;background:color-mix(in srgb,var(--ink) 30%,transparent)}
.xh-v{width:1px;height:100vh;background:color-mix(in srgb,var(--ink) 30%,transparent)}
.xh-pb{width:10px;height:10px;border:1.2px solid var(--ink);background:transparent}
.xh-tag{position:absolute;left:0;top:0;font:500 9.5px var(--mono);letter-spacing:.06em;color:var(--ink-3);white-space:nowrap;will-change:transform}
.xh-snap{position:absolute;left:0;top:0;width:20px;height:20px;opacity:0;transition:opacity .15s,transform .09s linear;will-change:transform}
.xh.snap .xh-snap{opacity:1}
.xh-snap svg{width:20px;height:20px;fill:none;stroke:var(--sn,#2c9a3f);stroke-width:2}
.xh[data-k="mid"] .xh-snap{--sn:var(--blue)} .xh[data-k="cen"] .xh-snap{--sn:var(--red)} .xh[data-k="int"] .xh-snap{--sn:var(--sci)}
.xh-snap em{position:absolute;left:24px;top:14px;font:500 9.5px var(--mono);font-style:normal;color:var(--paper);background:var(--sn,#2c9a3f);padding:2px 5px;white-space:nowrap}
.xh.snap .xh-pb{border-color:var(--sn,#2c9a3f)}
.xh-dim{position:fixed;inset:0;width:100vw;height:100vh;z-index:9989;pointer-events:none;overflow:visible}
.xh-dim .dd{stroke:var(--blue);stroke-width:1;fill:none;animation:ddIn .25s var(--ease-out)}
.xh-dim .dd .ext{stroke-width:.6;opacity:.7}
.xh-dim text{fill:var(--blue);stroke:none;font:500 10px var(--mono);paint-order:stroke;stroke:var(--paper);stroke-width:3px}
@keyframes ddIn{from{opacity:0}to{opacity:1}}

/* ---------------------------------------------------------------- lab: revision clouds on drafts */
html.lab [data-draft]{position:relative;outline:none;border-radius:2px;
  box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--red);
  background-image:radial-gradient(circle at 6px 0,transparent 5px,var(--red) 5.5px 6.5px,transparent 7px);background-size:12px 7px;background-repeat:repeat-x;background-position:0 -1px}
html.lab [data-draft]::after{content:"Δ DRAFT";position:absolute;right:-4px;top:-10px;font:600 8.5px var(--mono);letter-spacing:.1em;color:#fff;background:var(--red);padding:1px 4px}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1180px){
  .rod{display:none}
  .nt-grid,.sec-grid,.plan-grid,.sch-grid{grid-template-columns:minmax(0,1fr)}
  .kp-col{display:none}
  .plan-side{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
}
@media (max-width:980px){
  .hero-bio{width:auto;margin-right:clamp(20px,5vw,40px)}
  .layers{position:relative;right:auto;bottom:auto;margin:0 clamp(20px,5vw,40px) 20px clamp(40px,6vw,96px);width:auto}
  .hero-kit{top:auto;bottom:auto;right:clamp(30px,5vw,60px);top:calc(var(--mast) + 30px)}
  .hero-tb{position:relative;left:auto;bottom:auto;margin:0 clamp(20px,5vw,40px) 30px clamp(40px,6vw,96px);grid-template-columns:repeat(3,auto)}
  .tb-c:nth-child(4){border-left:0} .tb-c:nth-child(n+4){border-top:1px solid var(--line-3)}
  .gn{grid-template-columns:1fr} .gn-i:nth-child(odd){border-right:0} .gn-i:nth-child(even){padding-left:0}
  .dv-body{grid-template-columns:1fr}
  .mast nav a:not(.talk){display:none}
}
@media (max-width:420px){ .whyq{display:none} }
@media (max-width:760px){
  :root{--mast:50px}
  .mast{gap:10px;padding:0 14px}
  .mast .nm{white-space:nowrap;font-size:14px}
  .mast nav{gap:10px}
  .mast .talk{padding:6px 9px 5px;font-size:11px;white-space:nowrap}
  .hero::before{display:none}
  .match{gap:8px} .match .ml{flex:0 0 16px} .match .mt{white-space:normal;text-align:center;line-height:1.5;font-size:10px}
  .overline{white-space:normal}
  .hero-tb{grid-template-columns:1fr 1fr} .hero-tb .tb-c:nth-child(n+5){display:none} .tb-c:nth-child(3){border-left:0} .tb-c:nth-child(n+3){border-top:1px solid var(--line-3)} .tb-c:nth-child(4){border-left:1px solid var(--line-3)}
  .tb-c b{white-space:normal}
  .mast-proj,.themesw .ts-lab{display:none}
  .hero{min-height:auto}
  .hero-bio{margin:calc(var(--mast) + 44vh) 20px 20px}
  .name{font-size:clamp(40px,12vw,64px)}
  .hero-kit{display:none}
  .layers,.hero-tb{margin-left:20px;margin-right:20px}
  .ly-row{grid-template-columns:repeat(3,1fr)}
  .hero-frame{inset:calc(var(--mast) + 6px) 6px 6px 6px} .hero-frame::after{inset:12px}
  .overture{left:26px}
  .sh{grid-template-columns:auto 1fr} .sh-c:nth-child(n+3){display:none}
  .sheet{padding:18px 14px 28px;margin-top:36px}
  .dt{gap:12px} .bub{width:46px;height:46px}
  .bldg{padding-left:0} .shaft,.rod{display:none}
  .roof-add,.roofline,.lvl{margin-left:0;margin-right:0} .lvl-actmgr{margin-left:6%}
  .lvl.below,.lvl.soil{padding:0 10px}
  .grade,.bedrock{margin-left:-14px;margin-right:-14px}
  .datum,.lvl.below .datum,.lvl.soil .datum,.lvl.annex .datum{position:relative;left:auto;top:auto;width:200px;height:40px;margin:2px 0 0 2px}
  .datum::after{right:auto;width:160px}
  .rf-k{left:0;bottom:auto;top:-14px}
  .ground-row{grid-template-columns:1fr;margin:0} .walkway{display:none} .ground-row .lvl{grid-column:1}
  .fp-grid{grid-template-columns:1fr 1fr} .room{min-height:96px}
  .lvl-stats div{border-left:0;padding-left:0}
  .plan-side{grid-template-columns:1fr}
  .dgrid{grid-template-columns:1fr}
  .dview{padding:calc(var(--mast) + 6px) 6px 10px} .dv-h{padding:16px 16px 12px;gap:12px} .dv-h .bub{display:none} .dv-body,.dv-f{padding-left:16px;padding-right:16px}
  .iss-stamp{position:relative;right:auto;top:auto;display:inline-flex;margin:0 0 18px;transform:rotate(-4deg)}
  .tbfix{right:8px;bottom:8px} .tbf-btn{min-width:0;padding:5px 9px} .tbf-t{display:none}
  .why{height:160vh}
  .sched .q b{font-size:21px} .qs-t td{padding:9px 6px}
  .cr-t thead{display:none} .cr-t tr{display:grid;grid-template-columns:auto 1fr auto;border-bottom:1px solid var(--line-2)} .cr-t td{border:0} .cr-t td:nth-child(3){grid-column:1/-1;order:5} .cr-t td:nth-child(4){display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------------------------- print: the drawing set */
@media print{
  :root,html[data-theme="blueprint"]{--paper:#fff;--paper-2:#f2f2f2;--paper-3:#e6e6e6;--ink:#000;--ink-2:#111;--ink-3:#444;--line:rgba(0,0,0,.15);--line-2:rgba(0,0,0,.3);--line-3:rgba(0,0,0,.55);--hl:transparent}
  body{background:#fff}
  body::before,.mast,.xh,.xh-dim,.tbfix,.rod,.overture,.layers,.hero-kit,#modelwrap,.why,.match,.lyf,.sidx,.kp-col,.dk-tabs,.dview{display:none!important}
  .hero{min-height:auto;page-break-after:always} .hero-bio{margin:30px;opacity:1!important;transform:none!important;width:auto}
  .hero-frame{display:none} .hero-tb{position:static;margin:0 30px;opacity:1!important}
  .sheet{page-break-before:always;border:1px solid #000;background:#fff;animation:none!important}
  .dk-panel[hidden]{display:block!important} .dk-panel{page-break-inside:avoid}
  .lvl-body{max-height:none!important} .lvl{page-break-inside:avoid}
  .dframe{page-break-inside:avoid;box-shadow:none} .dgrid{grid-template-columns:1fr 1fr}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9px}
}

/* ================================================================ PASS 2d — dashboard at true panel widths */
.db-kpis{grid-template-columns:repeat(7,minmax(0,1fr))}
.db-k b{font-size:clamp(24px,2.2vw,32px)}
.db-p{display:flex;flex-direction:column}
.db-p .dk-note{margin-top:auto}
.nb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;height:100%}
.nb li{flex:1;display:flex}
.nb-r{flex:1;display:grid;grid-template-columns:1fr auto;align-content:center;gap:4px 10px;text-align:left;background:var(--paper);border:1px solid var(--line-3);border-left:4px solid var(--rp);padding:9px 11px 9px 10px;color:inherit;font:inherit;cursor:pointer;transition:border-color .2s,transform .2s var(--ease-out),box-shadow .2s}
.nb-r:hover,.nb-r:focus-visible{border-color:var(--ink);transform:translateX(2px);box-shadow:3px 3px 0 var(--ink);outline:none}
.nb-t{font:700 14px/1.2 var(--disp);color:var(--ink)}
.nb-s{font:600 9.5px var(--mono);letter-spacing:.1em;padding:3px 6px 2px;border:1px solid currentColor;white-space:nowrap;align-self:start}
.nb-d{grid-column:1/-1;font:400 12px/1.35 var(--mono);color:var(--ink-3)}
.nb-done{color:var(--ink-3)} .nb-live{color:var(--env)} .nb-teach{color:var(--rp)} .nb-proto{color:var(--ai)}
.nb li:nth-child(4) .nb-r{border-left-color:var(--ai)}
@media (prefers-reduced-motion:no-preference){ .dash.live .nb-live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:1px;animation:blink 1.4s steps(2) infinite} }
.pp{cursor:pointer;outline:none} .pp path{transition:fill .2s} .pp:hover path,.pp:focus-visible path{fill:var(--hl)}
@media (prefers-reduced-motion:no-preference){ .dash.live .pp{animation:ppIn .5s var(--ease-out) both;animation-delay:calc(var(--i) * 90ms)} }
@keyframes ppIn{from{opacity:0;transform:translateX(-10px)}}
@media (max-width:1180px){ .db-kpis{grid-template-columns:repeat(4,minmax(0,1fr))} .db-p.w4,.db-p.w2{grid-column:span 6} }
@media (max-width:640px){ .db-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ================================================================ PASS 2e — A-200 SECTIONS, rebuilt
   A pinned building section on the left does the navigating (it replaces the level index and the lift rod);
   the levels get the full right-hand column, and every card is the same generous width — the mezzanine and
   the annex are marked by how they're drawn, never by being squeezed. */
.sx-grid{display:grid;grid-template-columns:minmax(320px,.92fr) minmax(0,1.24fr);gap:clamp(24px,3.4vw,54px);align-items:start;margin-top:8px}
.sx-pin{position:sticky;top:calc(var(--mast) + 16px);display:flex;flex-direction:column;gap:12px}
.sx{display:block;width:100%;height:auto;max-height:calc(100vh - var(--mast) - 200px)}
.sx-l{cursor:pointer;outline:none}
.sx-z{fill:transparent;stroke:none;transition:fill .35s var(--ease)}
.sx-l:hover .sx-z,.sx-l:focus-visible .sx-z{fill:color-mix(in srgb,var(--hl) 55%,transparent)}
.sx-l.on .sx-z{fill:var(--hl);stroke:var(--red);stroke-width:1.6}
.sx-l.on .sx-lab{fill:var(--red)} .sx-l.on .sx-lab,.sx-l.on .sx-yr{stroke:transparent}
.sx-car{transform:translateY(var(--y));transition:transform .7s var(--ease-out)}
.sx .sx-rm{fill:var(--ink-2)}
.sx .sx-elv,.sx .sx-lab,.sx .sx-yr{paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
.sx-cap{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0;padding:10px 12px;border:1px solid var(--ink);background:var(--paper)}
.sx-cap b{font:700 20px var(--disp);color:var(--red)} .sx-cap span{font:500 11px var(--mono);color:var(--ink-2)} .sx-cap i{flex-basis:100%;font:italic 15px var(--serif);color:var(--ink)}
.sx-pin .roof-add{margin:0;border-bottom:1.4px dashed var(--ink-3);padding:12px 14px}
.sx-pin .ra-b{font-size:14.5px}
.sx-list{display:flex;flex-direction:column;gap:26px;min-width:0}
.lv{position:relative;border:1px solid var(--ink);background:var(--paper);padding:20px clamp(18px,2.2vw,28px) 22px;scroll-margin-top:calc(var(--mast) + 24px)}
.lv-rel{margin:-20px calc(-1 * clamp(18px,2.2vw,28px)) 16px;padding:6px clamp(18px,2.2vw,28px);font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--line-3);background:var(--paper-2)}
.lv-rel.lv-now{background:var(--ink);color:var(--paper)}
.lv-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 18px;align-items:start;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line-3)}
.lv-code{width:66px;height:66px;border:1.6px solid var(--ink);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:var(--paper)}
.lv-code b{font:700 16px/1 var(--disp);color:var(--ink)} .lv-code span{font:500 8.5px var(--mono);color:var(--ink-3)}
.lv-code.long b{font-size:10.5px;letter-spacing:.02em}
.lv-yr{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:2px 0 4px;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.lv-h h3{margin:0 0 4px;font:700 clamp(22px,2.1vw,31px)/1.1 var(--disp);letter-spacing:-.015em;color:var(--ink)}
.lv-ro{margin:0;font-size:15.5px;line-height:1.4;color:var(--ink-2)}
.lv-kpi{max-width:190px;text-align:right;padding-top:4px} .lv-kpi b{display:block;font:700 clamp(28px,2.6vw,38px)/1 var(--disp);color:var(--ink);letter-spacing:-.01em}
.lv-kpi span{display:block;margin-top:5px;font:500 11px/1.35 var(--mono);color:var(--ink-3)}
.lv-tx{margin:0 0 18px;max-width:70ch;font-size:17px;line-height:1.58;color:var(--ink)}
.lv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:0 0 18px}
.lv-stats>div{border-top:3px solid var(--ink);padding:9px 2px 0} .lv-stats b{display:block;font:700 20px/1.1 var(--disp);color:var(--ink)} .lv-stats span{display:block;margin-top:4px;font:500 11.5px/1.35 var(--mono);color:var(--ink-3)}
.lv-tag{margin:16px 0 0;font:italic 15px/1.45 var(--serif);color:var(--ink-3)}
.lv .fplan{margin-top:6px}
/* the current floor carries the weight */
.lv-nrcan{border-width:2px;box-shadow:7px 7px 0 var(--ink)}
.lv-nrcan .lv-kpi b{color:var(--red)}
/* the mezzanine hangs off the DFO floor: a bracket, not a narrower card */
.lv-mezz{margin-top:-8px}
.lv-mezz::before{content:"";position:absolute;left:-18px;top:-34px;bottom:40%;width:12px;border:1.5px solid var(--ink-3);border-right:0}
/* the annex is detached: dashed walls */
.lv-annex{border-style:dashed;border-width:1.6px}
/* below grade: the earth shows at the edge */
.lv-below{background-image:repeating-linear-gradient(135deg,var(--ink-3) 0 1px,transparent 1px 7px);background-size:11px 100%;background-repeat:no-repeat;padding-left:calc(clamp(18px,2.2vw,28px) + 11px)}
.sx-grade,.sx-bed{position:relative;height:30px;margin:4px 0 -4px}
.sx-grade{border-top:3px solid var(--ink);background:repeating-linear-gradient(135deg,transparent 0 7px,var(--line-3) 7px 8px)}
.sx-bed{border-top:1.4px dashed var(--ink-3);background:repeating-linear-gradient(60deg,transparent 0 12px,var(--line-3) 12px 13px)}
.sx-grade span,.sx-bed span{position:absolute;right:0;top:6px;padding:1px 8px;background:var(--paper);font:600 10px var(--mono);letter-spacing:.16em;color:var(--ink-2)}
@media (max-width:980px){
  .sx-grid{grid-template-columns:1fr}
  .sx-pin{position:relative;top:0}
  .sx{max-height:none;max-width:460px;margin:0 auto}
  .sx-cap,.sx-pin .roof-add{display:none}
  .lv-mezz::before{display:none}
}
@media (max-width:640px){
  .lv-h{grid-template-columns:auto minmax(0,1fr)} .lv-kpi{grid-column:1/-1;text-align:left;max-width:none;display:flex;align-items:baseline;gap:10px} .lv-kpi span{margin:0}
  .lv-code{width:54px;height:54px} .lv-tx{font-size:16px}
}

/* ================================================================ PASS 2f — narrow-screen repairs */
@media (max-width:980px){
  /* the toolbar and title block go into the flow: their desktop offsets must go with them */
  .layers{left:auto}
  .hero-tb{max-width:none}
  /* dashboard: every panel full width; dense figures keep their drawn size and scroll sideways inside the panel */
  .db-p.w6,.db-p.w4,.db-p.w3,.db-p.w2{grid-column:1/-1}
  .db-p{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .db-p .fig.pp-fig{min-width:780px} .db-p .fig.ln{min-width:540px} .db-p > .fig.dg:not(.lg):not(.rb):not(.gg):not(.lc):not(.pp-fig):not(.ln){min-width:620px}
  .db-p .fig.gg{max-width:300px;margin:0 auto}
  /* A-002: on a phone the steps scroll under the stage, so the stage stays opaque and the model sits above it,
     clear of the ladder; the big step number and the caption give way to the step text */
  .drill .dr-frame{background:var(--paper)!important}
  #modelwrap.in-drill{z-index:3}
  .dr-slot{top:40px}
  .dr-big,.dr-ill{display:none}
}

/* ================================================================ PASS 3 — hero title block in the flow
   It was absolutely positioned at bottom:34px, so a longer thesis slid the CTA row underneath it. In the
   flow (pushed down by margin-top:auto) it can never collide: a taller bio just makes the hero taller. */
@media (min-width:981px){
  .hero-bio{margin-top:clamp(84px,13vh,170px)}
  .hero-tb{position:relative;left:auto;bottom:auto;align-self:flex-start;margin:auto 0 34px clamp(40px,6vw,96px)}
}

/* ============================================================================ PASS 4 — THE SPINE
   Syed's picks (2026-09-25): A2 site walk · H3 quiet · F3 binder tabs · M1 phone tab bar · G2 adaptive
   cursor · C7 guided tour · C9 golden hour. Everything below overrides earlier rules on purpose; the
   earlier passes are left intact above so a rollback is a deletion of this block.
   ========================================================================== */

/* ---- H3 · quiet: frames go, whitespace separates, drawing marks stay only where they mean something */
body{background-image:none}
.hero{background-image:linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px),
  linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
.sheet{border:0;background:transparent;padding:0;margin:0}
.sheet::before,.sh,.match,.tbfix,.kp-col,.sidx{display:none!important}
.dt{margin:0 0 28px}
.dt-b h2{text-transform:none;letter-spacing:-.025em}
.mast nav a:not(.talk){display:none}          /* the binder tabs are the navigation now */
.btn.ghost{border-color:transparent;background:transparent;text-decoration:underline;text-underline-offset:4px}
.btn.ghost:hover{box-shadow:none;color:var(--red)}
.sun-g{display:inline-flex;gap:14px;margin-left:auto}
.sun-g .ly-sun{margin-left:0}
#livesun[aria-pressed="true"]{color:var(--red)}

/* ---- A2 · the walk: a stage that holds the model, beside a reading column */
.walk{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);width:100vw;margin-left:calc(50% - 50vw);position:relative;padding-right:52px}
.walk-stage{position:sticky;top:var(--mast);height:calc(100vh - var(--mast));height:calc(100svh - var(--mast));align-self:start;z-index:5;pointer-events:none;overflow:hidden}
.st-slot{position:absolute;inset:0;border:0;aspect-ratio:auto}
.walk-stage::after{content:"";position:absolute;right:0;top:12%;bottom:12%;width:1px;background:var(--line-2)}
.walk-col{padding:14vh clamp(24px,4vw,64px) 16vh clamp(24px,3.4vw,56px);min-width:0}
.walk-col > .sheet + .sheet,.walk-col > .sheet + div,.walk-col > div + .sheet{margin-top:22vh}
.st-map{position:absolute;inset:0;z-index:2;background:var(--paper);padding:56px 22px 80px}
.st-chrome{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 22px 20px}
.st-cap{margin:0;max-width:74%;padding:9px 13px 10px;background:color-mix(in srgb,var(--paper) 90%,transparent);border-left:3px solid var(--red)}
.st-n{display:block;font:700 12.5px var(--mono);letter-spacing:.08em;color:var(--ink)}
.st-f{display:block;font:italic 15px/1.35 var(--serif);color:var(--ink-2);margin-top:2px}
.st-f:empty{display:none}
.st-btns{display:flex;gap:6px;pointer-events:auto}
.st-tour,.st-min{font:600 11.5px var(--mono);letter-spacing:.06em;color:var(--ink);background:var(--paper);border:1px solid var(--ink);padding:7px 11px 6px;cursor:pointer;transition:background .2s,color .2s}
.st-tour:hover{background:var(--ink);color:var(--paper)} .st-min{display:none}
#modelwrap.in-walk{outline:none;box-shadow:none;background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}
#modelwrap.in-walk .kp-label{display:none}
#modelwrap.slot:not(.in-drill):not(.in-walk) .mtag{display:none}
#modelwrap.slot.in-walk .mtag{display:block}
.st-show{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--mast) + 8px);z-index:45;font:600 11.5px var(--mono);background:var(--ink);color:var(--paper);border:0;padding:8px 14px;cursor:pointer}
/* the reading column, one idea wide */
.walk .nt-grid{display:block}
.walk .gn{grid-template-columns:1fr} .walk .gn-i:nth-child(odd){border-right:0} .walk .gn-i:nth-child(even){padding-left:0}
.walk .drill{display:block;margin:0}
.walk .dr-steps{padding:6vh 0 18vh}
.walk .dr-step{min-height:66vh;opacity:.3}
.walk .dr-step.on{opacity:1}
.walk .sx-grid{display:block}
.walk .sx-pin{position:static;max-width:460px;margin:0 0 30px}
.walk .sx{max-height:none}
.walk .sx-cap{display:none}
.walk .sx-list{gap:30px}
.walk .dgrid{grid-template-columns:1fr;gap:18px}
.walk .dsheet{margin-top:40px}
.walk .lv-nrcan{box-shadow:5px 5px 0 var(--ink)}
.walk .lv-mezz::before{display:none}
/* the plates between walks keep the page's width, with room to breathe */
.dash-sheet{margin:20vh 0 12vh}
.why{margin-top:0}

/* ---- F3 · binder tabs: every sheet, one click, always in reach */
.btabs{position:fixed;right:0;top:calc(var(--mast) + 18px);z-index:40;display:flex;flex-direction:column;gap:3px;opacity:0;transform:translateX(12px);transition:opacity .35s,transform .35s var(--ease-out);pointer-events:none}
body.past-hero .btabs{opacity:1;transform:none;pointer-events:auto}
.btabs a{display:flex;flex-direction:column;align-items:center;gap:6px;writing-mode:vertical-rl;padding:12px 7px 12px 8px;background:var(--paper);border:1px solid var(--line-3);border-right:0;color:var(--ink-3);transition:background .2s,color .2s,padding .2s}
.btabs a b{font:600 10px var(--mono);letter-spacing:.06em;color:var(--red)}
.btabs a span{font:500 12px var(--disp);letter-spacing:.02em}
.btabs a:hover{color:var(--ink);padding-right:10px}
.btabs a.on{background:var(--ink);color:var(--paper);border-color:var(--ink);padding-right:12px}
.btabs a.on b{color:#ffb39f}

/* ---- M1 · the phone tab bar */
.tbar{display:none}

/* ---- C7 · the guided tour */
.tour-bg{position:fixed;inset:0;z-index:60;background:var(--paper)}
html.touring #modelwrap{z-index:61!important}
.tour{position:fixed;inset:0;z-index:62;pointer-events:none}
.tr-slot{position:absolute;inset:0;border:0;aspect-ratio:auto}
.tr-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:18px;padding:16px 22px;pointer-events:auto;background:linear-gradient(var(--paper),transparent)}
.tr-k{font:600 11px var(--mono);letter-spacing:.16em;color:var(--red);white-space:nowrap}
.tr-prog{flex:1;display:flex;gap:4px;list-style:none;margin:0;padding:0}
.tr-prog li{flex:1;height:3px;background:var(--line-2);position:relative;overflow:hidden}
.tr-prog li.done i,.tr-prog li.on i{position:absolute;inset:0;background:var(--ink)}
.tr-prog li.on i{transform-origin:left;animation:trfill var(--dur,9s) linear both}
.tour.paused .tr-prog li.on i{animation-play-state:paused}
@keyframes trfill{from{transform:scaleX(0)}}
.tr-x{font:400 26px/1 var(--disp);background:var(--paper);border:1px solid var(--ink);width:38px;height:38px;cursor:pointer;color:var(--ink)}
.tr-card{position:absolute;left:clamp(16px,4vw,56px);bottom:clamp(16px,5vh,56px);width:min(460px,calc(100% - 32px));pointer-events:auto;background:var(--paper);border:1.5px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:18px 20px 16px}
.tr-n{margin:0 0 6px;font:600 11px var(--mono);letter-spacing:.12em;color:var(--red)}
.tr-card h2{margin:0 0 8px;font:700 clamp(24px,2.4vw,32px)/1.08 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.tr-b{margin:0 0 14px;font-size:17px;line-height:1.5;color:var(--ink-2)}
.tr-ctl{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tr-ctl button{font:600 14px var(--mono);width:40px;height:36px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer}
.tr-ctl button:hover{background:var(--ink);color:var(--paper)}
.tr-ev,.tr-mail{margin-left:auto;font:600 12.5px var(--mono);color:var(--red);text-decoration:underline;text-underline-offset:3px}
.tr-mail{background:var(--ink);color:var(--paper);text-decoration:none;padding:9px 12px}
html.touring .mast,html.touring .btabs,html.touring .tbar,html.touring .st-show{visibility:hidden}
html.touring body{overflow:hidden}

/* ---- G2 · the adaptive cursor: custom marks over drawings and the model only; the OS pointer everywhere else */
html.has-xh body,html.has-xh a,html.has-xh button,html.has-xh [role="button"],html.has-xh .room,html.has-xh .dframe,html.has-xh tr,html.has-xh #modelwrap canvas{cursor:auto}
html.has-xh a,html.has-xh button{cursor:pointer}
html.has-xh #modelwrap canvas,html.has-xh svg.fig,html.has-xh .dframe,html.has-xh .dframe *,html.has-xh .room,html.has-xh .room *,
html.has-xh .sx,html.has-xh .sx *,html.has-xh .sched tbody tr,html.has-xh .sched tbody tr *,html.has-xh .drmap,html.has-xh .gn-i,html.has-xh .gn-i *{cursor:none!important}
html.has-xh .gn-i a,html.has-xh .gn-i button,html.has-xh .sched tbody tr a{cursor:pointer!important}
.xh-h,.xh-v,.xh-tag{display:none!important}
.xh-pb{width:12px;height:12px;border:1.5px solid #fff;box-shadow:0 0 0 1.4px var(--ink),inset 0 0 0 1.4px var(--ink);background:transparent;opacity:0;transition:opacity .15s}
.xh[data-m="draw"] .xh-pb{opacity:1}
.xh-ring{position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--ink),inset 0 0 0 1.5px var(--ink);display:grid;place-items:center;opacity:0;transition:opacity .15s;will-change:transform}
.xh-ring em{font:700 8.5px var(--mono);font-style:normal;letter-spacing:.1em;color:#fff;background:var(--ink);padding:1px 4px;transform:translateY(28px)}
.xh[data-m="model"] .xh-ring{opacity:1}
.xh:not([data-m="draw"]) .xh-snap{opacity:0!important}

/* ---- narrow screens: the stage becomes a strip on top; the tab bar goes under the thumb */
@media (max-width:1000px){
  .walk{display:block;padding-right:0}
  .walk-stage{height:36vh;height:36svh;border-bottom:1px solid var(--line-2);background:transparent}
  .walk-stage::after{display:none}
  .walk-col{padding:8vh 20px 12vh}
  .walk-col > .sheet + .sheet,.walk-col > .sheet + div,.walk-col > div + .sheet{margin-top:14vh}
  .st-chrome{padding:0 10px 8px}
  .st-cap{padding:6px 9px 7px;max-width:72%} .st-n{font-size:10.5px} .st-f{font-size:13px}
  .st-min{display:inline-block}
  .st-tour,.st-min{padding:6px 9px 5px;font-size:11px;white-space:nowrap}
  .st-tour .lg{display:none}
  .st-map{padding:34px 8px 44px}
  html.stage-min .walk-stage{height:0;border:0;overflow:hidden}
  .btabs{display:none}
  .walk .dr-step{min-height:52vh}
}
@media (max-width:760px){
  .tbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);height:calc(58px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:color-mix(in srgb,var(--paper) 96%,transparent);border-top:1px solid var(--line-3);backdrop-filter:blur(8px)}
  .tbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 10.5px var(--mono);color:var(--ink-3)}
  .tbar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
  .tbar a.on{color:var(--red)}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  .tr-top{padding:10px 12px} .tr-k{display:none}
  .tr-card{left:10px;right:10px;width:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:14px 14px 12px;box-shadow:5px 5px 0 var(--ink)}
  .tr-b{font-size:15.5px}
}

/* ============================================================================ PASS 5 — the model does more
   The hero toolbar gains TIME (the 4D scrubber) and LIGHT (weather + the sun); the stage can take its building
   apart; two plates put the model full-bleed and let the scroll drive it. */
.yr-row{flex:1;display:flex;align-items:center;gap:10px;position:relative;min-width:0}
.yr-v{font:700 15px var(--disp);color:var(--red);min-width:42px;letter-spacing:-.01em}
.yr-r{flex:1;accent-color:var(--red);min-width:120px;cursor:pointer}
.yr-ticks{position:absolute;left:52px;right:0;top:100%;display:flex;justify-content:space-between;pointer-events:none}
.yr-ticks i{font:500 8.5px var(--mono);font-style:normal;color:var(--ink-3);margin-top:-3px}
.wx-row{display:flex;gap:4px;flex-wrap:wrap}
.wx{display:inline-flex;align-items:center;gap:5px;font:500 11.5px var(--disp);color:var(--ink-2);background:var(--paper);border:1px solid var(--line-3);padding:4px 9px 3px;cursor:pointer;transition:all .2s}
.wx span{font-size:12px;color:var(--ink-3)}
.wx:hover{border-color:var(--ink)} .wx[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)} .wx[aria-pressed="true"] span{color:var(--paper)}
.ly-cap .ag-y{font:700 12px var(--mono);color:var(--ink)} .ly-cap .ag-b{font:700 12px var(--mono)}
.ag-good{color:var(--c-good)} .ag-fair{color:var(--c-fair)} .ag-poor{color:var(--c-poor)} .ag-crit{color:var(--c-crit)} .ag-a{color:var(--blue)}
.ly-cap .ag-n{display:block;font:500 10px var(--mono);color:var(--ink-3);margin-top:2px}
.ly-sw.ly-aging{background:linear-gradient(90deg,var(--c-good),var(--c-fair),var(--c-poor),var(--c-crit))}
/* take it apart */
.st-kit{display:flex;gap:4px;margin-right:8px}
.st-kit[hidden]{display:none}
.st-kit button{font:600 11px var(--mono);letter-spacing:.04em;color:var(--ink);background:var(--paper);border:1px solid var(--line-3);padding:7px 9px 6px;cursor:pointer;transition:all .2s}
.st-kit button:hover{border-color:var(--ink)} .st-kit button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
/* the plates */
.plate{position:relative;width:100vw;margin-left:calc(50% - 50vw)}
.pl-pin{position:sticky;top:var(--mast);height:calc(100vh - var(--mast));height:calc(100svh - var(--mast));overflow:hidden}
.pl-slot{position:absolute;inset:0;border:0;aspect-ratio:auto}
.pl-top{position:absolute;left:clamp(20px,4vw,64px);top:clamp(20px,5vh,54px);max-width:min(560px,70vw);z-index:6;pointer-events:none}
.pl-k{margin:0 0 8px;font:600 11px var(--mono);letter-spacing:.16em;color:var(--red)}
.pl-h{margin:0;font:700 clamp(30px,3.6vw,54px)/1.02 var(--disp);letter-spacing:-.03em;color:var(--ink)}
.pl-sub{margin:12px 0 0;font-size:17px;line-height:1.5;color:var(--ink-2);max-width:34em;background:color-mix(in srgb,var(--paper) 80%,transparent)}
.pl-list{position:absolute;right:clamp(64px,6vw,100px);top:50%;transform:translateY(-50%);z-index:6;width:min(380px,34vw);list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pl-list li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:10px 12px 11px;background:color-mix(in srgb,var(--paper) 92%,transparent);border-left:3px solid var(--line-3);opacity:.35;transform:translateX(10px);transition:opacity .4s,transform .4s var(--ease-out),border-color .4s}
.pl-list li.on{opacity:1;transform:none;border-left-color:var(--red)}
.pl-list b{grid-column:1;font:700 12px var(--mono);letter-spacing:.08em;color:var(--ink)}
.pl-list span{grid-column:1;font-size:15px;line-height:1.4;color:var(--ink-2)}
.pl-list .bref{grid-column:2;grid-row:1/span 2}
@media (max-width:1000px){
  .plate-tl{height:300vh} .plate-ex{height:240vh}
  .pl-top{left:16px;right:16px;top:14px;max-width:none} .pl-h{font-size:26px} .pl-sub{font-size:14.5px}
  .pl-cap{left:12px;right:12px;bottom:56px;font-size:15.5px;padding:10px 12px;box-shadow:4px 4px 0 var(--ink)}
  .pl-list{left:12px;right:12px;top:auto;bottom:14px;transform:none;width:auto;gap:4px}
  .pl-list li{padding:8px 10px;display:none} .pl-list li.cur{display:grid} .pl-list span{font-size:13.5px}
  .st-kit button{padding:6px 7px 5px;font-size:10px}
}
@media (max-width:760px){
  .pl-pin{height:calc(100svh - var(--mast) - 58px)}
  .yr-ticks{display:none}
}

/* pass 5 fixes: plate chrome above the docked model; stage buttons never wrap; year ticks at their true years */
.pl-pin{z-index:6;pointer-events:none}
.pl-pin .bref,.pl-list{pointer-events:auto}
.st-btns{flex-direction:column;align-items:flex-end;gap:6px}
.st-btns > *{white-space:nowrap}
.st-kit button{white-space:nowrap}
.st-tour + .st-min{margin-left:6px}
.st-btns .st-row{display:flex;gap:6px}
.yr-ticks{display:block;height:12px}
.yr-ticks i{position:absolute;top:0;transform:translateX(-50%)}

/* ============================================================================ PASS 6 — the control room, before / after, the game */

/* ---- B1 · the control room: the dashboard, full-bleed on a dark board; every figure re-inks itself from these tokens */
.dash-sheet{--paper:#14181c; --paper-2:#1a1f24; --paper-3:#232a30; --ink:#eef2f4; --ink-2:#c6ced5; --ink-3:#8e99a3; --faint:#6b7680;
  --line:rgba(238,242,244,.1); --line-2:rgba(238,242,244,.2); --line-3:rgba(238,242,244,.4);
  --blue:#7cc4ff; --red:#ff8466; --env:#8ed489; --geo:#8cbcff; --rp:#e4bf8a; --ai:#b8a3ff; --sci:#6fdcc6; --edu:#f2a2c7;
  --c-good:#8ed489; --c-fair:#f0cf6e; --c-poor:#ffa86e; --c-crit:#ff7f73; --on-fill:#14181c; --hl:rgba(124,196,255,.16);
  color:var(--ink-2);width:100vw;margin:0 0 0 calc(50% - 50vw)!important;padding:14vh clamp(20px,5vw,84px) 16vh;position:relative;
  background-color:var(--paper);
  background-image:linear-gradient(rgba(124,196,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(124,196,255,.05) 1px,transparent 1px);background-size:32px 32px}
.dash-sheet::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,rgba(0,0,0,.08) 3px 4px);opacity:.5}
.dash-sheet > *{position:relative;z-index:1;max-width:1380px;margin-left:auto;margin-right:auto}
.cr-k{margin:0 auto 10px;font:600 11px var(--mono);letter-spacing:.2em;color:var(--red)}
.dash-sheet .dash{border-color:var(--line-3);background:rgba(255,255,255,.02)}
.dash-sheet .db-k,.dash-sheet .db-p{background:rgba(255,255,255,.035);border-color:var(--line-2)}
.dash-sheet .db-k:hover{box-shadow:4px 4px 0 var(--blue)}
.dash-sheet .db-b{background:transparent;color:var(--ink-2);border-color:var(--line-3)} .dash-sheet .db-b.on{background:var(--ink);color:var(--paper)}
.db-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--env);margin-right:7px;vertical-align:0;box-shadow:0 0 0 0 rgba(142,212,137,.6)}
@media (prefers-reduced-motion:no-preference){ .db-live{animation:pulse 2s infinite} }
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(142,212,137,.55)}70%{box-shadow:0 0 0 8px rgba(142,212,137,0)}100%{box-shadow:0 0 0 0 rgba(142,212,137,0)}}
.db-meta{font-size:11px!important;color:var(--ink-2)!important}
.db-game{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 22px;width:100%;margin:0 0 14px;padding:18px 22px;text-align:left;cursor:pointer;
  background:linear-gradient(90deg,rgba(255,132,102,.16),rgba(255,132,102,.04));border:1.5px solid var(--red);color:var(--ink);font:inherit;transition:background .2s,transform .2s var(--ease-out)}
.db-game:hover{background:linear-gradient(90deg,rgba(255,132,102,.26),rgba(255,132,102,.08));transform:translateY(-2px)}
.dg-k{grid-row:1/span 2;font:600 11px var(--mono);letter-spacing:.14em;color:var(--red);writing-mode:vertical-rl;transform:rotate(180deg)}
.db-game b{font:700 clamp(24px,2.4vw,34px)/1 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.dg-s{grid-column:2;font-size:16px;line-height:1.45;color:var(--ink-2);max-width:60ch}
.dg-go{grid-column:3;grid-row:1/span 2;font:700 13px var(--mono);color:var(--paper);background:var(--red);padding:12px 16px;white-space:nowrap}

/* ---- the control room's door to the game (the Pass 6 game block was retired in Pass 12) */
html.gaming body{overflow:hidden}
@media (max-width:760px){
  .db-game{grid-template-columns:1fr} .dg-k{writing-mode:horizontal-tb;transform:none;grid-row:auto} .dg-s,.dg-go{grid-column:1;grid-row:auto} .dg-go{justify-self:start} }


/* ============================================================================ PASS 7 — the site's own treatments */
/* the register correction on N-02: the public rating turns over to what the engineers found */
.mtag.mt-flip{padding:0;background:transparent;border:0;box-shadow:none;perspective:700px}
.mt-flip .fl-in{display:grid;transform-style:preserve-3d}
.mt-flip .fl-a,.mt-flip .fl-b{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:7px 11px 6px;font:600 11.5px var(--mono);letter-spacing:.06em;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);white-space:nowrap}
.mt-flip .fl-a b{color:var(--c-good)}
.mt-flip .fl-b{transform:rotateX(180deg);background:var(--c-poor);border-color:var(--c-poor);color:#fff}
.mt-flip .fl-b b{color:#fff}
.mt-flip.on .fl-in{animation:regflip 1.1s var(--ease-out) 1.6s both}
@keyframes regflip{from{transform:rotateX(0)}to{transform:rotateX(180deg)}}
@media (prefers-reduced-motion:reduce){ .mt-flip.on .fl-in{animation:none;transform:rotateX(180deg)} }
.mtag .mt-c{font-weight:700}
.mtag i{font-style:italic;font-family:var(--serif);letter-spacing:0}

/* ============ PASS 8½ · the build caption: who, where, and what's going up ============ */
.tlcard{position:absolute;z-index:6;right:clamp(40px,5vw,80px);top:calc(var(--mast) + 176px);width:min(340px,30vw);padding:12px 14px 11px;
  background:color-mix(in srgb,var(--paper) 92%,transparent);border:1px solid var(--ink);box-shadow:4px 4px 0 color-mix(in srgb,var(--ink) 14%,transparent);
  opacity:0;transform:translateY(-6px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.tlcard.on{opacity:1;transform:none}
.tlcard p{margin:0}
.tc-k{font:600 10px var(--mono);letter-spacing:.12em;color:var(--red)}
.tc-t{font:700 clamp(17px,1.6vw,22px)/1.15 var(--disp);color:var(--ink);margin-top:5px!important;text-wrap:balance}
.tc-p{font:400 13.5px/1.4 var(--serif);color:var(--ink-2);margin-top:5px!important}
.tc-n{display:flex;gap:8px;align-items:baseline;margin-top:9px!important;padding-top:8px;border-top:1px solid var(--line-2);font:500 10px/1.35 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.tc-n span{color:var(--ink);font-weight:700;white-space:nowrap}
.tc-n b{font-weight:500}
.tlcard.swap .tc-k,.tlcard.swap .tc-t,.tlcard.swap .tc-p{animation:tcIn .6s var(--ease) both}
@keyframes tcIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (max-width:760px){.tlcard{left:16px;right:16px;width:auto;top:calc(var(--mast) + 10px);padding:9px 11px}.tc-p{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.tlcard,.tlcard.swap .tc-k,.tlcard.swap .tc-t,.tlcard.swap .tc-p{transition:none;animation:none}}
@media print{.tlcard{display:none!important}}

/* ============ PASS 9 · the camera, the text and the model pointing at each other, zoom, explore ============ */
.st-zoom{display:inline-flex}
.st-z,.st-x{font:600 11.5px var(--mono);letter-spacing:.06em;color:var(--ink);background:var(--paper);border:1px solid var(--ink);padding:7px 10px 6px;cursor:pointer;transition:background .2s,color .2s}
.st-z{min-width:30px} .st-z+.st-z{border-left:0}
.st-z:hover,.st-x:hover{background:var(--ink);color:var(--paper)}
.ph-x{margin-left:6px}
.leader{position:fixed;inset:0;width:100vw;height:100vh;z-index:40;pointer-events:none;opacity:0;transition:opacity .25s}
.leader.on{opacity:1}
.leader line{stroke:var(--red);stroke-width:1;stroke-dasharray:3 3}
.leader circle{fill:var(--paper);stroke:var(--red);stroke-width:1.5}
.leader text{font:600 9.5px var(--mono);letter-spacing:.08em;fill:var(--red);paint-order:stroke;stroke:var(--paper);stroke-width:3px}
.walk-col [data-cam]{transition:box-shadow .25s var(--ease)}
.hl-bar{box-shadow:inset 3px 0 0 var(--red),-9px 0 0 -6px var(--red)}
.hl-chip{position:fixed;right:clamp(70px,7vw,110px);top:50%;z-index:41;font:600 10.5px var(--mono);letter-spacing:.06em;color:var(--paper);background:var(--red);border:0;padding:7px 10px;cursor:pointer;box-shadow:3px 3px 0 color-mix(in srgb,var(--ink) 20%,transparent)}
.gn-i{cursor:pointer}
/* explore */
.explore-bg{position:fixed;inset:0;z-index:60;background:var(--paper)}
html.exploring #modelwrap{z-index:61!important}
html.exploring #modelwrap canvas{touch-action:none;cursor:grab}
html.exploring body{overflow:hidden}
html.exploring .mast,html.exploring .btabs,html.exploring .tbar,html.exploring .st-show,html.exploring .hl-chip,html.exploring .leader{visibility:hidden}
.explore{position:fixed;inset:0;z-index:62;pointer-events:none}
.ex-slot{position:absolute;inset:0;border:0;aspect-ratio:auto;height:auto;width:auto}
.ex-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;pointer-events:none}
.ex-k{margin:0;font:600 10.5px var(--mono);letter-spacing:.1em;color:var(--ink-2)}
.ex-close{pointer-events:auto;font:600 11.5px var(--mono);letter-spacing:.06em;background:var(--ink);color:var(--paper);border:0;padding:8px 12px;cursor:pointer}
.ex-side{position:absolute;left:18px;top:56px;bottom:18px;width:250px;overflow:auto;pointer-events:auto;background:color-mix(in srgb,var(--paper) 94%,transparent);border:1px solid var(--line-2);padding:12px}
.ex-h{margin:12px 0 6px;font:600 10px var(--mono);letter-spacing:.12em;color:var(--red)} .ex-h:first-child{margin-top:0}
.ex-views,.ex-lens{display:flex;flex-wrap:wrap;gap:5px}
.ex-views button,.ex-lens button{font:500 11px var(--mono);letter-spacing:.03em;color:var(--ink);background:var(--paper);border:1px solid var(--line-3);padding:5px 8px;cursor:pointer}
.ex-views button:hover,.ex-lens button:hover,.ex-lens button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.ex-ph{margin:10px 0 4px;font:600 9.5px var(--mono);letter-spacing:.1em;color:var(--ink-3)}
.ex-idx button{display:block;width:100%;text-align:left;background:none;border:0;border-left:2px solid transparent;padding:5px 6px;cursor:pointer;color:var(--ink)}
.ex-idx button b{display:block;font:600 10.5px var(--mono);letter-spacing:.04em}
.ex-idx button span{display:block;font:400 12.5px/1.3 var(--serif);color:var(--ink-2)}
.ex-idx button:hover,.ex-idx button.on{border-left-color:var(--red);background:color-mix(in srgb,var(--red) 7%,transparent)}
.ex-card{position:absolute;right:18px;bottom:18px;width:min(380px,calc(100vw - 36px));pointer-events:auto;background:var(--paper);border:1px solid var(--ink);box-shadow:4px 4px 0 color-mix(in srgb,var(--ink) 14%,transparent);padding:12px 14px}
.ex-cn{margin:0;font:700 12px var(--mono);letter-spacing:.05em;color:var(--ink)}
.ex-cf{margin:6px 0 10px;font:400 14.5px/1.4 var(--serif);color:var(--ink-2)}
.ex-cb{display:flex;gap:6px}
.ex-cb button{font:600 11px var(--mono);letter-spacing:.05em;border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:6px 10px;cursor:pointer}
.ex-cb .ex-go{background:var(--ink);color:var(--paper)}
.ex-zoom{position:absolute;right:18px;top:60px;display:flex;flex-direction:column;pointer-events:auto}
.ex-zoom button{width:34px;height:34px;font:600 16px var(--mono);background:var(--paper);border:1px solid var(--ink);color:var(--ink);cursor:pointer} .ex-zoom button+button{border-top:0}
@media (max-width:760px){
  .ex-k{font-size:9px} .ex-side{left:10px;right:10px;top:auto;bottom:10px;width:auto;max-height:34vh}
  .ex-card{bottom:calc(34vh + 20px);right:10px} .ex-zoom{right:10px;top:78px}
  .st-x{padding:6px 8px 5px;font-size:11px} .ph-x{display:none}
}
@media print{.leader,.hl-chip,.explore,.explore-bg{display:none!important}}

/* ============ PASS 10 · lenses, the unfunded decade, the movers ============ */
.ly-age{font:600 11px var(--mono)!important;letter-spacing:.04em;border-style:dashed!important}
.ly-age[aria-pressed="true"]{background:var(--c-poor)!important;color:var(--paper)!important;border-style:solid!important}
.ly-sw.ly-register{background:repeating-linear-gradient(90deg,var(--red) 0 4px,transparent 4px 7px)}
.mt-i{font-style:italic;color:var(--ink-3);font-size:.92em}

.ly-age[hidden]{display:none!important}

/* ============ PASS 11 · the key plan, as a GIS map ============ */
.dr-map .kpm{position:relative;width:100%;height:100%}
.kpm-svg{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.kpm-svg:active{cursor:grabbing}
.kl-grat path{fill:none;stroke:var(--ink);stroke-width:.4;opacity:.18;vector-effect:non-scaling-stroke}
.kl-nrc path{stroke:none;opacity:.55;transition:opacity .5s}
.kpm.no-nrc .kl-nrc{opacity:0} .kl-nrc,.kl-dfo,.kl-props,.kl-places{transition:opacity .5s}
.kl-rl{font:600 13px var(--mono);letter-spacing:.14em;fill:var(--ink);opacity:.72;text-anchor:middle;paint-order:stroke;stroke:var(--paper);stroke-width:3px}
.kl-dfo{opacity:1} .kpm.no-dfo .kl-dfo{opacity:0;pointer-events:none}
.kl-dh{fill:url(#kh1);color:var(--ink);opacity:.22;stroke:var(--ink);stroke-width:.8;vector-effect:non-scaling-stroke}
.kl-rl-d{fill:var(--red)}
.kl-cnt text{font:700 12px var(--mono);letter-spacing:.04em;fill:var(--red);text-anchor:middle;paint-order:stroke;stroke:var(--paper);stroke-width:3px} .kl-cnt text.kl-cs{font-weight:500;font-size:10px;fill:var(--ink-2)}
.kl-prov path{fill:none;stroke:var(--ink);stroke-width:.9;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kl-prov text{font:500 10px var(--mono);letter-spacing:.1em;fill:var(--ink-3);text-anchor:middle}
.kl-props circle{fill:var(--blue);fill-opacity:.62;stroke:var(--paper);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity .2s}
.kl-props circle:hover,.kl-props circle.hot{fill:var(--red);fill-opacity:.95}
.kpm.no-props .kl-props{opacity:0;pointer-events:none} .kpm.kp-s1 .kl-props circle{fill-opacity:.22}
.kp-pl{cursor:pointer;transition:opacity .4s} .kp-pl.off{opacity:0;pointer-events:none}
.kp-work rect{fill:var(--ink);stroke:var(--paper);stroke-width:1;vector-effect:non-scaling-stroke}
.kp-field circle{fill:var(--red);stroke:var(--paper);stroke-width:1;vector-effect:non-scaling-stroke}
.kp-trip circle{fill:var(--paper);stroke:var(--red);stroke-width:2;vector-effect:non-scaling-stroke}
.kp-waste path{fill:var(--c-good);stroke:var(--ink);stroke-width:.8;vector-effect:non-scaling-stroke}
.kp-hq path{fill:var(--red);stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.kp-pl.hot rect,.kp-pl.hot circle,.kp-pl.hot path{stroke:var(--red);stroke-width:2.5}
.kl-ncr{fill:none;stroke:var(--red);stroke-width:1.2;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.kl-hqt{font:700 10.5px var(--mono);letter-spacing:.08em;fill:var(--red);paint-order:stroke;stroke:var(--paper);stroke-width:3px}
.kpm-ui{position:absolute;left:0;top:0;width:220px;padding:8px 10px;background:color-mix(in srgb,var(--paper) 90%,transparent);border:1px solid var(--line-2)}
.kpm-h{margin:0 0 5px;font:600 9.5px var(--mono);letter-spacing:.14em;color:var(--red)}
.kpm-l{display:flex;align-items:center;gap:7px;width:100%;text-align:left;background:none;border:0;padding:3px 0;font:500 10.5px/1.3 var(--mono);letter-spacing:.02em;color:var(--ink-3);cursor:pointer}
.kpm-l.on{color:var(--ink)}
.kpm-sw{width:12px;height:12px;flex:none;border:1px solid var(--ink);opacity:.35} .kpm-l.on .kpm-sw{opacity:1}
.kpm-sw-props{border-radius:50%;background:var(--blue)} .kpm-sw-nrc{background:linear-gradient(90deg,#7fa7c9,#c9b98f,#8fbfae)}
.kpm-sw-dfo{background:repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 4px)} .kpm-sw-waste{background:var(--c-good);clip-path:polygon(50% 0,100% 100%,0 100%);border:0}
.kpm-sw-field{border-radius:50%;background:var(--red)} .kpm-sw-work{background:var(--ink)}
.kpm-z{display:flex;gap:4px;margin-top:7px}
.kpm-z button{font:600 11px var(--mono);border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:4px 8px;cursor:pointer}
.kpm-z button.on,.kpm-z button:hover{background:var(--ink);color:var(--paper)}
.kpm-id{position:absolute;right:0;top:0;width:min(290px,70%);background:var(--paper);border:1px solid var(--ink);box-shadow:3px 3px 0 color-mix(in srgb,var(--ink) 14%,transparent);padding:10px 12px}
.kpm-x{position:absolute;right:6px;top:4px;border:0;background:none;font:600 16px var(--mono);cursor:pointer;color:var(--ink)}
.kpm-ik{margin:0;font:600 9.5px var(--mono);letter-spacing:.12em;color:var(--red)}
.kpm-in{margin:4px 0 6px;font:700 14px/1.25 var(--disp);color:var(--ink)}
.kpm-it{margin:0;font:400 13px/1.4 var(--serif);color:var(--ink-2)}
.kpm-at{border-collapse:collapse;width:100%;font:400 11px var(--mono)} .kpm-at th{text-align:left;color:var(--ink-3);font-weight:500;padding:2px 8px 2px 0;white-space:nowrap} .kpm-at td{padding:2px 0;color:var(--ink)}
.kpm-a{display:inline-block;margin-top:7px;font:600 11px var(--mono);color:var(--red)}
.kpm-src{margin:6px 0 0;font:400 9.5px var(--mono);color:var(--ink-3)}
.kpm-tbl{position:absolute;left:0;right:0;bottom:0;max-height:44%;overflow:auto;background:var(--paper);border:1px solid var(--ink)}
.kpm-tbl table{width:100%;border-collapse:collapse;font:400 11px var(--mono)} .kpm-tbl th{position:sticky;top:0;background:var(--paper-2);text-align:left}
.kpm-tbl th button{border:0;background:none;font:600 10px var(--mono);letter-spacing:.06em;padding:5px 6px;cursor:pointer;color:var(--ink)}
.kpm-tbl td{padding:3px 6px;border-top:1px solid var(--line)} .kpm-tbl tr[data-i]{cursor:pointer} .kpm-tbl tr[data-i]:hover td{background:color-mix(in srgb,var(--red) 8%,transparent)}
.kpm-meta{position:absolute;left:232px;right:0;top:0;margin:0;font:400 9.5px/1.35 var(--mono);color:var(--ink-3);text-align:right}
.kl-hqs{font-weight:500;font-size:9.5px;letter-spacing:.04em}
.dr-gis{margin-top:14px;padding-top:10px;border-top:1px solid var(--line-2)}
.dr-gis-h{margin:0 0 6px;font:600 10px var(--mono);letter-spacing:.12em;color:var(--red);text-transform:uppercase}
.dr-gis ol{margin:0;padding:0;list-style:none;display:grid;gap:4px} .dr-gis li{font:400 13.5px/1.35 var(--serif);color:var(--ink-2)}
@media (max-width:760px){.kpm-ui{width:auto;right:0;display:flex;flex-wrap:wrap;gap:0 10px}.kpm-h{width:100%}.kpm-l{width:auto}.kpm-id{top:auto;bottom:24px;width:auto;left:0}}

/* ============ PASS 11 · components you can click, and their requirements ============ */
.mtag.mt-comp{pointer-events:auto;cursor:pointer}
.mtag.mt-comp:hover,.mtag.mt-comp.hot{outline:2px solid var(--red);outline-offset:2px}
.dr-req{margin-top:14px;padding-top:10px;border-top:1px solid var(--line-2)}
.dr-req table{width:100%;border-collapse:collapse;font:400 11px/1.3 var(--mono)}
.dr-req th{text-align:left;font-weight:600;font-size:9.5px;letter-spacing:.08em;color:var(--ink-3);padding:4px 6px 4px 0;border-bottom:1px solid var(--ink)}
.dr-req td{padding:5px 6px 5px 0;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.dr-req tr[data-req]{cursor:pointer;transition:background .2s}
.dr-req tr[data-req]:hover td,.dr-req tr.on td{background:color-mix(in srgb,var(--red) 9%,transparent);color:var(--ink)}
.dr-req tr.on td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.dr-req-n{margin:8px 0 0;font:400 12.5px/1.4 var(--serif);color:var(--ink-3)}
@media (max-width:760px){.dr-req table{font-size:10px}.dr-req th:nth-child(2),.dr-req td:nth-child(2),.dr-req th:nth-child(6),.dr-req td:nth-child(6){display:none}.kpm-meta{left:0;top:auto;bottom:0;text-align:left}}

/* ============ PASS 11 · the career: the lift is the year, the foundations run in two lanes, the award hangs as a seal ============ */
/* the lift, beside the model */
.st-lift{position:absolute;z-index:4;right:18px;top:18px;bottom:98px;width:138px;display:flex;flex-direction:column;gap:8px;padding:10px 10px 10px 12px;pointer-events:auto;
  background:color-mix(in srgb,var(--paper) 90%,transparent);border:1px solid var(--line-2)}
.lf-k{margin:0;font:600 9.5px var(--mono);letter-spacing:.14em;color:var(--ink-3)}
.lf-shaft{position:relative;flex:1;min-height:0;cursor:ns-resize;touch-action:none;outline:none}
.lf-shaft::before{content:"";position:absolute;right:0;top:0;bottom:0;width:38px;background:var(--paper-2);border:1px solid var(--ink-2);border-top-width:3px}
.lf-shaft:focus-visible{box-shadow:0 0 0 2px var(--red)}
.lf-fl{position:absolute;left:0;right:0;border-top:1.5px solid var(--ink);padding:4px 44px 0 0;transition:background .3s}
.lf-fl b{display:block;font:700 12px/1.1 var(--disp);color:var(--ink-2)} .lf-fl i{display:block;font:500 9.5px var(--mono);font-style:normal;color:var(--ink-3);margin-top:1px}
.lf-fl.on{background:color-mix(in srgb,var(--red) 7%,transparent)} .lf-fl.on b{color:var(--red)}
.lf-found{border-top-style:dashed;background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--line-3) 60%,transparent) 6px 7px)}
.lf-grade{position:absolute;left:-12px;right:0;height:0;border-top:3px solid var(--ink)}
.lf-grade span{position:absolute;left:0;top:2px;font:600 8px var(--mono);letter-spacing:.14em;color:var(--ink-3);display:none}
.lf-mz{position:absolute;right:40px;width:4px;background:var(--red);opacity:.55}
.lf-car{position:absolute;right:1px;width:36px;height:24px;transform:translateY(50%);background:var(--red);display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 0 var(--ink);transition:bottom .12s linear;pointer-events:none}
.lf-car b{font:700 10.5px var(--mono);color:var(--paper);letter-spacing:.02em}
.lf-play{align-self:stretch;padding:6px 8px 5px;border:1px solid var(--ink);background:var(--paper);font:600 11px var(--mono);letter-spacing:.04em;color:var(--ink);cursor:pointer}
.lf-play:hover{background:var(--ink);color:var(--paper)}
/* the year card, and the globe */
.st-yc{position:absolute;z-index:4;left:22px;top:18px;width:min(360px,calc(100% - 210px));padding:10px 14px 11px;background:color-mix(in srgb,var(--paper) 92%,transparent);border-left:3px solid var(--red);pointer-events:none}
.st-yc p{margin:0} .yc-k{font:600 10px var(--mono);letter-spacing:.14em;color:var(--red)}
.yc-t{margin-top:3px!important;font:700 17px/1.2 var(--disp);color:var(--ink)} .yc-p{margin-top:3px!important;font:500 11px/1.35 var(--mono);color:var(--ink-3)}
.yc-n{margin-top:7px!important;padding-top:6px;border-top:1px solid var(--line-2);font:500 10px/1.35 var(--mono);color:var(--ink-2)} .yc-n span{color:var(--red);letter-spacing:.12em;margin-right:6px} .yc-n b{font-weight:600}
.st-yc.swap .yc-k,.st-yc.swap .yc-t,.st-yc.swap .yc-p{animation:tcIn .3s var(--ease) both}
.st-globe{position:absolute;z-index:4;left:22px;bottom:96px;width:132px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;pointer-events:none}
.st-globe.on{opacity:1;transform:none}
.st-globe canvas{display:block;width:132px;height:132px}
.st-globe p{margin:4px 0 0;text-align:center;font:600 9.5px var(--mono);letter-spacing:.1em;color:var(--ink-2);background:color-mix(in srgb,var(--paper) 85%,transparent)}
/* the floors carry years, not codes */
.lv-h{grid-template-columns:minmax(0,1fr) auto}
.lv-seal{max-width:176px;text-align:center;padding-top:0} .lv-seal span{display:block;margin-top:2px;font:500 10.5px/1.35 var(--mono);color:var(--ink-3)}
.seal{display:block;width:112px;height:112px;margin:0 auto 4px}
.sl-o{fill:color-mix(in srgb,var(--red) 5%,transparent);stroke:var(--red);stroke-width:1.8} .sl-i{fill:none;stroke:var(--red);stroke-width:.8;stroke-dasharray:2 2}
.sl-r{font:600 6.9px var(--mono);fill:var(--red);letter-spacing:.06em} .sl-n{font:700 31px var(--disp);fill:var(--red)}
.sl-y{font:600 9px var(--mono);fill:var(--red);letter-spacing:.04em} .sl-k{font:500 7.5px var(--mono);fill:var(--red);letter-spacing:.12em}
/* chips that explain themselves; rooms with a tooltip */
.dt-act{display:inline-flex;gap:4px}
.dtk{position:relative;width:11px;height:11px;padding:0;border:1px solid var(--ink);cursor:pointer;display:block}
.dtk:hover,.dtk:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
/* tooltips exist only while shown, so a hidden one can never widen the page (it did, on phones) */
.room[data-tip]::after,.dtk[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);z-index:20;padding:6px 9px 5px;display:none;
  background:var(--ink);color:var(--paper);font:500 10.5px/1.35 var(--mono);letter-spacing:.02em;text-transform:none;white-space:normal;text-align:left;pointer-events:none;animation:tipIn .15s var(--ease) both}
.room[data-tip]::after{left:6px;right:6px}
.dtk[data-tip]::after{right:-4px;width:max-content;max-width:min(250px,70vw)}
.room:hover::after,.room:focus-visible::after,.dtk:hover::after,.dtk:focus-visible::after{display:block}
@keyframes tipIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.fp-grid{overflow:visible}
.rm-n{white-space:nowrap}
/* the section drawing: rooms are partitions, not numbers */
.sx-rmk{fill:var(--c,var(--ink-3));opacity:.35}
/* the foundations: two lanes */
.sx-found{padding:18px 0 4px;scroll-margin-top:calc(var(--mast) + 24px)}
.sf-k{margin:0 0 6px;font:600 11px var(--mono);letter-spacing:.12em;color:var(--red)}
.sf-h{margin:0 0 8px;font:700 clamp(22px,2.1vw,30px)/1.1 var(--disp);letter-spacing:-.015em;color:var(--ink)}
.sf-s{margin:0 0 14px;font:400 16.5px/1.55 var(--serif);color:var(--ink-2);max-width:40em}
.fig.ln{width:100%;height:auto;display:block}
.ln-b{fill:var(--paper);stroke:var(--ink-2);stroke-width:.8;transition:stroke .15s}
.ln-s .ln-b{fill:color-mix(in srgb,var(--edu) 15%,var(--paper))} .ln-f .ln-b{fill:color-mix(in srgb,var(--geo) 15%,var(--paper))}
.ln-both .ln-b{fill:color-mix(in srgb,var(--sci) 18%,var(--paper));stroke:var(--ink)}
.ln-c{cursor:pointer;outline:none} .ln-c:hover .ln-b,.ln-c:focus-visible .ln-b,.ln-c.on .ln-b{stroke:var(--red);stroke-width:1.8}
.fig.ln .ln-t{fill:var(--ink)} .fig.ln .ln-y{fill:var(--ink-3)} .fig.ln .ln-h{fill:var(--ink);letter-spacing:.06em}
.ln-ar{fill:none;stroke:var(--red);stroke-width:1.2} .fig.ln .ln-al{fill:var(--red)} .ln-off text{fill:var(--ink-3);font-style:italic}
@media (max-width:1000px){
  .st-lift{right:6px;top:6px;bottom:40px;width:58px;padding:6px;gap:5px}
  .lf-k,.lf-fl b,.lf-fl i{display:none}
  .lf-fl{padding:0}
  .lf-play{padding:4px 2px;font-size:10px}
  .st-yc{left:8px;top:8px;width:auto;right:72px;padding:6px 9px 7px} .yc-t{font-size:13.5px} .yc-p,.yc-n{display:none}
  .walk-lift .st-cap{display:none}
  .st-globe{display:none}
}
@media (max-width:640px){ .lv-h{grid-template-columns:minmax(0,1fr)} .lv-seal{display:flex;align-items:center;gap:12px;text-align:left} .seal{margin:0;width:88px;height:88px} }
@media print{ .st-lift,.st-yc,.st-globe{display:none!important} }
@media (prefers-reduced-motion:reduce){ .lf-car{transition:none} .st-yc.swap .yc-k,.st-yc.swap .yc-t,.st-yc.swap .yc-p{animation:none} }

/* PASS 11 · phones: the key plan keeps the stage — layers fold behind a toggle, the caption steps aside while the map is up */
.kpm-tg{display:none}
@media (max-width:1000px){
  .kpm-tg{display:inline-block;padding:4px 8px 3px;border:1px solid var(--ink);background:var(--paper);font:600 10.5px var(--mono);color:var(--ink);cursor:pointer}
  .kpm:not(.ui-open) .kpm-h,.kpm:not(.ui-open) .kpm-l{display:none}
  .kpm-ui{padding:6px!important;width:auto!important}
  .kpm-ui .kpm-z{margin-top:5px}
  .kpm-meta{font-size:8px!important;line-height:1.25!important;max-width:60%}
  .st-map:not(.off) ~ .st-chrome .st-cap{display:none}
  .lv-seal{max-width:none}
  .lv-seal span{flex:1}
}

/* PASS 11 · the stamp sits in the title block, beside the sign-off, clear of the text */
.iss-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px}
.iss-foot .ask-sign{margin:0}
.iss-foot .iss-stamp{position:relative;right:auto;top:auto;margin:0 6px 0 0;transform:rotate(-6deg);flex:none}
@media (max-width:760px){ .iss-foot{flex-wrap:wrap} .iss-foot .iss-stamp{display:inline-block;margin:6px 0 0} }

/* ============ PASS 12 · A-400 · from condition to nomination ============ */
.plate-nom{height:520vh}
.pl-nom li{display:block;padding:9px 12px 10px}
.pl-nom li b{font:600 10.5px var(--mono);letter-spacing:.12em;color:var(--ink-3)} .pl-nom li.cur b{color:var(--red)}
.pl-nom li .bref{float:right;margin:-4px -4px 0 6px;transform:scale(.8);transform-origin:top right}
.pl-nom li p,.pl-nom li .nw,.pl-nom li .nw-k,.pl-nom li .nom-go{display:none}
.pl-nom li.cur p{display:block;margin:6px 0 0;font:400 15.5px/1.5 var(--serif);color:var(--ink)}
.pl-nom li.cur .nw{display:block;width:100%;max-width:300px;margin:10px 0 0} .pl-nom li.cur .nw-k{display:block}
.nw .nw-l{font:600 8px var(--mono);letter-spacing:.12em;fill:var(--ink-3)}
.nw-k{margin:4px 0 0;font:500 9.5px var(--mono);color:var(--ink-3)} .nw-k i{display:inline-block;width:8px;height:8px;margin:0 3px 0 6px;vertical-align:-1px} .nw-k i:first-child{margin-left:0}
.pl-nom li.cur .nom-go{display:inline-block;margin-top:10px;padding:7px 12px 6px;background:var(--ink);color:var(--paper);font:600 12px var(--mono);letter-spacing:.04em;text-decoration:none}
.pl-fine{position:absolute;left:clamp(20px,4vw,64px);bottom:clamp(16px,3vh,28px);z-index:6;margin:0;font:500 10px var(--mono);letter-spacing:.06em;color:var(--ink-3);background:color-mix(in srgb,var(--paper) 80%,transparent);padding:3px 6px}
@media (max-width:760px){ .plate-nom .pl-list{left:12px;right:12px;width:auto;top:auto;bottom:44px;transform:none} .plate-nom .pl-list li:not(.cur){display:none} .plate-nom .pl-sub{display:none} }
.plate-nom .pl-top{transition:opacity .4s} .plate-nom.late .pl-top{opacity:0}

/* ============ PASS 12 · A-410 · RUN THE CALL — full screen, the model is the board, the cards are the controls ============ */
/* layers: a paper backdrop (93) under the model (94) under the game (95); the board is click-through so the model still drags */
html.gaming body::after{content:"";position:fixed;inset:0;z-index:93;background:var(--paper)}
html.gaming #modelwrap{z-index:94!important}
html.gaming #modelwrap canvas{touch-action:none}
.rc{position:fixed;inset:0;z-index:95;display:grid;grid-template-columns:minmax(0,1fr) min(480px,42vw);background:transparent;pointer-events:none}
.rc-rail,.rc-adv{pointer-events:auto}
.rc[hidden]{display:none}
.rc-board{position:relative;min-width:0;border-right:1.5px solid var(--ink);overflow:hidden;pointer-events:none}
.rc-slot{position:absolute;inset:0;border:0;aspect-ratio:auto}
.rc-hud{position:absolute;left:22px;top:18px;right:22px;z-index:3;pointer-events:none}
.rc-k{margin:0;font:600 10.5px var(--mono);letter-spacing:.16em;color:var(--red)}
.rc-h{margin:2px 0 10px;font:700 clamp(26px,2.6vw,38px)/1 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.rc-env{max-width:560px;padding:10px 12px;background:color-mix(in srgb,var(--paper) 92%,transparent);border:1px solid var(--line-2)}
.rc-cy{margin:0 0 6px;font:600 11px var(--mono);letter-spacing:.14em;color:var(--ink-3)} .rc-cy b{font:700 20px var(--disp);color:var(--ink)}
.rc-bar{position:relative;height:14px;border:1.5px solid var(--ink);background:var(--paper-2)}
.rc-bar i{position:absolute;top:0;bottom:0} .rc-must{left:0;background:var(--ink-3)} .rc-pick{background:var(--ink);transition:width .25s}
.rc-lost{background:repeating-linear-gradient(135deg,var(--c-crit) 0 4px,transparent 4px 7px)}
.rc-ev{margin:6px 0 0;font:500 11.5px/1.4 var(--mono);color:var(--ink-2)} .rc-ev em{color:var(--c-crit);font-style:normal}
.rc-adv{position:absolute;left:22px;bottom:22px;z-index:4;max-width:min(540px,calc(100% - 44px));display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;
  padding:12px 14px;background:var(--ink);color:var(--paper);box-shadow:6px 6px 0 color-mix(in srgb,var(--ink) 25%,transparent)}
.rc-adv[hidden]{display:none}
.rc-ai{width:22px;height:22px;background:var(--blue);clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);margin-top:3px}
.rc-adv.talk .rc-ai{animation:aiPulse .9s ease-out}
@keyframes aiPulse{0%{transform:scale(1.4);filter:brightness(1.7)}100%{transform:none}}
.rc-ak{margin:0;font:600 9.5px var(--mono);letter-spacing:.16em;opacity:.6} .rc-at{margin:3px 0 0;font:400 16px/1.45 var(--serif)}
.rc-ab{display:flex;flex-direction:column;gap:5px} .rc-ab button{font:600 10.5px var(--mono);padding:4px 8px;background:transparent;color:var(--paper);border:1px solid color-mix(in srgb,var(--paper) 50%,transparent);cursor:pointer}
.rc-ab button[hidden]{display:none}
.rc-rail{display:flex;flex-direction:column;min-height:0;background:var(--paper)}
.rc-top{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line-2)}
.rc-voice{font:500 11px var(--mono);padding:6px 10px;border:1px solid var(--line-3);background:var(--paper);color:var(--ink-2);cursor:pointer} .rc-voice[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.rc-x{font:400 24px/1 var(--disp);width:36px;height:34px;border:1px solid var(--ink);background:var(--paper);cursor:pointer;color:var(--ink)}
.rc-body{flex:1;overflow:auto;padding:12px 14px 0}
.rc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.rc-card{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"c t f" "c t k" "u u u";gap:3px 10px;padding:9px 10px;border:1.5px solid var(--line-3);background:var(--paper);text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.rc-card:hover,.rc-card:focus-visible{border-color:var(--ink);outline:none}
.rc-card.on{border-color:var(--ink);box-shadow:inset 5px 0 0 var(--ink);background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
.rc-card.must{cursor:default;background:var(--paper-2)}
.rc-card.ob{outline:3px solid var(--blue);outline-offset:2px}
.rc-c{grid-area:c;align-self:start;font:700 9.5px var(--mono);letter-spacing:.06em;padding:3px 5px;color:#fff;min-width:62px;text-align:center}
.rc-good{background:var(--c-good)} .rc-fair{background:var(--c-fair);color:#16191c} .rc-poor{background:var(--c-poor)} .rc-crit{background:var(--c-crit)} .rc-unknown{background:var(--ink-3)}
.rc-nt{grid-area:t;display:flex;flex-direction:column;gap:1px;min-width:0} .rc-nt b{font:700 14.5px/1.2 var(--disp)} .rc-nt i{font:500 10.5px var(--mono);font-style:normal;color:var(--ink-3)}
.rc-nt em{font:400 13.5px/1.35 var(--serif);font-style:normal;color:var(--ink-2)}
.rc-fl{grid-area:f;justify-self:end;font:600 9px var(--mono);letter-spacing:.08em;color:var(--ink-3);white-space:nowrap} .rc-fl-x{color:var(--c-crit)} .rc-fl-m{color:var(--ink)}
.rc-cost{grid-area:k;justify-self:end;align-self:end;font:700 15px var(--mono)}
.rc-fut{grid-area:u;font:500 10.5px var(--mono);color:var(--ink-3);border-top:1px dashed var(--line-2);padding-top:4px}
.rc-stamp{position:absolute;right:12px;bottom:5px;transform:rotate(-4deg);border:2px double var(--red);color:var(--red);font:700 9.5px var(--mono);letter-spacing:.12em;padding:2px 6px;opacity:.85;pointer-events:none}
.rc-foot{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;padding:12px 0 14px;background:var(--paper);border-top:1px solid var(--line-2)}
.rc-msg{margin:0;font:400 15px/1.4 var(--serif);color:var(--ink-2);flex:1;min-width:160px}
.rc-go{display:inline-flex;align-items:center;font:700 13.5px var(--mono);color:var(--paper);background:var(--ink);border:1.5px solid var(--ink);padding:10px 14px;cursor:pointer;text-decoration:none}
.rc-go:hover{background:var(--red);border-color:var(--red)} .rc-go.ghost{background:var(--paper);color:var(--ink)}
.rc-yr{margin:6px 0 10px;font:600 11px var(--mono);letter-spacing:.14em;color:var(--red)}
.rc-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rc-log li{display:grid;grid-template-columns:22px 1fr;gap:6px;font:400 15px/1.45 var(--serif);padding:8px 10px;border-left:3px solid var(--line-3);background:var(--paper-2)}
.rc-log .rc-ok{border-left-color:var(--env)} .rc-log .rc-fail{border-left-color:var(--c-crit)} .rc-log .rc-warn{border-left-color:var(--c-fair)} .rc-log .rc-info{border-left-color:var(--blue)}
.rc-log span{font:700 13px var(--mono)} .rc-log .rc-fail span{color:var(--c-crit)} .rc-log .rc-ok span{color:var(--env)}
.rc-bars{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:10px}
.rc-bars li{animation:rcIn .4s var(--d) both}
@keyframes rcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rc-bars p{margin:0;display:flex;justify-content:space-between;gap:8px;font:500 11.5px var(--mono);color:var(--ink-3)} .rc-bars p b{font:600 12px var(--mono);color:var(--ink);letter-spacing:.04em;margin-right:auto} .rc-bars p span{font:700 14px var(--mono);color:var(--ink)}
.rc-b{height:10px;background:var(--paper-2);border:1px solid var(--ink);margin:3px 0} .rc-b i{display:block;height:100%;width:0;background:var(--ink);animation:rcW .9s var(--d) both}
@keyframes rcW{to{width:var(--w)}}
.rc-bars em{font:400 13.5px/1.35 var(--serif);font-style:normal;color:var(--ink-2)}
.rc-score{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line-2)}
.rc-score p{margin:0;font:500 12px var(--mono);color:var(--ink-3)} .rc-score p span{letter-spacing:.14em;margin-right:8px} .rc-score p b{font:700 34px var(--disp);color:var(--ink)}
.rc-grade{display:flex;flex-direction:column;align-items:center;border:3px double var(--red);color:var(--red);padding:6px 12px;transform:rotate(-7deg) scale(2.4);opacity:0}
.rc-grade b{font:700 34px/1 var(--disp)} .rc-grade span{font:700 9px var(--mono);letter-spacing:.1em;text-align:center;max-width:140px}
.rc-grade.slam{animation:slam .35s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes slam{to{opacity:1;transform:rotate(-7deg) scale(1)}}
.rc-med{list-style:none;margin:10px 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rc-med li{font:600 10.5px var(--mono);padding:4px 8px;border:1px solid var(--line-3);color:var(--ink-3)} .rc-med li.ok{border-color:var(--ink);color:var(--ink)} .rc-med li.ok span{color:var(--red)} .rc-med li span{margin-right:5px}
.rc-ghosts{margin:10px 0;padding:10px 0;border-top:1px solid var(--line-2)}
.rc-gk{margin:0 0 6px;font:600 10px var(--mono);letter-spacing:.12em;color:var(--ink-3)} .rc-gk span{display:block;margin-top:3px;letter-spacing:0;font-weight:500}
.rc-gk i{display:inline-block;width:8px;height:8px;margin:0 2px 0 8px;vertical-align:-1px} .rc-gk i:first-child{margin-left:0}
.rc-gh{display:grid;grid-template-columns:100px 1fr 1fr 1fr 30px;gap:4px;align-items:center;margin:3px 0} .rc-gh b{font:600 11px var(--mono)} .rc-gh em{font:700 12px var(--mono);font-style:normal;text-align:right}
.rc-gb{display:flex;height:10px;background:var(--paper-2)} .rc-gb i{height:100%}
.rc i.p{background:var(--env)} .rc i.w{background:var(--c-poor)} .rc i.e{background:var(--c-crit)} .rc i.l{background:var(--ink-3)}
.rc-div{font:400 14.5px/1.45 var(--serif);color:var(--ink);margin:8px 0 0}
.rc-tie{font:400 15px/1.5 var(--serif);color:var(--ink);margin:12px 0;padding:10px 12px;border-left:3px solid var(--red);background:var(--paper-2)}
.rc-fine{font:500 10.5px var(--mono);color:var(--ink-3);margin:6px 0 16px}
@media (max-width:760px){ .rc{grid-template-columns:1fr;grid-template-rows:36vh minmax(0,1fr)} .rc-board{border-right:0;border-bottom:1.5px solid var(--ink)}
  .rc-hud .rc-h{display:none} .rc-hud{left:8px;right:8px;top:8px} .rc-env{padding:6px 8px} .rc-ev{font-size:10px} .rc-adv{left:8px;right:8px;bottom:8px;max-width:none;padding:9px 10px} .rc-at{font-size:14px}
  .rc-gh{grid-template-columns:78px 1fr 1fr 1fr 26px} }
/* the door on the page */
.rc-rules{list-style:none;counter-reset:r;margin:18px 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.rc-rules li{counter-increment:r;position:relative;padding:8px 12px 9px 44px;border:1px solid var(--line-2);background:var(--paper);font:400 16.5px/1.45 var(--serif);color:var(--ink-2)}
.rc-rules li::before{content:counter(r);position:absolute;left:12px;top:8px;width:22px;height:22px;border:1.5px solid var(--red);border-radius:50%;display:grid;place-items:center;font:700 11px var(--mono);color:var(--red)}
.rc-rules b{color:var(--ink);font-weight:600}
.rc-dl{margin:0 0 16px;font:400 16.5px/1.55 var(--serif);color:var(--ink-2)}
.rc-play{display:inline-flex;gap:10px;align-items:center;padding:14px 20px;background:var(--ink);color:var(--paper);border:0;font:700 15px var(--mono);letter-spacing:.02em;cursor:pointer;box-shadow:6px 6px 0 var(--red)}
.rc-play:hover{background:var(--red);box-shadow:6px 6px 0 var(--ink)}
.rc-fine2{margin:14px 0 0;font:500 10.5px var(--mono);color:var(--ink-3)}
@media print{ .rc{display:none!important} }
.mtag.mt-game{font-size:11px;background:var(--paper);border:1px solid var(--ink)} .mtag.mt-game.warn{border-color:var(--c-crit);color:var(--c-crit)}

/* ============ PASS 12 · A-500 Methods, and drawings inside the rooms ============ */
.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.mf-n{flex:none;font:700 11px var(--mono);letter-spacing:.06em;color:var(--paper);background:var(--ink);padding:3px 6px 2px;align-self:flex-start}
.rds-in{display:block}
.rds-fig{max-width:460px;margin:0 16px 10px;border:1px solid var(--line-2);background:var(--paper)} .rds-fig svg{display:block;width:100%;height:auto}
@media (max-width:760px){ .mgrid{grid-template-columns:1fr} }

/* ============ PASS 12 · A-600 · the seals, in a title block ============ */
.cs-sheet{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.tb-cs{display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-rows:auto auto;border:2px solid var(--ink);background:var(--paper);margin-top:14px}
.tb-thumb{grid-row:1/span 2;border-right:1.5px solid var(--ink);display:flex;flex-direction:column}
.cs-slot{position:relative;flex:1;min-height:190px;border:0;aspect-ratio:auto}
.tb-thumb p{margin:0;padding:6px 10px;border-top:1px solid var(--line-2);font:600 9.5px var(--mono);letter-spacing:.14em;color:var(--ink-3)}
.tb-seals{display:flex;flex-wrap:wrap;gap:6px 4px;padding:14px 12px 8px;justify-content:flex-start}
.tb-cells{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink)}
.tb-cells span{padding:6px 10px;border-left:1px solid var(--line-2)} .tb-cells span:first-child{border-left:0}
.tb-cells i{display:block;font:500 8.5px var(--mono);font-style:normal;letter-spacing:.14em;color:var(--ink-3)} .tb-cells b{font:600 11px var(--mono);color:var(--ink)}
.cs{position:relative;width:112px;padding:0;border:0;background:none;cursor:pointer;color:var(--ink-2);transition:transform .2s}
.cs:hover,.cs:focus-visible,.cs.on{transform:rotate(-6deg) scale(1.06);outline:none}
.cs-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cs-svg{display:block;width:112px;height:112px}
.cs-o{fill:color-mix(in srgb,currentColor 5%,transparent);stroke:currentColor;stroke-width:1.8} .cs-i{fill:none;stroke:currentColor;stroke-width:.8;stroke-dasharray:2 2}
.cs-r{font:600 7.2px var(--mono);fill:currentColor;letter-spacing:.04em} .cs-b{font:700 22px var(--disp);fill:currentColor} .cs-b.sm{font-size:15px} .cs-s{font:600 7.5px var(--mono);fill:currentColor;letter-spacing:.1em}
.cs-award{color:var(--red)} .cs-degree{color:var(--ink)} .cs-diploma{color:var(--ink-2)} .cs-cert{color:var(--blue)} .cs-course{color:var(--ink-3)} .cs-papers{color:var(--geo)}
.cs:focus-visible .cs-o,.cs.on .cs-o{stroke-width:3}
.cs-card{margin:14px 0 22px;padding:14px 18px 16px;border:1.5px solid var(--ink);border-left:6px solid currentColor;background:var(--paper);max-width:760px;animation:rdsIn .35s var(--ease-out)}
.cs-card[hidden]{display:none}
.csc-k{margin:0;font:600 10.5px var(--mono);letter-spacing:.14em;color:currentColor}
.cs-card h3{margin:4px 0 2px;font:700 clamp(20px,1.9vw,26px)/1.15 var(--disp);color:var(--ink)}
.csc-by{margin:0 0 8px;font:500 12px var(--mono);color:var(--ink-3)} .csc-w{margin:0 0 10px;font:400 17px/1.55 var(--serif);color:var(--ink-2)}
.csc-go{font:600 12.5px var(--mono);color:var(--ink);text-decoration:underline;text-underline-offset:3px;margin-right:16px}
.cs-also{margin:18px 0 0;font:400 14px/1.5 var(--serif);color:var(--ink-3)}
@media (max-width:760px){ .tb-cs{grid-template-columns:1fr} .tb-thumb{grid-row:auto;border-right:0;border-bottom:1.5px solid var(--ink)} .cs-slot{min-height:150px}
  .tb-seals{justify-content:center} .cs,.cs-svg{width:96px} .cs-svg{height:96px} }

/* ============ PASS 12 · A-700: the model beside the words ============ */
.why-stage{max-width:1320px}
.why{height:260vh}
.why-stage > .why-line{font-size:clamp(22px,2.25vw,32px)}
.why-model{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);width:min(38vw,540px);height:min(62vh,560px);border:1.5px solid var(--ink);aspect-ratio:auto;background:transparent}
.why-stage > .why-kick,.why-stage > .why-line,.why-stage > .why-close{max-width:calc(100% - min(38vw,540px) - 48px)}
@media (max-width:1000px){ .why-model{position:relative;right:auto;top:auto;transform:none;width:100%;height:32vh;margin-bottom:18px}
  .why-stage > .why-kick,.why-stage > .why-line,.why-stage > .why-close{max-width:none} .why{height:200vh} .why-stage > .why-line{font-size:clamp(19px,4.6vw,26px)} }

/* ============ PASS 12 · the ending ============ */
.plate-end{height:420vh}
.end-map{position:absolute;inset:0;z-index:4;opacity:0;background:var(--paper);pointer-events:none;display:grid;place-items:center}
.em-svg{width:min(92vw,1200px);height:calc(100% - 40px)}
.em-p{fill:var(--paper-2);stroke:var(--ink-3);stroke-width:calc(.8px / var(--s,1))}
.em-v{--s:1} .em-d{fill:var(--blue);opacity:.8;r:calc(3.2px / var(--s))} .em-o{fill:var(--red);r:calc(5px / var(--s))} .em-or{fill:none;stroke:var(--red);r:calc(11px / var(--s));stroke-width:calc(2px / var(--s));animation:emPulse 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes emPulse{from{transform:scale(.6);opacity:1}to{transform:scale(2.2);opacity:0}}
.end-lines{position:absolute;left:clamp(20px,5vw,80px);bottom:clamp(90px,16vh,160px);z-index:6;margin:0;padding:0;list-style:none;width:min(680px,86vw)}
.end-lines li{position:absolute;left:0;bottom:0;width:100%;font:700 clamp(26px,3.4vw,50px)/1.1 var(--disp);letter-spacing:-.025em;color:var(--ink);opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s;
  text-shadow:0 0 18px var(--paper),0 0 4px var(--paper)}
.end-lines li.on{opacity:1;transform:none}
.end-go{position:absolute;left:clamp(20px,5vw,80px);bottom:clamp(28px,6vh,60px);z-index:6;display:flex;gap:18px;align-items:center;opacity:0;transition:opacity .5s;pointer-events:none}
.plate-end.done .end-go{opacity:1;pointer-events:auto}
.end-cta{padding:12px 18px;background:var(--ink);color:var(--paper);font:700 15px var(--mono);text-decoration:none;box-shadow:6px 6px 0 var(--red)} .end-cta:hover{background:var(--red);box-shadow:6px 6px 0 var(--ink)}
.end-top{font:600 12px var(--mono);color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){ .end-lines li{transition:none} .em-or{animation:none} }
@media print{ .plate-end{display:none} }

/* ============ PASS 13 · finish ============ */
/* phones: long model tags wrap instead of running off the screen */
@media (max-width:760px){ .mtag{white-space:normal;max-width:64vw;width:max-content} }
/* print: the plates, the lift and the game are screen-only; A-400's steps print as a list */
@media print{
  .plate-nom{height:auto} .plate-nom .pl-pin{position:static;height:auto} .plate-nom .pl-slot,.plate-nom .pl-fine{display:none}
  .plate-nom .pl-top{position:static;opacity:1!important} .plate-nom .pl-list{position:static;transform:none;width:auto}
  .plate-nom .pl-list li{opacity:1;transform:none} .pl-nom li p,.pl-nom li .nw,.pl-nom li .nw-k{display:block!important}
  .rc-door .rc-play,.tb-thumb,.why-model{display:none!important} .tb-cs{grid-template-columns:1fr}
}

/* ============ PASS 14 · A-210 · the as-built schedule — the lift, on one page ============ */
/* rows run oldest first so the bars cascade down to the right; the red data date is the lift's year */
.asch{margin-top:12vh;scroll-margin-top:calc(var(--mast) + 24px)}
.asch-h{max-width:40em}
.asch-k{margin:0 0 6px;font:600 11px var(--mono);letter-spacing:.12em;color:var(--red)}
.asch-t{margin:0 0 8px;font:700 clamp(22px,2.1vw,30px)/1.1 var(--disp);letter-spacing:-.015em;color:var(--ink)}
.asch-s{margin:0;font:400 16.5px/1.55 var(--serif);color:var(--ink-2)}
.asch-run{position:relative;height:250vh;margin-top:5vh}
.asch-pin{position:sticky;top:calc(var(--mast) + 2vh);height:calc(100vh - var(--mast) - 4vh);height:calc(100svh - var(--mast) - 4vh);display:flex;flex-direction:column;justify-content:center}
.asch-bar{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0;padding:0 0 7px;border-bottom:1.5px solid var(--ink);font:600 10px var(--mono);letter-spacing:.12em;color:var(--ink-3)}
.asch-ddv{font:700 16px var(--mono);letter-spacing:.02em;color:var(--red);min-width:3em}
.asch-bar i{margin-left:auto;font-style:normal;font-weight:500;letter-spacing:.04em;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.asch-lk{display:inline-block;width:14px;height:8px;margin-right:7px;box-sizing:border-box}
.k-b{background:var(--ink-2)} .k-n{border:1px dashed var(--ink-3)} .k-h{border:1px solid var(--ink-2);background:repeating-linear-gradient(135deg,var(--ink-2) 0 2px,transparent 2px 4px)}
.k-m{width:8px;height:8px;background:var(--red);transform:rotate(45deg)}
.asch-g{--lab:172px;--dd:1;position:relative;padding:0 0 18px;border-bottom:1.5px solid var(--ink)}
.asch-yl,.asch-now,.asch-la,.asch-dd{position:absolute;top:0;bottom:0;left:calc(var(--lab) + (100% - var(--lab)) * var(--a));pointer-events:none}
.asch-yl{border-left:1px solid var(--line)}
.asch-now{left:calc(var(--lab) + (100% - var(--lab)) * var(--now));border-left:1px dashed var(--ink-2)}
.asch-now span{position:absolute;bottom:2px;left:4px;font:600 8.5px var(--mono);letter-spacing:.12em;color:var(--ink-2)}
.asch-la{left:calc(var(--lab) + (100% - var(--lab)) * var(--now));right:0;background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--line-3) 50%,transparent) 5px 6px)}
.asch-la span{position:absolute;top:22px;right:3px;writing-mode:vertical-rl;font:600 8px var(--mono);letter-spacing:.16em;color:var(--ink-3)}
.asch-dd{left:calc(var(--lab) + (100% - var(--lab)) * var(--dd));width:0;border-left:2px solid var(--red);z-index:3}
.asch-dd::before{content:"";position:absolute;top:0;left:-6px;border:5px solid transparent;border-top:7px solid var(--red)}
.asx{display:grid;grid-template-columns:var(--lab) 1fr;height:20px}
.asx-t{position:relative}
.asx-t i{position:absolute;left:calc(var(--a) * 100%);top:4px;transform:translateX(-50%);font:500 9.5px var(--mono);font-style:normal;color:var(--ink-3)}
.asr{position:relative;display:grid;grid-template-columns:var(--lab) 1fr;align-items:center;width:100%;height:19px;padding:0;margin:0;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.asr:hover,.asr:focus-visible{background:color-mix(in srgb,var(--red) 7%,transparent);outline:none}
.asr:hover .asr-l,.asr:focus-visible .asr-l{color:var(--red)}
.asr-l{font:500 12px/19px var(--disp);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:10px}
.asr-t{position:relative;height:100%}
.asb{position:absolute;top:5px;height:9px;left:calc(var(--a) * 100%);width:calc(var(--w) * 100%);min-width:3px;box-sizing:border-box;border:1px solid var(--c);
  background:linear-gradient(90deg,var(--c) calc(var(--f,1) * 100%),color-mix(in srgb,var(--c) 10%,transparent) 0)}
.asb.pend{border-style:dashed;opacity:.45}
.asb.h{background:linear-gradient(90deg,transparent calc(var(--f,1) * 100%),var(--paper) 0),repeating-linear-gradient(135deg,var(--c) 0 2px,transparent 2px 4.5px)}
.asb.look{border:1.5px dashed var(--red);background:transparent}
.asr-look .asr-l{color:var(--red);font-weight:700}
.asch.done .asb.look{animation:asLook 1.8s ease-in-out infinite}
@keyframes asLook{50%{background:color-mix(in srgb,var(--red) 18%,transparent)}}
.asg{display:flex;gap:10px;align-items:baseline;margin:6px 0 1px;padding-top:4px;border-top:1px solid var(--line-2);font:600 9.5px var(--mono);letter-spacing:.14em;color:var(--ink-3)}
.asg b{font-weight:700;text-transform:uppercase;transition:color .25s} .asg i{font-style:normal;letter-spacing:.06em}
.asg.on b{color:var(--red)}
.asms{cursor:default} .asms:hover{background:none} .asms .asr-l{font:600 9.5px/19px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.asm{position:absolute;left:calc(var(--a) * 100%);top:2px;width:15px;height:15px;margin-left:-7.5px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.asm::before{content:"";position:absolute;inset:2.5px;border:1.5px solid var(--red);background:var(--paper);transform:rotate(45deg);transition:background .2s}
.asm.on::before{background:var(--red)}
.asm b{position:relative;font:700 7.5px/1 var(--mono);color:var(--red)} .asm.on b{color:var(--paper)}
.asm:hover::before,.asm:focus-visible::before{outline:2px solid var(--ink);outline-offset:1px}
.asm:focus-visible{outline:none}
/* tooltips exist only while shown (so they can never widen the page) */
.asr[data-tip]::after,.asm[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:var(--lab);z-index:20;display:none;width:max-content;max-width:min(320px,70vw);
  padding:5px 8px 4px;background:var(--ink);color:var(--paper);font:500 10.5px/1.35 var(--mono);letter-spacing:.02em;text-align:left;white-space:normal;pointer-events:none;animation:tipIn .15s var(--ease) both}
.asm[data-tip]::after{left:-6px} .asm.r[data-tip]::after{left:auto;right:-6px}
.asr:hover::after,.asr:focus-visible::after,.asm:hover::after,.asm:focus-visible::after{display:block}
@media (max-width:1000px){
  .asch-run{height:220vh}
  .asch-pin{top:calc(var(--mast) + 36vh);top:calc(var(--mast) + 36svh);height:calc(64vh - var(--mast));height:calc(64svh - var(--mast))}
  html.stage-min .asch-pin{top:var(--mast);height:calc(100svh - var(--mast))}
  .asch-g{--lab:150px;padding-bottom:14px}
  .asch-bar{padding-bottom:4px} .asch-bar i{display:none} .asch-ddv{font-size:13px}
  .asx{height:15px} .asx-t i{font-size:8px;top:3px}
  .asr{height:14.5px} .asr-l{font-size:10.5px;line-height:14.5px;padding-right:6px} .asms .asr-l{font-size:8px;line-height:14.5px}
  .asb{top:3.5px;height:7.5px}
  .asm{top:0;width:14px;height:14px;margin-left:-7px}
  .asg{margin:3px 0 0;padding-top:2px;font-size:8.5px}
  .asch-la span{display:none} .asch-now span{font-size:7.5px}
}
.asr-ls{display:none}
@media (max-width:760px){
  .asch-g{--lab:92px} .asr-lf{display:none} .asr-ls{display:inline}
  .asch-pin{height:calc(64vh - var(--mast) - 58px);height:calc(64svh - var(--mast) - 58px - env(safe-area-inset-bottom,0px))}
  html.stage-min .asch-pin{height:calc(100svh - var(--mast) - 58px - env(safe-area-inset-bottom,0px))}
  .asr{height:13px} .asr-l{font-size:10px;line-height:13px} .asms .asr-l{font-size:7.5px;line-height:13px}
  .asb{top:3px;height:7px} .asm{width:13px;height:13px;margin-left:-6.5px}
  .asg{margin:2px 0 0;padding-top:1px;font-size:8px;line-height:10px}
}
@media (prefers-reduced-motion:reduce){ .asch.done .asb.look{animation:none} }
@media print{ .asch-run{height:auto} .asch-pin{position:static;height:auto} .asch-dd{display:none} .asr::after,.asm::after{display:none!important}
  /* the walks print as one column: the model can't print, and its empty stage used to take half of every page */
  .walk{display:block!important} .walk-stage,.st-show{display:none!important} .walk-col{padding:0!important}
  /* the control room prints on white, in the site's own ink, and the sheet rail stays on screen */
  .btabs{display:none!important}
  .dash-sheet{--paper:#fff;--paper-2:#f2f2f2;--paper-3:#e6e6e6;--ink:#000;--ink-2:#111;--ink-3:#444;--faint:#666;--line:rgba(0,0,0,.15);--line-2:rgba(0,0,0,.3);--line-3:rgba(0,0,0,.55);
    --blue:#1f5c9c;--red:#bd3a23;--env:#4a7a43;--geo:#2a63a6;--rp:#8b6a44;--ai:#6a4fae;--sci:#197f71;--edu:#a9487a;--c-good:#4b8847;--c-fair:#bf922a;--c-poor:#cb682c;--c-crit:#b1322a;--on-fill:#fff;--hl:transparent;
    background:#fff!important;background-image:none!important;width:auto;margin:0!important;padding:24px 0}
  .dash-sheet::after{display:none} }

/* ============ PASS 14 · the game's advisor: over the board's corner on a wide screen, atop the rail on a phone ============ */
.rc-adv{max-width:min(540px,calc(100vw - min(480px,42vw) - 44px))}
@media (max-width:760px){
  .rc-rail{min-height:0} .rc-top{order:0} .rc-adv{order:1} .rc-body{order:2}
  .rc-adv{position:relative;left:auto;right:auto;bottom:auto;max-width:none;box-shadow:none;padding:8px 10px;gap:9px;border-bottom:1.5px solid var(--ink)}
  .rc-adv .rc-at{font-size:14px;line-height:1.38}
  .rc-adv .rc-ab{flex-direction:row;align-self:center}
}

/* ============ PASS 15 · documents the record links to (the practicum report) ============ */
.dv-doc{display:inline-block;margin-top:14px;padding:8px 12px 7px;border:1.5px solid var(--ink);font:600 12.5px var(--mono);color:var(--ink);text-decoration:none}
.dv-doc:hover{background:var(--ink);color:var(--paper)}

/* ============ PASS 15 · stage screens: a projector at 1280×720 or 1366×768 must show each view whole ============ */
.st-cap{min-width:0;flex:0 1 auto} .st-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1001px) and (max-height:820px){
  .hero-bio{margin-top:clamp(64px,11vh,100px)}
  .name{font-size:clamp(46px,min(6.6vw,11.5vh),104px);margin-bottom:14px}
  .thesis{font-size:clamp(16px,min(1.55vw,2.6vh),22px);margin-bottom:10px}
  .thesis.aim{font-size:clamp(14px,min(1.25vw,2.2vh),18px)}
  .trinity{margin-top:10px;padding-top:8px} .cta{margin-top:14px}
  .hero-tb{display:none}
  .layers{bottom:14px;padding:7px 10px 6px;gap:4px}
  .btabs{gap:2px;top:calc(var(--mast) + 10px)} .btabs a{padding:8px 5px 8px 6px;gap:4px} .btabs a span{font-size:11px} .btabs a b{font-size:9px}
  .st-chrome{padding-bottom:12px}
}


/* ============ PASS 16 · phone layout (tested at 360/390/430 and 844x390 landscape) ============ */
/* F1 · the A-900 stamp keeps its stacked lines on phones. `display:inline-block` (1375) dropped the flex column, ran
   ISSUED FOR · DISCUSSION · date on one rotated 372-px line, and widened a 360-px phone to 390 (tab bar off-screen).
   #doc clips sideways overflow so one wide element can never widen the layout viewport again (clip is not a scroll
   container, so every sticky stage still pins). */
@media (max-width:760px){
  .iss-foot .iss-stamp{display:inline-flex}
  main#doc{overflow-x:clip}
}
/* F2 · the walk stage's caption gets the room: compact square buttons (icons only; the words stay in the accessible
   name), the caption takes what is left, its note is held to two lines. */
@media (max-width:760px){
  .st-chrome{padding:0 8px 8px;gap:8px;align-items:flex-end}
  .st-cap{flex:1 1 0;max-width:none;padding:5px 8px 6px}
  .st-f{font-size:12.5px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .st-btns{flex:none}
  .st-btns .st-row{gap:4px}
  .st-z,.st-x,.st-tour,.st-min{min-width:40px;height:40px;padding:0;display:inline-grid;place-items:center}
  .st-x,.st-tour{font-size:0;letter-spacing:0}
  .st-x::before{content:"\2922";font:600 17px var(--mono)}
  .st-tour::before{content:"\25B6";font:600 13px var(--mono)}
  .st-tour + .st-min{margin-left:0}
  /* walk 2: no caption, so the buttons sit left of the lift, clear of it */
  .walk-lift .st-chrome{justify-content:flex-start}
}
/* F3 · A-400: the current step is a block, not a `1fr auto` grid (1057/1067 beat .pl-nom li at 1379, which crushed the
   CTA into a 70-px column); the fine print sits under the card instead of across it. */
@media (max-width:1000px){ .plate-nom .pl-list li.cur{display:block} }
@media (max-width:760px){
  .plate-nom .pl-list{bottom:50px}
  .plate-nom .pl-fine{left:12px;right:12px;bottom:8px;line-height:1.3}
}
/* F5 · A-002's key plan on the stage: the model's controls step aside while the map is up (they drive a model you
   can't see), and the DFRP citation moves off the map into the strip's foot. */
@media (max-width:1000px){
  .st-map:not(.off) ~ .st-chrome{display:none}
  .st-map .kpm-meta{top:100%;bottom:auto;left:0;right:0;max-width:none!important;margin-top:4px;font-size:9px!important;line-height:1.2!important}
}
/* F6 · dense figures that were squeezed below 6 px text keep a readable drawn size and scroll sideways, like the
   other dashboard figures already do (865) */
@media (max-width:980px){
  .db-p .fig.lc{min-width:560px}
  .sx-found{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sx-found .fig.ln{min-width:560px}
}
/* F7 · hero TIME row: the phone hide for the year ticks (1072) was overridden by 1083; the slider gets a thumb-sized
   hit area and the light buttons a real height */
@media (max-width:760px){
  .yr-ticks{display:none}
  .yr-r{height:36px;margin:0}
  .ph-play{min-height:36px}
  .ly{min-height:40px}
  .ly-sun{padding:12px 0}
}
/* F8 · tap targets: the masthead, the slicers, the definition chips (visual size unchanged, hit area 35 px+), footer links */
@media (max-width:760px){
  .mast .glyph{padding:11px;margin:-11px}
  .themesw{min-width:40px;min-height:38px;justify-content:center}
  .mast .talk{padding:12px 10px 11px}
  .db-b{min-height:36px}
  .dtk::before{content:"";position:absolute;inset:-12px}
  .colophon a{display:inline-block;padding:10px 0}
}

/* ============ PASS 16 · touch ============ */
/* the lift: on touch only the car is a handle (44 px tall to a thumb); the shaft lets the page scroll */
@media (pointer:coarse){
  .lf-shaft{touch-action:pan-y}
  .lf-car{pointer-events:auto;touch-action:none}
  .lf-car::before{content:"";position:absolute;left:-6px;right:-4px;top:-10px;bottom:-10px}
}
/* the A-002 key plan takes its own pointer (the stage around it is pointer-events:none, which it inherited, so its dots,
   zoom and table never answered a click); on touch a vertical swipe on the map still scrolls the page */
.st-map:not(.off){pointer-events:auto}
@media (pointer:coarse){ .kpm-svg{touch-action:pan-y} }