/* Bryn Heinemann portfolio, v16 (v15 tokens, v14 structure). Generated by tools/make_css.py; edit tools/components.css. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hanken-grotesk-latin-400-normal.woff2?v=78c2be80e1) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/hanken-grotesk-latin-500-normal.woff2?v=8d6eb9d4c9) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/hanken-grotesk-latin-600-normal.woff2?v=0c156079a0) format("woff2")}
:root{--bg:#FFFFFF;--surface:#FAFAF9;--ink:#141414;--muted:#5E5E5E;--line:#E6E6E6;--rule:#E6E6E6;--rule-strong:#355B4D;--accent:#355B4D;--on-accent:#FFFFFF;--soft:#F2F2F2;--signal:#141414;--on-signal:#FFFFFF;--ok:#141414;--on-ok:#FFFFFF;--mid:#5E5E5E;--paper:#FFFFFF;--font:"Hanken Grotesk",system-ui,sans-serif;--t-cap:14px;--t-meta:15px;--t-body:18px;--t-lede:21px;--t-h3:24px;--t-h2:22px;--t-disp:clamp(44px,7.2vw,104px);--t-h1:clamp(34px,4.2vw,56px);--t-lab:24px;--t-stat:48px;--measure:66ch;--frame:960px;--wrap-home:1240px;--r:2px;--r-lg:2px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:40px;--s7:64px;--s8:104px;--wrap:1240px;--gut:24px;--pad:32px;--stick:65px;--photo-ink:#141414;--lb-ink:#EDEDED;--lb-bg:#111111;--dur:140ms;--ease:cubic-bezier(.2,0,0,1);--dur-long:480ms}
:root[data-theme="dark"]{--bg:#111111;--surface:#181818;--ink:#EDEDED;--muted:#A3A3A3;--line:#2A2A2A;--rule:#2A2A2A;--rule-strong:#8FB8A6;--accent:#8FB8A6;--on-accent:#111111;--soft:#222222;--signal:#EDEDED;--on-signal:#111111;--ok:#EDEDED;--on-ok:#111111;--mid:#A3A3A3;--paper:#FFFFFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#111111;--surface:#181818;--ink:#EDEDED;--muted:#A3A3A3;--line:#2A2A2A;--rule:#2A2A2A;--rule-strong:#8FB8A6;--accent:#8FB8A6;--on-accent:#111111;--soft:#222222;--signal:#EDEDED;--on-signal:#111111;--ok:#EDEDED;--on-ok:#111111;--mid:#A3A3A3;--paper:#FFFFFF}
}

/* ---- v15 components: minimal (Swiss, softened). Tokens only; light-gray hairlines, 2 px corners, no fills, no shadows. ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-body)/1.6 var(--font);font-variant-numeric:tabular-nums;
  padding-bottom:env(safe-area-inset-bottom);min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto;width:100%}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3{font-weight:500;margin:0;text-wrap:balance}
p,li{text-wrap:pretty}
p{margin:0 0 var(--s4)}
b,strong{font-weight:500}
a{color:var(--accent);text-decoration-color:currentColor;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
.tl-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);margin:0}
.tl-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-underline-offset:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r)}
sub,sup{line-height:0;font-size:.72em}
.wrap{max-width:calc(var(--wrap) + 2 * var(--pad));margin:0 auto;padding:0 var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.skip{position:absolute;left:var(--s4);top:-60px;background:var(--ink);color:var(--bg);padding:var(--s2) var(--s4);border-radius:var(--r);z-index:20;min-height:44px;display:inline-flex;align-items:center}
.skip:focus{top:var(--s2)}
.lbl{font-weight:500}
.fn{color:var(--ink);font-weight:500;margin-right:.35em}

/* top bar */
.top{position:relative;z-index:10;background:var(--bg);padding-top:env(safe-area-inset-top)}
.top .wrap{display:flex;align-items:center;gap:var(--s6);min-height:72px;padding-top:var(--s6);padding-bottom:var(--s4)}
.brand{color:var(--ink);text-decoration:none;font:500 19px var(--font);letter-spacing:-.01em;white-space:nowrap;min-height:44px;display:flex;align-items:center}
.nav{display:flex;gap:var(--s6);margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;font:400 17px var(--font);min-height:44px;min-width:44px;justify-content:center;display:flex;align-items:center;white-space:nowrap;border-bottom:2px solid transparent;padding-top:2px}
.nav a:hover{border-bottom-color:var(--line)}
.nav a[aria-current]{border-bottom-color:var(--rule-strong);font-weight:500}
.mode{appearance:none;border:0;background:none;color:var(--muted);font:400 17px var(--font);padding:0 var(--s2);min-height:44px;min-width:44px;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.mode:hover{color:var(--ink);text-decoration-color:currentColor}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s5);border-radius:var(--r);font:500 15px var(--font);text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.btn.pri,.btn.sec{background:transparent;color:var(--ink);border-color:var(--muted)}
.btn:hover{text-decoration:underline;text-decoration-thickness:1px}
.btn.sec:hover{background:var(--soft)}
.cta{display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:var(--s3);margin-top:var(--s5)}

