/* 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.
   vh inside the zoomed sheet is scaled by the zoom too, so the image height cap is divided by it (very tall posters) */
@media (min-width:861px) and (max-aspect-ratio:3/5) and (pointer:coarse){.lb{zoom:2.3}
  .lb-stage img,.lb-stage svg{max-height:calc(68vh / 2.3);max-height:calc(68svh / 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{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 8px 6px}.pl-head .eyebrow{margin:0}
.pl-all{font-size:12px;letter-spacing:.08em;color:var(--muted);text-decoration:none}.pl-all:hover{color:var(--text)}
.pl-list{list-style:none}
.pl-list li{display:flex;align-items:center;gap:2px}
.pl-list .pl-track{flex:1;min-width:0}
.pl-page{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--muted)}
.pl-page:hover{color:var(--text);background:rgba(255,255,255,.06)}
.pl-page svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.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}
.gal-video .lab-video-frame{aspect-ratio:9/16;box-shadow:none}
.gal-video-note{margin-top:6px;font-size:12px;color:var(--muted)}
/* 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}}
/* /gatherly/ (B+ / Gatherly): one section per feature, text beside a screenshot that opens the shared lightbox */
.gat-note{margin-top:14px;font-size:13px;color:var(--muted);max-width:70ch}
.gat-sec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px clamp(24px,4vw,56px);align-items:start}
.gat-sec .gat-feats{grid-column:1/-1;margin-bottom:0}
.gat-sec:nth-of-type(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.gat-sec:nth-of-type(even) .gat-copy{grid-area:1/2}
.gat-sec:nth-of-type(even) .gat-shot{grid-area:1/1}
.gat-text{color:#cfccd8;max-width:52ch}
.gat-shot figcaption{margin-top:10px;font-size:13px;letter-spacing:.08em;color:var(--muted)}
.gat-open{display:block;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#09090d}
.gat-open picture{display:block}
.gat-open img{display:block;width:100%;height:auto}
.gat-open:hover{border-color:#43405a}
.gat-open:focus-visible{outline:2px solid #a8f0ff;outline-offset:3px}
.gat-tags{margin-top:4px}
@media (max-width:860px){.gat-sec,.gat-sec:nth-of-type(even){grid-template-columns:minmax(0,1fr)}
  .gat-sec:nth-of-type(even) .gat-copy,.gat-sec:nth-of-type(even) .gat-shot{grid-area:auto}}
/* /music/ and the song pages (/music/<name>/): play buttons drive the shared player (player.js), lyrics in sections */
.song-play,.song-row-play{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;color:#0a0a0e;
  background:var(--holo);background-size:200% 100%;font:500 13px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.song-play{min-height:46px;padding:0 26px 0 20px;border-radius:99px}
.song-play:hover,.song-row-play:hover{filter:brightness(1.08)}
.song-play svg,.song-row-play svg{width:18px;height:18px;fill:currentColor}
.song-play .i-pause,.song-row-play .i-pause,.song-play.is-playing .i-play,.song-row-play.is-playing .i-play{display:none}
.song-play.is-playing .i-pause,.song-row-play.is-playing .i-pause{display:block}
.song-actions{margin-top:26px}
.song-about{margin-top:22px;color:#cfccd8;max-width:60ch}
.song-jump{margin-top:26px}
.song-lyrics{padding-top:clamp(40px,6vw,72px);padding-bottom:0}
.song-lyrics > .eyebrow{font:400 12px Inter,sans-serif;letter-spacing:.32em;margin-bottom:8px}
.ly-sec{display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px 32px;max-width:none;margin:0;padding:26px 0;border-top:1px solid var(--line);scroll-margin-top:80px}
.ly-sec h3{font:400 13px/2.4 Cinzel,serif;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.ly-sec p{font:400 clamp(21px,2.3vw,26px)/1.5 "Cormorant Garamond",serif;color:#e1deea;max-width:760px}
.ly-l{display:block;padding-left:1em;text-indent:-1em}
.ly-chorus p{padding-left:18px;border-left:2px solid #c3b5ff;color:var(--text)}
.ly-chorus h3{color:#c3b5ff}
.ly-bridge p,.ly-intro p,.ly-outro p{font-style:italic;color:#cfccd8}
.song-more{padding-top:clamp(32px,5vw,56px)}
.song-nav{display:flex;flex-wrap:wrap;gap:10px}
.music-sec{padding-top:clamp(36px,5vw,56px)}
.music-sec > .eyebrow{font:400 12px Inter,sans-serif;letter-spacing:.32em}
.song-list{list-style:none;border-top:1px solid var(--line);max-width:980px}
.song-row{display:flex;align-items:center;gap:16px;padding:14px 4px;border-bottom:1px solid var(--line)}
.song-row-num{flex:none;width:24px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.song-row-play{flex:none;width:40px;height:40px;border-radius:50%;padding:0}
.song-row-title{flex:1;min-width:0;font:400 clamp(19px,2vw,23px)/1.3 "Cormorant Garamond",serif;color:var(--text);text-decoration:none}
a.song-row-title:hover{text-decoration:underline;text-underline-offset:4px}
.song-row-more{flex:none}
@media (max-width:640px){
  .ly-sec{grid-template-columns:minmax(0,1fr);padding:20px 0}
  .ly-sec h3{line-height:1.6}
  .song-row{gap:12px}
  .song-row-more{padding:6px 12px}
}
/* /zine/ (1221 · The Reality Weaver Zine): cover, spreads of two pages with a fold, back cover; pages open the lightbox */
.zine-intro{margin-top:18px;color:#cfccd8;max-width:62ch}
.zine-book{padding-top:clamp(36px,5vw,64px)}
.zine-spreads{list-style:none;display:grid;gap:clamp(36px,6vw,72px);justify-items:center}
.zine-spread{display:grid;grid-template-columns:repeat(2,minmax(0,520px));filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.zine-single{grid-template-columns:minmax(0,520px)}
.zine-page{position:relative;margin:0}
.zine-open{display:block;position:relative;background:#0b0a10;overflow:hidden}
.zine-spread:not(.zine-single) .zine-open{aspect-ratio:2/3}
.zine-open picture{display:block;height:100%}
.zine-open img{display:block;width:100%;height:100%;object-fit:contain}
.zine-spread:not(.zine-single) .zine-page:first-child .zine-open{border-radius:6px 0 0 6px}
.zine-spread:not(.zine-single) .zine-page:last-child .zine-open{border-radius:0 6px 6px 0}
.zine-single .zine-open{border-radius:6px}
/* the fold: a soft shadow where the two pages meet */
.zine-spread:not(.zine-single) .zine-page:first-child .zine-open::after,
.zine-spread:not(.zine-single) .zine-page:last-child .zine-open::after{content:"";position:absolute;top:0;bottom:0;width:9%;pointer-events:none}
.zine-spread:not(.zine-single) .zine-page:first-child .zine-open::after{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.42))}
.zine-spread:not(.zine-single) .zine-page:last-child .zine-open::after{left:0;background:linear-gradient(270deg,transparent,rgba(0,0,0,.42))}
.zine-open:focus-visible{outline:2px solid #a8f0ff;outline-offset:3px;z-index:1}
.zine-page figcaption{margin-top:12px;padding:0 4px;font-size:13px;letter-spacing:.08em;color:var(--muted);text-align:center}
.zine-num{margin-right:10px;font-variant-numeric:tabular-nums;color:#c3b5ff}
@media (prefers-reduced-motion:no-preference){
  .zine-open img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .zine-open:hover img,.zine-open:focus-visible img{transform:scale(1.02)}
}
@media (max-width:700px){
  .zine-spread,.zine-single{grid-template-columns:minmax(0,480px);gap:clamp(36px,8vw,56px);filter:none}
  .zine-spread:not(.zine-single) .zine-open{aspect-ratio:auto;border-radius:6px!important}
  .zine-spread:not(.zine-single) .zine-open::after{display:none}
}

/* /ve/: the vector equilibrium, four canvas figures (src/js/ve.js) beside their text, alternating sides */
.ve-song{margin-top:14px;color:#cfccd8}
.ve-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,56px);align-items:center}
.ve-page section:nth-of-type(even) .ve-fig{order:1}
.ve-fig{width:100%;max-width:560px;justify-self:center}
.ve-cv{display:block;width:100%;height:auto;aspect-ratio:1;border:1px solid var(--line);border-radius:var(--radius);
  background:radial-gradient(circle,#0c0c11,#050507 70%);touch-action:pan-y;cursor:grab}
.ve-cv.ve-grab{cursor:grabbing}
.ve-fig figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;
  font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.ve-copy h2{margin-bottom:16px}
.ve-copy p{color:#cfccd8;margin-bottom:14px;max-width:60ch}
@media (max-width:860px){.ve-box{grid-template-columns:minmax(0,1fr)}.ve-page section:nth-of-type(even) .ve-fig{order:0}}