/* Self-hosted fonts (SIL Open Font License 1.1, see /fonts/OFL-*.txt). Latin subset, variable weight. */
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/cinzel-latin-var.09941fb1c1.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/cormorant-garamond-latin-var.d80df8ff5a.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/cormorant-garamond-italic-latin-var.e48e580270.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/inter-latin-var.3100e775e8.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --bg:#050507; --bg2:#0c0c11; --line:#1e1e28; --text:#e9e7f0; --muted:#8b8898;
  --holo:linear-gradient(110deg,#c9d6ff 0%,#f5d0ff 18%,#a8f0ff 34%,#fff3c4 50%,#c3b5ff 66%,#a6ffe0 82%,#c9d6ff 100%);
  --radius:14px; --gutter:clamp(16px,4vw,48px);
  /* motion tokens: one easing family and three lengths for everything (motion.js reads these too) */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-1:.6s; --dur-2:.9s; --dur-3:1.2s; --stagger:90ms;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:300 16px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid #a8f0ff;outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#0c0c11;color:var(--text);padding:10px 16px;border-radius:8px;border:1px solid var(--line)}
.skip:focus{top:12px}
img{display:block;max-width:100%;height:auto}

/* starfield */
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55}
main,header,footer{position:relative;z-index:1}

/* nav */
nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:14px var(--gutter);background:rgba(5,5,7,.72);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.mark{font:600 18px Cinzel,serif;letter-spacing:.32em;text-decoration:none}
nav ul{display:flex;gap:clamp(14px,3vw,32px);list-style:none}
nav ul a{text-decoration:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .2s}
nav ul a:hover{color:var(--text)}

.holo{background:var(--holo);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 14s linear infinite}
@keyframes shimmer{to{background-position:300% 0}}
@media (prefers-reduced-motion:reduce){.holo{animation:none}}

/* hero: content is visible from the first paint (the logo is the LCP image); only decor and the secondary
   lines animate in. The geometry is inline SVG (fallback) under a WebGL canvas added by hero-geo.js. */
