:root{--bg:#0a0a09;--ink:#ece8df;--mute:#9b968c;--line:rgba(236,232,223,.14);--card:#161614;--accent:oklch(0.66 0.19 38);color-scheme:dark}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
::selection{background:var(--accent);color:#fff}
*{box-sizing:border-box}
@keyframes op-pulse{0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--accent) 60%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
:root{--screen-min:auto;--hero-cols:minmax(0,1.1fr) minmax(0,1fr);--proj-cols:minmax(0,1fr);--btn-cols:repeat(4,minmax(0,1fr));
--block-cols:96px minmax(0,1fr);--block-gap:16px;--about-cols:minmax(0,0.8fr) minmax(0,1.2fr)}
@media (min-width:1100px){:root{--screen-min:calc(100svh - 57px);--proj-cols:minmax(0,1.25fr) minmax(0,1fr)}}
@media (max-width:720px){:root{--hero-cols:minmax(0,1fr);--btn-cols:repeat(2,minmax(0,1fr));--block-cols:minmax(0,1fr);
--block-gap:8px;--about-cols:minmax(0,1fr)}[data-desk]{display:none}#exp-wide{display:none}}
@media (min-width:721px){#exp-narrow{display:none}}
.now-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;animation:op-pulse 2s ease-out infinite}
.va-tab{display:flex;flex-direction:column;gap:4px;padding:12px 0 0;margin:-1px 0 0;border:0;border-top:2px solid transparent;background:transparent;color:var(--mute);font:inherit;text-align:left;cursor:pointer;transition:color .2s,border-color .2s}
.va-tab:hover{color:var(--ink)}.va-tab[aria-selected=true]{color:var(--ink);border-top-color:var(--accent)}
.role-btn{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:0;margin:0;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.role-dot{position:relative;flex:0 0 auto;width:56px;height:56px;border-radius:50%;border:1px solid var(--mute);background:var(--bg);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Geist Mono',ui-monospace,monospace;font-size:13px;letter-spacing:.04em;transition:background .2s,color .2s,border-color .2s}
[aria-pressed=true] .role-dot,[aria-expanded=true] .role-dot{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.role-live{position:absolute;top:1px;right:1px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);animation:op-pulse 2.4s ease-out infinite}
.tag{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;padding:5px 10px;border:1px solid var(--line);color:var(--mute)}
video{background:var(--card)}
.hv0:hover,.hv0:focus-visible{color:var(--accent) !important}
.hv1:hover,.hv1:focus-visible{background:var(--accent) !important;border-color:var(--accent) !important;color:#fff !important}
.hv2:hover,.hv2:focus-visible{border-color:var(--ink) !important;color:var(--ink) !important}
.hv3:hover,.hv3:focus-visible{padding-left:8px !important;color:var(--accent) !important}
.hv4:hover,.hv4:focus-visible{background:var(--ink) !important;color:var(--bg) !important}
.hv5:hover,.hv5:focus-visible{color:var(--ink) !important}
/* ---------- phones: one project per screen */
.m-more{display:none}
@media (max-width:720px){
  html{scroll-snap-type:y proximity}
  #work article{min-height:calc(100svh - 57px)!important;justify-content:flex-start!important;padding:18px 0 22px!important;scroll-snap-align:start}
  #work article>div{gap:18px!important}
  #work article h3{font-size:38px!important}
  #work article [data-reveal]{gap:14px!important}
  #work article:not(.open) .m-detail{display:none!important}
  .m-more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);background:transparent;border:1px solid var(--line);padding:9px 12px;cursor:pointer}
  .m-more:hover{color:var(--ink);border-color:var(--ink)}
  .m-more .m-plus{color:var(--accent);font-size:13px;line-height:1}
  /* VideoAmp chart: compact on phones */
  .m-va-sub,.m-va-legend{display:none!important}
  .m-va-canvas{height:170px!important}
  .m-va-stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px!important}
  .m-va-stats>div>span:first-child{font-size:26px!important}
  .m-va-stats>div>span:last-child{font-size:10px!important;line-height:1.3}
}
@media (max-width:720px) and (max-height:720px){
  #work article{padding:6px 0 8px!important}
  #work article>div{gap:12px!important}
  #work article [data-reveal]{gap:10px!important}
  #work article h3{font-size:32px!important}
  #work article p{font-size:14px!important}
  #work article h3+p{font-size:16px!important}
}