/* bands and sections: full-bleed grounds alternate bg and surface; one inverted band per page */
.band{background:var(--bg);color:var(--ink)}
.sect{border-top:1px solid var(--line);padding-top:var(--s4);padding-bottom:var(--s7);row-gap:var(--s4)}
.band.tight .sect{padding-bottom:var(--s6)}
.sect>.lab{grid-column:1/4;font:500 var(--t-lab)/1.2 var(--font);letter-spacing:-.01em}
.sect>.body{grid-column:4/13;min-width:0}
.sect>.full{grid-column:1/-1;min-width:0}
.txt{max-width:64ch}
.txt.big{font-size:var(--t-lede);line-height:1.45}
.txt.big p{margin-bottom:var(--s3)}
ul.list{margin:0;padding-left:1.1em}
ul.list li{margin-bottom:var(--s2)}
ul.list li::marker{color:var(--muted)}
.toolsline{font-size:var(--t-cap);color:var(--muted);margin:0}
.toolsline b{color:var(--ink);margin-right:.5em}
.sub{font:500 var(--t-meta)/1.4 var(--font);margin:0 0 var(--s3)}
.m3d-hint[hidden]{display:none}
.fig figcaption,.cs-fig figcaption,.cmp-fig figcaption,.m3d figcaption,.chart figcaption,.vid figcaption{font-size:var(--t-cap);color:var(--muted);margin-top:var(--s2);line-height:1.45;max-width:80ch}

/* page heads */
.ph{padding-top:var(--s7);padding-bottom:var(--s6)}
.ph h1{font-size:var(--t-h1);letter-spacing:-.035em;line-height:1}
.ph p{color:var(--muted);max-width:60ch;font-size:var(--t-lede);margin-top:var(--s4)}

/* home */
.sec-h{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);border-top:1px solid var(--line);padding:var(--s5) 0 var(--s5)}
.sec-h h2{font-size:var(--t-h2);letter-spacing:-.01em;line-height:1.2}
.sec-h p{margin:0;color:var(--muted);font-size:var(--t-meta)}

/* case study head */
.cs-head{padding-top:var(--s3);padding-bottom:var(--s6);row-gap:0}
.crumb{grid-column:1/-1;font-size:var(--t-meta);margin:0}
.crumb a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.cs-head h1{grid-column:1/11;font-size:var(--t-h1);letter-spacing:-.035em;line-height:1;margin:var(--s1) 0 var(--s5)}
.cs-l{grid-column:1/6;min-width:0}
.meta{font-size:var(--t-meta);color:var(--muted);margin:0 0 var(--s3);line-height:1.45}
.role{font-size:var(--t-meta);margin:0 0 var(--s4);line-height:1.45}
.role b{margin-right:.35em}
.lede{font-size:var(--t-lede);line-height:1.42;letter-spacing:-.005em}
.lede.sm{font-size:var(--t-body);line-height:1.5}
.note{font-size:var(--t-cap);color:var(--muted);margin:0;line-height:1.45}
.cs-fig{grid-column:6/13;margin:0;min-width:0}
/* v6: the hero box takes the image's own aspect ratio; the image is never cover-cropped */
.cs-fig .zoom{display:block;width:fit-content;max-width:100%;margin:0 auto;overflow:hidden;border-radius:var(--r)}
.cs-fig.fit .zoom{background:var(--paper);border:1px solid var(--line)}
.cs-fig img{width:auto;height:auto;max-width:100%;max-height:clamp(320px,calc(100vh - 300px),560px)}
.cs-fig.fit img{padding:var(--s4)}
.cs-fig .vid+.vid{margin-top:var(--s4)}
.stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));column-gap:var(--gut);margin-top:var(--s5)}
.stat{padding-top:var(--s2);min-width:0}
.stat b{display:block;font:500 var(--t-stat)/1.05 var(--font);letter-spacing:-.03em;white-space:nowrap}
.stat span{display:block;font-size:var(--t-meta);color:var(--muted);line-height:1.35;margin-top:var(--s1)}

