/* metric-matched fallbacks: no layout shift when the web fonts arrive */
@font-face{font-family:"Instrument Serif Fallback";src:local("Times New Roman"),local("Liberation Serif"),local("Times"),local("Noto Serif");size-adjust:84%;ascent-override:117.9%;descent-override:36.9%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica"),local("Roboto");size-adjust:103.8%;ascent-override:96.8%;descent-override:28.4%;line-gap-override:0%}
:root{
  color-scheme:dark;
  --bg:#0f0f10;--bg2:#17171a;--bg3:#1e1e22;--line:rgba(241,236,227,.1);--line2:rgba(241,236,227,.19);
  --ink:#f1ece3;--soft:#cfc9be;--mute:#9a958c;--dim:#75716a;
  --amber:#f5b000;--amber-s:rgba(245,176,0,.14);
  --cobalt:#3d6bff;--cobalt-i:#7d9bff;--cobalt-s:rgba(61,107,255,.16);
  --coral:#ff7a59;--lilac:#b48cff;
  --serif:"Instrument Serif","Instrument Serif Fallback",Georgia,serif;--sans:"Geist","Geist Fallback",system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;
  --w:1160px;--g:clamp(16px,4vw,48px);--sec:clamp(64px,9vw,128px);
  --ease:cubic-bezier(.2,.7,.2,1);--tb:0px;
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
::selection{background:var(--cobalt);color:#fff}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p a,.prose a,.pts a,.story a{color:var(--cobalt-i);text-decoration:underline;text-decoration-color:rgba(125,155,255,.4);text-underline-offset:3px;transition:text-decoration-color .2s,color .2s}
p a:hover,.prose a:hover,.pts a:hover,.story a:hover{text-decoration-color:var(--cobalt-i);color:#a9bcff}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:100}
.skip:focus{left:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--g)}
section{padding:var(--sec) 0 0}
html.lock{overflow:hidden}
h1,h2,h3{font-weight:400;margin:0}
h2{font-family:var(--serif);font-size:clamp(36px,4.6vw,58px);line-height:1;letter-spacing:-.015em}
.sh{margin-bottom:clamp(28px,4vw,48px)}
.sub{color:var(--mute);margin:12px 0 0;font-size:17px;max-width:58ch}
.story{font-size:17.5px;line-height:1.6;color:var(--soft);margin:0 0 18px;max-width:64ch}
b{font-weight:600}
.story b,.pts b{color:var(--ink)}

/* ---------- header (desktop) */
.nav{position:sticky;top:0;z-index:50;background:rgba(15,15,16,.8);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.navin{display:flex;align-items:center;height:64px;gap:24px}
.home{display:grid;place-items:center;width:40px;height:40px;margin:0 auto 0 -6px;border-radius:50%;color:var(--ink)}
.home:hover .mk-d .lb{fill:var(--cobalt)}
.menu{list-style:none;display:flex;gap:28px;margin:0;padding:0}
.menu a{text-decoration:none;font-size:14.5px;color:var(--mute);transition:color .2s;padding:6px 0;position:relative}
.menu a:hover{color:var(--ink)}
.menu a[aria-current]{color:var(--ink)}
.menu a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--cobalt)}
.sbtn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 8px 0 12px;border-radius:999px;border:1px solid var(--line2);background:none;color:var(--soft);cursor:pointer;font:14px var(--sans);transition:border-color .2s,color .2s}
.sbtn svg{width:16px;height:16px}
.sbtn kbd{font:11px var(--mono);border:1px solid var(--line2);border-radius:5px;padding:1px 6px;color:var(--dim)}
.sbtn:hover{border-color:var(--cobalt);color:var(--ink)}
.ibtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:none;color:var(--mute);display:grid;place-items:center;cursor:pointer;margin-right:-12px;transition:.2s}
.ibtn svg{width:17px;height:17px}
.ibtn:hover{color:var(--ink);border-color:var(--cobalt)}
.amb .wv{display:none}.amb[aria-pressed=true] .wv{display:inline}.amb[aria-pressed=true] .mx{display:none}
.ibtn.amb[aria-pressed=true]{color:var(--amber);border-color:rgba(245,176,0,.5)}

