@font-face{font-family:'PS';src:url(../fonts/public-sans.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'MN';src:url(../fonts/spline-sans-mono.woff2) format('woff2');font-weight:400 600;font-display:swap}
:root{
--paper:#FFFFFF; --ink:#111111; --sec:#666666; --line:#D9D9D9; --ref:#767676;
--refdec:#999999; --hair:#EDEDED; --mid:#B8B8B8; --idx:216px;
--pad:clamp(.75rem,1.6vw,1.25rem); --u:8px;
}
@media (prefers-color-scheme:dark){:root{--paper:#0D0D0D;--ink:#F2F2F2;--sec:#A2A2A2;
--line:#2B2B2B;--ref:#8E8E8E;--refdec:#6E6E6E;--hair:#1C1C1C;--mid:#3A3A3A}}
:root[data-theme="dark"]{--paper:#0D0D0D;--ink:#F2F2F2;--sec:#A2A2A2;--line:#2B2B2B;
--ref:#8E8E8E;--refdec:#6E6E6E;--hair:#1C1C1C;--mid:#3A3A3A}
:root[data-theme="light"]{--paper:#FFFFFF;--ink:#111111;--sec:#666666;--line:#D9D9D9;
--ref:#767676;--refdec:#999999;--hair:#EDEDED;--mid:#B8B8B8}
/* Reveal is hidden only after the fetched runtime initializes successfully.
Before that gate is earned, disabled JS and runtime failures stay fail-open. */
*{box-sizing:border-box}
img,svg{max-width:100%;height:auto;display:block}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'PS',ui-sans-serif,system-ui,sans-serif;
font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1;letter-spacing:-.005em}
table{color:inherit}
a{color:inherit}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
.skip{min-height:44px;display:inline-flex;align-items:center;position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:var(--paper);padding:.6rem 1rem}
.lab{font-family:'MN',ui-monospace,monospace;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ref)}
.ico{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:-.13em;flex:none}
.mn{font-family:'MN',ui-monospace,monospace;font-variant-numeric:tabular-nums}
/* index */
.index{position:fixed;top:0;left:0;bottom:0;width:var(--idx);z-index:30;background:var(--paper);
border-right:1px solid var(--line);padding:calc(var(--u)*3) calc(var(--u)*2.5);display:flex;flex-direction:column}
.index .h{font-family:'MN',monospace;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
color:var(--ref);padding-bottom:calc(var(--u)*1.5);border-bottom:1px solid var(--ink)}
.index ol{list-style:none;margin:calc(var(--u)*1.5) 0 0;padding:0}
.index a{min-height:44px;align-items:center;display:grid;grid-template-columns:3.5rem 1fr;gap:6px;padding:7px 0;text-decoration:none;
font-size:.79rem;border-bottom:1px solid var(--hair)}
.index a .n{font-family:'MN',monospace;font-size:.69rem;color:var(--ref)}
.index a .t{color:var(--sec)}
.index a:hover .t,.index a:hover .n,.index a[aria-current] .t,.index a[aria-current] .n{color:var(--ink)}
.index a[aria-current]{border-bottom-color:var(--ink)}
.index .foot{margin-top:auto;font-family:'MN',monospace;font-size:8px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ref);line-height:2}
/* Theme toggle: a drawing-sheet polarity field, same vocabulary as .foot.
display:none by default; the js class (set inline, gated the same way as
the rest of the document) is what makes it visible, since a control that
cannot run must not be shown. min-height/min-width hold the 44px target
at every width per the same approach as .skip and .index a. */
.theme-toggle{display:none}
.js .theme-toggle{display:flex;align-items:center;justify-content:center;min-height:44px;
width:100%;margin-top:calc(var(--u)*1.5);border:1px solid var(--line);background:none;
color:var(--ref);cursor:pointer;font-family:'MN',monospace;font-size:8px;letter-spacing:.16em;
text-transform:uppercase;transition:border-color .2s linear,color .2s linear}
.theme-toggle:hover{border-color:var(--ink);color:var(--ink)}
.doc{margin-left:var(--idx)}
@media(max-width:960px){
.index{position:sticky;width:auto;bottom:auto;border-right:0;border-bottom:1px solid var(--ink);
flex-direction:row;align-items:center;gap:calc(var(--u)*1.5);overflow-x:auto;padding:0 var(--pad);
scroll-padding-inline:var(--pad);-webkit-overflow-scrolling:touch}
.index .h{border:0;padding:0;white-space:nowrap}
.index ol{display:flex;margin:0;gap:calc(var(--u)*2);padding-right:var(--pad)}
.index a{grid-template-columns:auto;padding:13px 8px;border:0;white-space:nowrap;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}
.index a .t{display:none}.index .foot{display:none}
.index a[aria-current] .n{text-decoration:underline;text-underline-offset:4px}
/* Kept outside .foot (and thus outside its display:none above) so a
visitor on a narrow viewport still has a way to switch themes. */
.js .theme-toggle{width:auto;min-width:44px;margin-top:0;flex:none;padding:0 14px}
.doc{margin-left:0}
}
/* sheets */
.sheet{position:relative;padding:var(--pad);border-bottom:1px solid var(--hair)}
.rule{position:absolute;inset:var(--pad);pointer-events:none}
.rule span{position:absolute;font-family:'MN',monospace;font-size:7.5px;letter-spacing:.1em;
color:var(--refdec);transform:translate(-50%,-50%)}
.rule i{position:absolute;background:var(--line)}
@media(max-width:960px){.rule{display:none}}
.pane{position:relative;padding:calc(var(--u)*6) calc(var(--u)*5);max-width:1180px;margin:0 auto}
.hdr{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--u)*2);flex-wrap:wrap;
padding-bottom:calc(var(--u)*1.5);border-bottom:1px solid var(--ink)}
.hdr .d{font-family:'MN',monospace;font-size:9px;letter-spacing:.22em;text-transform:uppercase}
.hdr .d b{font-weight:600}.hdr .d span{color:var(--ref)}
.hdr .m{font-family:'MN',monospace;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ref)}
h1{margin:0;font-weight:500}
h2{font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:500;letter-spacing:-.038em;line-height:1.05;margin:0}
h3{font-size:1.02rem;font-weight:600;letter-spacing:-.018em;margin:0}
p{margin:0;color:var(--sec)}
/* cover */
.cover .pane{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;
padding-top:calc(var(--u)*5);padding-bottom:calc(var(--u)*5)}
.cover .mid{display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*3)}
.cover .t{font-size:clamp(2.6rem,7.6vw,5.6rem);font-weight:500;letter-spacing:-.05em;line-height:.98}
.cover .t .of{display:block;font-size:clamp(.85rem,1.5vw,1.05rem);font-weight:400;letter-spacing:.02em;
color:var(--sec);margin-bottom:calc(var(--u)*1.5)}
.csub{font-size:clamp(.85rem,1.6vw,1.05rem);color:var(--sec);max-width:46ch}
.cmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:calc(var(--u)*2);
border-top:1px solid var(--line);padding-top:calc(var(--u)*2)}
.cmeta .k{font-family:'MN',monospace;font-size:8px;letter-spacing:.22em;text-transform:uppercase;
color:var(--ref);display:block;margin-bottom:5px}
.cmeta .v{overflow-wrap:anywhere;font-family:'MN',monospace;font-size:.84rem;font-weight:500}
.scrollmark{font-family:'MN',monospace;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
color:var(--ref);display:flex;align-items:center;gap:10px}
.scrollmark::after{content:'';flex:1;height:1px;background:var(--line);max-width:120px}
/* drawings */
.dwg{width:100%;height:auto;overflow:visible}
.dwg .c{stroke:var(--line);stroke-width:1;fill:none}
.dwg .k{stroke:var(--ink);stroke-width:1.25;fill:none}
.dwg .f{fill:var(--paper);stroke:var(--ink);stroke-width:1.25}
.dwg text{font-family:'PS',sans-serif;fill:var(--ink)}
.dwg .tl{font-family:'MN',monospace;font-size:8px;letter-spacing:.14em;fill:var(--ref)}
.dwg .tn{font-size:12px;font-weight:600;letter-spacing:-.015em}
.dwg .ts{font-family:'MN',monospace;font-size:8px;fill:var(--sec)}
.dwg .dm{stroke:var(--mid);stroke-width:.75;fill:none}
/* pathLength="1" normalises every path, so dash length can never drift
out of sync with real geometry when a shape is resized. */
.runtime-ready .dwg .ln{stroke-dasharray:1;stroke-dashoffset:1}
.drawn .dwg .ln{animation:ln 1.1s cubic-bezier(.37,0,.28,1) forwards}
.runtime-ready .dwg .fd{opacity:0}
.drawn .dwg .fd{animation:fd .55s linear forwards}
.runtime-ready .an{opacity:0}
.drawn .an{animation:fd .5s linear forwards}
@keyframes ln{to{stroke-dashoffset:0}}
@keyframes ax{to{transform:scaleY(1)}}
@keyframes fd{to{opacity:1}}
@keyframes partline{to{clip-path:inset(0)}}
@keyframes leader{to{transform:scaleX(1)}}
/* A-001 assembly */
.sysgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:calc(var(--u)*5);margin-top:calc(var(--u)*5);align-items:start}
#a001 .assembly{position:relative;min-width:0;padding:calc(var(--u)*2) calc(var(--u)*2) calc(var(--u)*3) calc(var(--u)*8);border:1px solid var(--line);overflow:hidden}
#a001 .assembly-tabs{position:relative;display:grid;gap:calc(var(--u)*2.5);z-index:1}
#a001 .part{display:grid;grid-template-columns:38px minmax(0,1fr) 46px;gap:calc(var(--u)*1.5);align-items:center;width:100%;min-height:72px;padding:0;color:var(--ink);text-align:left;font:inherit}
.runtime-ready #a001 .part{cursor:pointer}
#a001 .part-no{display:grid;place-items:center;width:30px;height:30px;border:1.25px solid var(--ink);border-radius:50%;background:var(--paper);font-family:'MN',monospace;font-size:8.5px;letter-spacing:.1em}
#a001 .part-body{position:relative;min-width:0;border:1.25px solid var(--ink);padding:calc(var(--u)*1.25) calc(var(--u)*2);transition:background .2s linear,color .2s linear}
#a001 .part-body::before{content:'';position:absolute;right:100%;top:50%;width:calc(var(--u)*6);height:1px;background:var(--line);pointer-events:none;transform-origin:right}
#a001 .part-body::after{content:'';position:absolute;inset:-1.25px;border:1.25px solid var(--ink);pointer-events:none}
#a001 .part-name{display:block;font-size:.94rem;font-weight:600;letter-spacing:-.015em}
#a001 .part-desc,#a001 .part-ref{font-family:'MN',monospace;font-size:8.5px;letter-spacing:.08em;color:var(--ref)}
#a001 .part-desc{display:block;margin-top:4px;overflow-wrap:anywhere}
#a001 .part-ref{text-transform:uppercase}
#a001 .part[data-selected="true"] .part-body,#a001 .part[aria-selected="true"] .part-body{background:var(--ink);color:var(--paper)}
#a001 .part[data-selected="true"] .part-desc,#a001 .part[aria-selected="true"] .part-desc{color:var(--paper)}
.runtime-ready #a001 .part:hover:not([aria-selected="true"]):not([data-selected="true"]) .part-body{background:var(--hair)}
#a001 .part:hover:not([aria-selected="true"]):not([data-selected="true"]) .part-desc{color:var(--ink)}
#a001 .part:focus{outline:none}
#a001 .part:focus-visible .part-body{outline:2px solid var(--ink);outline-offset:3px}
#a001 .part:focus-visible .part-desc,#a001 .part:focus-visible .part-ref{opacity:1;animation:none}
#a001 .part:focus-visible .part-body::before{transform:scaleX(1);animation:none}
#a001 .part:focus-visible .part-body::after{clip-path:none;animation:none}
#a001 .assembly-axis{position:absolute;top:calc(var(--u)*2);bottom:calc(var(--u)*5);left:56%;border-left:1px dashed var(--line);pointer-events:none}
#a001 .assembly-dimension{position:absolute;top:calc(var(--u)*4);bottom:calc(var(--u)*7);left:calc(var(--u)*3);border-left:1px solid var(--mid);pointer-events:none}
#a001 .assembly-dimension::before,#a001 .assembly-dimension::after{content:'';position:absolute;left:-6px;width:12px;border-top:1px solid var(--mid)}
#a001 .assembly-dimension::before{top:0}
#a001 .assembly-dimension::after{bottom:0}
#a001 .assembly-dimension span{position:absolute;top:50%;left:-39px;width:78px;transform:rotate(-90deg);font-family:'MN',monospace;font-size:8px;letter-spacing:.14em;color:var(--ref);white-space:nowrap}
#a001 .assembly-axis-label{margin-top:calc(var(--u)*2);text-align:center;font-family:'MN',monospace;font-size:8px;letter-spacing:.14em;color:var(--ref)}
.runtime-ready #a001 .part-body{border-color:var(--line)}
.runtime-ready #a001 .part-body::before{transform:scaleX(0)}
.runtime-ready #a001 .part-body::after{clip-path:inset(0 100% 0 0)}
.runtime-ready #a001 .part-desc,.runtime-ready #a001 .part-ref{opacity:0}
#a001.drawn .part-body::before{animation:leader .5s cubic-bezier(.37,0,.28,1) forwards}
#a001.drawn .part-body::after{animation:partline .55s cubic-bezier(.37,0,.28,1) forwards}
#a001.drawn .part-desc,#a001.drawn .part-ref{animation:fd .45s linear forwards}
#a001.drawn .part:nth-child(1) .part-desc,#a001.drawn .part:nth-child(1) .part-ref{animation-delay:.20s}
#a001.drawn .part:nth-child(2) .part-desc,#a001.drawn .part:nth-child(2) .part-ref{animation-delay:.32s}
#a001.drawn .part:nth-child(3) .part-desc,#a001.drawn .part:nth-child(3) .part-ref{animation-delay:.44s}
#a001.drawn .part:nth-child(4) .part-desc,#a001.drawn .part:nth-child(4) .part-ref{animation-delay:.56s}
.runtime-ready #a001 .assembly-axis{transform:scaleY(0);transform-origin:top}
#a001.drawn .assembly-axis{animation:ax .9s cubic-bezier(.37,0,.28,1) forwards}
@media(max-width:900px){
.sysgrid{grid-template-columns:minmax(0,1fr)}
#a001 .assembly{max-width:620px;width:100%;margin-inline:auto}
}
@media(max-width:600px){
#a001 .assembly{padding:calc(var(--u)*1.5) 0;border-left:0;border-right:0;overflow:visible}
#a001 .assembly-axis,#a001 .assembly-dimension,#a001 .assembly-axis-label{display:none}
#a001 .assembly-tabs{gap:calc(var(--u))}
#a001 .part{grid-template-columns:34px minmax(0,1fr) 40px;gap:calc(var(--u));min-height:58px}
#a001 .part-no{width:28px;height:28px}
#a001 .part-body{padding:calc(var(--u)) calc(var(--u)*1.25)}
#a001 .part-body::before{display:none}
#a001 .part-name{font-size:.9rem}
#a001 .part-desc,#a001 .part-ref{font-size:8px}
}
/* A-002 education route */
#a002 .education-heading{margin-top:calc(var(--u)*5)}
#a002 .education-heading p{max-width:66ch;margin-top:calc(var(--u)*2);font-size:.92rem;line-height:1.8}
#a002 .education-route{position:relative;display:grid;
grid-template-columns:minmax(0,1fr) minmax(120px,.34fr) minmax(0,1fr);
align-items:center;margin-top:calc(var(--u)*7)}
#a002 .education-route::before{content:'';position:absolute;left:0;right:0;top:50%;
border-top:1px solid var(--ink);transform-origin:left}
#a002 .education-node{position:relative;z-index:1;display:flex;flex-direction:column;
min-width:0;min-height:235px;padding:calc(var(--u)*3);background:var(--paper);
border:1px solid var(--ink)}
#a002 .education-node::before,#a002 .education-node::after{content:'';position:absolute;
top:50%;width:12px;border-top:1px solid var(--ink)}
#a002 .education-node::before{right:100%}
#a002 .education-node::after{left:100%}
#a002 .education-node:first-child::before,#a002 .education-node-current::after{display:none}
#a002 .education-node-current{border-width:2px}
#a002 .education-node-current::before{border-top-width:2px}
#a002 .education-node-meta{display:flex;justify-content:space-between;gap:calc(var(--u)*2);
font-family:'MN',monospace;font-size:9px;line-height:1.5;letter-spacing:.1em;
text-transform:uppercase;color:var(--ref)}
#a002 .education-node h3{margin-top:calc(var(--u)*4);font-size:clamp(1.05rem,2vw,1.35rem)}
#a002 .education-place{margin-top:calc(var(--u));font-family:'MN',monospace;font-size:9px;
line-height:1.6;color:var(--sec)}
#a002 .education-programme{margin-top:auto;border-top:1px solid var(--line);
padding-top:calc(var(--u)*2);font-size:.9rem;line-height:1.55}
#a002 .education-programme p{margin-top:calc(var(--u));font-family:'MN',monospace;
font-size:9px;line-height:1.55;color:var(--sec)}
#a002 .education-transfer{position:relative;z-index:2;justify-self:stretch;text-align:center;
background:var(--paper);padding:calc(var(--u)) 6px;font-family:'MN',monospace;
font-size:9px;line-height:1.55;letter-spacing:.06em;color:var(--sec)}
#a002 .education-transfer strong{display:block;color:var(--ink);font-size:9px;
letter-spacing:.12em;text-transform:uppercase}
#a002 .education-transfer::after{content:'';position:absolute;right:-1px;top:50%;
transform:translateY(-50%);border-left:8px solid var(--ink);
border-top:4px solid transparent;border-bottom:4px solid transparent}
#a002 .education-caption{margin-top:calc(var(--u)*4);font-size:9px}
@media(max-width:720px){
#a002 .education-route{grid-template-columns:minmax(0,1fr);padding-left:34px;
gap:0;margin-top:calc(var(--u)*4)}
#a002 .education-route::before{left:9px;right:auto;top:0;bottom:0;
border-top:0;border-left:1px solid var(--ink);transform-origin:top}
#a002 .education-node{min-height:210px}
#a002 .education-node::before{display:block!important;right:100%;left:auto;
top:30px;width:25px}
#a002 .education-node::after{display:none}
#a002 .education-node-meta{flex-direction:column;gap:2px}
#a002 .education-transfer{justify-self:stretch;text-align:left;margin-left:0;
padding:calc(var(--u)*2) 10px}
#a002 .education-transfer::before{content:'';position:absolute;left:-25px;top:50%;
width:25px;border-top:1px solid var(--ink)}
#a002 .education-transfer::after{right:auto;left:-29px;top:auto;bottom:4px;
transform:none;border-left:4px solid transparent;border-right:4px solid transparent;
border-top:8px solid var(--ink);border-bottom:0}
#a002 .education-caption{display:grid;gap:4px}
}
.runtime-ready #a002 .education-route::before{transform:scaleX(0)}
.runtime-ready #a002 .education-node::before,.runtime-ready #a002 .education-node::after{
transform:scaleX(0);transform-origin:center}
#a002.drawn .education-route::before{animation:education-line .8s cubic-bezier(.37,0,.28,1) forwards}
#a002.drawn .education-node::before,#a002.drawn .education-node::after{
animation:education-port .35s .55s linear forwards}
@keyframes education-line{to{transform:none}}
@keyframes education-port{to{transform:none}}
@media(max-width:720px){.runtime-ready #a002 .education-route::before{transform:scaleY(0)}}
.spec{border-top:1px solid var(--ink);padding-top:calc(var(--u)*2);margin-top:calc(var(--u)*4)}
.spec .sk{font-family:'MN',monospace;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ref)}
.spec .sh{margin:calc(var(--u)*1) 0;font-size:1.05rem;font-weight:600;color:var(--ink)}
/* 66ch, not 46ch. The measures across this sheet set ran 46-66 with no system,
and the narrowest sat on A-001, which is read first. At 46ch this paragraph
capped at ~340px inside a ~440px column, throwing away a quarter of the width
and adding a line to every paragraph. Where a container is narrower than 66ch
it still wins; this only stops the cap biting before the column does. */
.spec p{font-size:.93rem;max-width:66ch}
.spec dl{display:grid;grid-template-columns:auto 1fr;gap:5px calc(var(--u)*2);margin:calc(var(--u)*2) 0 0}
.spec dt{font-family:'MN',monospace;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ref);padding-top:3px}
.spec dd{margin:0;color:var(--sec);font-size:.9rem}
.ident{margin-top:calc(var(--u)*4);border-top:1px solid var(--ink);padding-top:calc(var(--u)*2)}
.ident p{font-size:.96rem;max-width:66ch}.ident b{color:var(--ink);font-weight:600}
/* The one piece of project evidence allowed off A-005, because a recruiter
decides before reaching it. Ruled rather than coloured, so it reads as a
called-out note on a drawing and not as a highlight box. */
.lead-ev{border-left:1px solid var(--ink);padding-left:calc(var(--u)*2);
margin-top:calc(var(--u)*2.5)}
.lead-ev a{font-weight:600;text-underline-offset:3px}
.idm{display:grid;grid-template-columns:auto 1fr;gap:6px calc(var(--u)*2);margin:calc(var(--u)*2) 0 0}
.idm dt{font-family:'MN',monospace;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ref);padding-top:3px}
.idm dd{margin:0;color:var(--sec);font-size:.9rem;overflow-wrap:anywhere}
/* WCAG 2.5.5 AAA: text links carry their own 44px block so the row grows with them. */
.idm dd a,.v a,.mn a,.refs a,.stk .practice a{display:inline-block;padding-block:calc(var(--u)*1.75);line-height:1.4}
/* module + list grids */
/* A-005 project index + expand */
.proj{border-top:1px solid var(--ink);padding-top:calc(var(--u)*2.5);margin-top:calc(var(--u)*3.5)}
/* One project is marked, not a tier of them. The earlier sheet split six
projects into "Featured engineering work" and "Other builds", which read the
three most verifiable ones as the lesser three; that grouping stays banned.
A heavier rule is the drawing convention for a primary element, so the marker
is weight, not colour. */
.proj.feat{border-top-width:2px}
.feat-mark{font-family:'MN',monospace;font-size:8.5px;letter-spacing:.22em;
text-transform:uppercase;color:var(--ref);margin-bottom:calc(var(--u)*1.5)}
.ph{display:grid;grid-template-columns:4.5rem minmax(0,1fr) auto;gap:calc(var(--u)*3);align-items:baseline}
.ph .r{font-family:'MN',monospace;font-size:.74rem;color:var(--ref)}
.ph .tagline{font-family:'MN',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ref)}
@media(max-width:760px){.ph{grid-template-columns:minmax(0,1fr);gap:5px}}
.pb{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:calc(var(--u)*3);margin-top:calc(var(--u)*2)}
@media(max-width:760px){.pb{grid-template-columns:minmax(0,1fr)}}
.pb .side{font-family:'MN',monospace;font-size:.68rem;color:var(--ref);line-height:1.9}
.pdesc{font-size:.94rem;max-width:66ch}
/* Capped at 820, not the full 970 column. Six figures were 64% of A-005's
height; at 2:1 each pixel of width costs half a pixel of height six times
over. The cap is on .figbox rather than the media so the caption aligns with
the frame, and it is left-aligned to the text column rather than centred. */
.figbox{border:1px solid var(--line);padding:calc(var(--u)*2);margin-top:calc(var(--u)*2.5);
overflow-x:auto;max-width:820px}
.figbox .dwg .tl,.figbox .dwg .ts{font-size:13px}
/* img,svg{max-width:100%} above would shrink drawings to ~2px type on a phone;
give them a floor and let the container pan instead. */
/* Figures are drawn at viewBox 1000 wide, but the figure column tops out at
970px, so a 1000px floor could never be satisfied — measured 2026-08-13, the
drawings panned by 30px at a 1440px viewport, below the 1040px breakpoint
that shows the pan hint. Panning with no affordance. .dwg already carries
width:100%, so a floor under the column width lets the drawing simply fit at
desktop and only pan once the column is genuinely too narrow. 900px keeps
labels at 9.5px there, against 5.3px for the 660px floor tried earlier. */
.figbox svg{min-width:780px;max-width:none}
/* The floor dropped from 900 to 780 with the frame cap, which would have shrunk
every drawn label with it. The in-figure sizes rise to compensate, so a label
still renders at about 10px on screen — the same as before the cap, not the
8px the smaller floor would otherwise have given. */
/* 1245, measured at the boundary rather than derived: the frame holds its 820
cap down to a 1246px viewport and starts panning at 1244. This number moves
whenever the cap or the drawn floor moves — it was 1040, then 1365 when the
floor dropped to 900, and now 1245 with the frame capped. Re-measure it, do
not calculate it. */
@media(max-width:1245px){.figbox::after{content:"\2190 scroll to pan \2192";display:block;
font-family:'MN',monospace;font-size:8px;letter-spacing:.18em;text-transform:uppercase;
color:var(--ref);margin-top:calc(var(--u)*1.5);position:sticky;left:0}}
.figbox:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
.figcap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:'MN',monospace;
font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ref);
border-top:1px solid var(--hair);margin-top:calc(var(--u)*1.5);padding-top:8px}
#a003 .experience-more{display:none}
#a003 .experience-detail{display:block}
.runtime-ready #a003 .experience-more{display:flex}
.runtime-ready #a003 .experience-detail{display:none}
.runtime-ready #a003 .experience-detail[data-open="true"]{display:block}
/* A-003 builder + operator tracks */
#a003 .experience-heading{margin-top:calc(var(--u)*5)}
#a003 .experience-heading p{max-width:66ch;margin-top:calc(var(--u)*2);font-size:.92rem;line-height:1.8}
#a003 .experience-tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:calc(var(--u)*7);align-items:start;margin-top:calc(var(--u)*5)}
#a003 .experience-track-head{display:flex;justify-content:space-between;gap:calc(var(--u)*2);
align-items:baseline;border-bottom:1px solid var(--ink);padding-bottom:calc(var(--u)*1.25)}
#a003 .experience-track-title{font-family:'MN',monospace;font-size:9px;font-weight:600;
line-height:1.5;letter-spacing:.14em;text-transform:uppercase}
#a003 .experience-track-head>span{font-family:'MN',monospace;font-size:8.5px;
letter-spacing:.12em;text-transform:uppercase;color:var(--ref)}
#a003 .experience-track-list{position:relative;list-style:none;margin:calc(var(--u)*2) 0 0;
padding:0 0 0 30px}
#a003 .experience-track-list::before{content:'';position:absolute;left:7px;top:0;bottom:0;
border-left:1px solid var(--ink);transform-origin:top}
#a003 .experience-step{position:relative;margin:0 0 calc(var(--u)*4)}
#a003 .experience-step::before{content:'';position:absolute;left:-27px;top:24px;width:8px;height:8px;
background:var(--paper);border:1px solid var(--ink);z-index:2}
#a003 .experience-role{position:relative;border:1px solid var(--ink);background:var(--paper)}
#a003 .experience-role::before{content:'';position:absolute;right:100%;top:28px;width:23px;
border-top:1px solid var(--ink);transform-origin:right}
#a003 .experience-role-current{border-width:2px}
#a003 .experience-role-current::after{content:'CURRENT';position:absolute;right:0;top:-18px;
font-family:'MN',monospace;font-size:8.5px;letter-spacing:.14em;color:var(--ink)}
#a003 .experience-summary{display:flex;flex-direction:column;min-height:220px;padding:calc(var(--u)*2)}
#a003 .experience-meta{display:flex;justify-content:space-between;gap:calc(var(--u)*2);
font-family:'MN',monospace;font-size:9px;line-height:1.5;letter-spacing:.08em;
text-transform:uppercase;color:var(--ref)}
#a003 .experience-role h4{margin-top:calc(var(--u)*3);font-size:1.05rem;line-height:1.25}
#a003 .experience-org{margin-top:calc(var(--u));font-family:'MN',monospace;font-size:9px;
line-height:1.6;color:var(--sec)}
#a003 .experience-scope{margin-top:calc(var(--u)*2);font-size:.9rem;line-height:1.6;color:var(--ink)}
#a003 .experience-evidence{margin-top:auto;border-top:1px solid var(--hair);
padding-top:calc(var(--u)*1.5);font-family:'MN',monospace;font-size:9px;line-height:1.65;
letter-spacing:.05em;text-transform:uppercase;color:var(--sec)}
#a003 .experience-evidence a{text-underline-offset:3px}
#a003 .experience-evidence a,#a003 .experience-caption a{display:inline-flex;align-items:center;min-height:44px}
#a003 .experience-more{width:100%;min-height:44px;align-items:center;justify-content:space-between;
border:0;border-top:1px solid var(--ink);background:none;color:inherit;padding:10px calc(var(--u)*2);
cursor:pointer;text-align:left;font-family:'MN',monospace;font-size:9px;line-height:1.5;
letter-spacing:.1em;text-transform:uppercase}
#a003 .experience-more:hover{background:var(--ink);color:var(--paper)}
#a003 .experience-detail{border-top:1px dashed var(--line);padding:calc(var(--u)*2)}
#a003 .experience-detail-inner{display:grid;gap:calc(var(--u)*1.5)}
#a003 .experience-detail-label{font-family:'MN',monospace;font-size:8.5px;
letter-spacing:.14em;text-transform:uppercase;color:var(--ref)}
#a003 .experience-detail ul{margin:0;padding-left:1.1em;color:var(--sec);font-size:.88rem;line-height:1.6}
#a003 .experience-detail li+li{margin-top:5px}
#a003 .experience-concurrent{display:flex;justify-content:space-between;gap:calc(var(--u)*2);
border-top:1px solid var(--ink);border-bottom:1px solid var(--hair);padding:calc(var(--u)*1.5) 0;
font-family:'MN',monospace;font-size:9px;line-height:1.5;letter-spacing:.1em;
text-transform:uppercase;color:var(--sec)}
#a003 .experience-concurrent strong{font-weight:600;color:var(--ink)}
#a003 .experience-caption{font-size:9px}
@media(max-width:860px){
#a003 .experience-tracks{grid-template-columns:minmax(0,1fr);gap:calc(var(--u)*5)}
#a003 .experience-summary{min-height:0}
}
@media(max-width:520px){
#a003 .experience-track-head{align-items:flex-start;flex-direction:column;gap:3px}
#a003 .experience-meta{align-items:flex-start;flex-direction:column;gap:2px}
#a003 .experience-concurrent{align-items:flex-start;flex-direction:column;gap:4px}
}
.runtime-ready #a003 .experience-track-list::before{transform:scaleY(0)}
.runtime-ready #a003 .experience-role::before{transform:scaleX(0)}
#a003.drawn .experience-track-list::before{animation:experience-line .8s cubic-bezier(.37,0,.28,1) forwards}
#a003.drawn .experience-role::before{animation:experience-tick .3s .55s linear forwards}
@keyframes experience-line{to{transform:none}}
@keyframes experience-tick{to{transform:none}}
.more{margin-top:calc(var(--u)*2);min-height:44px;background:none;border:1px solid var(--ink);cursor:pointer;
font-family:'MN',monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
color:inherit;padding:9px 16px;transition:background .2s linear,color .2s linear}
.more:hover{background:var(--ink);color:var(--paper)}
/* A control that cannot run must not be shown (see the theme toggle above): a
runtime that loads and then fails must never leave a "Close detail" button
on screen with no listener behind it. Shown state is inline-block, matching
the UA default .more otherwise renders at unstyled. */
.more{display:none}
.runtime-ready .more{display:inline-block}
.detail{display:none;margin-top:calc(var(--u)*3);border-top:1px dashed var(--line);padding-top:calc(var(--u)*2.5)}
.detail[data-open="true"]{display:block}
/* A fragment link into a project detail opens it. :target resolves before layout,
so a link to #p1-#p6 works with script, without script, and when script is
enabled but fails. Without this the browser scrolls to a display:none element
and nothing appears to happen. */
.detail:target{display:block}
/* An explicit close must beat :target, or a panel reached from an A-004 evidence
link can never be closed and its button contradicts what is on screen. Same
specificity as :target, so this has to stay below it. */
.detail[data-open="false"]{display:none}
/* Evidence links target the project, not the panel inside it: linking straight to
#pN scrolled past the title, figure and description and landed the reader in the
middle of a disclosure. Targeting the article lands at the top of the project and
still opens its detail. Specificity is explicit here so neither rule depends on
source order. */
.proj:target .detail{display:block}
.proj:target .detail[data-open="false"]{display:none}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:calc(var(--u)*3) calc(var(--u)*4)}
.fld .k{font-family:'MN',monospace;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ref);
display:block;padding-bottom:6px;border-bottom:1px solid var(--hair);margin-bottom:8px}
.fld p{font-size:.9rem;max-width:66ch}
.fld ul{margin:0;padding-left:1.1em;color:var(--sec);font-size:.9rem}
.fld li{margin-bottom:4px}
.refs{display:flex;gap:calc(var(--u)*2);flex-wrap:wrap;margin-top:calc(var(--u)*2.5);
padding-top:calc(var(--u)*1.5);border-top:1px solid var(--hair)}
.refs a{font-family:'MN',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
text-decoration:none;border-bottom:1px solid var(--mid)}
.refs a:hover{border-bottom-color:var(--ink)}
.refs span{font-family:'MN',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ref)}
/* A-006 */
/* A-006 title block. Every sheet header has been abbreviating this block for
five sheets; here it is drawn. Hairlines are the container's --line
background showing through a 1px grid gap, so every division is exactly one
pixel and no cell can double its neighbour's border. Print overrides this —
backgrounds are not guaranteed to render on paper, so the print block swaps
in real borders. */
.tblock{display:grid;grid-template-columns:repeat(4,1fr) 1.45fr;
grid-template-areas:
"title title title title drawn"
"issued issued issued issued drawn"
"doc rev sheets scale refs"
"status date loc loc refs";
gap:1px;background:var(--line);border:1px solid var(--line);
margin-top:calc(var(--u)*4)}
.tblock>div{background:var(--paper);padding:calc(var(--u)*2)}
.c-title{grid-area:title;padding-top:calc(var(--u)*3);padding-bottom:calc(var(--u)*3)}
.c-issued{grid-area:issued} .c-drawn{grid-area:drawn} .c-refs{grid-area:refs}
.c-doc{grid-area:doc} .c-rev{grid-area:rev} .c-sheets{grid-area:sheets}
.c-scale{grid-area:scale} .c-status{grid-area:status} .c-date{grid-area:date}
.c-loc{grid-area:loc}
.tblock .k{font-family:'MN',monospace;font-size:8px;letter-spacing:.22em;
text-transform:uppercase;color:var(--ref);display:block;margin-bottom:7px}
.tblock .v{font-size:.95rem;font-weight:600;letter-spacing:-.015em}
.tblock .s{font-family:'MN',monospace;font-size:.7rem;color:var(--ref);display:block;
margin-top:5px;line-height:1.7}
.tt{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.tt .of{display:block;font-size:.42em;font-weight:400;letter-spacing:.02em;
color:var(--sec);margin-bottom:4px}
.issue{font-size:clamp(1rem,2vw,1.22rem);font-weight:600;letter-spacing:-.02em}
.rt{display:flex;flex-direction:column;margin-top:calc(var(--u)*1.5)}
.rt a{min-height:44px;display:flex;align-items:center;gap:8px;text-decoration:none;
border-top:1px solid var(--hair);font-family:'MN',monospace;font-size:.76rem}
.rt a:first-child{border-top:0}
.rt a .ar{margin-left:auto;color:var(--ref)}
.mail{font-family:'MN',monospace;font-size:.74rem;word-break:break-all;
display:inline-flex;align-items:center;min-height:44px;margin-top:2px}
@media(max-width:1000px){
.tblock{grid-template-columns:repeat(2,1fr);
grid-template-areas:
"title title"
"issued issued"
"drawn refs"
"doc rev"
"sheets scale"
"status date"
"loc loc"}
}
@media(max-width:620px){
.tblock{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
.tblock>div{grid-area:auto}
}
.init{display:inline-block;margin-top:calc(var(--u)*3);border:1px solid var(--ink);
padding:calc(var(--u)*1.75) calc(var(--u)*3);font-family:'MN',monospace;font-size:.76rem;
letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
transition:background .2s linear,color .2s linear}
.init:hover{background:var(--ink);color:var(--paper)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
/* !important because each of these has to beat a .runtime-ready rule that hides
the element, and those carry one more class. Without it the still states never
applied and reduced-motion visitors saw content only because the blanket
animation-duration override below forced the forwards animations to finish.
The print block solves the same clash the same way. */
.dwg .ln{stroke-dashoffset:0!important;animation:none}
.dwg .fd,.an{opacity:1!important;animation:none}
#a001 .part-desc,#a001 .part-ref{opacity:1!important;animation:none}
.runtime-ready #a001 .part-body::before{transform:scaleX(1);animation:none}
.runtime-ready #a001 .part-body::after{clip-path:none;animation:none}
.runtime-ready #a001 .assembly-axis{transform:scaleY(1);animation:none}
.runtime-ready #a002 .education-route::before,
.runtime-ready #a002 .education-node::before,
.runtime-ready #a002 .education-node::after{transform:none;animation:none}
.runtime-ready #a003 .experience-track-list::before,
.runtime-ready #a003 .experience-role::before{transform:none;animation:none}
*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
@media print{@page{size:A3 landscape;margin:8mm}
/* :root[data-theme] as well as :root. A media query adds no specificity, so a
bare :root here is (0,1,0) and loses to :root[data-theme="dark"] at (0,2,0).
Anyone who has ever used the theme toggle carries data-theme in localStorage,
so without this the print tokens never applied and the page printed as
#F2F2F2 on white — 1.12:1, effectively blank. */
:root,:root[data-theme]{--paper:#fff;--ink:#000;--sec:#333;--ref:#555;--refdec:#777;--line:#CCC;--hair:#E5E5E5;--mid:#999}
body{font-size:9pt}.index{display:none}.doc{margin-left:0}
.sheet{break-after:page}.sheet:last-child{break-after:auto}
.cover .pane{min-height:auto}.rule{display:none}
.detail{display:block!important}.more{display:none}
/* The title block's rules are a background showing through a grid gap, and
browsers do not reliably print backgrounds. Without this the block — the
document's formal terminator — prints as unruled text. */
.tblock{background:none;gap:0}
.tblock>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.dwg .ln{stroke-dashoffset:0;animation:none}
.dwg .fd,.an{opacity:1;animation:none}
#a001 .part-desc,#a001 .part-ref{opacity:1!important;animation:none!important}
.runtime-ready #a001 .part-body::before{transform:scaleX(1);animation:none}
.runtime-ready #a001 .part-body::after{clip-path:none;animation:none}
.runtime-ready #a001 .assembly-axis{transform:scaleY(1);animation:none}
.runtime-ready #a002 .education-route::before,
.runtime-ready #a002 .education-node::before,
.runtime-ready #a002 .education-node::after{transform:none;animation:none}
.runtime-ready #a003 .experience-track-list::before,
.runtime-ready #a003 .experience-role::before{transform:none;animation:none}
#a003 .experience-more{display:none!important}
#a003 .experience-detail{display:block!important}
#a003 .experience-role{break-inside:auto}
#a003 .experience-summary{break-inside:avoid}
#a003 .experience-detail-label{break-after:avoid}
.proj{break-inside:avoid}
/* A claim must not be separated from the evidence that supports it. */
#a004 .claim,#a004 .stk{break-inside:avoid}
#a004 .claim h3{break-after:avoid}}
/* Media slot: the 1000px floor now applies only to .figbox svg, below, so a
drawing's 8px labels never get scaled illegible. A raster or a video has no
such labels, so it instead shrinks to its column: `width` and `max-width`
both percentage, not the fixed 1000px this rule used to hold, which forced a
sideways pan on every viewport under about 1100px. */
.figbox img,.figbox video{width:100%;max-width:100%;height:auto;display:block;
border:1px solid var(--hair)}
/* No video ships today — 05.6 is a still. Kept so a future recording lands in
the 2:1 frame cropped rather than pillarboxed, which would break the row of
equal figures. */
.figbox video{object-fit:cover;background:var(--paper)}
/* Cover drawing frame, responsive. Registration marks are document notation, not
interface: .rule is absolutely positioned with pointer-events:none, so it never
takes layout space, never reduces usable width and cannot be clicked. Below
960 the frame thins out rather than disappearing, so the cover still reads as a
sheet on a phone. The marks keep their drawn size at every width — registration
marks on a real drawing are a fixed physical size, not a proportion of the sheet.
Scoped to .cover so the frame on other sheets keeps its existing behaviour. */
@media(max-width:960px){
.cover .rule{display:block}
.cover .rule .cy{display:none} /* row letters sit in the reading gutter once the page narrows */
}
@media(max-width:759px){
.cover .rule .cx{display:none} /* column numbers crowd a phone; the four corners carry it alone */
}
/* A-004 Engineering. A claim sheet: four authored claims, each linking to the
drawings that evidence it. No script participates beyond the site-wide reveal,
and there is no figure — the mapping lives only in the evidence links, so
adding a project is adding one link. */
.a4-lead{font-size:clamp(.95rem,1.7vw,1.1rem);color:var(--sec);max-width:62ch;
margin-top:calc(var(--u)*2);text-wrap:pretty}
/* One measure. With no figure competing for width, the claims hold a comfortable
line length instead of stretching across the pane. */
.claims{margin-top:calc(var(--u)*5);max-width:760px}
.claim{padding:calc(var(--u)*4) 0;border-top:1px solid var(--line)}
.claim:first-child{border-top:1px solid var(--ink);padding-top:calc(var(--u)*3)}
/* The reference number sits INSIDE the heading so a headings-list navigation
returns "04.1 I work inside constraints...", which is how every cross-reference
names the claim. */
.claim h3{font-size:clamp(1.05rem,2.1vw,1.26rem);font-weight:600;letter-spacing:-.022em;
display:flex;gap:calc(var(--u)*2);align-items:baseline;text-wrap:balance}
/* width matches the indent on .claim-b below, so the heading text and the body
text start on the same vertical. Content-sized, the number is about 31px and
the heading would sit 23px left of everything under it. */
.claim h3 .n{font-family:'MN',monospace;font-size:.76rem;font-weight:400;color:var(--ref);
flex:none;width:3.4rem}
.claim-b{margin-left:calc(3.4rem + var(--u)*2)}
.claim-b p{font-size:.94rem;margin-top:calc(var(--u)*1.5);max-width:66ch;text-wrap:pretty}
.claim-b .how{color:var(--sec);font-size:.9rem}
/* Evidence references. The border is --ref, not --line: at 1px it is the only
resting-state signal that these are controls, so it has to clear 3:1 per WCAG
1.4.11, and --line is 1.41:1. min-width holds the target if a label is ever
shortened to a bare drawing code. */
.evrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:calc(var(--u)*2.5)}
.ev{display:inline-flex;align-items:center;gap:7px;min-height:44px;min-width:44px;padding:0 13px;
font-family:'MN',monospace;font-size:.76rem;letter-spacing:.04em;color:var(--ink);
text-decoration:none;border:1px solid var(--ref)}
.ev:hover{border-color:var(--ink);background:var(--hair)}
.ev .nm{font-family:'PS',sans-serif;font-size:.8rem;color:var(--sec);letter-spacing:0}
.ev:hover .nm{color:var(--ink)}
/* Stack as a description list, not
+ : the categories survive wrapping
at 286px, and was carrying styling rather than emphasis. */
.stk{border-top:1px solid var(--ink);margin-top:calc(var(--u)*6);padding-top:calc(var(--u)*2.5)}
.stk>.k{font-family:'MN',monospace;font-size:8px;letter-spacing:.2em;text-transform:uppercase;
color:var(--ref);display:block;margin-bottom:calc(var(--u)*2)}
.stk dl{display:grid;grid-template-columns:6.5rem minmax(0,1fr);
gap:calc(var(--u)*1.5) calc(var(--u)*2.5);margin:0;align-items:baseline;max-width:760px}
.stk dt{font-family:'MN',monospace;font-size:8px;letter-spacing:.2em;text-transform:uppercase;
color:var(--ref)}
.stk dd{margin:0;font-size:.85rem;color:var(--sec);line-height:1.9}
/* No per-row drawing codes. They were tried and removed twice: most of these
technologies are not named anywhere in A-005, so the codes cited drawings that
do not support them — a false citation is worse than an honest unattached list.
Spec 19 records the unattachment as accepted. */
/* Practice, not proficiency: a statement about how the work is done, pointing at
the claim that evidences it. Deliberately NOT given a category label — set in
the same tracked mono as Languages/Frameworks it read as a fifth row of the
technology list, which is the tool-badge framing this sheet exists to retire.
A plain sentence, indented to the content column, says it without claiming it. */
.stk .practice{margin-top:calc(var(--u)*3.5);max-width:62ch;font-size:.85rem;
color:var(--sec);padding-left:calc(6.5rem + var(--u)*2.5)}
@media(max-width:640px){.stk .practice{padding-left:0}}
.stk .practice a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ref)}
.stk .practice a:hover{border-bottom-color:var(--ink)}
.handoff{margin-top:calc(var(--u)*5);padding-top:calc(var(--u)*2.5);border-top:1px solid var(--hair);
display:flex;align-items:center;gap:calc(var(--u)*2);flex-wrap:wrap}
.handoff p{font-size:.9rem;max-width:66ch}
/* One column at every width — there is no figure to place, so the sheet never
needs a second track. Below 640 the reference number moves above its heading
and the claim body loses its indent, which is what buys the measure back on a
390px screen. */
@media(max-width:640px){
.claim h3{display:block}
.claim h3 .n{display:block;width:auto;margin-bottom:4px}
.claim-b{margin-left:0}
.stk dl{grid-template-columns:minmax(0,1fr);gap:2px}
.stk dt{margin-top:calc(var(--u)*2)}
}