/* figures, galleries */
.fig{margin:0;min-width:0}
.fig .zoom{display:block;overflow:hidden;border-radius:var(--r)}
.fig.paper .zoom{background:var(--paper);border:1px solid var(--line)}
.fig img{width:100%}
.fig.paper .zoom{padding:var(--s3)}
.gal{display:grid;gap:var(--s5) var(--gut);margin:var(--s5) 0 0;align-items:start}
.gal:first-child{margin-top:0}
.g1{grid-template-columns:1fr}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vid{margin:0}
.vid video{display:block;width:100%;max-width:var(--vw,100%);height:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.vid.gap{margin-top:var(--s5)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gut);align-items:start}
.narrow{max-width:640px}
table caption{caption-side:top;text-align:left;font-size:var(--t-cap);color:var(--muted);padding:var(--s2) 0}

/* tables and charts */
.tbl-wrap{overflow-x:auto;margin:0 0 var(--s4);border-top:1px solid var(--muted);border-bottom:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:var(--t-meta)}
th,td{padding:var(--s2) var(--s4) var(--s2) 0;text-align:right;white-space:nowrap}
th:last-child,td:last-child{padding-right:0}
th:first-child,td:first-child{text-align:left;white-space:normal}
thead th{font-weight:600;border-bottom:1px solid var(--line)}
tbody tr+tr td{border-top:1px solid var(--line)}
td.no{color:var(--ink);font-weight:600}
td.yes{color:var(--ink);font-weight:500}
.chart{margin:0 0 var(--s5)}

/* case study tail */
.pn{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gut);border-top:1px solid var(--line);padding-top:var(--s4);padding-bottom:var(--s7)}
.pn a{display:flex;flex-direction:column;gap:var(--s1);text-decoration:none;color:var(--ink);min-height:44px}
.pn a span{font-size:var(--t-cap);color:var(--muted)}
.pn a b{font:500 var(--t-body)/1.35 var(--font);color:var(--ink)}
.pn a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.pn a.next{text-align:right}

/* short pages */
.t2-head{padding-top:var(--s3);padding-bottom:var(--s6);row-gap:0}
.t2-head h1{grid-column:1/11;font-size:var(--t-h1);letter-spacing:-.035em;line-height:1;margin:var(--s1) 0 var(--s5)}
.t2-head .cs-l{grid-column:1/6}
.t2-head .cs-fig{grid-column:6/13}
.t2-head .cs-l.wide{grid-column:1/9}
.textpanel{grid-column:6/13;border-top:1px solid var(--rule);padding-top:var(--s3);color:var(--muted);font-size:var(--t-meta)}

/* about, resume */
.about{padding-top:var(--s7);padding-bottom:var(--s7);row-gap:var(--s5)}
.about>.portrait{grid-column:1/4;max-width:260px}
.about>.portrait img{border-radius:var(--r)}
.about>.ab{grid-column:4/11;max-width:64ch}
.about h1{font-size:var(--t-h1);font-weight:600;letter-spacing:-.03em;line-height:1;margin-bottom:var(--s5)}
.about .lede{margin-bottom:var(--s5)}
.about h2{font-size:var(--t-h3);letter-spacing:-.02em;margin:var(--s6) 0 var(--s3)}
.tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.tl li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:var(--s4);padding:var(--s1) 0;border-top:1px solid var(--line);align-items:center}
.tl li:first-child{border-top:0}
.tl .d{color:var(--muted);font-size:var(--t-meta)}
.tl li a{display:inline-flex;align-items:center;min-height:44px}
.resume{grid-column:1/-1;padding:var(--s6) 0 var(--s7);max-width:900px}
.resume .c{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--s4);border-bottom:1px solid var(--rule);padding-bottom:var(--s4)}
.resume .c .dl{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s1)}
.resume .c .dl span{font-size:var(--t-cap);color:var(--muted)}
.resume h3 a{color:var(--ink);text-decoration-color:var(--line)}
.resume h3 a:hover{text-decoration-color:currentColor}
.resume h2{font-size:var(--t-cap);font-weight:600;letter-spacing:.04em;border-bottom:1px solid var(--line);padding-bottom:var(--s1);margin:var(--s6) 0 var(--s3)}
.resume h3{font-size:var(--t-body);font-weight:500;display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 var(--s4);margin-top:var(--s4)}
.resume h3 span{font-weight:400;color:var(--muted);font-size:var(--t-meta)}
.resume ul{margin:var(--s1) 0 0;padding-left:1.2em}
.resume li{font-size:15.5px;margin-bottom:2px}
.resume .c .rn{font:500 var(--t-h1)/1.05 var(--font);letter-spacing:-.035em;letter-spacing:-.025em;border:0;margin:0;padding:0}
.resume .c p{color:var(--muted);margin:var(--s2) 0 0}
.resume .edu{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0}
.resume .edu span{color:var(--muted)}
.resume .int{margin-top:var(--s5)}
.resume dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s4);font-size:15.5px}
.resume dt{font-weight:500}
.resume dd{margin:0}