/* the mark: waveform draws in (load indicator), then idles as a turning disc */
.mark{overflow:visible}
.mk-w{fill:none;stroke:var(--amber);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:120;stroke-dashoffset:120;animation:mkdraw 1s var(--ease) .1s forwards,mkout .35s ease 1.25s forwards}
.mk-d{opacity:0;transform-origin:14px 14px;animation:mkin .45s var(--ease) 1.35s forwards,spin 9s linear 1.35s infinite}
.mk-d circle{fill:none;stroke:var(--ink);stroke-width:1.4}
.mk-d .g{stroke:rgba(241,236,227,.28);stroke-width:.8}
.mk-d .lb{fill:var(--amber);stroke:none;transition:fill .2s}
.mk-d .sh{fill:none;stroke:var(--cobalt);stroke-width:1.6;stroke-linecap:round}
@keyframes mkdraw{to{stroke-dashoffset:0}}
@keyframes mkout{to{opacity:0}}
@keyframes mkin{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes spin{to{rotate:360deg}}

/* ---------- mobile tab bar */
.tabbar{display:none}

/* ---------- search panel */
.spanel{position:fixed;inset:0;z-index:80;background:rgba(8,8,9,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sp-in{width:min(620px,calc(100vw - 32px));margin:12vh auto 0;background:var(--bg2);border:1px solid var(--line2);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
.sp-row{display:flex;align-items:center;gap:10px;padding:0 10px 0 16px;border-bottom:1px solid var(--line)}
.sp-row svg{color:var(--cobalt-i);flex:none}
#sq{flex:1;min-width:0;height:56px;border:0;background:none;color:var(--ink);font:17px var(--sans);outline:none}
#sq::-webkit-search-cancel-button{display:none}
.sp-x{background:none;border:1px solid var(--line2);color:var(--mute);border-radius:8px;font:12px var(--mono);padding:6px 10px;cursor:pointer}
.sres{list-style:none;margin:0;padding:6px;max-height:min(56vh,480px);overflow:auto}
.sres:empty{display:none}
.sres a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none}
.sres a b{display:block;font-weight:500;font-size:15px}
.sres a span{display:block;font-size:12.5px;color:var(--mute)}
.sres a:hover,.sres a.sel{background:var(--cobalt-s)}
.sres a.sel b{color:var(--cobalt-i)}
.sres .none{padding:12px;color:var(--mute);font-size:14px}

/* ---------- hero */
.hero{padding:clamp(40px,7vw,96px) 0 0}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,27vw,350px);gap:clamp(32px,6vw,96px);align-items:center}
h1{font-family:var(--serif);font-size:clamp(56px,7.4vw,100px);line-height:.95;letter-spacing:-.025em;white-space:nowrap}
.caret{display:inline-block;width:3px;height:.78em;background:var(--amber);margin-left:6px;vertical-align:-.04em;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.rot{margin:16px 0 0;height:1.5em;font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.5vw,32px);line-height:1.5;color:var(--amber);overflow:hidden}
.rotw{display:grid}
.rotw span{grid-area:1/1;opacity:0;transform:translateY(105%);transition:opacity .5s var(--ease),transform .6s var(--ease);white-space:nowrap}
.rotw span.on{opacity:1;transform:none}
.rotw span.out{opacity:0;transform:translateY(-105%)}
.lede{font-size:clamp(17px,1.45vw,19px);line-height:1.55;color:var(--soft);margin:18px 0 0;max-width:34em}
.lede b{color:var(--ink);font-weight:600}
.roleline{font-size:13.5px;color:var(--mute);margin:22px 0 0;line-height:1.6;padding-top:18px;border-top:1px solid var(--line);max-width:40em}
.roleline .sep{color:var(--cobalt-i);margin:0 4px}
.portrait{margin:0;position:relative}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:16px}
.portrait::before{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid rgba(61,107,255,.55);border-radius:16px;z-index:-1}
.portrait figcaption{position:absolute;left:12px;bottom:12px;font:500 12.5px var(--sans);color:var(--ink);background:rgba(15,15,16,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:6px 9px 6px 22px;border-radius:999px}
.portrait figcaption::before{content:"";position:absolute;left:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--amber)}

