/* Layout: banner fixed at the top of a sticky stage; three equal windows float in the space below; scrolling zooms into the first. Dark by default; light follows the system setting or the sun/moon toggle. */
:root{
  --bg:#07070a; --surface:#121217; --fg:#f4f3f8; --muted:#9a99a5; --line:#24242c;
  --accent:#8ea6ff; --machine:#ff375f;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Geist",system-ui,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Geist",system-ui,sans-serif;
  --mono:"Geist Mono","SF Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,4vw,40px);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--text);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;margin:0}
a{color:var(--accent);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2{font-family:var(--display);font-weight:600;letter-spacing:-.022em;margin:0;text-wrap:balance}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.sr-focus{position:absolute;left:-9999px}
.sr-focus:focus{left:var(--gut);top:12px;z-index:100;background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:99px}

.scene{position:relative;height:460vh}
.scene.static{height:auto}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.scene.static .stage{position:relative}
.stage > canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.stage > canvas.grid{z-index:6;pointer-events:none}

.banner{position:absolute;top:0;left:0;right:0;z-index:5;padding:calc(env(safe-area-inset-top,0px) + 18px) var(--gut) 0;background:linear-gradient(to bottom,rgba(7,7,10,.9) 55%,rgba(7,7,10,0))}
.banner .top{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1240px;margin-inline:auto;font-size:14px}
.banner .mark{font-family:var(--display);font-weight:600;color:var(--fg);font-size:17px}
.banner .links{display:flex;gap:16px;align-items:center}
.banner .links a{color:var(--muted)}
.banner .links a:hover{color:var(--fg)}
.banner .intro{max-width:1240px;margin:clamp(36px,9vh,104px) auto 0;display:grid;grid-template-columns:1fr auto;gap:10px 40px;align-items:end;padding-bottom:22px}
.banner .intro > *{min-width:0}
.banner .intro{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.banner .intro.pending{opacity:0;transform:translateY(10px)}
.banner h1.name{font-size:clamp(44px,7vw,92px);line-height:.98;letter-spacing:-.035em}
.banner .line{margin:12px 0 0;font-family:var(--display);font-size:clamp(18px,1.9vw,24px);line-height:1.25;letter-spacing:-.012em;color:var(--fg);max-width:34ch;text-wrap:balance}
.banner .side{display:grid;gap:8px;justify-items:end;text-align:right}
.banner .side p{margin:0;color:var(--muted);font-size:15px;max-width:46ch;text-wrap:balance}
.status{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13px;color:var(--muted);justify-content:flex-end}
.status span+span::before{content:"·";margin-right:8px}
.status a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
.status a:hover{color:var(--fg);text-decoration-color:currentColor}
.status span:first-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#34c759;margin-right:8px;vertical-align:middle}
.ctrls{display:flex;gap:8px}
.banner .intro > div:first-child{display:contents}
.banner h1.name{grid-column:1;grid-row:1}
.banner .line{color:color-mix(in srgb,var(--fg) 40%,var(--muted))!important;grid-column:1 / -1;grid-row:2;max-width:min(calc(100% - 190px), 46ch)!important;text-wrap:balance}
.banner .side{grid-column:2;grid-row:1;align-self:end;margin-bottom:calc(clamp(44px,7vw,92px) * -.16)}
.banner .ctrls{grid-column:2;grid-row:2;justify-self:end;align-self:start;margin-top:calc(clamp(44px,7vw,92px) * .16 + 6px)}
@media (max-width:760px){.banner .line{max-width:none!important}.banner .side{grid-column:1;grid-row:3;align-self:start;margin-bottom:0}.banner .ctrls{grid-column:1;grid-row:4;justify-self:start;align-self:start;margin-bottom:0}}
.ctl{min-height:32px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#cfcdd8;background:rgba(34,33,42,.6);border:1px solid rgba(255,255,255,.1);border-radius:99px;padding:6px 12px;cursor:pointer}
.ctl:hover{color:#fff}
.ctl[aria-pressed="true"]{background:#f4f3f8;color:#07070a;border-color:#f4f3f8}

.caption{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:120px var(--gut) calc(env(safe-area-inset-bottom,0px) + 100px);background:linear-gradient(to top,rgba(5,5,8,.92) 0%,rgba(5,5,8,.82) 55%,rgba(5,5,8,0) 100%);opacity:0;visibility:hidden;transition:opacity .25s}
.caption .wrap{max-width:1120px;margin-inline:auto;display:grid;gap:8px;justify-items:start}
.caption h2{font-size:clamp(28px,4vw,48px);line-height:1.05}
.caption p{margin:0;color:#cfcdd8;max-width:48ch;font-size:clamp(15px,1.5vw,18px)}
.caption .cta{margin-top:8px}
.tour-dots{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);z-index:5;display:grid;gap:10px}
.scene.static .tour-dots{display:none}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .2s,transform .2s}
.tour-dots i.on{background:#f4f3f8;transform:scale(1.4)}
.mp{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);z-index:75;width:min(340px,calc(100vw - 32px));max-height:min(70vh,640px);overflow:auto;background:rgba(18,18,23,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid #2a2a33;border-radius:16px;padding:14px 16px 16px;font-size:13px;line-height:1.45;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.mp-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mp-h span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--machine)}
.mp-h div{display:flex;gap:6px}
.mp-h button{font-family:var(--mono);font-size:11px;color:var(--muted);background:none;border:1px solid #2a2a33;border-radius:6px;padding:3px 8px;cursor:pointer;min-height:26px}
.mp-h button:hover{color:var(--fg);border-color:#3a3a45}
.mp-ready{margin:6px 0 0;color:var(--fg);font-size:14px}
.mp-s{border-top:1px solid #2a2a33;margin-top:12px;padding-top:10px}
.mp-s h4{margin:0 0 6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.mp-s dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 12px}
.mp-s dt{color:var(--muted)}
.mp-s dd{margin:0;font-family:var(--mono);font-size:11.5px;color:var(--fg);text-align:right;font-variant-numeric:tabular-nums}
.mp-sw{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;list-style:none;margin:0;padding:0}
.mp-sw li{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;min-width:0}
.mp-sw i{width:14px;height:14px;border-radius:4px;border:1px solid #3a3a45;flex:none}
.mp-sw em{font-style:normal;color:var(--muted);margin-left:auto}
.mp .hot{color:var(--machine)}
:root{--display:"Geist",system-ui,sans-serif;--text:"Geist",system-ui,sans-serif}
.banner h1.name{font-weight:500;letter-spacing:-.02em;line-height:1.02}
.banner .line{margin-top:20px;font-weight:400;letter-spacing:-.008em}
.banner .top .eyebrow{font-family:var(--text);text-transform:none;letter-spacing:0;font-size:14px}
.caption h2{font-weight:500;letter-spacing:-.015em}
.banner .line .dim{color:var(--muted)}
.banner .line{max-width:40ch}
/* press cards: swipeable on phones, grid on desktop */
.press{display:grid;gap:14px;margin-top:8px}
.press-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.press-head h4{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg);font-weight:500}
.press-head span{font-size:13px;color:var(--muted)}
.press-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.press-card{display:grid;grid-template-rows:auto 1fr;border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid var(--line);color:var(--fg);min-width:0;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.press-card:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.12)}
.press-art{position:relative;aspect-ratio:16/9;background:radial-gradient(120% 120% at 15% 10%,var(--a) 0%,transparent 55%),radial-gradient(120% 120% at 100% 100%,color-mix(in srgb,var(--a) 60%,#fff 0%) 0%,transparent 45%),var(--b);display:flex;flex-direction:column;justify-content:space-between;padding:14px 16px;color:#fff}
.press-art .outlet{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;line-height:1;order:2;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.press-art .kind{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.85;order:1}
.press-meta{padding:14px 16px 16px;display:grid;gap:10px;align-content:space-between}
.press-meta .hl{margin:0;font-size:15px;line-height:1.35;font-weight:500;text-wrap:pretty}
.press-meta .date{font-family:var(--mono);font-size:11px;color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:22px}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:99px;background:var(--fg);color:var(--bg);font-size:16px;font-weight:500}
.cta:hover{text-decoration:none;opacity:.88}
.cta::after{content:"→";transition:transform .2s}
.cta:hover::after{transform:translateX(3px)}
.lockchip{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.lockchip::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff9f0a}
@media (max-width:860px){
  .press-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1*var(--gut));padding:2px var(--gut) 10px;scrollbar-width:none}
  .press-row::-webkit-scrollbar{display:none}
  .press-card{flex:0 0 78%;scroll-snap-align:start}
  .cta{width:100%}
}


.after .wrap{max-width:1120px;margin-inline:auto}
.after > .wrap + .wrap{margin-top:clamp(72px,10vw,120px)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,36px)}
.sec-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:500;letter-spacing:-.015em}
.rows{display:grid;gap:clamp(48px,6vw,72px)}
.row{display:grid;gap:22px;border-top:1px solid var(--line);padding-top:28px}
.row-main{display:grid;gap:10px;justify-items:start;max-width:62ch}
.row h3{font-family:var(--display);font-size:clamp(26px,3vw,36px);font-weight:500;letter-spacing:-.015em;margin:0}
.row h3 a{color:var(--fg)} .row h3 a:hover{color:var(--accent);text-decoration:none}
.row-main > p:not(.eyebrow){margin:0;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chips button{font:inherit;font-size:14px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:99px;padding:6px 14px;min-height:36px;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 14px 18px;display:grid;gap:8px;align-content:start;min-width:0}
.mcard h3{font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:-.01em;margin:0}
.mcard > p:not(.eyebrow):not(.lockchip){margin:0;color:var(--muted);font-size:15px}
.mcard .eyebrow{font-size:11px;margin-top:6px}
.mthumb{width:100%;aspect-ratio:16/10;border-radius:12px;object-fit:cover;display:block;background:#0b0b10;max-width:100%}
.t-ai{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(160deg,#201a2e,#0e0d14)}
.t-ai span{font-family:var(--mono);font-size:12px;padding:6px 10px;border-radius:8px;background:rgba(142,166,255,.18);color:#d9e0ff}
.t-ai span.ref{background:rgba(255,255,255,.08);color:#cfcdd8}
.t-ai .phone{height:84%;aspect-ratio:9/19;border-radius:18px;border:1.5px solid rgba(220,225,255,.35);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:10px 8px;background:#0b0b10}
.t-ai .phone span{font-size:10px;padding:4px 6px;text-align:center}
.t-xr{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(160deg,#1a2230,#0b0e14)}
.t-xr i{width:34px;height:20px;border-radius:10px;border:1.5px solid rgba(220,230,255,.55)}
.t-body{display:flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(160deg,#2a1d22,#100c0e);color:#ffd9c7}
.t-body b{font-family:var(--display);font-size:48px;font-weight:500;line-height:1}
.t-body span{font-family:var(--mono);font-size:12px}
.mthumb.vid{position:relative;overflow:visible;background:#0b0b10}
.mthumb.vid video{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.mthumb .award-pic{position:absolute;right:-6px;bottom:-10px;width:34%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;border:3px solid var(--surface);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.mcard h3 a{color:inherit}.mcard h3 a:hover{text-decoration:none;color:var(--accent)}
.cta.small{min-height:40px;padding:0 16px;font-size:14px;justify-self:start;margin-top:4px}
.mcard .award{margin:0;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fg)}
.mcard .award::before{content:"";width:7px;height:7px;border-radius:50%;background:#af52de}
.t-draft{display:grid;place-content:center;font-size:32px;color:var(--muted);background:transparent;border:1.5px dashed var(--line)}
.mcard.draft{background:transparent;border-style:dashed}
.mcard[hidden]{display:none!important}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,48px)}
.about .sub{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:28px 0 14px}
.principles.compact{grid-template-columns:1fr;gap:0;margin-bottom:28px}
.principles.compact > div{border-top:1px solid var(--line);padding:14px 0}
.principles.compact h3{font-size:19px}
.principles .mc{font:inherit;letter-spacing:inherit;color:var(--machine);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline dashed;text-decoration-thickness:1.5px;text-underline-offset:5px;text-align:left}
.principles .mc:hover,.principles .mc[aria-pressed="true"]{text-decoration-style:solid}
.principles.compact p{margin-top:6px;font-size:15px;max-width:60ch}
.principles h3{font-family:var(--display);font-size:clamp(21px,2.2vw,26px);font-weight:500;letter-spacing:-.012em;line-height:1.2;margin:0}
.principles p{color:var(--muted);margin:10px 0 0;font-size:16px}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.quotes blockquote{margin:0}
.quotes blockquote p{font-family:var(--display);font-size:clamp(19px,2vw,24px);line-height:1.35;letter-spacing:-.01em;margin:0}
.quotes footer{margin-top:12px;font-size:14px;color:var(--muted)}

.about{display:grid;grid-template-columns:minmax(220px,1fr) 1.7fr;gap:clamp(24px,5vw,64px);align-items:start}
.about-l{display:grid;gap:18px;position:sticky;top:24px}
.portrait{margin:0}
.portrait .ph,.portrait img{width:100%;aspect-ratio:4/5;border-radius:18px;object-fit:cover;display:block;max-width:100%}
.candid{margin:0}
.candid img{width:62%;aspect-ratio:3/4;border-radius:14px;object-fit:cover;display:block;margin-left:auto;margin-top:-14%;position:relative;border:4px solid var(--bg)}
.portrait .ph{display:grid;place-content:center;border:1.5px dashed var(--line);color:var(--muted);font-family:var(--mono);font-size:12px;background:color-mix(in srgb,var(--surface) 60%,transparent)}
.about .hello{font-family:var(--display);font-size:clamp(22px,2.4vw,28px);font-weight:500;letter-spacing:-.012em;color:var(--fg);margin:0 0 14px}
.about .invite{font-family:var(--display);font-size:clamp(20px,2.2vw,26px);font-weight:500;letter-spacing:-.012em;margin:8px 0 14px;color:var(--fg)}
.cv{display:grid;grid-template-columns:1fr;gap:6px;margin-bottom:28px}
.xp{list-style:none;margin:0;padding:0}
.xp li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:15px;color:#d8d7df}
.xp li time{color:var(--muted);font-family:var(--mono);font-size:12px;white-space:nowrap;padding-top:2px}
@media (max-width:860px){.about{grid-template-columns:1fr}.about-l{position:static}.portrait{max-width:320px}}

.about h2{font-size:clamp(28px,3.4vw,40px);font-weight:500;letter-spacing:-.015em}
.about p{margin:0 0 16px;max-width:62ch;color:#d8d7df}
.contact{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}
.btn{font:inherit;font-size:15px;min-height:44px;padding:0 18px;border-radius:99px;border:0;background:var(--fg);color:var(--bg);cursor:pointer;display:inline-flex;align-items:center}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.ghost:hover{text-decoration:none;border-color:#3a3a45}
.email{font-family:var(--mono);font-size:13px;color:var(--muted);user-select:all}
footer.site{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:clamp(72px,10vw,120px);padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
@media (max-width:860px){.more-grid{grid-template-columns:1fr 1fr}.principles,.quotes,.about{grid-template-columns:1fr}}
@media (max-width:560px){.more-grid{grid-template-columns:1fr}}

/* machine notes across the page */
html.machine [data-note]:not(.fg-bar):not(.topbar):not(.stripw){position:relative}
html.machine .topbar[data-note]::after{top:auto;bottom:-30px;left:var(--gut)}
html.machine [data-note]{outline:1px dashed var(--machine);outline-offset:6px}
html.machine [data-note]::after{content:attr(data-note);position:absolute;left:0;top:-30px;z-index:30;width:max-content;max-width:min(380px,80vw);font-family:var(--mono);font-size:10.5px;line-height:1.35;letter-spacing:.02em;font-weight:500;text-transform:none;color:#fff;background:var(--machine);padding:3px 7px;border-radius:5px;pointer-events:none;white-space:normal;text-align:left}
html.machine .fg-bar[data-note]::after{top:-34px;left:50%;transform:translateX(-50%)}
html.machine .side[data-note]::after,html.machine .ctrls[data-note]::after{left:auto;right:0}
html.machine .ctrls[data-note]::after{top:auto;bottom:-30px}
.after{background:var(--bg);padding:clamp(56px,8vw,96px) var(--gut)}
.after .wrap{max-width:1120px;margin-inline:auto;display:grid;gap:18px}
.after h2{font-size:clamp(36px,5vw,60px);line-height:1.04}
.after .lede{color:var(--muted);font-size:clamp(17px,1.6vw,20px);max-width:52ch;margin:0}
.cta{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:99px;background:var(--fg);color:var(--bg);font-size:16px;font-weight:500;margin-top:6px}
.cta::after{content:"→"}
.cta:hover{text-decoration:none;opacity:.9}
.note{margin-top:28px;border-top:1px solid var(--line);padding-top:18px;font-size:14px;color:var(--muted);display:grid;gap:6px}
.note b{color:var(--fg);font-weight:500}
kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:4px;padding:1px 5px}

@media (max-width:760px){
  .banner .intro{grid-template-columns:1fr;padding-bottom:14px;margin-top:28px}
  .banner .side{justify-items:start;text-align:left}
  .status{justify-content:flex-start}
  .banner .links a.hide-sm{display:none}
}

/* light mode: a white room with soft grey shadows; everything else inverts */
:root[data-theme="light"]{
  --bg:#ffffff; --surface:#f5f5f7; --fg:#1d1d1f; --muted:#6e6e73; --line:#e4e4e9;
  --accent:#3355d6; --machine:#e11d48; color-scheme:light;
}
:root[data-theme="light"] .banner{background:linear-gradient(to bottom,rgba(255,255,255,.92) 55%,rgba(255,255,255,0))}
:root[data-theme="light"] .caption{background:linear-gradient(to top,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 55%,rgba(255,255,255,0) 100%)}
:root[data-theme="light"] .caption p{color:#424245}
:root[data-theme="light"] .tour-dots i{background:rgba(0,0,0,.18)}
:root[data-theme="light"] .tour-dots i.on{background:#1d1d1f}
:root[data-theme="light"] .ctl{color:#424245;background:rgba(0,0,0,.035);border-color:rgba(0,0,0,.1)}
:root[data-theme="light"] .ctl:hover{color:#000}
:root[data-theme="light"] .ctl[aria-pressed="true"]{background:#1d1d1f;color:#fff;border-color:#1d1d1f}
:root[data-theme="light"] .mp{background:rgba(255,255,255,.94);border-color:#e4e4e9;box-shadow:0 20px 60px rgba(20,20,40,.14)}
:root[data-theme="light"] .mp-h button,:root[data-theme="light"] .mp-s,:root[data-theme="light"] .mp-sw i{border-color:#e4e4e9}
:root[data-theme="light"] .mp-h button:hover,:root[data-theme="light"] .btn.ghost:hover{border-color:#c7c7cc}
:root[data-theme="light"] .xp li,:root[data-theme="light"] .about p{color:#424245}
:root[data-theme="light"] .press-card:hover{box-shadow:0 14px 34px rgba(20,20,40,.1)}
:root[data-theme="light"] .mthumb .award-pic{box-shadow:0 8px 20px rgba(20,20,40,.18)}
.ctl.icon{width:32px;padding:0;display:inline-grid;place-content:center}
.ctl.icon svg{width:15px;height:15px;display:block}
.ctl.icon .sun{display:none}
:root[data-theme="dark"] .ctl.icon .sun{display:block}
:root[data-theme="dark"] .ctl.icon .moon{display:none}

/* coverage stays secondary: a quiet list beside the case, not cards that compete with it */
@media (min-width:980px){.row:has(.press){grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:start}}
.row .press{gap:6px;margin-top:0}
.row .press-head h4{font-size:11px;color:var(--muted)}
.row .press-head span{display:none}
.row .press-row{display:grid!important;grid-template-columns:1fr;gap:0;overflow:visible;margin-inline:0;padding:0}
.row .press-card{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:11px 0;flex:none;transform:none!important;box-shadow:none!important}
.row .press-card::before{display:none}
.row .press-art{grid-column:1;grid-row:1;display:block;aspect-ratio:auto;background:none;padding:0;color:var(--fg)}
.row .press-art .outlet{font-family:var(--text);font-size:14px;font-weight:500;letter-spacing:0;text-shadow:none}
.row .press-art .kind{display:none}
.row .press-meta{display:contents}
.row .press-meta .hl{grid-column:1 / -1;grid-row:2;margin-top:2px;font-size:14px;font-weight:400;line-height:1.4;color:var(--muted)}
.row .press-meta .date{grid-column:2;grid-row:1;align-self:center}
.row .press-card:hover .outlet{color:var(--accent)}

.pmark{display:none}
.row .pmark{grid-column:1;grid-row:1 / span 2;align-self:center;display:grid;place-content:center;width:40px;height:40px;border-radius:10px;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.01em;color:#fff;background:radial-gradient(120% 120% at 15% 10%,var(--a) 0%,transparent 60%),var(--b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.row .press-card{grid-template-columns:40px 1fr auto;column-gap:14px}
.row .press-art{grid-column:2}
.row .press-meta .hl{grid-column:2 / -1}
.row .press-meta .date{grid-column:3}
.row .press-card:hover .pmark{transform:scale(1.06)}
.row .pmark.serif{background:#000;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.row .pmark.logo{background:#fff;padding:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.row .pmark.logo.fill{padding:0;background:#000}
.row .pmark img{width:100%;height:100%;object-fit:contain;display:block;border-radius:inherit}

/* Apple-style structure: sections defined by tiles and tonal bands instead of open space and hairlines */
:root{--band:#0c0c10;--tile:var(--surface);--tile-line:rgba(255,255,255,.08)}
:root[data-theme="light"]{--band:#f5f5f7;--tile:#f5f5f7;--tile-line:rgba(0,0,0,.08)}
html,body{overflow-x:clip}
.after > .wrap + .wrap{margin-top:clamp(56px,7vw,88px)}
.sec-head{margin-bottom:clamp(18px,2.4vw,28px)}
.sec-head h2,.about h2{font-weight:600;letter-spacing:-.025em}
.rows{gap:16px}
.row{background:var(--tile);border:0;border-radius:28px;padding:clamp(24px,4vw,44px)}
.row .press-card{border-top-color:var(--tile-line)}
#more{position:relative;isolation:isolate;padding-block:clamp(48px,6vw,72px)}
#more::before{content:"";position:absolute;inset:0 -100vmax;background:var(--band);z-index:-1}
:root[data-theme="light"] #more .mcard{background:#fff;border-color:transparent}
#more .mcard{border-radius:22px}
.after > #more + .wrap{margin-top:clamp(48px,6vw,72px)}
/* on smaller screens every case study button runs full width; the row stretches so its button can */
@media (max-width:860px){.cta-row{justify-self:stretch;width:100%}.cta-row .cta{flex:1 1 100%}.cta,.cta.small{width:100%;justify-self:stretch}}

/* labels in the interface's own voice (Apple uses its text face for eyebrows, not a monospace); Geist Mono is reserved for the machine */
.eyebrow,.press-head h4,.about .sub,.xp li time,.press-meta .date,.ctl{font-family:var(--text);text-transform:none;letter-spacing:-.003em;font-weight:500;font-variant-numeric:tabular-nums}
.eyebrow,.press-head h4,.about .sub{font-size:13px}
.sec-head .eyebrow,.xp li time,.press-meta .date{font-size:13px;font-weight:400}
.ctl{font-size:13px}
.row .press-head h4,.mcard .eyebrow{font-size:12.5px}
/* light mode leads with the daylight photo; dark mode leads with the studio portrait */
:root[data-theme="light"] .about-l .candid{order:1}
:root[data-theme="light"] .about-l .portrait{order:2}
:root[data-theme="light"] .about-l .candid img{width:100%;aspect-ratio:4/5;margin:0;border:0;border-radius:18px}
:root[data-theme="light"] .about-l .portrait img{width:62%;aspect-ratio:3/4;margin-left:auto;margin-top:-14%;position:relative;border:4px solid var(--bg);border-radius:14px}
@media (max-width:860px){:root[data-theme="light"] .about-l .candid,:root[data-theme="light"] .about-l .portrait{max-width:320px}}
/* the machine's "that's me" note sits on whichever photo leads */
html.machine:not([data-theme="light"]) .about-l .candid[data-note],html.machine[data-theme="light"] .about-l .portrait[data-note]{outline:none}
html.machine:not([data-theme="light"]) .about-l .candid[data-note]::after,html.machine[data-theme="light"] .about-l .portrait[data-note]::after{display:none}
/* the line sits close under the name and reads as a caption to it, not a second headline */
.banner .line{margin-top:10px!important;font-size:clamp(16px,1.45vw,19px)!important;line-height:1.35;max-width:min(calc(100% - 190px),58ch)!important;text-wrap:wrap}
@media (max-width:760px){.banner .line{max-width:none!important}}
/* persistent top bar: role at the top of the page, swaps to the name once the name scrolls away; glass once the page moves */
.banner .top{height:21px}
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;padding:calc(env(safe-area-inset-top,0px) + 18px) var(--gut) 12px;transition:background .25s,border-color .25s,backdrop-filter .25s;border-bottom:1px solid transparent}
.topbar.solid{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom-color:var(--line)}
.tb-in{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1240px;margin-inline:auto;font-size:14px;line-height:21px}
.tb-id{display:grid;color:var(--fg)}
.tb-id > span{grid-area:1 / 1;transition:opacity .3s,transform .3s cubic-bezier(.2,.7,.2,1);white-space:nowrap}
.tb-role{color:var(--muted)}
.tb-name{font-family:var(--display);font-weight:600;font-size:15px;opacity:0;transform:translateY(6px)}
.topbar.named .tb-role{opacity:0;transform:translateY(-6px)}
.topbar.named .tb-name{opacity:1;transform:none}
.tb-id:hover{text-decoration:none}
.topbar .links{display:flex;gap:16px;align-items:center}
.topbar .links a{color:var(--muted)}
.topbar .links a:hover{color:var(--fg);text-decoration:none}
@media (max-width:760px){.topbar .links a.hide-sm{display:none}}
#about,#work{scroll-margin-top:clamp(84px,10vw,120px)!important}
/* awards: a sideways row with arrow buttons for mouse users; edges fade only where there is more to see */
.awards{margin:4px 0 28px;min-width:0}
.about > *,.about-r,#about-work,.awards{min-width:0;max-width:100%}
.awards{contain:inline-size}
.aw-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:28px 0 12px}
.aw-head .sub{margin:0!important}
.aw-nav{display:flex;gap:6px}
.aw-nav[hidden]{display:none}
.aw-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);display:grid;place-content:center;cursor:pointer}
.aw-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aw-btn:disabled{opacity:.3;cursor:default}
.aw-btn:not(:disabled):hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.aw-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:2px 2px 6px;scrollbar-width:none;outline-offset:4px}
.aw-row::-webkit-scrollbar{display:none}
.aw-row.more-r{-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent)}
.aw-row.more-l.more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 85%,transparent);mask-image:linear-gradient(to right,transparent,#000 10%,#000 85%,transparent)}
.aw-row.more-l:not(.more-r){-webkit-mask-image:linear-gradient(to right,transparent,#000 12%);mask-image:linear-gradient(to right,transparent,#000 12%)}
.acard{flex:0 0 190px;scroll-snap-align:start;display:grid;grid-template-rows:auto auto 1fr auto;gap:3px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--fg);min-width:0}
@media (prefers-reduced-motion:reduce){.aw-row{scroll-behavior:auto}}
.acard:hover{text-decoration:none;border-color:color-mix(in srgb,var(--fg) 25%,transparent)}
.aw-org{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.aw-org::before{content:"";width:7px;height:7px;border-radius:50%;background:#af52de;flex:none}
.acard b{font-weight:500;font-size:14px;line-height:1.3;margin-top:2px}
.aw-sub{font-size:12.5px;color:var(--muted);line-height:1.35}
.aw-yr{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:4px}
a.acard .aw-yr{color:var(--accent)}
/* a card with two destinations keeps both links on its last line */
.aw-yr .aw-l{color:var(--accent)}
.aw-yr .aw-l + .aw-l{margin-left:10px}
.principles .seen{margin:6px 0 0!important;font-size:13px!important;color:var(--muted)!important}
.principles .seen a{color:var(--accent)}
/* How I work: headlines first; the sentence and evidence open on hover (mouse) or tap (touch, keyboard) */
.principles.compact > .pr{border-top:1px solid var(--line);padding:12px 0}
.pr-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pr-t{width:30px;height:30px;flex:none;border:0;border-radius:50%;background:none;color:var(--muted);display:grid;place-content:center;cursor:pointer;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .2s}
.pr-t:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg)}
.pr-t svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pr-b{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
.pr-b > div{overflow:hidden;min-height:0}
.pr.open .pr-b,.pr:has(.pr-b a:focus-visible) .pr-b{grid-template-rows:1fr;opacity:1}
.pr.open .pr-t{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.pr:hover .pr-b{grid-template-rows:1fr;opacity:1}.pr:hover .pr-t{transform:rotate(180deg)}}
/* About: Work and Play */
.about-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.about-head .hello{margin:0!important}
.seg{display:inline-flex;padding:3px;border-radius:99px;background:color-mix(in srgb,var(--fg) 7%,transparent);gap:2px}
.seg button{font:inherit;font-size:14px;font-weight:500;color:var(--muted);background:transparent;border:0;border-radius:99px;padding:6px 16px;min-height:32px;cursor:pointer;transition:background .2s,color .2s}
.seg button[aria-selected="true"]{background:var(--bg);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.18)}
:root[data-theme="dark"] .seg button[aria-selected="true"]{background:#2a2a32}
.play-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}
.pcard{margin:0;display:grid;gap:8px;align-content:start;min-width:0}
.pcard.wide{grid-column:1 / -1}
.pcard img,.pslot{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;display:block;background:var(--surface)}
.pcard.wide img{aspect-ratio:auto;max-height:340px}
.pslot{display:grid;place-content:center;border:1.5px dashed var(--line);background:transparent;color:var(--muted);font-size:13px;text-align:center;padding:12px}
.pcard figcaption{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.pcard figcaption b{font-weight:500;color:var(--fg)}
.pcard figcaption b a{color:var(--accent)}
.pcard figcaption span{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pcard p{margin:0!important;font-size:14px;color:var(--muted)!important;max-width:60ch}
#about-play > p:first-of-type{margin-bottom:8px}
.pcard.side{grid-template-columns:minmax(120px,200px) 1fr;gap:16px;align-items:start}
.pcard.side img{aspect-ratio:4/5!important;max-height:none!important}
.pcard.side > div{display:grid;gap:8px}
.travel{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
.travel img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;display:block;background:var(--surface)}
.tables{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tables img{aspect-ratio:3/4!important;max-height:none!important}
@media (max-width:560px){.travel{grid-template-columns:repeat(2,1fr)}}
/* the record: an invitation in Faith's voice; the record slides out on hover and spins while music plays */
.rec{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 140px;align-items:center;margin:32px 0 18px}
.sleeve{position:relative;width:140px;height:140px;border:0;padding:0;background:none;cursor:pointer}
.sleeve .disc{position:absolute;top:8px;left:8px;width:124px;height:124px;border-radius:50%;background:conic-gradient(from 30deg,rgba(255,255,255,.2),transparent 16%,transparent 50%,rgba(255,255,255,.14) 58%,transparent 72%),repeating-radial-gradient(circle,#0c0c0f 0 1.5px,#1a1a1f 1.5px 3px);box-shadow:0 0 0 1px rgba(255,255,255,.24),0 0 0 4px rgba(255,255,255,.03),0 8px 22px rgba(0,0,0,.3);transform:translateX(16px);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.sleeve .disc::after{content:"";position:absolute;inset:46px;border-radius:50%;background:#ff375f;box-shadow:inset 0 0 0 12px #b3123a}
.sleeve .cover{position:absolute;inset:0;border-radius:6px;background:linear-gradient(150deg,#ff6b88 0%,#ff375f 45%,#a8102f 100%);box-shadow:0 10px 30px rgba(0,0,0,.22);display:flex;flex-direction:column;justify-content:flex-end;padding:12px;color:#fff;text-align:left}
.sleeve .cover b{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.1}
.sleeve .cover span{font-size:11px;opacity:.85}
.sleeve:hover .disc,.sleeve:focus-visible .disc{transform:translateX(34px)}
.rec.on .disc{transform:translateX(112px)}
.rec.playing .disc{animation:spin 3.2s linear infinite .7s}
@keyframes spin{from{transform:translateX(112px) rotate(0)}to{transform:translateX(112px) rotate(360deg)}}
/* an invitation: while the record is on screen and untouched, it hops out of the sleeve every few seconds */
@keyframes peek{0%{transform:translateX(16px) rotate(0)}17%,25%{transform:translateX(40px) rotate(12deg)}45%,100%{transform:translateX(16px) rotate(0)}}
.rec.peek:not(.on) .disc{animation:peek 5s cubic-bezier(.45,0,.25,1) infinite .35s}
.rec-text{display:grid;gap:4px;justify-items:start}
.rec-text p{margin:0!important;font-size:17px;color:var(--fg)!important}
.rec-text small{font-size:13px;color:var(--muted)}
.rec-text .pl-open{margin-top:6px}
.rec-rest,.rec-live{display:grid;gap:4px;justify-items:start;width:100%}
.rec-rest[hidden],.rec-live[hidden]{display:none}
.rec-cta{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:14px;font-weight:500;min-height:38px;padding:0 16px 0 12px;border-radius:99px;border:0;background:var(--fg);color:var(--bg);cursor:pointer}
.rec-cta svg{width:16px;height:16px;fill:currentColor}
.rec-now{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--fg)}
.rec-now .eq{display:flex;align-items:flex-end;gap:2px;height:12px}
.rec-now .eq i{width:3px;height:12px;border-radius:2px;background:var(--machine);transform-origin:bottom;transform:scaleY(.5)}
.rec.playing .rec-now .eq i{animation:eq 1s ease-in-out infinite}
.rec.playing .rec-now .eq i:nth-child(2){animation-delay:-.4s}.rec.playing .rec-now .eq i:nth-child(3){animation-delay:-.7s}
.rec-live .pl-embed{width:100%;margin:6px 0 2px}
@media (max-width:560px){.rec{grid-template-columns:1fr;gap:16px}}
/* playlist: Spotify's player only appears after the record goes on */
.eq i{width:5px;border-radius:3px;background:#fff;height:12px;transform-origin:bottom}
.mini .eq i{animation:eq 1s ease-in-out infinite}
.mini .eq i:nth-child(2){animation-delay:-.4s}.mini .eq i:nth-child(3){animation-delay:-.7s}
.mini.paused .eq i{animation-play-state:paused}
@keyframes eq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.pl-acts{display:flex;align-items:center;gap:10px}
.mini-b svg{width:20px;height:20px;fill:currentColor}
.i-pause{display:none}.is-playing .i-play{display:none}.is-playing .i-pause{display:inline}
.pl-open{font-size:13px;color:var(--muted)}.pl-open:hover{color:var(--fg);text-decoration:none}
.pl-embed{border-radius:12px;overflow:hidden;height:80px}
.pl-embed iframe{width:100%!important;height:80px!important;border:0;display:block}
.mini{position:fixed;right:20px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:65;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-radius:99px;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:13px}
.mini[hidden]{display:none}
.mini .eq{display:flex;align-items:flex-end;gap:3px;height:16px}.mini .eq i{width:3px;height:16px;background:var(--machine)}
.mini-b{width:32px;height:32px;border-radius:50%;border:0;background:transparent;color:var(--fg);display:grid;place-content:center;cursor:pointer}
.mini-b:hover{background:color-mix(in srgb,var(--fg) 10%,transparent)}
.mini-b svg{width:16px;height:16px}
@media (max-width:1100px){.mini{bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}}
@media (prefers-reduced-motion:reduce){.mini .eq i,.rec .disc{animation:none!important}}

@media (max-width:560px){.play-grid{grid-template-columns:1fr}}
/* phones, motion paused: the windows become a native sideways row; the next one is cut off so there is clearly more */
.stripw{position:relative;z-index:4;opacity:0;transition:opacity .6s ease;padding:22px 0 28px}
.scene.strip-mode #motion{display:none}
.scene.strip-mode{height:auto}
.scene.strip-mode .stage{position:relative;height:auto;min-height:0;overflow:visible}
.scene.strip-mode .banner{position:relative}
.scene.strip-mode .tour-dots,.scene.strip-mode .caption{display:none}
.stripw[hidden]{display:none}
.stripw.in{opacity:1}
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gut) 10px;scroll-padding-inline:var(--gut);scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.sc{flex:0 0 78%;max-width:360px;scroll-snap-align:start;display:grid;gap:3px;color:var(--fg)}
.sc:hover{text-decoration:none}
.sc canvas{width:100%;aspect-ratio:1 / .62;display:block;border-radius:16px;border:1px solid var(--line);box-shadow:0 14px 30px rgba(0,0,0,.28)}
:root[data-theme="light"] .sc canvas{box-shadow:0 14px 30px rgba(40,40,70,.16)}
.sc .e{font-size:12px;font-weight:500;color:var(--muted);margin-top:8px}
.sc b{font-weight:500;font-size:18px;letter-spacing:-.01em}
.sdots{display:flex;justify-content:center;gap:6px;margin-top:6px}
.sdots i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--fg) 22%,transparent);transition:background .2s,transform .2s}
.sdots i.on{background:var(--fg);transform:scale(1.25)}
/* top bar: a quiet, findable way into machine mode */
.tb-in{position:relative}
.tb-machine{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14px;color:var(--muted);background:none;border:0;padding:0;cursor:pointer}
.tb-machine i{width:7px;height:7px;border-radius:50%;background:var(--machine);box-shadow:0 0 0 3px color-mix(in srgb,var(--machine) 18%,transparent)}
.tb-machine:hover,.tb-machine[aria-pressed="true"]{color:var(--fg)}
@media (max-width:560px){.tb-machine span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.tb-machine{width:24px;height:24px;justify-content:center}}
/* the name: Plus Jakarta Sans ExtraBold, tightly set */
:root{--serif:"Plus Jakarta Sans","Geist",system-ui,sans-serif}
.banner h1.name,.tb-name,.hello .nm{font-family:var(--serif)!important;font-weight:800!important;letter-spacing:-.04em!important}
.tb-name{font-size:16px!important;font-weight:700!important;letter-spacing:-.02em!important}
.hello .nm{font-size:1em;font-weight:800!important;letter-spacing:-.03em!important;line-height:inherit}
/* accent palette, sampled from Faith's hand-painted picnic tables; used sparingly */
:root{--paint-coral:#e06a62;--paint-green:#7fb24a;--paint-blue:#5482c4;--paint-sun:#e9b346}
#work .row:nth-of-type(1){--acc:var(--paint-sun)}
#work .row:nth-of-type(2){--acc:var(--paint-green)}
#work .row:nth-of-type(3){--acc:var(--paint-blue)}
.row-vis canvas{box-shadow:var(--shx,0px) var(--shy,10px) var(--shb,24px) rgba(0,0,0,var(--sha,.28))!important;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease!important}
:root[data-theme="light"] .row-vis canvas{box-shadow:var(--shx,0px) var(--shy,10px) var(--shb,24px) rgba(40,40,70,calc(var(--sha,.28) * .5))!important}
/* a small personal touch: text selections use the sunflower from the painted tables */
:root{--ink-coral:#f08178;--ink-green:#9ccc5f;--ink-sun:#f0c25a;--ink-blue:#7aa3e0}
:root[data-theme="light"]{--ink-coral:#c4483f;--ink-green:#56842a;--ink-sun:#a26f0e;--ink-blue:#2f62b0}
::selection{background:color-mix(in srgb,var(--paint-sun) 50%,transparent);color:inherit}
#about-play .sub{transition:color .3s}
/* dark mode legibility: project tiles sit a step above the page, with a visible edge */
:root:not([data-theme="light"]) #work .row{background:#16161c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
:root:not([data-theme="light"]) .row-vis canvas{border-color:rgba(255,255,255,.14)}
:root:not([data-theme="light"]) #more .mcard{background:#16161c;border-color:rgba(255,255,255,.09)}
:root:not([data-theme="light"]) #more .mthumb{outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
/* a small photo near the top, so the first screen is a person; it follows the same day/night swap as About */
.avatar{display:block;width:56px;height:56px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 6px 18px rgba(0,0,0,.25);margin-bottom:4px}
.byline{display:flex;align-items:center;gap:12px;text-align:left}
.byline .avatar{flex:none;width:44px;height:44px;margin:0}
/* two set lines, right-aligned, so the byline ends flush with the column like the status line */
.banner .side .byline p{max-width:none;text-align:right}
.banner .side .byline p span{display:block;white-space:nowrap}
@media (max-width:420px){.banner .side .byline p span{white-space:normal}}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar .av-light{display:none}
:root[data-theme="light"] .avatar .av-dark{display:none}
:root[data-theme="light"] .avatar .av-light{display:block}
/* while the greeting plays, the work waits; then it rises in, one tile after another */
#after{transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
#work .row{transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
#work .row:nth-of-type(2){transition-delay:.12s}
#work .row:nth-of-type(3){transition-delay:.24s}
html.fg-greeting #after{opacity:0;transform:translateY(24px)}
html.fg-greeting #work .row{opacity:0;transform:translateY(18px)}
/* mid widths (tablets, narrow windows): stack the details under the name before they can collide with it */
@media (max-width:1080px){
  .banner .intro{grid-template-columns:1fr!important}
  .banner .line{max-width:none!important}
  .banner .side{grid-column:1!important;grid-row:3!important;align-self:start!important;justify-items:start!important;text-align:left!important;margin:6px 0 0!important}
  .banner .side p,.banner .side .byline p{max-width:none;text-align:left}
  .status{justify-content:flex-start!important}
  .banner .ctrls{grid-column:1!important;grid-row:4!important;justify-self:start!important;align-self:start!important;margin:4px 0 0!important}
}
/* room above a section when the nav jumps to it */
#about,#work{scroll-margin-top:clamp(56px,8vw,96px)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Work tiles carry their windows; the hero is just the introduction (no repeated windows) ===== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.scene{height:auto!important}
.scene .stage{position:relative!important;height:auto!important;overflow:visible!important;padding-bottom:clamp(8px,3vw,32px)}
.scene .banner{position:relative!important;background:none!important;opacity:1!important;visibility:visible!important}
#room,.stage > canvas.grid,#stripw,#caption,#dots,#motion{display:none!important}
.row,.row:has(.press){grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)!important;align-items:start;column-gap:clamp(28px,4vw,56px)!important;row-gap:clamp(22px,3vw,32px)!important}
.row-vis{grid-column:1 / -1;grid-row:1;display:block;position:relative;border-radius:20px;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;will-change:transform}
.row-vis::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.09),rgba(255,255,255,.03) 40%,transparent 70%);mix-blend-mode:screen}
.row-vis.lit::after{opacity:1}
:root[data-theme="light"] .row-vis::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),rgba(255,255,255,.05) 40%,transparent 70%)}
.row-vis canvas{width:100%;aspect-ratio:1 / .62;display:block;border-radius:20px;border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.3);transition:transform .5s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
:root[data-theme="light"] .row-vis canvas{box-shadow:0 18px 40px rgba(40,40,70,.16)}
.row-main{grid-column:1;grid-row:2}
.row .press{grid-column:2;grid-row:2}
@media (max-width:860px){.row,.row:has(.press){grid-template-columns:1fr!important}.row-vis{grid-column:1;grid-row:auto;margin-bottom:6px}.row-main,.row .press{grid-column:1;grid-row:auto}}