/* lightbox */
dialog.lb{border:0;padding:0;background:transparent;max-width:min(96vw,1600px);max-height:94vh;overflow:visible}
dialog.lb::backdrop{background:rgba(0,0,0,.82)}
dialog.lb img{max-width:min(96vw,1600px);max-height:84vh;width:auto;height:auto;border-radius:var(--r);background:var(--paper)}
dialog.lb p{color:var(--lb-ink);font-size:var(--t-meta);margin:var(--s2) 0 0;max-width:80ch}
dialog.lb .x{position:absolute;top:-52px;right:0;min-height:44px;background:var(--lb-bg);color:var(--lb-ink);border-color:var(--lb-ink)}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:var(--s7);padding:var(--s5) 0 var(--s6);font-size:var(--t-meta);color:var(--muted)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3)}
.foot .fc{display:flex;flex-wrap:wrap;gap:0 var(--s4);align-items:baseline}
.foot .fc b{color:var(--ink)}
.foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration-color:var(--accent)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--s5)}

/* compare slider. JS writes clip-path on .over and transform on .bar. */
.cmp-fig{margin:0}
.cmp{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);touch-action:pan-y;user-select:none}
.cmp img{display:block;width:100%;height:auto}
.cmp img.over{position:absolute;inset:0;height:100%;clip-path:inset(0 50% 0 0)}
.cmp .bar{position:absolute;inset:0;pointer-events:none;transform:translateX(50%)}
.cmp .bar::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--ink)}
.cmp .bar::after{content:"";position:absolute;top:50%;left:-9px;width:18px;height:36px;margin-top:-18px;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink)}
.cmp-tags{display:flex;justify-content:space-between;font-size:var(--t-cap);font-weight:500;margin-top:var(--s2)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.cmp:focus-within{outline:2px solid var(--accent);outline-offset:3px}

/* 3D viewer */
.m3d{margin:0}
.m3d-stage{position:relative;aspect-ratio:4/3;max-height:440px;max-width:560px;width:100%;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.m3d-stage img{width:100%;height:100%;object-fit:contain}
.m3d model-viewer{width:100%;height:100%;--poster-color:transparent}
.m3d-btns{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.m3d-btns .btn{font-size:var(--t-cap)}
.m3d-btns .btn[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* figure beside a numbered list (Imdex labeled photo) */
.story{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s5)}
.story-steps{grid-column:1/5;list-style:none;margin:0;padding:0}
.story-steps>li{border-top:1px solid var(--line);padding:var(--s3) 0 var(--s4)}
.story-steps>li:first-child{border-top:0;padding-top:0}
.story-steps h3{font-size:var(--t-lede);line-height:1.25;letter-spacing:-.01em;margin-bottom:var(--s2)}
.story-steps h3 .n{display:inline-block;min-width:1.4em;color:var(--muted);font-weight:400}
.story-steps p{margin:0;max-width:44ch}
.story-stage{grid-column:5/13;min-width:0}
.story.tall .story-steps{grid-column:1/6}.story.tall .story-stage{grid-column:6/13}

/* Imdex: photo with leader lines; labels sit in a left gutter so nothing covers the part */
.ld-stage{position:relative;aspect-ratio:2126/2000;width:min(100%,640px);margin-left:auto}
.ld-stage .ph-img{position:absolute;left:29.163%;top:0;width:70.837%;height:100%;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.ld-stage .ph-img img{width:100%;height:100%;object-fit:cover}
.ld-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ld-stage .halo{stroke:var(--paper);stroke-width:16;fill:none;stroke-linecap:round;opacity:.9}
.ld-stage .ln{stroke:var(--photo-ink);stroke-width:6;fill:none;stroke-linecap:round}
.ld-stage .pt{fill:var(--photo-ink);stroke:var(--paper);stroke-width:8}
.ld-lab{position:absolute;left:0;width:27%;transform:translateY(-50%);text-align:right;font:500 var(--t-cap)/1.25 var(--font);color:var(--ink)}
.ld-lab b{color:var(--muted);font-weight:400;margin-right:.35em}

/* Atlas signal chain: whole figure; on phones its four panels in a 2 x 2 grid (same file, offset per cell) */
.chain .zoom{padding:var(--s3)}
.chain .quad{display:none}
.chain .cp{display:block;width:100%;height:auto}

/* Atlas results: log-scale dot strip */
.dots{margin:0 0 var(--s5)}
.dots .dr{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s4);align-items:center;border-top:1px solid var(--line);padding:var(--s2) 0}
.dots .dl{font-size:var(--t-meta);line-height:1.3}
.dots .dl b{display:block;font:400 var(--t-lede)/1.2 var(--font);letter-spacing:-.01em}
.dots .tr{position:relative;height:32px}
.dots .tr::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--line)}
.dots .dt{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--ink);border-radius:var(--r)}
.dots .tgt{position:absolute;top:0;bottom:0;border-left:2px solid var(--ink)}
.dots .ax>span:first-child{font-size:var(--t-cap);color:var(--muted)}
.dots .ax{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s4);border-top:1px solid var(--rule);padding-top:var(--s1)}
.dots .ax .sc{position:relative;height:20px;font-size:var(--t-cap);color:var(--muted)}
.dots .ax .sc span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.dots .ax .sc span:first-child{transform:none}
.dots .ax .sc span:last-child{transform:translateX(-100%)}
.dots .hd{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s4);font-size:var(--t-cap);color:var(--muted);padding-bottom:var(--s1)}
.dots .hd .tl2{position:relative;height:18px}
.dots .hd .tl2 span{position:absolute;transform:translateX(-50%);white-space:nowrap;color:var(--ink)}