/* ---------- impact */
.impact{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border-top:1px solid var(--line2)}
.impact>div{padding:26px 26px 4px 0}
.impact>div+div{padding-left:26px;border-left:1px solid var(--line)}
.impact dt{font-family:var(--serif);font-size:clamp(34px,3.5vw,48px);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.impact dt i,.hl i,.figs i,.rfig i{font-style:normal;color:var(--amber);font-family:var(--sans);font-size:.6em;margin:0 .2em;vertical-align:.12em}
.impact dd{margin:12px 0 0;color:var(--mute);font-size:14.5px;line-height:1.5;max-width:24ch}

/* ---------- career */
.tline{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.tline li{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:128px minmax(0,1fr) auto 32px;align-items:center;gap:24px;padding:20px 8px 20px 10px;margin:0 -10px;border-radius:10px;text-decoration:none;cursor:pointer;transition:background .25s}
.row:hover,.row:focus-visible{background:linear-gradient(90deg,var(--cobalt-s),transparent 85%)}
.yr{font-family:var(--mono);font-size:12.5px;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.who b{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:5px;transition:text-decoration-color .2s,color .2s}
.row:hover .who b,.row:focus-visible .who b{text-decoration-color:var(--cobalt);color:#fff}
.rchev{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line2);color:var(--cobalt-i);transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s}
.row:hover .rchev,.row:focus-visible .rchev{transform:translateX(4px);background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.who b{display:block;font-weight:500;font-size:18px;font-family:var(--sans)}
.who span{display:block;color:var(--mute);font-size:14px;line-height:1.45}
.hl{font-family:var(--serif);font-size:clamp(24px,2.3vw,30px);line-height:1.05;text-align:right;white-space:nowrap}
.row:active{background:var(--cobalt-s)}
.row:active .rchev{transform:translateX(6px) scale(.92)}

.arw{display:inline-flex;overflow:hidden;vertical-align:-.12em;width:14px;height:14px}
.arw svg{flex:none}
.arw.ext{width:12px;height:12px}
a:hover>.arw svg,a:hover .ct .arw svg,a:focus-visible .arw svg{animation:slide .55s var(--ease)}
@keyframes slide{0%{transform:none}45%{transform:translateX(120%)}46%{transform:translateX(-120%)}100%{transform:none}}

/* ---------- cards + snap rows */
.snap{display:grid;gap:24px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{display:flex;flex-direction:column;text-decoration:none;transition:transform .35s var(--ease)}
a.card:hover{transform:translateY(-3px)}
a.card:active{transform:scale(.98)}
.media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:var(--bg2)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
a.card:hover .media img{transform:scale(1.04)}
a.card:hover .media{box-shadow:0 0 0 1px var(--cobalt)}
.play{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(15,15,16,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--ink);opacity:0;transform:scale(.85);transition:opacity .3s,transform .4s var(--ease),background .3s;border:1px solid rgba(241,236,227,.25)}
.play svg{width:18px;height:18px;margin-left:2px}
a.card:hover .play,a.card:focus-visible .play{opacity:1;transform:none;background:var(--cobalt)}
.views{position:absolute;left:8px;top:8px;font:500 11px/1 var(--mono);padding:5px 7px;border-radius:5px;background:rgba(15,15,16,.8);color:var(--amber)}
.meta{display:block;font-size:13px;font-weight:500;color:var(--cobalt-i);margin:12px 0 4px}
.ct{display:block;font-size:15.5px;line-height:1.35;font-weight:500;color:var(--ink)}
.ct .arw{color:var(--mute);margin-left:2px}
.more{display:inline-flex;align-items:center;gap:10px;margin-top:24px;min-height:44px;color:var(--cobalt-i);text-decoration:none;font-weight:500;font-size:15px}
.more:hover{color:var(--ink)}

/* ---------- quotes */
.quotes{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:56px;align-items:start;border-top:1px solid var(--line2);padding-top:36px}
.qstage{display:grid;gap:0}
.q{grid-area:1/1;margin:0;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.q.on{opacity:1;transform:none;pointer-events:auto}
.q blockquote{margin:0;font-family:var(--serif);font-size:clamp(26px,3.2vw,40px);line-height:1.15;letter-spacing:-.01em}
.q blockquote::before{content:"“";color:var(--amber)}
.q blockquote::after{content:"”";color:var(--amber)}
.q figcaption{margin-top:22px;font-size:14.5px}
.q figcaption b{font-weight:500}
.q figcaption span{color:var(--mute);margin-left:8px}
.qnav{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.qnav button{background:none;border:0;text-align:left;color:#9a9a9a;font:14.5px var(--sans);padding:8px 0 8px 18px;cursor:pointer;position:relative;transition:color .2s}
.qnav button:hover{color:var(--soft)}
.qnav button[aria-pressed=true]{color:var(--ink)}
.qnav button[aria-pressed=true]::before{content:"";position:absolute;left:-1px;top:7px;bottom:7px;width:2px;background:var(--cobalt)}

/* ---------- contact strip */
.contact{padding:clamp(56px,7vw,96px) 0 48px}
.cstrip{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;border-top:1px solid var(--line2);padding-top:22px;font-size:14.5px}
.cstrip h2{font:500 15px var(--sans);color:var(--soft);margin-right:auto}
.mail{display:inline-flex;align-items:center;gap:10px;min-width:0}
.mail a{text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line2);transition:border-color .2s,color .2s}
.mail a:hover{border-color:var(--cobalt);color:var(--cobalt-i)}
.mail noscript{color:var(--soft)}
.copy{font:500 13px var(--sans);background:none;border:1px solid var(--line2);color:var(--soft);border-radius:999px;padding:0 14px;min-height:36px;min-width:64px;cursor:pointer;transition:border-color .2s,color .2s}
.copy:hover{border-color:var(--cobalt);color:var(--ink)}
.cl{display:inline-flex;align-items:center;gap:7px;min-height:44px;text-decoration:none;color:var(--soft);transition:color .2s}
.cl:hover{color:var(--cobalt-i)}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--tb));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:999px;font-size:14px;opacity:0;transition:.3s;pointer-events:none;z-index:90}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- page heads */
.phead{padding-top:clamp(48px,7vw,96px)}
.phead h1{font-size:clamp(56px,8vw,112px);white-space:normal}
.whead .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}

/* ---------- work roles */
.roles{padding-top:clamp(32px,4vw,56px)}
.rtools{display:none;justify-content:flex-end;margin-bottom:8px}
.xall{background:none;border:1px solid var(--line2);color:var(--cobalt-i);border-radius:999px;font:500 14px var(--sans);padding:0 16px;min-height:44px;cursor:pointer}
.role{border-top:1px solid var(--line2);padding:clamp(36px,4.5vw,56px) 0}
.role:last-child{border-bottom:1px solid var(--line)}
.rh{font:inherit}
.rbtn{all:unset;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"co fig" "t w";gap:6px 24px;width:100%;cursor:default;box-sizing:border-box}
.rbtn:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px;border-radius:6px}
.rco{grid-area:co;font-family:var(--serif);font-size:clamp(32px,3.4vw,44px);line-height:1.05}
.rfig{grid-area:fig;align-self:end;font-family:var(--serif);font-size:clamp(26px,2.6vw,34px);color:var(--amber);line-height:1;white-space:nowrap}
.rt{grid-area:t;color:var(--soft);font-size:15.5px}
.rw{grid-area:w;font:12.5px var(--mono);color:var(--dim);text-align:right;align-self:center}
.chev{display:none}
.rbody{margin-top:26px;padding-left:min(22%,240px)}
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:26px;border-top:1px solid var(--line)}
.figs>div{padding:14px 16px 0 0}
.figs>div+div{padding-left:16px;border-left:1px solid var(--line)}
.figs span{display:block;font-size:12.5px;color:var(--mute)}
.figs b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1.1;margin-top:4px;white-space:nowrap}
.pts{list-style:none;margin:0;padding:0;max-width:68ch}
.pts li{position:relative;padding:0 0 0 22px;margin:0 0 12px;color:var(--soft);line-height:1.6}
.pts li::before{content:"";position:absolute;left:2px;top:.78em;width:8px;height:2px;border-radius:2px;background:var(--cobalt)}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:28px}
.ph{margin:0;position:relative}
.ph img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.mosaic .ph{aspect-ratio:4/3;overflow:hidden;border-radius:8px}
.mosaic .p-prank img{object-position:center 35%}.mosaic .p-gift img{object-position:center 30%}.mosaic .p-sess img{object-position:center 40%}
.ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;font-size:12px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);border-radius:0 0 8px 8px}