.hero{min-height:88vh;display:grid;place-items:center;text-align:center;padding:60px var(--gutter)}
.hero-geo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.geo-wrap,.hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.geo-wrap{transition:opacity var(--dur-2) var(--ease-out)}
.geo-svg{position:absolute;left:50%;top:calc(50% - 40px);width:min(121.8vw,81.3vh,1176px);height:auto;transform:translate(-50%,-50%);overflow:visible;
  fill:none;stroke:url(#geo-holo);opacity:.5;animation:geo-in var(--dur-3) var(--ease-out) 1.4s both}
.geo-svg circle,.geo-svg path{vector-effect:non-scaling-stroke;stroke-width:1}
.geo-cube{opacity:.45}
.geo-nodes circle{fill:#fff3c4;stroke:none}
@keyframes geo-in{from{opacity:0;transform:translate(-50%,-50%) scale(.94) rotate(-8deg)}}
.hero-canvas{opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.hero.geo-live .hero-canvas{opacity:1}
.hero.geo-live .geo-wrap{opacity:0}
.hero-content{position:relative}
.hero-logo{animation:logo-in var(--dur-3) var(--ease-out) both}
.hero-content > p{animation:rise var(--dur-3) var(--ease-out) .9s both}
.hero-content > .tag{animation:rise var(--dur-3) var(--ease-out) 1.1s both}
@keyframes logo-in{from{transform:scale(.96)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce){
  .geo-svg,.hero-logo,.hero-content > p,.hero-content > .tag{animation:none}
  .geo-wrap,.hero-canvas{transition:none}
}
.hero-logo{width:min(560px,88vw);aspect-ratio:1;object-fit:cover;
  -webkit-mask:radial-gradient(circle,#000 52%,transparent 71%);mask:radial-gradient(circle,#000 52%,transparent 71%)}
.hero-fallback{font:600 clamp(56px,14vw,150px)/1 Cinzel,serif;letter-spacing:.08em}
.hero p{margin-top:8px;font:italic 400 clamp(19px,2.6vw,26px) "Cormorant Garamond",serif;color:var(--muted)}
.hero .tag{margin-top:18px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

section{padding:clamp(64px,10vw,120px) var(--gutter);max-width:1360px;margin:0 auto}
.eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
h2{font:400 clamp(32px,5vw,52px)/1.1 Cinzel,serif;letter-spacing:.04em;margin-bottom:28px}
/* every home section: eyebrow, h2, optional italic lead, then the content */
.sec-lead{max-width:60ch;color:#cfccd8;margin:-14px 0 clamp(28px,3.5vw,40px);font:italic 400 clamp(19px,2.2vw,23px)/1.45 "Cormorant Garamond",serif}
.sec-more{margin-top:clamp(28px,3.5vw,40px)}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.chip{border:1px solid var(--line);background:transparent;color:var(--muted);font:400 13px Inter,sans-serif;letter-spacing:.06em;
  padding:8px 16px;border-radius:99px;cursor:pointer;transition:all .2s}
.chip:hover{color:var(--text);border-color:#3a3a48}
.chip[aria-pressed=true]{color:#0a0a0e;background:var(--holo);background-size:200% 100%;border-color:transparent;font-weight:500}

/* gallery */
.grid{columns:3 300px;column-gap:18px;list-style:none}
.card{break-inside:avoid;margin-bottom:18px;border-radius:var(--radius);overflow:hidden;position:relative;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);transition:transform .35s,border-color .35s;outline:none}
.card:hover{transform:translateY(-3px);border-color:#43405a}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:var(--holo);mix-blend-mode:soft-light}
.card:hover::after{opacity:.35}
.card img{width:100%;height:auto}
.card-open{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer;font:inherit;text-align:left}
.card-open::before{content:"";position:absolute;inset:0;z-index:1}
.card-open:focus{outline:none}
.card:focus-within{border-color:#a8f0ff;box-shadow:0 0 0 2px #a8f0ff}
.card .cap{padding:14px 16px 16px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.card h3{font:500 20px "Cormorant Garamond",serif;letter-spacing:.02em}
.card .cat{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.card.hide{display:none}

/* about */
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,80px);align-items:center}
.about-art{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:1}
.about-art picture{display:block;width:100%;height:100%}
.about-art img,.about-art svg{width:100%;height:100%;object-fit:cover}
.about p{margin-bottom:16px;color:#cfccd8;max-width:60ch}
.about .lead{font:italic 400 24px/1.4 "Cormorant Garamond",serif;color:var(--text)}
/* home "The Lab" section: same layout as about, with the 16:10 terminal screenshot */
.about-lab .about-art{aspect-ratio:16/10;background:#050806;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(80,255,140,.04)}
.about .lab-btn{margin-top:8px}
.facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.facts div{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.facts strong{display:block;font:400 22px Cinzel,serif;letter-spacing:.04em;color:var(--text);text-transform:none}

/* projects */
.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.proj{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:linear-gradient(160deg,#0d0d14,#07070a);
  text-decoration:none;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;transition:border-color .3s}
.proj::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--holo);opacity:0;transition:opacity .3s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.proj:hover::before{opacity:1}
.proj .url{font-size:12px;letter-spacing:.08em;color:var(--muted)}
.proj h3{font:400 24px Cinzel,serif;letter-spacing:.03em}
.proj p{color:#bdbac8;font-size:15px;flex:1}
.proj-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.proj .sub{font:italic 400 18px "Cormorant Garamond",serif;color:var(--muted);margin-top:-6px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tags span{font-size:11.5px;letter-spacing:.03em;color:#a9a6b6;border:1px solid var(--line);border-radius:99px;padding:3px 10px}
.status{align-self:flex-start;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.status.live{color:#a6ffe0;border-color:#1f4a3d}

footer{padding:48px var(--gutter);border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:13px;letter-spacing:.1em}
footer .motto{font:italic 400 18px "Cormorant Garamond",serif;letter-spacing:.04em;margin-bottom:6px;color:var(--text)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:rgba(3,3,5,.96);display:none;grid-template-columns:minmax(0,1fr) 360px}
.lb.open{display:grid}
.lb-stage{display:grid;place-items:center;padding:56px 24px;min-height:0}
.lb-stage picture{display:contents}
.lb-stage img,.lb-stage svg{max-width:100%;max-height:calc(100vh - 112px);width:auto;height:auto;border-radius:8px}
.lb-info{border-left:1px solid var(--line);padding:56px 32px;overflow-y:auto}
.lb-info .cat{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lb-info h3{font:400 34px/1.15 "Cormorant Garamond",serif;margin:8px 0 16px}
.lb-info p{color:#cfccd8;margin-bottom:14px}
.lb-info dl{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.lb-info dt{color:var(--muted)}
.lb-full{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:22px;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.05);color:var(--text);text-decoration:none;font-size:14px}
.lb-full::after{content:"\2197";font-size:15px;line-height:1}
.lb-full[hidden]{display:none}
.lb-full:hover{background:rgba(255,255,255,.12)}
.lb-full:focus-visible{outline:2px solid #a8f0ff;outline-offset:3px;border-color:#a8f0ff}
.lb-full-meta{color:var(--muted);font-size:12px}
.lb-btn{position:absolute;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);width:44px;height:44px;border-radius:50%;
  cursor:pointer;font-size:20px;display:grid;place-items:center;transition:background .2s}
.lb-btn:hover{background:rgba(255,255,255,.12)}
.lb-close{top:14px;right:14px}
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lb-next{right:374px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:16px;left:24px;font-size:12px;letter-spacing:.2em;color:var(--muted)}

/* scroll animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.card.reveal{transition:opacity .9s ease,transform .5s cubic-bezier(.2,.7,.2,1),border-color .35s}
.card.reveal.in:hover,.card.reveal.in:focus-within{transform:translateY(-3px)}
.hero-content{will-change:transform,opacity}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:20;background:var(--holo)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* CSS scroll-driven animations (Chrome/Edge 115+, Safari 26+): reveals scrub with the scroll position, and the
   hero lift and progress bar follow scroll on the compositor. `translate` (not transform) keeps hover transforms
   working. Other browsers get the IntersectionObserver reveal and the rAF fallback in site.js. */
@supports (animation-timeline:scroll()) and (animation-range:0 1px){
  @media (prefers-reduced-motion:no-preference){
    .reveal,.card.reveal{opacity:1;transform:none;transition:border-color .35s,transform .5s var(--ease-out);
      animation:reveal-in linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    .reveal:not(.card){transition:none}
    .hero-content{animation:hero-lift linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .progress{animation:progress linear both;animation-timeline:scroll(root)}
  }
}
@keyframes reveal-in{from{opacity:0;translate:0 28px}}
@keyframes hero-lift{to{opacity:0;transform:translateY(80px) scale(.92)}}
@keyframes progress{to{transform:scaleX(1)}}

@media (max-width:860px){
  .about{grid-template-columns:1fr}
  .about-art{max-width:420px}
  nav ul li:nth-child(6){display:none}
}
/* lightbox on phones and portrait screens: an opaque full-screen sheet that scrolls inside itself, the image on top
   (full width, at most ~68% of the height), the text and "Open full image" below it. Close, arrows and counter sit in
   a top bar above the image. Portrait (max-aspect-ratio) also catches Chrome's "Desktop site" mode on a phone, which
   lays the page out 980px wide and so misses the width breakpoint. */
@media (max-width:860px),(max-aspect-ratio:3/4){
  .lb{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;overflow-x:hidden;overflow-y:auto;
    overscroll-behavior:contain;background:#030305}
  .lb::before{content:"";position:fixed;top:0;left:0;right:0;height:72px;z-index:1;pointer-events:none;
    background:linear-gradient(#030305 62%,rgba(3,3,5,0))}
  .lb-stage{display:block;padding:72px 12px 12px;min-height:auto}
  .lb-stage img,.lb-stage svg{display:block;width:auto;max-width:100%;max-height:68vh;max-height:68svh;object-fit:contain;margin:0 auto}
  .lb-stage .ph{width:100%;max-width:68vh}
  .lb-info{border-left:0;border-top:1px solid var(--line);padding:22px 20px calc(32px + env(safe-area-inset-bottom,0px));overflow:visible}
  .lb-info h3{font-size:30px}
  .lb-btn{position:fixed;z-index:2;top:14px;bottom:auto;transform:none}
  .lb-close{right:14px;left:auto}
  .lb-prev{left:14px;right:auto}
  .lb-next{left:66px;right:auto}
  .lb-count{position:fixed;z-index:2;top:27px;left:124px;bottom:auto}
}
/* "Desktop site" on a phone: the 980px layout is shown at ~0.42 scale, so scale the sheet back up to phone size */
@media (min-width:861px) and (max-aspect-ratio:3/5) and (pointer:coarse){.lb{zoom:2.3}}
@media (max-width:420px){nav{padding-left:16px;padding-right:16px}nav ul{gap:12px}nav ul a{font-size:12px;letter-spacing:.08em}.mark{font-size:16px;letter-spacing:.16em}}
@media (max-width:350px){nav ul li:nth-child(2){display:none}}

/* placeholder shown by site.js if an image fails to load */
.ph{width:100%;height:auto;aspect-ratio:1;fill:none;stroke:#c3b5ff;stroke-width:1;opacity:.8;background:var(--bg2)}
html.lb-open,body.lb-open{overflow:hidden}

/* 404 page */
.notfound{min-height:80vh;display:grid;place-items:center;text-align:center;padding:60px var(--gutter)}
.notfound h1{font:600 clamp(56px,12vw,120px)/1 Cinzel,serif;letter-spacing:.08em}
.notfound p{margin:16px 0 28px;font:italic 400 22px "Cormorant Garamond",serif;color:var(--muted)}
.notfound a{font-size:13px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line);border-radius:99px;padding:10px 20px}

/* music player */
.player{position:fixed;right:16px;bottom:16px;z-index:40;width:min(460px,calc(100vw - 32px));font-size:13px}
.pl-bar{display:flex;align-items:center;gap:6px;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:99px;
  background:rgba(12,12,17,.88);backdrop-filter:blur(14px);box-shadow:0 10px 40px rgba(0,0,0,.45)}
.pl-btn{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid transparent;background:transparent;color:var(--text);
  display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}
.pl-btn:hover{background:rgba(255,255,255,.08)}
.pl-btn svg{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:0}
.pl-mute svg,.pl-list-toggle svg{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pl-mute svg path:first-child{fill:currentColor;stroke:none}
.pl-play{width:40px;height:40px;background:var(--holo);background-size:200% 100%;color:#0a0a0e}
.pl-play:hover{background:var(--holo);filter:brightness(1.08)}
.pl-play svg{width:18px;height:18px}
.i-pause,.i-muted{display:none}
.player.playing .i-play{display:none}.player.playing .i-pause{display:block}
.player.muted .i-vol{display:none}.player.muted .i-muted{display:block}
.pl-info{flex:1;min-width:0;padding:0 6px}
.pl-title{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;color:var(--text);font:500 15px/1.3 "Cormorant Garamond",serif;letter-spacing:.02em}
.pl-title-text{overflow:hidden;text-overflow:ellipsis}
.pl-seek-row{display:flex;align-items:center;gap:6px;margin-top:2px}
.pl-time{flex:none;font-size:10.5px;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums;min-width:30px}
.pl-dur{text-align:right}
.player input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:18px;cursor:pointer;min-width:0}
.pl-seek{flex:1}
.pl-vol{flex:none;width:70px}
.player input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:#2a2a36}
.player input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:#2a2a36}
.player input[type=range]::-moz-range-progress{height:3px;border-radius:3px;background:#c3b5ff}
.player input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border-radius:50%;background:#e9e7f0;border:0}
.player input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#e9e7f0;border:0}
.pl-eq{display:none;align-items:flex-end;gap:2px;height:11px;flex:none}
.pl-eq i{display:block;width:2px;height:100%;background:#a8f0ff;transform-origin:bottom;animation:eq 1s ease-in-out infinite}
.pl-eq i:nth-child(2){animation-delay:-.35s;background:#f5d0ff}.pl-eq i:nth-child(3){animation-delay:-.7s;background:#fff3c4}
.player.playing .pl-eq{display:inline-flex}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.pl-eq i{animation:none;transform:scaleY(.7)}}
.pl-panel{margin-bottom:8px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(12,12,17,.94);backdrop-filter:blur(14px);
  padding:14px 10px 10px;max-height:min(60vh,420px);overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.pl-head{padding:0 8px 6px}.pl-head .eyebrow{margin:0}
.pl-list{list-style:none}
.pl-track{display:flex;gap:12px;align-items:baseline;width:100%;text-align:left;background:none;border:0;color:#cfccd8;cursor:pointer;
  padding:9px 8px;border-radius:8px;font:400 14px/1.35 Inter,sans-serif}
.pl-track:hover{background:rgba(255,255,255,.05);color:var(--text)}
.pl-track[aria-current=true]{color:var(--text);background:rgba(195,181,255,.08)}
.pl-track[aria-current=true] .pl-num{color:#a8f0ff}
.pl-num{flex:none;width:16px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
body.has-player footer{padding-bottom:110px}
@media (max-width:560px){
  .player{right:8px;left:8px;bottom:8px;width:auto}
  .pl-bar{border-radius:18px;padding:6px 8px 6px 6px;gap:2px}
  .pl-vol{display:none}
  .pl-prev,.pl-next{width:30px}
}
@media print{.player{display:none}}

/* project screenshots */
.proj{padding:0}
.proj > :not(.proj-shot){margin-left:26px;margin-right:26px}
.proj > .proj-top{margin-top:20px}
.proj > .tags{margin-bottom:24px}
.proj-shot{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:#09090d}
.proj-shot picture{display:block;width:100%;height:100%}
.proj-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
a.proj:hover .proj-shot img,a.proj:focus-visible .proj-shot img{transform:scale(1.03)}
.proj-ph{display:block;width:100%;height:100%;fill:none;stroke:#3a3550;stroke-width:1.2}
a.proj:hover .proj-ph{stroke:#5a5280}
@media (prefers-reduced-motion:reduce){.proj-shot img{transition:none}a.proj:hover .proj-shot img{transform:none}}
.proj-shot img.proj-art{object-position:center}

/* home "Geometry & Art": a selection from /gallery/ (site.js adds the lightbox) */
.geo{position:relative}
.geo > :not(.geo-accent){position:relative;z-index:1}
.geo-accent{position:absolute;z-index:0;top:clamp(8px,4vw,40px);right:var(--gutter);width:min(420px,60vw);aspect-ratio:1;
  pointer-events:none;opacity:.32;-webkit-mask:radial-gradient(circle,#000 30%,transparent 68%);mask:radial-gradient(circle,#000 30%,transparent 68%)}
.geo-accent picture,.geo-accent img{display:block;width:100%;height:100%;object-fit:cover}
.geo-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.geo-open{display:block;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg2);
  text-decoration:none;transition:border-color .3s,transform .35s}
.geo-open picture{display:block;aspect-ratio:1}
.geo-open img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.geo-cap{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;font:500 16px/1.25 "Cormorant Garamond",serif;letter-spacing:.02em;
  color:var(--text);background:linear-gradient(transparent,rgba(5,5,7,.88))}
.geo-open:hover{border-color:#43405a}
.geo-open:hover img{transform:scale(1.04)}
.geo-open:focus-visible{outline:2px solid #a8f0ff;outline-offset:3px;border-color:#a8f0ff}
@media (max-width:560px){
  .geo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .geo-cap{font-size:14px;padding:22px 8px 7px}
}
@media (prefers-reduced-motion:reduce){.geo-open img{transition:none}.geo-open:hover img{transform:none}}

/* home "Photography": a few Stockholm photos, sunset to night, as portrait tiles with room around them, centred under
   the heading; the middle column sits a little lower on wide screens. Two columns on phones. site.js opens the shared lightbox. */
.photos{text-align:center}
.photos .sec-lead{margin-left:auto;margin-right:auto}
.photo-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4.5vw,64px) clamp(18px,2.6vw,36px);
  max-width:960px;margin:clamp(8px,2vw,24px) auto 0;text-align:left}
.photo-open{display:block;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg2);
  text-decoration:none;transition:border-color .3s}
.photo-open picture{display:block;aspect-ratio:3/4}
.photo-open img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-2) var(--ease-out)}
.photo-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;font:500 18px/1.25 "Cormorant Garamond",serif;letter-spacing:.02em;
  color:var(--text);background:linear-gradient(transparent,rgba(5,5,7,.86))}
.photo-open:hover{border-color:#43405a}
.photo-open:hover img{transform:scale(1.03)}
.photo-open:focus-visible{outline:2px solid #a8f0ff;outline-offset:3px;border-color:#a8f0ff}
.photos .sec-more{margin-top:clamp(48px,6vw,88px)}
@media (min-width:861px){.photo-item:nth-child(3n+2){translate:0 clamp(24px,3vw,44px)}}
@media (max-width:560px){
  .photos{text-align:left}
  .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
  .photo-cap{font-size:15px;padding:26px 9px 8px}
}
@media (prefers-reduced-motion:reduce){.photo-open img{transition:none}.photo-open:hover img{transform:none}}

/* Sumus Lab page (/lab/) */
.lab-page main{padding-top:8px}
.lab-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(28px,5vw,64px);align-items:center;
  max-width:1360px;margin:0 auto;padding:clamp(40px,7vw,96px) var(--gutter) clamp(24px,4vw,48px)}
.lab-hero h1{font:400 clamp(44px,7vw,84px)/1.02 Cinzel,serif;letter-spacing:.03em;margin-bottom:18px}
.lab-hero .eyebrow a{text-decoration:none}
.lab-hero .eyebrow a:hover{color:var(--text)}
.lab-lead{font:italic 400 clamp(20px,2.4vw,26px)/1.4 "Cormorant Garamond",serif;color:#cfccd8;max-width:34ch}
.lab-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.lab-soon{color:#a6ffe0;border-color:#1f4a3d;font-size:12px;padding:8px 14px}
.lab-btn{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:9px 18px;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--text);transition:border-color .2s,background .2s}
.lab-btn:hover{border-color:#43405a;background:rgba(255,255,255,.04)}
.lab-zoom{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#050806;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(80,255,140,.04);transition:border-color .3s}
.lab-zoom:hover{border-color:#2f6b47}
.lab-zoom img{width:100%;height:auto}
.lab-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 36px;max-width:1100px}
.lab-cols p,.lab-intro,.lab-cta p{color:#cfccd8}
.lab-page code,.lab-meta code{font:400 .92em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#9dffc0;background:rgba(80,255,140,.06);
  border:1px solid rgba(80,255,140,.12);border-radius:5px;padding:1px 5px}
.lab-tracks{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:18px}
.lab-track{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:linear-gradient(160deg,#0d0d14,#07070a);
  display:flex;flex-direction:column}
.lab-track .lab-zoom{border:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--line)}
.lab-shot{aspect-ratio:16/10;overflow:hidden;background:#050806}
.lab-shot-text{display:flex;flex-direction:column;justify-content:center;padding:0 9%;border-bottom:1px solid var(--line);
  font:400 clamp(18px,2vw,24px)/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#9dffc0;
  background:radial-gradient(ellipse at 30% 40%,rgba(60,255,130,.08),transparent 60%),#050806}
.lab-prompt{color:#3fd87a}
.lab-dim{color:#4f8f66;font-size:.7em}
.lab-track-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:8px}
.lab-track-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.lab-track h3{font:400 24px Cinzel,serif;letter-spacing:.03em}
.lab-meta{font-size:13px;color:var(--muted)}
.lab-track p:not(.lab-meta){color:#bdbac8;font-size:15px}
.lab-note{margin-top:18px;font-size:13px;color:var(--muted);max-width:70ch}
.lab-intro{margin:-10px 0 22px;max-width:62ch}
.lab-phones{list-style:none;display:flex;gap:clamp(12px,3vw,28px);flex-wrap:wrap}
.lab-phones li{width:min(260px,calc(50% - 8px))}
.lab-phones .lab-zoom{border-radius:22px;border-width:6px;border-color:#16161e}
.lab-facts{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-bottom:22px}
.lab-facts li{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;color:#bdbac8;font-size:15px}
.lab-facts strong{display:block;font:400 20px Cinzel,serif;color:var(--text);letter-spacing:.03em;margin-bottom:6px}
.lab-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;
  border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,3vw,32px);background:linear-gradient(160deg,#0d0d14,#07070a)}
.lab-cta-shot{border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.lab-cta-shot img{width:100%;height:auto}
.lab-cta .lab-btn{margin-top:10px}
@media (max-width:900px){
  .lab-hero{grid-template-columns:1fr}
  .lab-cta{grid-template-columns:1fr}
}

/* Sumus Lab trailer: local poster + play button; src/js/video.js swaps in a youtube-nocookie iframe on click */
.lab-trailer{padding-top:clamp(24px,4vw,48px)}
.lab-video{max-width:960px}
.lab-video-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#050806;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(80,255,140,.04)}
.lab-video-poster{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#050806;color:var(--text);
  font:inherit;text-decoration:none;cursor:pointer}
.lab-video-poster picture,.lab-video-poster img{display:block;width:100%;height:100%;object-fit:cover}
.lab-video-poster img{transition:filter .3s}
.lab-video-play{position:absolute;left:50%;top:50%;width:clamp(56px,9vw,84px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(5,5,7,.66);border:1px solid rgba(157,255,192,.55);box-shadow:0 0 0 6px rgba(80,255,140,.07),0 10px 30px rgba(0,0,0,.5);
  transition:background .2s,border-color .2s,box-shadow .2s}
.lab-video-play::before{content:"";position:absolute;inset:31% 27% 31% 37%;background:#9dffc0;clip-path:polygon(0 0,100% 50%,0 100%)}
.lab-video-label{position:absolute;left:14px;bottom:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;
  border-radius:99px;border:1px solid var(--line);background:rgba(5,5,7,.78)}
.lab-video-poster:hover img,.lab-video-poster:focus-visible img{filter:brightness(1.12)}
.lab-video-poster:hover .lab-video-play,.lab-video-poster:focus-visible .lab-video-play{background:rgba(5,5,7,.85);border-color:#9dffc0;
  box-shadow:0 0 0 8px rgba(80,255,140,.12),0 10px 30px rgba(0,0,0,.5)}
.lab-video-poster:focus-visible{outline:2px solid #a8f0ff;outline-offset:-4px;border-radius:var(--radius)}
.lab-video-iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lab-video figcaption{margin-top:12px;font-size:13px;color:var(--muted);max-width:70ch}
.lab-video figcaption a{color:var(--text)}
@media (max-width:560px){.lab-video-label{left:10px;bottom:10px;font-size:11px;padding:5px 10px}}

/* Gallery page (/gallery/): masonry columns of drawings and photos, the shared lightbox from site.js */
.gal-page main{padding-top:8px}
nav ul a[aria-current=page]{color:var(--text)}
.gal-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;
  max-width:1360px;margin:0 auto;padding:clamp(40px,7vw,96px) var(--gutter) clamp(8px,2vw,24px)}
.gal-hero h1{font:400 clamp(44px,7vw,84px)/1.02 Cinzel,serif;letter-spacing:.03em;margin-bottom:18px}
.gal-hero .eyebrow a{text-decoration:none}
.gal-hero .eyebrow a:hover{color:var(--text)}
.gal-lead{font:italic 400 clamp(20px,2.4vw,26px)/1.4 "Cormorant Garamond",serif;color:#cfccd8;max-width:36ch;margin-bottom:26px}
.gal-jumps{margin:0}
a.chip{text-decoration:none;display:inline-flex;gap:8px;align-items:baseline}
.gal-n{font-size:11px;opacity:.7}
.gal-logo{width:100%;height:auto;-webkit-mask:radial-gradient(ellipse 72% 78% at 50% 50%,#000 58%,transparent 100%);
  mask:radial-gradient(ellipse 72% 78% at 50% 50%,#000 58%,transparent 100%);animation:logo-in var(--dur-3) var(--ease-out) both}
.gal-intro{color:var(--muted);margin:-14px 0 26px;max-width:62ch}
.gal-grid{list-style:none;columns:4 240px;column-gap:16px}
.gal-item{break-inside:avoid;margin-bottom:16px}
.gal-open{display:block;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg2);
  text-decoration:none;transition:border-color .3s}
.gal-open::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:var(--holo);mix-blend-mode:soft-light}
.gal-open img{width:100%;height:auto;transition:transform var(--dur-1) var(--ease-out)}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 11px;font:500 17px/1.25 "Cormorant Garamond",serif;letter-spacing:.02em;
  color:var(--text);background:linear-gradient(transparent,rgba(5,5,7,.86))}
.gal-open:hover,.gal-open:focus-visible{border-color:#43405a}
.gal-open:hover::after{opacity:.3}
.gal-open:hover img,.gal-open:focus-visible img{transform:scale(1.035)}
.gal-open:focus-visible{outline:2px solid #a8f0ff;outline-offset:3px;border-color:#a8f0ff}
/* lightbox: the image settles in (motion only) */
@media (prefers-reduced-motion:no-preference){.lb.open .lb-stage img{animation:lb-in var(--dur-1) var(--ease-out)}}
@keyframes lb-in{from{opacity:0;transform:scale(.985)}}
@media (max-width:860px){
  .gal-hero{grid-template-columns:1fr}
  .gal-hero-art{max-width:520px}
}
@media (max-width:560px){
  .gal-grid{columns:2;column-gap:10px}
  .gal-item{margin-bottom:10px}
  .gal-cap{font-size:15px;padding:24px 10px 8px}
}
@media (prefers-reduced-motion:reduce){
  .gal-logo{animation:none}
  .gal-open img,.gal-open::after{transition:none}
  .gal-open:hover img,.gal-open:focus-visible img{transform:none}
}

/* /ambigram-magic-square/: seven-segment squares that turn (rotateZ) and mirror (rotateY, a 3D flip) in .9s with
   cubic-bezier(.6,0,.2,1), the timing and easing of Tony's original page. ambigram.js sets data-rot/data-mir and
   data-move, which plays a lift (the individual scale property, so it adds to the transition).
   Reduced motion: the new view appears at once. */
.amb-page main{padding-top:8px;overflow-x:clip}
.amb-hero{max-width:1360px;margin:0 auto;padding:clamp(32px,5vw,64px) var(--gutter) 0}
.amb-hero h1{font:400 clamp(40px,7vw,84px)/1.02 Cinzel,serif;letter-spacing:.03em;margin-bottom:18px}
.amb-hero .eyebrow a{text-decoration:none}
.amb-hero .eyebrow a:hover{color:var(--text)}
.amb-lead{font:italic 400 clamp(20px,2.4vw,26px)/1.4 "Cormorant Garamond",serif;color:#cfccd8;max-width:46ch}
.amb-play{padding-top:clamp(28px,4vw,48px)}
.amb-copy h2{margin-bottom:18px}
.amb-ctrls{display:flex;flex-wrap:wrap;gap:8px}
.amb-ctrls .chip{min-height:40px}
.amb-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-areas:"stage copy" "stage read";
  grid-template-rows:auto 1fr;gap:clamp(18px,3vw,28px) clamp(24px,5vw,64px)}
.amb-copy{grid-area:copy}.amb-stage{grid-area:stage;align-self:start}.amb-read{grid-area:read}
.amb-stage{perspective:900px;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(14px,3vw,32px);
  background:radial-gradient(circle at 50% 40%,#11111a,#07070a 75%)}
.amb-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1.4vw,14px);max-width:440px;margin:0 auto;
  --amb-t:.9s;--amb-ease:cubic-bezier(.6,0,.2,1);transform:rotateZ(0) rotateY(0);transition:transform var(--amb-t) var(--amb-ease)}
.amb-grid[data-move=rot]{animation:amb-turn var(--amb-t) var(--amb-ease)}
.amb-grid[data-move=mir]{animation:amb-flip var(--amb-t) var(--amb-ease)}
@keyframes amb-turn{35%,65%{scale:.74}}
@keyframes amb-flip{50%{scale:.86}}
.amb-grid[data-rot=true]{transform:rotateZ(180deg) rotateY(0)}
.amb-grid[data-mir=true]{transform:rotateZ(0) rotateY(180deg)}
.amb-grid[data-rot=true][data-mir=true]{transform:rotateZ(180deg) rotateY(180deg)}
.amb-cell{border:1px solid var(--line);border-radius:10px;background:#050507;padding:14% 12%}
.amb-cell svg,.amb-key-digit{display:block;width:100%;height:auto;overflow:visible}
.amb-cell .on,.amb-key-digit .on{fill:#a8f0ff}
.amb-cell .off,.amb-key-digit .off{fill:#1e1e28}
.amb-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.amb-sub{color:#cfccd8;margin:-6px 0 18px;max-width:46ch}
.amb-read .amb-sum.off{color:#ff9db4}
/* Square II: rainbow neon, one hue per diagonal band (after Tony's neon picture) */
.amb-neon .amb-stage{background:radial-gradient(circle at 50% 45%,#141022,#050507 75%)}
.amb-neon .amb-cell{color:#5dffa8;border-color:currentColor;background:#06060a;box-shadow:0 0 12px -2px currentColor,inset 0 0 10px -4px currentColor}
.amb-neon .amb-cell .on{fill:currentColor}.amb-neon .amb-cell .off{fill:#121218}
.amb-neon .amb-cell svg{filter:drop-shadow(0 0 3px currentColor)}
.amb-neon .h1{color:#4ff0e0}.amb-neon .h2{color:#7aa8ff}.amb-neon .h3{color:#c58bff}
.amb-neon .h4{color:#ff7ac8}.amb-neon .h5{color:#ff9a5c}.amb-neon .h6{color:#ffe066}
.amb-read table{border-collapse:collapse;font:400 17px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.amb-read caption{text-align:left;font:400 12px/1.5 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-bottom:12px}
.amb-mode{color:var(--text)}
.amb-read th{font:400 11px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 10px 8px;text-align:right}
.amb-read td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--line)}
.amb-read .amb-sum{color:#a6ffe0}
.amb-read tfoot td{border-bottom:0}
.amb-read .amb-foot{font:400 11px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.amb-diag{margin-top:14px;color:#cfccd8}
.amb-diag-v{color:#a6ffe0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.amb-status{margin-top:6px;color:var(--muted);max-width:40ch}
.amb-note,.amb-intro{margin-top:26px;color:#cfccd8;max-width:70ch}
.amb-intro{margin:-10px 0 22px}
.amb-key-wrap{overflow-x:auto}
.amb-key{border-collapse:collapse;min-width:440px}
.amb-key th{font:400 11px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 14px}
.amb-key tbody th{font:400 22px Cinzel,serif;color:var(--text)}
.amb-key td{padding:10px 14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.amb-key-digit{width:26px;margin-bottom:6px}
.amb-back{margin-top:28px}
@media (max-width:860px){.amb-box{grid-template-columns:1fr;grid-template-areas:"copy" "stage" "read";grid-template-rows:none}}
@media (max-width:420px){.amb-read table{font-size:15px}.amb-read td{padding:8px 6px}}
@media (prefers-reduced-motion:reduce){.amb-grid,.amb-grid[data-move]{transition:none;animation:none}}