:root[data-theme="dark"] .fig img,:root[data-theme="dark"] .cs-fig img,:root[data-theme="dark"] .crow .ci img{filter:brightness(.94)}

/* responsive */
@media (max-width:1000px){
  :root{--stick:0px}
  .top{position:relative}
  .top .wrap{flex-wrap:wrap;gap:0 var(--s4);padding-top:var(--s1);padding-bottom:var(--s1);min-height:0}
  .nav{order:3;width:100%;margin-left:0;gap:var(--s5)}
  .mode{margin-left:auto}
  .crow .cb{grid-column:1/6}.crow .ci{grid-column:6/13}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:759px){
  :root{--pad:16px;--gut:16px;--t-stat:44px;--t-h2:32px;--t-h3:24px;--t-lede:19px}
  .grid,.crow,.story,.also li,.contact{grid-template-columns:minmax(0,1fr)}
  .crow .cb{padding-right:0}
  .about>.portrait{max-width:200px}
  .resume .c .dl{align-items:flex-start}
  .kpi b{font-size:36px}
  .grid>*,.crow>*,.story>*,.also li>*,.contact>*{grid-column:1/-1!important}
  .hero-home{padding-top:var(--s6)}
  .kpis{grid-template-columns:1fr;row-gap:var(--s4);margin-top:var(--s6)}
  .sect{padding-bottom:var(--s6)}
  .sect>.lab{padding-top:0}
  .cs-head h1,.t2-head h1{margin-bottom:var(--s4)}
  .cs-head .cs-fig{order:-1;margin:0 0 var(--s4)}
  .cs-head .crumb{order:-3}.cs-head h1{order:-2}
  .cs-fig .zoom{margin:0 auto}
  .cs-fig img{max-height:70vh}
  .split{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s4)}
  .stat b{font-size:clamp(30px,9vw,44px)}
  .crow{padding:var(--s4) 0 var(--s5)}
  .crow .ci{order:-1}
  .also a{min-height:44px}
  .also span{padding-bottom:var(--s3)}
  .contact>.cta{justify-content:flex-start}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn{grid-template-columns:1fr;row-gap:var(--s4)}
  .pn a.next{text-align:left}
  .tl li{grid-template-columns:1fr;gap:0}
  .chain .whole{display:none}
  .chain .quad{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
  .ld-stage{width:100%;margin:0}
  .ld-lab{font-size:var(--t-cap)}
  .ld-lab .t{display:none}
  .ld-lab b{color:var(--ink);font-weight:500;margin:0}
  .dots .dr,.dots .ax,.dots .hd{grid-template-columns:1fr;row-gap:2px}
  .dots .ax>span:first-child,.dots .hd>span:first-child{display:none}
  .story-steps>li{padding-bottom:var(--s3)}
  .story .story-stage{order:-1}
}
@media (max-width:520px){
  body{font-size:16px}
  .brand{font-size:16px}
  .g2,.cards{grid-template-columns:1fr}
  .resume dl{grid-template-columns:1fr}
  th,td{padding:var(--s2) var(--s3) var(--s2) 0}
}
@media (pointer:coarse){
  main p a:not(.btn){padding:12px 0}
  .resume .c a{padding:0;display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .resume h3 a{display:inline-block;padding:11px 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.top,.foot,.pn{display:none}body{background:#fff}.band{background:#fff}}
.chart figcaption{max-width:none}

/* v9 reading layout (review/SPEC_V9.md section 1): one 960 px frame, text at 66ch, figures at three widths */
.cs-page .wrap{max-width:calc(var(--frame) + 2 * var(--pad))}
.cs-page{font-size:var(--t-body);line-height:1.6}
.cs-page .sect{display:block;border-top:0;padding:var(--s7) var(--pad) 0}
.cs-page .band.tight .sect{padding-bottom:0}
.cs-page .sect>.lab{font:500 var(--t-lab)/1.2 var(--font);letter-spacing:-.01em;margin:0 0 var(--s3)}
.cs-page .sub{font:600 var(--t-body)/1.3 var(--font);margin:var(--s5) 0 var(--s2)}
.cs-page p{margin:0 0 var(--s4)}
.cs-page :is(p,ul,.meta,.role,.note,.lede,.txt,table caption){max-width:var(--measure)}
.cs-page ul.list{margin:0 0 var(--s4)}
.cs-page .txt.big{font-size:var(--t-body);line-height:1.6}
.cs-page .txt.big p{margin-bottom:var(--s4)}
.cs-page .lede{font-size:var(--t-lede);line-height:1.45}
.cs-page .lede.sm{font-size:var(--t-body);line-height:1.6}
.cs-page .toolsline{margin-top:var(--s5)}
/* head: crumb, h1, meta, lede, note, role, then hero, then stats */
.cs-page :is(.cs-head,.t2-head){grid-template-columns:minmax(0,1fr)}
.cs-page :is(.cs-head,.t2-head)>*{grid-column:1/-1}
.cs-page :is(.cs-head,.t2-head) h1{font-size:var(--t-h1);letter-spacing:-.035em;line-height:1.05;max-width:20ch}
.cs-page .cs-l{max-width:var(--measure)}
.cs-page .cs-l .role{margin-bottom:0}
.cs-page .cs-fig{margin:var(--s6) 0 0}
.cs-page .cs-fig .zoom{margin:0;width:fit-content}
.cs-page .cs-fig img{width:auto;max-width:100%;max-height:none}
.cs-page .cs-fig.portrait img{max-height:520px}
.cs-page .stats{margin-top:var(--s6)}
/* figures: default text width, .wide the frame, .small 420 px; never upscaled */
.cs-page :is(.fig,.vid,.m3d,.cmp-fig,.tbl-wrap){max-width:var(--measure);margin-top:var(--s6);margin-bottom:var(--s6)}
.cs-page .sect>.body>:first-child,.cs-page .sect>.full>:first-child,.cs-page .sect>.full>.gal:first-child{margin-top:0}
.cs-page :is(.wide,.gal.g2,.gal.g3,.story,.chain,.dots,.tbl-wrap.wide){max-width:none}
.cs-page .gal{margin:var(--s6) 0;gap:var(--s5) var(--gut)}
.cs-page .gal :is(.fig,.vid){max-width:none;margin:0}
.cs-page .fig.small{max-width:420px}
.cs-page .fig .zoom{width:fit-content;max-width:100%}
.cs-page .fig img{width:auto;max-width:100%}
.cs-page .gal .fig .zoom{width:fit-content}
.cs-page .story{margin:0}
.cs-page :is(.fig,.cs-fig,.vid,.cmp-fig,.m3d,.chart) figcaption{font-size:var(--t-cap);line-height:1.45;margin-top:var(--s2);max-width:var(--measure)}
.cs-page .pn{margin-top:var(--s7)}
.cs-page .narrow{max-width:var(--measure)}
.cs-page .fig.still,.fig.still{max-width:380px}
.fig.still img{width:100%;border-radius:var(--r)}
.split75{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gut);align-items:start}
.split75 .fig.still{margin:0}

/* v9 All projects: one-link rows with a 4:3 thumbnail */
.plist{grid-column:1/-1;list-style:none;margin:0 0 var(--s7);padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:40px}
.plist li{border-top:1px solid var(--line);min-width:0}
.prow{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--s4);align-items:center;padding:var(--s3) 0;color:var(--ink);text-decoration:none}
.prow .pt{width:112px;height:84px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--surface);border-radius:var(--r)}
.prow .pt.fit{background:var(--paper);border:1px solid var(--line)}
.prow .pt img{width:100%;height:100%;object-fit:cover}
.prow .pt.fit img{object-fit:contain;padding:6px}
.prow .pt.none{background:var(--surface);font-size:12px;color:var(--muted);text-align:center;padding:var(--s1)}
.prow .pb{display:flex;flex-direction:column;gap:2px;min-width:0}
.prow b{font:500 19px/1.3 var(--font);letter-spacing:-.005em}
.prow .pb span{font-size:15px;line-height:1.4;color:var(--muted)}
.prow .pb .pc{font-size:var(--t-cap);color:var(--accent);margin-top:2px}
.prow:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (min-width:900px){.plist{grid-template-columns:repeat(2,minmax(0,1fr))}.plist li:nth-child(2){border-top:1px solid var(--line)}}

.about>.portrait{max-width:260px}
.about>.ab p{max-width:var(--measure)}

@media (max-width:759px){
  :root{--t-body:17px;--t-lede:19px}
  .cs-page .sect{padding:48px var(--pad) 0}
  .cs-page .cs-fig{margin:0 0 var(--s4)}
  .cs-page .cs-fig.portrait img{max-height:70vh}
  .split75{grid-template-columns:minmax(0,1fr)}
  .prow{grid-template-columns:88px minmax(0,1fr)}
  .prow .pt{width:88px;height:66px}
  .stat b{white-space:normal}
}
@media (max-width:520px){.cs-page .gal.g3{grid-template-columns:minmax(0,1fr)}}
.cs-page .stat b{white-space:normal}
.cs-page .chain .zoom{width:auto}
.cs-page .chain img.whole{width:100%}

/* v10: section labels inside More projects */
.cg-h{grid-column:1/-1;font-size:var(--t-h3,1.25rem);font-weight:500;letter-spacing:-.01em;margin:0 0 var(--s4);padding-top:var(--s2)}
.cg-h+.plist{margin-bottom:var(--s6)}


/* v16 home (review/SPEC_V16.md): the v14 landing and case-study rows in v15 styling. The intro fills the first
   screen with the whole uncropped portrait beside it; five rows, text left and image right; one link to All projects. */
.home .wrap{max-width:calc(var(--wrap-home) + 2 * var(--pad))}
.hero-home{min-height:calc(100svh - var(--toph,100px));align-content:center;align-items:center;padding-top:var(--s6);padding-bottom:var(--s7)}
.hero-home>.hp{grid-column:1/4;margin:0;align-self:center}
.hero-home>.hp img{width:100%;height:auto;border-radius:var(--r);display:block}
.hero-home>.hb{grid-column:4/-1;align-self:center;padding-left:var(--s5)}
.hero-home h1{font-size:var(--t-disp);font-weight:600;letter-spacing:-.03em;line-height:.98;margin:0 0 var(--s5)}
.hero-home .facts{font-size:var(--t-lede);line-height:1.4;margin:0 0 var(--s3);max-width:var(--measure);color:var(--ink)}
.hero-home .hab{color:var(--muted);font-size:var(--t-body);max-width:62ch;margin:0 0 var(--s5)}
.rows{grid-column:1/-1;list-style:none;margin:0;padding:0}
.crow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s4);border-top:1px solid var(--line);padding:var(--s6) 0;align-items:center;color:var(--ink);text-decoration:none}
.rows li:first-child .crow{border-top:0;padding-top:0}
.crow .cb{grid-column:1/8;display:flex;flex-direction:column;gap:var(--s2);min-width:0;padding-right:var(--s5)}
.crow .org{font-size:var(--t-cap);font-weight:500;color:var(--accent)}
.crow h3{font-size:var(--t-h3);font-weight:500;line-height:1.2;letter-spacing:-.015em}
.crow p{font-size:17px;line-height:1.5;margin:0;color:var(--muted);max-width:44ch}
.crow:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--accent)}
.crow .ci{grid-column:8/13;aspect-ratio:4/3;overflow:hidden;background:var(--surface);border-radius:var(--r)}
.crow .ci img{width:100%;height:100%;object-fit:cover}
.crow .ci.fit{background:var(--paper);border:1px solid var(--line)}
.crow .ci.fit img{object-fit:contain;padding:var(--s5)}
.cta.all{grid-column:1/-1;margin:var(--s4) 0 var(--s7)}
@media (prefers-reduced-motion:no-preference) and (min-width:760px){
  html:has(.hero-home){scroll-snap-type:y proximity}
  .rows .crow{scroll-snap-align:start;scroll-margin-top:var(--s5)}
}