/* ---------- systems */
.flowwrap{position:relative;border:1px solid var(--line);border-radius:14px;padding:clamp(18px,3vw,36px);background:radial-gradient(120% 80% at 30% 40%,rgba(61,107,255,.07),transparent 60%),var(--bg2)}
.hint{margin:0 0 14px;font:13.5px var(--sans);color:var(--mute)}
.hint-t{display:none}
.hint span{color:var(--cobalt-i)}
.flow{width:100%;height:auto;overflow:visible;display:block}
.flow.tall{display:none;max-width:420px;margin:0 auto}
.flow .nd{cursor:pointer;outline:none}
.flow .nd>rect{fill:var(--bg3);stroke:rgba(241,236,227,.16);stroke-width:1.2;transition:fill .2s,stroke .2s}
.flow .nd .t{fill:var(--ink);font:500 15px var(--sans)}
.flow .nd .t.big{font:400 24px var(--serif)}
.flow .nd .s{fill:var(--mute);font:12px var(--sans)}
.flow .nd .c{fill:var(--soft);font:500 14px var(--sans)}
.flow .nd .o{fill:var(--soft);font:14px var(--sans)}
.flow .cell{fill:rgba(241,236,227,.03);stroke:rgba(241,236,227,.1)}
.flow .para>rect:first-child{stroke:rgba(245,176,0,.45)}
.flow .ag>rect{stroke:rgba(61,107,255,.6)}
.flow .nd:hover>rect:first-child,.flow .nd.on>rect:first-child,.flow .nd:focus-visible>rect:first-child{fill:#22264a;stroke:var(--cobalt);stroke-width:1.8}
.flow .para:hover>rect:first-child,.flow .para.on>rect:first-child,.flow .para:focus-visible>rect:first-child{fill:#2a2412;stroke:var(--amber)}
.flow .nd.on .t,.flow .nd:hover .t{fill:#fff}
.flow .ln{fill:none;stroke:rgba(241,236,227,.32);stroke-width:1.3;stroke-dasharray:3 5;animation:flowln 1.6s linear infinite}
.flow .ln.loop{stroke:var(--amber);stroke-opacity:.75;stroke-width:1.5}
.flow .ah{fill:none;stroke:var(--amber);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.flow .lp{fill:var(--amber);font:500 12.5px var(--sans)}
.flow .ap{fill:var(--cobalt-i);font:500 12px var(--sans)}
@keyframes flowln{to{stroke-dashoffset:-16}}
.flow .col{fill:var(--mute);font:500 13px var(--sans)}
.pop{position:absolute;z-index:5;width:min(300px,calc(100% - 24px));background:#141729;border:1px solid var(--cobalt);border-radius:12px;padding:14px 16px;box-shadow:0 20px 50px rgba(0,0,0,.5);font-size:14px;line-height:1.5;pointer-events:none}
.pop-x{display:none}
.pop b{display:block;font:400 22px var(--serif);color:#fff;margin-bottom:4px}
.pop p{margin:0 0 8px;color:var(--soft)}
.pop .adopt{margin:0;padding-top:8px;border-top:1px solid var(--line)}
.pop .adopt span{display:block;font:600 13px var(--sans);color:var(--amber);margin-bottom:2px}
.plist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.plist li{display:grid;grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.plist b{font-weight:500}
.plist .pm{font-size:13.5px;color:var(--mute)}
.plist .pd{color:var(--mute);font-size:15px}
.fpga{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px;align-items:start}
.yt{position:relative;aspect-ratio:582/328;border-radius:12px;overflow:hidden;background:#000}
.yt button{all:unset;cursor:pointer;display:block;width:100%;height:100%;position:relative}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.yt button:hover img{transform:scale(1.03)}
.yt .play{opacity:1;transform:none;width:56px;height:56px;margin:-28px 0 0 -28px}
.yt button:hover .play{background:var(--cobalt)}
.yt button:focus-visible{outline:2px solid var(--cobalt);outline-offset:-4px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.credit{font-size:12.5px;color:var(--dim);margin:10px 0 0;line-height:1.5}
.spec{margin:6px 0 0;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.spec dt{font-size:13.5px;font-weight:500;color:var(--cobalt-i);padding-top:1px}
.spec dd{margin:0;color:var(--soft);font-size:15px}

/* trinket: riff -> effect chain -> amp */
.trinket{margin-top:48px;border:1px solid var(--line2);border-radius:16px;padding:20px 22px 14px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"h c" "w w" "cr cr";gap:16px 28px;align-items:center;background:linear-gradient(120deg,rgba(61,107,255,.1),transparent 45%,rgba(245,176,0,.08)),var(--bg2)}
.tk-head{grid-area:h;display:flex;align-items:center;gap:14px}
.tk-head b{display:block;font:400 26px/1.1 var(--serif)}
.tk-head span{display:block;color:var(--mute);font-size:13.5px;max-width:30ch;line-height:1.45}
.tk-play{position:relative;width:52px;height:52px;border-radius:50%;border:0;background:var(--amber);color:#111;display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .2s var(--ease),background .2s}
.tk-play:hover{transform:scale(1.06)}
.tk-play:active{transform:scale(.94)}
.tk-play svg{width:20px;height:20px;margin-left:2px}
.tk-play .i-play svg,.tk-play .i-play path{color:#111;fill:#111}
.tk-play .i-stop{display:none;width:16px;height:16px;background:#0f0f10;border-radius:3px}
.tk-play[aria-pressed=true]{background:var(--ink);color:#0f0f10;box-shadow:0 0 0 4px rgba(241,236,227,.18)}
.tk-play[aria-pressed=true] .i-play{display:none}
.tk-play[aria-pressed=true] .i-stop{display:block}
.tk-play.loading::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;border-top-color:var(--cobalt-i);animation:spin .8s linear infinite}
.chain{grid-area:c;position:relative;display:flex;align-items:center;gap:10px;min-width:0}
.chain::before{content:"";position:absolute;left:30px;right:30px;top:50%;height:2px;background:linear-gradient(90deg,var(--amber),var(--coral),var(--lilac),var(--cobalt));opacity:.55}
.jack{position:relative;font:500 12.5px var(--sans);color:var(--mute);background:var(--bg2);padding:4px 8px;border-radius:6px;flex:none}
.tk-btns{position:relative;display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0;padding:4px 2px}
.tk-btns button{--c:var(--cobalt);display:inline-flex;align-items:center;gap:8px;font:500 14px var(--sans);color:var(--soft);background:var(--bg3);border:1px solid var(--line2);border-radius:999px;padding:0 15px 0 12px;min-height:44px;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.tk-btns .dot{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;transition:transform .2s}
.tk-btns [data-fx=clean]{--c:#7fd6c2}.tk-btns [data-fx=drive]{--c:var(--amber)}.tk-btns [data-fx=echo]{--c:var(--cobalt-i)}.tk-btns [data-fx=crush]{--c:var(--coral)}.tk-btns [data-fx=verb]{--c:var(--lilac)}
.tk-btns button:hover{border-color:var(--c);color:var(--ink)}
.tk-btns button:active{transform:scale(.96)}
.tk-btns button[aria-pressed=true]{background:var(--c);border-color:var(--c);color:#0f0f10;box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.tk-btns button[aria-pressed=true] .dot{background:#0f0f10;transform:scale(.8)}
#tkWave{grid-area:w;width:100%;height:56px;display:block;background:linear-gradient(rgba(241,236,227,.12),rgba(241,236,227,.12)) center/100% 1px no-repeat}
.tk-cred{grid-area:cr;margin:0;font-size:12.5px;color:var(--mute)}
#tkState{color:var(--cobalt-i);margin-left:6px}

/* ---------- music */
.mhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.ambpill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid var(--line2);background:none;color:var(--soft);font:500 14px var(--sans);cursor:pointer;transition:border-color .2s,color .2s}
.ambpill svg{width:18px;height:18px}
.ambpill .st{color:var(--mute)}
.ambpill:hover{border-color:var(--cobalt);color:var(--ink)}
.ambpill[aria-pressed=true]{border-color:rgba(245,176,0,.6);color:var(--amber)}.ambpill[aria-pressed=true] .st{color:var(--amber)}
.fb{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 40px;align-items:start}
.fbtxt{grid-column:1/span 5}
.fb .albums{grid-column:6/-1;margin-top:0;max-width:none}
.fbh{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.fbav{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line2)}
.albums{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.album{border-radius:12px;overflow:hidden;background:var(--bg2);min-height:0;border:1px solid var(--line)}
.album button{all:unset;cursor:pointer;display:block;position:relative;width:100%}
.album img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .7s var(--ease)}
.album button:hover img{transform:scale(1.03)}
.album .at{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px}
.album .at b{font-weight:500;font-size:15px}
.album .at span{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--cobalt-i);white-space:nowrap}
.album .at svg{width:12px;height:12px}
.album button:hover .at span{color:var(--amber)}
.album iframe{display:block;width:100%;height:352px;border:0}
.album.playing{grid-column:1/-1}
#typed{display:inline-block}
.album .alt{display:block;padding:10px 14px;font-size:13.5px;color:var(--cobalt-i);text-decoration:none}
.album button:focus-visible{outline:2px solid var(--cobalt);outline-offset:-3px}
.fblinks{display:flex;gap:28px;flex-wrap:wrap}.fblinks .more{margin-top:24px}
.gg{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:center}
.ggart{border-radius:14px;overflow:hidden;background:#0d0d0e;border:1px solid var(--line)}
.ggart img{width:100%;filter:invert(.94) hue-rotate(180deg) saturate(1.2);mix-blend-mode:lighten}

/* ---------- about */
.about{display:grid;grid-template-columns:300px minmax(0,1fr);gap:64px;align-items:start;margin-top:8px}
.aph{overflow:hidden;border-radius:14px;position:sticky;top:96px}
.aph img{aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.big{font-family:var(--serif);font-size:clamp(28px,3vw,40px);line-height:1.15;margin:0 0 24px;letter-spacing:-.01em}
.prose p{color:var(--soft);font-size:17px;margin:0 0 16px;line-height:1.65}
.edh{font-size:32px;margin:40px 0 16px}
.edu{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.edu li{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line)}
.edu b{font-weight:500}
.edu span{color:var(--mute);text-align:right}

/* ---------- work: Dropship plug */
.plug{display:flex;align-items:flex-start;gap:10px;max-width:280px;padding:12px 14px;border:1px solid var(--line2);border-radius:12px;text-decoration:none;font-size:13.5px;line-height:1.45;color:var(--mute);transition:border-color .2s,color .2s}
.plug b{font:400 19px/1.1 var(--serif);color:var(--ink);font-weight:400}
.plug .arw{color:var(--cobalt-i);margin-top:3px;flex:none}
.plug:hover{border-color:var(--cobalt);color:var(--soft)}

/* ---------- work: films tabs */
.ftl{display:flex;gap:8px;margin-bottom:22px;overflow-x:auto;scrollbar-width:none}
.ftl::-webkit-scrollbar{display:none}
html:not(.js) .ftl{display:none}
.ftl [role=tab]{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);background:none;color:var(--soft);font:500 14.5px var(--sans);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.ftl [role=tab] span{font:12px var(--mono);color:var(--dim)}
.ftl [role=tab]:hover{border-color:var(--cobalt);color:var(--ink)}
.ftl [role=tab][aria-selected=true]{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.ftl [role=tab][aria-selected=true] span{color:rgba(255,255,255,.75)}
.fpanel{outline:none}
.fpanel:focus-visible{outline:2px solid var(--cobalt);outline-offset:6px;border-radius:8px}
.fph{font:500 17px var(--sans);margin:0 0 14px}
.js .fph{display:none}
html:not(.js) .fpanel+.fpanel{margin-top:36px}
.frow{grid-template-columns:repeat(3,minmax(0,1fr))}

.fpanel[hidden]{display:none}
.js .fpanel:not([hidden]){animation:fadein .25s var(--ease)}

/* ---------- systems: principles */
.prh{font:500 13px var(--sans);color:var(--mute);margin:40px 0 14px;letter-spacing:.02em}
.princ{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.princ li{display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);transition:border-color .2s}
.princ li:hover{border-color:var(--line2)}
.princ .pi{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--cobalt-s);color:var(--cobalt-i);margin-bottom:6px}
.princ li:nth-child(even) .pi{background:var(--amber-s);color:var(--amber)}
.princ b{font:400 21px/1.1 var(--serif);font-weight:400;color:var(--ink)}
.princ li>span:last-child{color:var(--mute);font-size:13.5px;line-height:1.45}

/* ---------- music: Garam step track + levels */
.ggh{font:500 13px var(--sans);color:var(--mute);margin:28px 0 12px;letter-spacing:.02em}
.track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;position:relative}
.track::before{content:"";position:absolute;left:12%;right:12%;top:35px;height:1px;background:linear-gradient(90deg,var(--amber),var(--cobalt));opacity:.6}
.track li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.track .sg{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--bg3);border:1px solid var(--line2);color:var(--amber);margin-bottom:8px}
.track li:nth-child(n+3) .sg{color:var(--cobalt-i)}
.track b{font-weight:500;font-size:15px;line-height:1.3}
.track li>span:last-child{color:var(--mute);font-size:13.5px;line-height:1.45}
.lvl{list-style:none;margin:0;padding:0;position:relative;height:46px}
.lvl::before{content:"";position:absolute;left:0;right:0;top:4px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--amber),var(--coral) 45%,var(--cobalt))}
.lvl li{position:absolute;top:22px;font-size:13.5px;color:var(--soft);white-space:nowrap;transform:translateX(-50%)}
.lvl li::before{content:"";position:absolute;left:50%;top:-22px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--bg);border:2px solid var(--soft)}
.lvl li:nth-child(1){left:0;transform:none}.lvl li:nth-child(1)::before{left:0;margin-left:0;border-color:var(--amber)}
.lvl li:nth-child(2){left:25%}.lvl li:nth-child(3){left:50%}.lvl li:nth-child(4){left:75%}
.lvl li:nth-child(5){left:auto;right:0;transform:none;color:var(--ink);font-weight:500}.lvl li:nth-child(5)::before{left:auto;right:0;margin:0;border-color:var(--cobalt);background:var(--cobalt)}

/* ---------- reveal (only below-the-fold elements are hidden, by JS) */
.rv.pre{opacity:0;transform:translateY(14px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ---------- easter eggs */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:70;background:radial-gradient(ellipse at 50% 60%,rgba(245,176,0,.22),rgba(61,107,255,.06) 45%,transparent 75%);opacity:0;transition:opacity 1.1s var(--ease)}
body.glow::after{opacity:1}

/* =================================================================== responsive */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .impact{grid-template-columns:repeat(2,1fr)}
  .impact>div:nth-child(3){padding-left:0;border-left:0}
  .impact>div:nth-child(n+3){border-top:1px solid var(--line);margin-top:18px}
  .princ{grid-template-columns:repeat(6,minmax(0,1fr))}
  .princ li{grid-column:span 2}.princ li:nth-child(4){grid-column:2/span 2}
  .frow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gg .track{grid-template-columns:repeat(2,minmax(0,1fr))}.gg .track::before{display:none}
  .fbtxt{grid-column:1/span 5}.fb .albums{grid-column:6/-1}
  .rbody{padding-left:0}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .trinket{grid-template-columns:1fr;grid-template-areas:"h" "c" "w" "cr"}
  .fpga{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
}
@media (max-width:900px){
  .flow.wide{display:none}.flow.tall{display:block}
  .hint-h{display:none}.hint-t{display:inline}
  .whead .wrap{grid-template-columns:1fr;gap:20px}
  .about{grid-template-columns:260px minmax(0,1fr);gap:40px}
  .gg{grid-template-columns:minmax(0,1fr) 240px;gap:40px}
  .plist li{grid-template-columns:1fr;gap:4px}
}

/* ---------- phone: app shell */
@media (max-width:760px){
  :root{--tb:calc(62px + env(safe-area-inset-bottom));--sec:56px}
  html{scroll-padding-top:16px}
  body{font-size:16px;padding-bottom:var(--tb)}
  .nav{display:none}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;height:var(--tb);padding:0 max(4px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px,env(safe-area-inset-left));background:rgba(17,17,19,.9);backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px);border-top:1px solid var(--line)}
  .tabbar>a,.tabbar>button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--mute);background:none;border:0;font:500 10px/1 var(--sans);letter-spacing:.01em;cursor:pointer;position:relative;transition:color .15s}
  .tabbar svg{width:22px;height:22px;transition:transform .15s}
  .tabbar>a:active svg,.tabbar>button:active svg{transform:scale(.88)}
  .tabbar a[aria-current]{color:var(--ink)}
  .tabbar a[aria-current] svg{color:var(--cobalt-i)}
  .tabbar a[aria-current]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:0 0 2px 2px;background:var(--cobalt)}
  .spanel{background:rgba(8,8,9,.7)}
  .sp-in{position:absolute;left:8px;right:8px;bottom:calc(var(--tb) + 8px);width:auto;margin:0;display:flex;flex-direction:column-reverse}
  .sp-row{border-bottom:0;border-top:1px solid var(--line)}
  .sres{max-height:52vh}

  h2{font-size:34px}
  .sh{margin-bottom:20px}
  .sub{font-size:15.5px;margin-top:8px}
  .story{font-size:16px}
  .phead{padding-top:28px}
  .phead h1{font-size:52px}

  .hero{padding-top:28px}
  .hero-in{display:block}
  .portrait{display:none}
  h1{font-size:clamp(52px,15vw,64px)}
  .rot{font-size:24px;margin-top:10px}
  .lede{font-size:16.5px;margin-top:12px}
  .roleline{font-size:13px;margin-top:16px;padding-top:14px}

  .impact{grid-template-columns:1fr 1fr;border-top:0;gap:10px}
  .impact>div,.impact>div+div,.impact>div:nth-child(3){padding:14px;border:1px solid var(--line);border-radius:12px;margin:0;background:var(--bg2)}
  .impact>div:nth-child(n+3){margin-top:0;border-top:1px solid var(--line)}
  .impact dt{font-size:28px}
  .impact dd{font-size:12.5px;margin-top:8px;line-height:1.4}

  .row{grid-template-columns:minmax(0,1fr) auto 28px;grid-template-areas:"who yr ch" "hl hl ch";gap:4px 12px;padding:14px 6px;margin:0 -6px}
  .row .rchev{grid-area:ch;width:28px;height:28px;align-self:center}
  .row:hover{background:none}
  .row:active{background:var(--cobalt-s)}
  .row .who{grid-area:who}.row .hl{grid-area:hl;font-size:21px;text-align:left;white-space:normal;color:var(--amber)}
  .row .yr{grid-area:yr;font-size:12px;align-self:center;text-align:right}
  .who b{font-size:16px}
  .who span{display:none}

  /* swipeable rows: peeking next card */
  .snap.g4,.qstage.snap{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:80%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1*var(--g));padding:0 var(--g) 4px;scroll-padding:0 var(--g);overscroll-behavior-x:contain}
  .snap::-webkit-scrollbar{display:none}
  .snap>*{scroll-snap-align:start}
  .ftl{margin:0 calc(-1*var(--g)) 16px;padding:0 var(--g)}
  .ftl [role=tab]{padding:0 14px;font-size:14px}
  .frow,.frow.shorts{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:76%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1*var(--g));padding:0 var(--g) 4px;scroll-padding:0 var(--g);overscroll-behavior-x:contain}
  .ct{font-size:14.5px}
  .meta{margin-top:10px}
  .more{margin-top:20px}

  .quotes{display:block;border-top:0;padding-top:0}
  .qstage.snap{grid-auto-columns:86%}
  .qstage .q{grid-area:auto;opacity:1;transform:none;pointer-events:auto;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px}
  .q blockquote{font-size:23px}
  .q figcaption{margin-top:14px;font-size:13.5px}
  .q figcaption span{display:block;margin:2px 0 0}
  .qnav{display:none}

  .contact{padding:44px 0 24px}
  .cstrip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;font-size:15px}
  .cstrip h2{grid-column:1/-1;margin:0 0 2px}
  .mail{min-width:0}
  .mail a{min-height:44px;display:inline-flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:0;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
  .copy{min-height:44px}
  .cl{justify-self:end}

  /* work: collapsible roles */
  .whead .wrap{gap:16px}
  .plug{max-width:none}
  .rtools{display:flex}
  .role{padding:0;border-top:1px solid var(--line)}
  .rbtn{cursor:pointer;grid-template-columns:minmax(0,1fr) 20px;grid-template-areas:"co chev" "fig chev" "t t";gap:2px 10px;padding:14px 0;min-height:56px}
  .rbtn:active{background:var(--cobalt-s)}
  .rco{font:500 16.5px/1.25 var(--sans)}
  .rfig{font-size:19px;align-self:start;white-space:normal}
  .rt{font-size:13px;color:var(--mute)}
  .rw{display:none}
  .chev{grid-area:chev;display:block;width:9px;height:9px;border-right:1.6px solid var(--mute);border-bottom:1.6px solid var(--mute);transform:rotate(45deg);align-self:center;justify-self:center;margin-top:-4px;transition:transform .25s var(--ease)}
  .role.open .chev{transform:rotate(-135deg);margin-top:4px;border-color:var(--cobalt-i)}
  .rbody{display:none}
  .rbody{margin:0;padding:0 0 22px}
  .role.open .rbody{display:block;animation:fadein .25s var(--ease)}
  .figs{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px}
  .figs>div,.figs>div+div{padding:10px 8px 0}
  .figs>div:first-child{padding-left:0}
  .figs span{font-size:11px}
  .figs b{font-size:20px}
  .pts li{font-size:15px;margin-bottom:10px}
  .mosaic{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:46%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:20px calc(-1*var(--g)) 0;padding:0 var(--g);gap:8px}
  .mosaic .ph{scroll-snap-align:start}

  /* systems */
  .flowwrap{padding:14px 12px;margin:0 -4px}
  .flow.tall{max-width:360px}
  .pop{position:fixed;width:auto;left:8px!important;right:8px;top:auto!important;bottom:calc(var(--tb) + 8px);z-index:65;padding:16px 56px 16px 18px;border-radius:16px;box-shadow:0 -10px 40px rgba(0,0,0,.6);pointer-events:auto;animation:sheet .22s var(--ease)}
  .pop-x{display:grid;place-items:center;position:absolute;right:6px;top:6px;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--soft);font-size:24px;line-height:1;cursor:pointer}
  .prh{margin:28px 0 10px}
  .princ{grid-template-columns:1fr 1fr;gap:8px}
  .princ li,.princ li:nth-child(4){grid-column:auto;padding:12px 12px 13px;gap:3px}
  .princ li:last-child{grid-column:1/-1}
  .princ .pi{width:30px;height:30px;border-radius:8px;margin-bottom:4px}
  .princ .pi svg{width:17px;height:17px}
  .princ b{font:600 14.5px/1.3 var(--sans)}
  .princ li>span:last-child{font-size:13px;line-height:1.4}
  .fpga{grid-template-columns:1fr;gap:20px}
  .yt{max-width:100%}
  .spec{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:0}
  .spec div{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
  .spec dt{font-size:12.5px;padding:0}
  .spec dd{font-size:14px;line-height:1.4;margin-top:2px}
  .fpga .story{margin-bottom:12px}
  .trinket{margin-top:28px;padding:16px 14px 12px;gap:12px}
  .tk-head b{font-size:22px}
  .chain{display:block}
  .chain::before,.jack{display:none}
  .tk-btns{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:0}
  .tk-btns button{grid-column:span 2;justify-content:center;padding:0 6px;font-size:13.5px;gap:6px}
  .tk-btns button:nth-child(4){grid-column:2/span 2}
  #tkWave{height:44px}

  /* music */
  .gg{grid-template-columns:1fr}
  .ggart{display:none}
  .gg .track{grid-template-columns:1fr;gap:0}
  .gg .track::before{display:block;left:19px;right:auto;top:20px;bottom:20px;width:1px;height:auto;background:linear-gradient(180deg,var(--amber),var(--cobalt))}
  .track li{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-areas:"g b" "g s";column-gap:14px;row-gap:1px;padding:8px 0;border:0;background:none}
  .track .sg{grid-area:g;margin:0;background:var(--bg)}
  .track b{grid-area:b;align-self:end}
  .track li>span:last-child{grid-area:s}
  .lvl li{font-size:12.5px}
  .fb{grid-template-columns:1fr;gap:20px}.fbtxt,.fb .albums{grid-column:1/-1}
  .mhead{align-items:center}
  .albums{gap:12px}
  .album .at{padding:10px}
  .album .at b{font-size:13.5px}
  .album .at span{font-size:11.5px}
  .fbav{width:44px;height:44px}

  /* about */
  .about{display:block}
  .aph{position:static;width:min(46vw,220px);border-radius:12px;margin-bottom:22px}
  .aph img{aspect-ratio:4/5;height:auto;max-height:32svh;width:100%;object-position:50% 30%}
  .big{font-size:26px;margin-bottom:16px}
  .prose p{font-size:16px}
  .edh{font-size:28px;margin-top:28px}
  .edu li{flex-direction:column;gap:0;padding:10px 0}.edu span{text-align:left;font-size:14px}
}
@media (max-width:760px) and (orientation:landscape),(max-height:500px) and (max-width:950px){
  .aph,.aph img{max-height:none;height:auto}
}
/* landscape phones: keep the tab bar slim; hide portraits that would eat the screen */
@media (max-height:500px) and (max-width:950px){
  :root{--tb:calc(50px + env(safe-area-inset-bottom))}
  .tabbar span{display:none}
  .about{grid-template-columns:200px minmax(0,1fr)}
  .aph{position:static}
  .portrait{max-width:220px}
}
@media (max-width:760px) and (max-height:500px){.about{display:grid;gap:24px}}
@keyframes sheet{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (hover:none){.flow .ln{animation-duration:2.4s}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .mk-w{opacity:0}.mk-d{opacity:1}
  .rv.pre{opacity:1;transform:none}
    .caret{opacity:1}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media (max-width:380px){.lvl li{font-size:11px}}