/* v15 type: headings 500 with tight tracking; page titles a step above */
.ph h1,.cs-page :is(.cs-head,.t2-head) h1{font-weight:500;letter-spacing:-.03em}
.cs-page .gal.small3{max-width:720px}
.resume .dlpdf{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
.ph .tl-links{margin-top:var(--s4)}
.ph .tl-links a{font-size:var(--t-body)}

@media (max-width:759px){
  .top .wrap{padding-top:var(--s3)}
  .nav,.nav a{font-size:16px}
  .nav{gap:var(--s4)}
  .hero-home{padding-top:var(--s4)}
  .hero-home>.hp{grid-column:1/-1;max-width:160px;margin:0 0 var(--s4)}
  .hero-home>.hb{grid-column:1/-1;padding-left:0}
  .hero-home .facts{font-size:19px}
  .crow{padding:var(--s4) 0 var(--s5)}
  .crow .cb{grid-column:1/-1;padding-right:0}
  .crow .ci{grid-column:1/-1}
}

/* v17 status tag: plain small text, one per featured project */
.st{display:block;font-size:var(--t-cap);font-weight:600;color:var(--ink);letter-spacing:.01em;margin-top:2px}
.st-l{margin:0 0 var(--s3)}

.hero-home .hi{font-size:var(--t-lede);line-height:1.35;font-weight:500;margin:0 0 var(--s3);max-width:var(--measure)}

/* v17 Imdex how-it-works: the numbered photo stays in view while the four steps scroll past it */
@media (min-width:760px) and (prefers-reduced-motion:no-preference){
  .story.sticky{align-items:start}
  .story.sticky .story-stage{position:sticky;top:var(--s5);align-self:start}
  .story.sticky .story-steps>li{min-height:min(48vh,420px)}
  .story.sticky .story-steps>li:last-child{min-height:0}
  .story.sticky.live .ld-stage g{opacity:.3;transition:opacity var(--dur) var(--ease)}
  .story.sticky.live .ld-stage g.on{opacity:1}
  .story.sticky.live .ld-lab.on b,.story.sticky.live .story-steps>li.on .n{color:var(--accent);font-weight:600}
  .story.sticky.live .ld-lab.on .t{font-weight:600}
}

/* v17 bracket mounting-case selector: radios + :has(); without :has every panel shows, stacked, and the picker hides */
.mc{margin:var(--s5) 0}
.mc-pick{display:none;border:0;margin:0 0 var(--s4);padding:0}
.mc-pick legend{font-weight:500;padding:0;margin-bottom:var(--s2)}
.mc-pick input{position:absolute;opacity:0;width:1px;height:1px}
.mc-pick label{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s4);margin:0 var(--s2) var(--s2) 0;border:1px solid var(--line);border-radius:var(--r);cursor:pointer}
.mc-pick input:checked+label{border-color:var(--ink);font-weight:600}
.mc-pick input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.mc-p{border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s4)}
.mc-res{font-size:var(--t-lede);line-height:1.35}
@supports selector(:has(*)){
  .mc-pick{display:block}
  .mc .mc-p{display:none;border-top:0;padding-top:0;margin-top:0}
  .mc:has(#mc-wall:checked) .mc-p[data-case="wall"],.mc:has(#mc-patch:checked) .mc-p[data-case="patch"],.mc:has(#mc-free:checked) .mc-p[data-case="free"]{display:block}
}

.lede2{font-size:var(--t-body);line-height:1.55;margin:var(--s3) 0 0}

/* v18 stats beside their content (photo or text), as in the PDF portfolio; stacked under it on phones */
.sstat{display:grid;grid-template-columns:auto minmax(200px,260px);column-gap:var(--s6);justify-content:start;align-items:start;margin:var(--s6) 0}
.sstat-m{min-width:0}
.sstat .stats.col{grid-column:auto;grid-template-columns:minmax(0,1fr);row-gap:var(--s5);margin:0;padding-top:0}
.cs-page .sstat :is(.fig,.cs-fig){margin:0;max-width:none}
.cs-page .cs-head>.sstat.hero{margin:var(--s6) 0 0}
.sstat.txt-side{grid-template-columns:minmax(0,var(--measure)) minmax(200px,260px)}
.sstat.txt-side .txt>:first-child,.sstat.txt-side .txt>.list:first-child{margin-top:0}
.cs-page h3.sub+.sstat{margin-top:var(--s3)}
@media (max-width:759px){
  .sstat,.sstat.txt-side{grid-template-columns:minmax(0,1fr);row-gap:var(--s4)}
  .sstat .stats.col{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-page .cs-head>.sstat.hero{order:-1;margin:0 0 var(--s4)}
}