/* ---------- tokens ---------- */
:root{
  --bg:#060608; --bg2:#0e0e12; --ink:#f2efe9; --ink2:#cfcbc4; --mute:#8d8a94; --line:rgba(242,239,233,.12);
  --accent:#c9b8ff; --gut:clamp(16px,4vw,56px);
  --display:'Inter Tight',sans-serif; --body:'Space Grotesk',sans-serif; --mono:'JetBrains Mono',monospace;
  --brand:'Syne',sans-serif; --brand-w:600; --brand-ls:.34em;
  --ease:cubic-bezier(.2,.7,.2,1); --fast:.35s; --slow:.8s;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}  /* clip: no sideways scroll, and unlike hidden it does not make body a scroll box (which would stall the strips' scroll-driven parallax) */
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.wrap{padding:0 var(--gut)}
.cover{width:100%;height:100%;object-fit:cover}

/* ---------- page transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s var(--ease) both}
::view-transition-new(root){animation:vt-in .45s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
body{animation:page-in .6s var(--ease) both}
@keyframes page-in{from{opacity:0}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gut);transition:padding var(--fast)}
/* the frosted bar lives on a layer behind the nav: a blur on .nav itself would make it the frame for the
   fixed full-screen phone menu inside it, so iOS showed the menu squeezed into the bar, then jumped */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(8,12,24,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);opacity:0;transition:opacity var(--fast);pointer-events:none}
.nav.scrolled{padding-top:12px;padding-bottom:12px}
.nav.scrolled::before{opacity:1}
.brand{display:flex;align-items:center;gap:14px;font-family:var(--brand);font-weight:var(--brand-w);font-size:14px;letter-spacing:var(--brand-ls);text-transform:uppercase;white-space:nowrap}
.brand img{width:30px;height:30px;border-radius:50%}
.links{display:flex;gap:30px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.links a{position:relative;opacity:.72;transition:opacity var(--fast)}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.links a:hover,.links a.on{opacity:1}
.links a:hover::after,.links a.on::after{transform:scaleX(1);transform-origin:left}
.burger{display:none;width:28px;height:14px;position:relative}
.burger::before,.burger::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--ink);transition:transform var(--fast) var(--ease),top var(--fast)}
.burger::before{top:0}.burger::after{top:12px}
.menu-open .burger::before{top:6px;transform:rotate(45deg)}.menu-open .burger::after{top:6px;transform:rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:13px 22px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:transform .25s var(--ease),background var(--fast),color var(--fast),border-color var(--fast),box-shadow var(--fast)}
.btn-solid{background:var(--ink);color:var(--bg)}
.btn-solid:hover{box-shadow:0 0 0 6px rgba(242,239,233,.08),0 10px 40px -10px rgba(201,184,255,.5)}
.btn-ghost{border:1px solid var(--line);background:rgba(255,255,255,.03);backdrop-filter:blur(10px)}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);transition:transform .45s var(--ease)}
.btn-ghost:hover{color:var(--bg);border-color:var(--ink)}
.btn-ghost:hover::before{transform:none}
.btn:active{transform:scale(.965)}
.btn .arr{transition:transform var(--fast) var(--ease)}.btn:hover .arr{transform:translateX(4px)}
.btn-play::before{content:"";border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.btn-ghost.btn-play::before{position:static;inset:auto;transform:none;background:none;z-index:auto}
/* soft press glow — injected by JS at the click point */
.pulse{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(201,184,255,.55),rgba(201,184,255,0) 70%);transform:translate(-50%,-50%) scale(0);animation:pulse .7s var(--ease) forwards;z-index:3}
@keyframes pulse{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}*{animation-duration:.01s!important;transition-duration:.01s!important}}

/* ---------- headings ---------- */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:32px}
.head h2{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em}
.head h2 small{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.14em;vertical-align:super;margin-right:12px}
.sec{padding-top:110px}
.ptitle{padding:150px var(--gut) 36px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.ptitle h1{font-family:var(--display);font-weight:200;font-size:clamp(40px,5.6vw,80px);line-height:.95;letter-spacing:-.04em}
p{text-wrap:pretty}
.ptitle p{max-width:400px;color:var(--ink2);line-height:1.6;text-wrap:balance;text-wrap:pretty}
.link-more{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);transition:color var(--fast)}
.link-more:hover{color:var(--ink)}

/* ---------- media tiles (shared hover) ---------- */
.tile{position:relative;overflow:hidden;background:var(--bg2);cursor:zoom-in}
.tile img{transition:transform 1.1s var(--ease),opacity .6s var(--ease)}
.tile:hover img{transform:scale(1.04)}
.tile .ttl{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(0deg,rgba(8,12,24,.85),rgba(8,12,24,0));display:flex;justify-content:space-between;align-items:flex-end;opacity:0;transform:translateY(6px);transition:opacity var(--fast),transform var(--fast) var(--ease)}
.tile:hover .ttl{opacity:1;transform:none}
.tile .ttl b{font-family:var(--display);font-weight:400;font-size:15px}
img.lz{opacity:0}img.lz.ok{opacity:1}

/* ---------- hero (shared) ---------- */
.hero{position:relative;height:100vh;min-height:620px;max-height:1000px;overflow:hidden}
.hero-variant{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility .8s}
.hero-variant.on{opacity:1;visibility:visible}
.hero-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,12,24,.6) 0%,rgba(8,12,24,0) 25%,rgba(8,12,24,0) 50%,rgba(8,12,24,.95) 100%)}
.hero-copy{position:absolute;left:var(--gut);right:var(--gut);bottom:52px;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.hero-copy h1{font-family:var(--display);font-weight:200;font-size:clamp(46px,7.4vw,112px);line-height:.88;letter-spacing:-.045em}
.hero-copy .lead{max-width:430px;font-size:17px;line-height:1.5;margin-top:18px;color:#ddd9d2}
.hero-copy .mono{color:rgba(242,239,233,.8)}
.hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:16px}

/* C: world chooser (accordion) */
.chooser{position:absolute;inset:0;display:flex;gap:2px;padding-top:0}
.chooser a{position:relative;flex:1;overflow:hidden;transition:flex .8s var(--ease)}
.chooser a img{position:absolute;inset:0;transition:transform 1.2s var(--ease),filter .8s}
.chooser a:not(:hover) img{filter:saturate(.75) brightness(.7)}
.chooser a:hover{flex:2.4}
.chooser a:hover img{transform:scale(1.04)}
.chooser .lbl{position:absolute;left:22px;right:22px;bottom:40px;z-index:2}
.chooser .lbl b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(20px,2vw,30px);letter-spacing:-.01em;margin-top:8px;white-space:nowrap}
.chooser .lbl .go{display:inline-block;margin-top:14px;opacity:0;transform:translateY(8px);transition:all .5s var(--ease)}
.chooser a:hover .go{opacity:1;transform:none}
.chooser a::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,12,24,.9),rgba(8,12,24,0) 55%)}
.chooser .lbl{z-index:3}
.hero.c .hero-copy{display:none}
.c-title{position:absolute;top:110px;left:var(--gut);z-index:3}
.c-title .h1{font-family:var(--display);font-weight:200;font-size:clamp(34px,4vw,56px);letter-spacing:-.04em;line-height:1}

/* ---------- home: explore strip ---------- */
.explore{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.explore a{display:block}
.explore .pic{aspect-ratio:3/4;overflow:hidden;position:relative}
.explore .pic img{transition:transform 1.1s var(--ease)}
.explore a:hover .pic img{transform:scale(1.05)}
.explore h3{font-family:var(--display);font-weight:400;font-size:16px;margin:14px 0 4px;display:flex;justify-content:space-between}
.explore h3 span{transition:transform var(--fast) var(--ease)}.explore a:hover h3 span{transform:translateX(4px)}

/* horizontal rail */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin;scrollbar-color:#333 transparent}
.rail>*{flex:0 0 auto;scroll-snap-align:start}
.rail .tile{width:clamp(200px,20vw,300px);aspect-ratio:3/4}

/* games band */
.gband{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
.gcard{position:relative;overflow:hidden;display:block;background:var(--bg2)}
.gcard img{transition:transform 1.2s var(--ease)}
.gcard:hover img{transform:scale(1.04)}
.gcard .over{position:absolute;inset:auto 0 0 0;padding:24px;background:linear-gradient(0deg,rgba(8,12,24,.96) 10%,rgba(8,12,24,.55) 60%,rgba(8,12,24,0));display:flex;justify-content:space-between;align-items:flex-end;gap:18px}
.gcard h3{font-family:var(--display);font-weight:300;font-size:26px;letter-spacing:.01em;margin-top:6px}
.gcard p{color:var(--ink2);font-size:14.5px;max-width:420px;margin-top:4px}
.gcard .mono{color:rgba(242,239,233,.75)}
.gstack{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.gstack h3{font-size:20px}

/* films */
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fcard .tile{aspect-ratio:16/9;cursor:pointer}
.fcard h4{font-family:var(--display);font-weight:400;font-size:15px;margin-top:12px}
.playmark{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;border:1px solid rgba(255,255,255,.65);background:rgba(0,0,0,.25);backdrop-filter:blur(6px);transition:transform .5s var(--ease),background var(--fast)}
.playmark::after{content:"";position:absolute;left:22px;top:17px;border-left:14px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.tile:hover .playmark{transform:scale(1.12);background:rgba(255,255,255,.15)}

/* 3D artworks page */
.filters{display:flex;gap:8px;flex-wrap:wrap;padding:0 var(--gut) 30px}
.chip{border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);transition:all var(--fast)}
.chip:hover{border-color:rgba(242,239,233,.4);color:var(--ink)}
.chip.on{border-color:var(--accent);color:var(--accent);background:rgba(201,184,255,.07)}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;padding:0 var(--gut)}
.agrid .tile{aspect-ratio:3/4}
.agrid .tile.sq{aspect-ratio:3/4}
.agrid .tile img{width:100%;height:100%;object-fit:cover}
.agrid .tile.hide{display:none}
/* earlier works waiting for their turn (works.js): a slow lavender sweep */
.agrid .tile.wait::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(201,184,255,.07) 50%,transparent 70%) 0 0/250% 100%;animation:shim 1.8s linear infinite}
@keyframes shim{from{background-position:130% 0}to{background-position:-130% 0}}
@media (prefers-reduced-motion:reduce){.agrid .tile.wait::before{animation:none;background:none}}
.gstatus{display:flex;align-items:center;gap:12px;margin:26px var(--gut) 0;color:var(--mute);transition:opacity .8s var(--ease)}
.gstatus b{font-weight:400;color:var(--ink2)}
.gstatus i{flex:0 1 220px;height:1px;background:var(--line);position:relative;overflow:hidden}
.gstatus i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--accent);transition:width .4s var(--ease)}
.gstatus.gone{opacity:0}
.group-label{grid-column:1/-1;padding:30px 0 4px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:6px}
.group-label b{font-family:var(--display);font-weight:300;font-size:22px}

/* ai art grid */
.aigrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.aicard .tile{aspect-ratio:2/3}
.aicard h4{font-family:var(--display);font-weight:400;font-size:16px;margin-top:12px}
.aicard p{color:var(--mute);font-size:14px;margin-top:4px;line-height:1.5}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;display:none}
.lb.open{display:block}
.lb-bg{position:absolute;inset:0;background:rgba(4,4,6,.94);backdrop-filter:blur(8px);opacity:0;transition:opacity .45s var(--ease)}
.lb.show .lb-bg{opacity:1}
.lb-stage{position:absolute;inset:70px var(--gut) 90px}
.lb-img{position:absolute;object-fit:contain;transform-origin:0 0;will-change:transform}
.lb-frame{position:absolute;border:0;background:#000}
.lb-ui{position:absolute;left:var(--gut);right:var(--gut);bottom:26px;display:flex;justify-content:space-between;align-items:center;gap:20px;opacity:0;transform:translateY(8px);transition:all .45s var(--ease) .1s}
.lb.show .lb-ui{opacity:1;transform:none}
.lb-ui h3{font-family:var(--display);font-weight:300;font-size:22px}
.lb-nav{display:flex;gap:8px}
.lb-x{position:absolute;top:20px;right:var(--gut);opacity:0;transition:opacity .4s}
.lb.show .lb-x{opacity:1}
.iconbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:16px;transition:all var(--fast) var(--ease)}
.iconbtn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.iconbtn:active{transform:scale(.92)}

/* ---------- games page ---------- */
.feature{position:relative;margin:0 var(--gut);height:min(640px,70vh);overflow:hidden;background:radial-gradient(120% 90% at 0% 50%,#15101e 0%,var(--bg) 60%)}
.feature>img{position:absolute;top:0;bottom:0;left:36%;width:64%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%);mask-image:linear-gradient(90deg,transparent,#000 28%)}
.feature .in{position:absolute;z-index:2;left:clamp(20px,4vw,56px);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;max-width:460px;gap:18px}
.feature h2{font-family:var(--display);font-weight:200;font-size:clamp(40px,5vw,68px);line-height:.92;letter-spacing:-.03em}
.feature p{color:#d9d5ce;line-height:1.55}
.keys{display:flex;gap:6px;flex-wrap:wrap}
.key{font-family:var(--mono);font-size:10.5px;border:1px solid var(--line);border-radius:6px;padding:5px 9px;color:var(--ink2)}
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gtile .tile{aspect-ratio:16/10;cursor:pointer}
.gtile h3{font-family:var(--display);font-weight:300;font-size:22px;margin:14px 0 6px}
.gtile p{color:var(--ink2);font-size:15px;margin-bottom:16px}
.gtile{display:flex;flex-direction:column}
.gtile .acts{display:flex;gap:8px;margin-top:auto}  /* Play buttons line up across the row */

/* game player page */
.player-wrap{padding:110px var(--gut) 0;display:grid;grid-template-columns:1fr 320px;gap:28px}
.screen{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);overflow:hidden}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.screen .start{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer}
.screen .start img{position:absolute;inset:0;filter:brightness(.55)}
.screen .start .btn{position:relative}
/* game pages: a slim strip right under the game screen: one row of small thumbnails, scroll sideways for more */
.concepts{margin-top:22px;min-width:0}
.concepts-k{color:var(--mute);margin-bottom:10px}
.crail{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:#333 transparent}
.crail .tile{flex:0 0 auto;height:96px;aspect-ratio:var(--ar);border-radius:2px}
.crail .tile img{width:100%;height:100%;object-fit:cover}
.cvid{display:inline-flex;gap:12px;align-items:center;cursor:pointer}
.cvid img{width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:2px;border:1px solid var(--line)}
.cvid b{display:block;font-family:var(--display);font-weight:400;font-size:15px;margin-bottom:4px}
.cvid .mono{color:var(--mute)}
.cvid:hover b{color:var(--accent)}
.player-wrap>div:first-child{min-width:0}
/* in-page fullscreen (iPhone has no element fullscreen) */
.screen.full{position:fixed;inset:0;z-index:2000;width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;border:0;touch-action:none;overscroll-behavior:none}
.screen .fs-x{display:none;position:absolute;z-index:3;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:17px;line-height:40px;text-align:center}
.screen.full .fs-x{display:block}
html.game-full,html.game-full body{overflow:hidden;overscroll-behavior:none}
.bar{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-top:0;padding:10px 14px}
.bar .r{display:flex;gap:8px}
/* phones: keep status + both buttons inside the frame */
@media (max-width:520px){.bar{gap:8px;padding:8px 10px}.bar #status{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar .r{gap:6px;flex-shrink:0}.bar .btn{padding:9px 12px;font-size:10px}}
.side h1{font-family:var(--display);font-weight:300;font-size:32px;margin:8px 0 12px}
.side p{color:var(--ink2);line-height:1.6;margin-bottom:22px}
.spec>div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec{border-top:1px solid var(--line)}

/* about / shop */
.about{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:center}
.about .pic{aspect-ratio:4/5;overflow:hidden}
.quote{font-family:var(--display);font-weight:300;font-size:clamp(20px,2.2vw,28px);line-height:1.38;letter-spacing:-.01em}
.quote em{font-style:normal;color:var(--accent)}
.shopgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shopcard{border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;gap:10px;transition:border-color var(--fast),background var(--fast)}
.shopcard:hover{border-color:rgba(242,239,233,.35);background:rgba(255,255,255,.02)}
.shopcard h3{font-family:var(--display);font-weight:300;font-size:24px}
.shopcard p{color:var(--ink2);font-size:15px;flex:1}

/* footer */
.foot{margin-top:130px;border-top:1px solid var(--line);padding:50px var(--gut) 34px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
.foot h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:12px;font-weight:400}
.foot li{list-style:none;margin:7px 0;font-size:15px}
.foot li a{opacity:.85;transition:opacity var(--fast)}.foot li a:hover{opacity:1}
.foot .big{font-family:var(--display);font-weight:200;font-size:clamp(30px,3.4vw,46px);line-height:1;letter-spacing:-.03em;margin-bottom:22px}
.legal{padding:0 var(--gut) 34px;display:flex;justify-content:space-between}


/* ---------- mobile ---------- */
@media (max-width:900px){
  .links{position:fixed;inset:0;background:rgba(8,12,24,.97);flex-direction:column;justify-content:center;align-items:center;gap:26px;font-size:15px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
  .menu-open .links{opacity:1;visibility:visible}
  .burger{display:block;z-index:60}
  .explore{grid-template-columns:repeat(3,1fr)}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .ggrid{grid-template-columns:1fr}
  .gband{grid-template-columns:1fr}.gband>.gcard{height:440px!important}.gstack .gcard{height:240px}
  .player-wrap{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:28px}
  .shopgrid{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}
  .ptitle{flex-direction:column;align-items:flex-start;gap:16px;padding-top:120px}
  .feature>img{left:0;width:100%;-webkit-mask-image:linear-gradient(0deg,transparent 20%,#000 70%);mask-image:linear-gradient(0deg,transparent 20%,#000 70%)}
  .feature .in{justify-content:flex-end;padding-bottom:28px;right:20px}
  .chooser{flex-direction:column}.chooser .lbl{bottom:14px}.chooser .lbl .go{display:none}.c-title{display:none}

  .hero-copy{flex-direction:column;align-items:flex-start}.hero-side{align-items:flex-start}
}
@media (max-width:560px){
  .explore{grid-template-columns:repeat(2,1fr)}
  .agrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .fgrid{grid-template-columns:1fr}
  .gcard .over{flex-direction:column;align-items:flex-start}
  .legal{flex-direction:column;gap:6px}
}

/* ===== v3 additions ===== */
/* home C: panels cross-fade through their images */
.chooser .panel img{opacity:0;transition:opacity 1.6s var(--ease),transform 1.2s var(--ease),filter .8s}
.chooser .panel img.on{opacity:1}
.c-title .h1{font-family:var(--display);font-weight:200;font-size:clamp(30px,3.4vw,48px);letter-spacing:-.04em;line-height:1;margin-top:10px}

/* smaller portrait blocks */
.about-sm{grid-template-columns:minmax(180px,280px) 1fr;gap:48px}
.about-sm .pic{aspect-ratio:4/5;max-width:280px}

/* About: story rows */
.story{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:56px;align-items:center;padding-top:90px}
.story.flip{grid-template-columns:1fr minmax(220px,380px)}
.story.flip .pic{order:2}
.story .pic{aspect-ratio:1;overflow:hidden}
.story h2{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em;margin:10px 0 16px}
.story p{color:var(--ink2);line-height:1.7;max-width:620px;margin-bottom:12px}
.story .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.quote-sm{font-family:var(--display);font-weight:300;font-size:clamp(18px,1.7vw,22px)!important;line-height:1.45!important;color:var(--ink)!important}
a.ext{color:var(--ink);border-bottom:1px solid rgba(201,184,255,.45);transition:border-color var(--fast),color var(--fast)}
a.ext:hover{color:var(--accent);border-color:var(--accent)}

/* AI Studio intro */
.ai-intro{padding:140px var(--gut) 50px;display:grid;grid-template-columns:1fr minmax(200px,320px);gap:56px;align-items:end}
.ai-intro h1{font-family:var(--display);font-weight:200;font-size:clamp(40px,5.6vw,80px);line-height:.95;letter-spacing:-.04em}
.ai-intro p{max-width:540px;color:var(--ink2);line-height:1.65;margin-top:22px}
.ai-intro .pic{aspect-ratio:2/3;overflow:hidden}
.chips-wrap{display:flex;flex-wrap:wrap;gap:8px}

/* project pages: masonry + prose */
.proj{max-width:760px;margin-bottom:44px}
.prose p{color:var(--ink2);line-height:1.75;margin-bottom:14px;overflow-wrap:anywhere}
.prose h3{font-family:var(--display);font-weight:400;font-size:19px;margin:30px 0 10px;color:var(--ink)}
.essay{max-width:720px;margin:0 auto}
.essay-gal{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:50px}
.essay-gal .tile{aspect-ratio:3/4}
.mgrid{columns:4 240px;column-gap:12px}
.mgrid .mtile{display:block;break-inside:avoid;margin-bottom:12px}
.mgrid .mtile img{width:100%;height:auto;object-fit:initial}
.pnav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:70px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}
.note{color:var(--mute);font-size:14px;border:1px dashed var(--line);padding:14px 18px;margin-top:20px}
.fgrid-sm{grid-template-columns:repeat(5,1fr);gap:12px}
.fgrid-sm h4{font-size:13.5px}
.side .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.side .shots .tile{aspect-ratio:16/9}
.side .shots img{width:100%;height:100%;object-fit:cover}
.lb-img{object-fit:contain}

@media (max-width:900px){
  .story,.story.flip{grid-template-columns:1fr;gap:24px;padding-top:60px}.story.flip .pic{order:0}.story .pic{max-width:420px}
  .ai-intro{grid-template-columns:1fr;padding-top:120px}.ai-intro .pic{max-width:260px}
  .about-sm{grid-template-columns:1fr}
  .fgrid-sm{grid-template-columns:repeat(3,1fr)}
  .essay-gal{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){.fgrid-sm{grid-template-columns:repeat(2,1fr)}.mgrid{columns:2}}
/* 7 menu items: collapse to the burger menu sooner */
.links{gap:clamp(18px,2vw,30px)}
@media (max-width:1180px){
  .links{position:fixed;inset:0;background:rgba(8,12,24,.97);flex-direction:column;justify-content:center;align-items:center;gap:26px;font-size:15px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
  .menu-open .links{opacity:1;visibility:visible}
  .burger{display:block;z-index:60}
}
/* the scrolled bar's blur would trap the fixed full-screen menu inside the bar, so drop it while the menu is open */
.menu-open .nav::before{opacity:0}
html:has(body.menu-open),body.menu-open{overflow:hidden}
section[id]{scroll-margin-top:90px}
.tile{display:block}
/* opener video clips behave like the panel images */
.chooser .panel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s var(--ease),transform 1.2s var(--ease),filter .8s}
.chooser .panel video.on{opacity:1}
.chooser a:not(:hover) video{filter:saturate(.8) brightness(.72)}
.chooser a:hover video{transform:scale(1.04)}
/* 3D Artworks: how they're made */
.made{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 var(--gut) 28px}
.made-k{margin-right:6px}
.noai{margin-left:6px;border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:5px 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.ptitle p strong{color:var(--ink);font-weight:500}
/* AI Studio: widescreen film banner */
.banner{position:relative;height:min(78vh,760px);min-height:460px;overflow:hidden;background:#000}
.banner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,24,.55) 0%,rgba(8,12,24,0) 22%,rgba(8,12,24,0) 45%,rgba(8,12,24,.92) 100%),linear-gradient(90deg,rgba(8,12,24,.55),rgba(8,12,24,0) 55%)}
.banner-in{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:48px;max-width:620px}
.banner-in .mono{color:rgba(242,239,233,.8)}
.banner-in h1{font-family:var(--display);font-weight:200;font-size:clamp(40px,5.6vw,80px);line-height:.95;letter-spacing:-.04em;margin-top:14px}
.banner-in p{color:#dcd8d1;line-height:1.6;margin-top:16px;max-width:540px}
.banner-in .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.banner + .wrap{padding-top:70px}
@media (max-width:560px){.banner-in p{display:none}}
[hidden]{display:none!important}
.lb-x{z-index:3;transition:opacity .4s,left .45s var(--ease),top .45s var(--ease)}
/* logo medallion: slightly larger, with a bevelled 3D rim */
.brand .logo{position:relative;flex:none;width:36px;height:36px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(201,184,255,.38),0 0 0 3px rgba(8,12,24,.9),0 0 0 4px rgba(242,239,233,.10),0 6px 16px rgba(0,0,0,.65),0 0 22px rgba(201,184,255,.16);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.brand .logo img{width:100%;height:100%;border-radius:50%;display:block}
.brand .logo::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.38),rgba(255,255,255,.06) 32%,rgba(255,255,255,0) 52%),radial-gradient(circle at 70% 85%,rgba(0,0,0,.45),rgba(0,0,0,0) 55%);
  box-shadow:inset 0 1.5px 2px rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
.brand:hover .logo{transform:perspective(200px) rotateX(10deg) rotateY(-14deg) scale(1.06);
  box-shadow:0 0 0 1px rgba(201,184,255,.6),0 0 0 3px rgba(8,12,24,.9),0 0 0 4px rgba(242,239,233,.14),0 8px 20px rgba(0,0,0,.7),0 0 28px rgba(201,184,255,.32)}
/* lightbox caption under the image */
.lb-stage{bottom:20px}  /* the caption row's room is reserved under the image in site.js */
@media (min-width:900px){.lb-stage{top:20px;bottom:12px}}  /* laptops/desktops: the close button sits beside the image, so little room is needed above */
.lb-ui{right:auto;bottom:auto;transform-origin:0 0;transition:opacity .45s var(--ease) .1s,transform .45s var(--ease) .1s}
.lb-ui h3{font-size:19px;margin-top:2px}
.lb-ui .iconbtn{width:38px;height:38px}
.banner-in .tagline{font-family:var(--display);font-weight:300;font-size:clamp(18px,1.8vw,24px);color:var(--ink);margin-top:10px;letter-spacing:-.01em}
/* About: one aligned column instead of zigzag — image left, text right, tighter rhythm */
.story,.story.flip{grid-template-columns:minmax(160px,240px) 1fr;gap:44px;align-items:start;padding:44px 0;border-top:1px solid var(--line);max-width:1080px}
.story.flip .pic{order:0}
.story:first-of-type{margin-top:70px}
.story h2{margin:8px 0 12px;font-size:clamp(22px,2.2vw,28px)}
.story .pic{aspect-ratio:1;border-radius:2px}
@media (max-width:900px){.story,.story.flip{grid-template-columns:110px minmax(0,1fr);gap:20px;padding:32px 0}.story .txt{overflow-wrap:anywhere}}
@media (max-width:560px){.story,.story.flip{grid-template-columns:minmax(0,1fr)}.story .pic{max-width:160px}}
.mail{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mail .btn{text-transform:none;letter-spacing:.04em;font-size:13px}.copy.done{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.shop-top{display:flex;align-items:center;gap:14px;margin-bottom:6px}.shop-ico{width:56px;height:56px;border-radius:12px;object-fit:cover;box-shadow:0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .5s}.shopcard:hover .shop-ico{transform:scale(1.06);box-shadow:0 0 0 1px rgba(201,184,255,.5),0 0 20px rgba(201,184,255,.18)}
/* Displate print link */
.lb-buy{padding:10px 16px;font-size:10.5px}
.buy-tag{position:absolute;top:10px;right:10px;padding:4px 9px;border-radius:999px;background:rgba(8,12,24,.6);backdrop-filter:blur(8px);border:1px solid rgba(201,184,255,.4);color:var(--accent);font-size:9.5px;opacity:0;transform:translateY(-4px);transition:opacity var(--fast),transform var(--fast) var(--ease)}
.tile:hover .buy-tag{opacity:1;transform:none}
.group-label.hide{display:none}
.lb-puzzle{padding:10px 16px;font-size:10.5px}
/* Art Explorations: video beside its text */
.vlist{max-width:1080px}
.vgroup{margin-bottom:30px}
.vgroup .head{margin-top:40px}
.vgroup .head h2 small{display:none}
.vrow{display:grid;grid-template-columns:minmax(220px,400px) 1fr;gap:36px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.vrow .tile{aspect-ratio:16/9;cursor:pointer}
.vrow h3{font-family:var(--display);font-weight:300;font-size:clamp(20px,2vw,26px);margin:8px 0 10px;letter-spacing:-.01em}
.vrow p{color:var(--ink2);line-height:1.7;max-width:560px}
@media (max-width:760px){.vrow{grid-template-columns:1fr;gap:16px}}
/* social links with icons */
.soc{display:inline-flex;align-items:center;gap:10px}
.soc .ico{opacity:.75;transition:opacity var(--fast),transform .4s var(--ease),color var(--fast)}
.soc:hover .ico{opacity:1;color:var(--accent);transform:translateY(-1px) scale(1.08)}
.soc-h{display:flex;align-items:center;gap:10px}
.soc-h .ico{color:var(--accent)}
/* image banner (Music) with a slow drift */
.banner-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:bannerdrift 26s ease-in-out infinite alternate}
@keyframes bannerdrift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
@media (prefers-reduced-motion:reduce){.banner-img img{animation:none}}
/* Music: featured player + strip of next videos */
.mplayer video{opacity:0;transition:opacity 1.2s var(--ease)}
.mplayer video.on{opacity:1}
.mstrip{position:absolute;z-index:3;right:var(--gut);bottom:44px;display:flex;gap:10px}
.mstrip button{position:relative;width:132px;text-align:left;opacity:.6;transition:opacity var(--fast),transform .4s var(--ease)}
.mstrip button img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(242,239,233,.18);transition:box-shadow var(--fast)}
.mstrip button span{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mstrip button:hover{opacity:.9;transform:translateY(-2px)}
.mstrip button.on{opacity:1}
.mstrip button.on img{box-shadow:0 0 0 1.5px var(--accent),0 0 18px rgba(201,184,255,.35)}
@media (max-width:1180px){.mstrip button{width:104px}}
@media (max-width:900px){
  .mplayer{height:auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding-top:56vw}
  .mplayer .banner-in{position:relative;left:auto;right:auto;bottom:auto;padding:0 var(--gut);margin-top:-30px}
  .mstrip{position:relative;right:auto;bottom:auto;overflow-x:auto;padding:22px var(--gut) 8px}
  .mstrip button{flex:0 0 120px}
}
@media (min-width:901px){
  .mplayer{height:min(84vh,820px)}
  .mplayer .banner-in{bottom:168px}
  .mstrip{left:var(--gut);right:auto;bottom:36px}
  .mstrip button{width:150px}
}
/* lightbox caption: one row under the image, as wide as the image (site.js places and scales it) -
   title + label on the left, counter + shop buttons + arrows on the right */
.lb-ui{align-items:center;flex-wrap:nowrap;gap:24px}
.lb-ui.non .lb-n{display:none}
.lb-cap{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:16px;flex-wrap:nowrap}
.lb-cap:has(.lb-desc:not([hidden])){flex-wrap:wrap}  /* only a video's description goes on a line of its own */
.lb-cap .lb-t{order:1;flex:0 1 auto;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-cap .lb-sub{order:2;flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-cap .lb-sr{order:3}
.lb-cap .lb-desc{order:4;flex:1 1 100%}  /* a video's description goes on its own line under the title */
.lb-act{flex:0 0 auto;display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.lb-as{padding:10px 16px;font-size:10.5px}
/* SuperRare (not shown at the moment): a quiet text link, not a button */
.lb-sr{display:inline-block;color:var(--mute);font-size:10px;letter-spacing:.08em;border-bottom:1px solid transparent;transition:color var(--fast),border-color var(--fast)}
.lb-sr:hover{color:var(--accent);border-color:var(--accent)}
.lb-sr[hidden]{display:none}
/* laptops (MacBook Air/Pro and similar): a lighter, smaller caption row */
@media (min-width:641px) and (max-width:1700px){
  .lb-ui{gap:16px}
  .lb-cap{gap:12px}
  .lb-ui h3.lb-t{font-size:15px}
  .lb-cap .lb-sub,.lb-act .lb-n{font-size:9px}
  .lb-act{gap:7px}
  .lb-buy,.lb-as,.lb-puzzle{padding:7px 11px;font-size:8.5px;letter-spacing:.06em}
  .lb-ui .iconbtn{width:30px;height:30px}
}
/* phones: compact shop buttons; no counter/arrows (swipe the image) */
@media (max-width:640px){
  .lb-stage{bottom:14px}
  .lb-ui{gap:10px}
  .lb-ui h3.lb-t{font-size:15px}
  .lb-act{gap:6px}
  .lb-act .lb-n,.lb-act .lb-nav,.lb-cap .lb-sub{display:none}
  .lb-buy,.lb-as,.lb-puzzle{padding:7px 9px;font-size:8.5px;letter-spacing:.04em}
}
.lb-desc{max-width:720px;margin-top:8px}
.lb-desc p{color:var(--ink2);font-size:13.5px;line-height:1.6;white-space:pre-line;max-height:3.2em;overflow:hidden;transition:max-height .45s var(--ease)}
.lb-desc.open p{max-height:40vh;overflow-y:auto;padding-right:8px}
.lb-more{margin-top:4px;color:var(--accent);font-size:10.5px}
.lb-more:hover{color:var(--ink)}
@media (min-width:901px){.mstrip{right:var(--gut);overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.mstrip::-webkit-scrollbar{display:none}.mstrip button{flex:0 0 150px}}
/* Contact form */
.contact-wrap{padding:150px var(--gut) 0;display:grid;grid-template-columns:minmax(260px,420px) minmax(0,680px);gap:clamp(40px,7vw,110px);align-items:start}
.contact-intro h1{font-family:var(--display);font-weight:200;font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.04em}
.contact-intro p{color:var(--ink2);line-height:1.65;margin-top:20px}
.contact-soc{display:flex;flex-direction:column;gap:12px;margin-top:36px;font-size:15px}
.cform{display:flex;flex-direction:column;gap:18px}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.topics .chip{cursor:pointer;position:relative}
.topics input{position:absolute;opacity:0;pointer-events:none}
.topics .chip:has(input:checked){border-color:var(--accent);color:var(--accent);background:rgba(201,184,255,.07)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{position:relative;display:block}
.fld input,.fld textarea{width:100%;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:12px;color:var(--ink);font:inherit;font-size:16px;padding:24px 16px 10px;outline:none;resize:vertical;transition:border-color var(--fast),background var(--fast),box-shadow var(--fast)}
.fld textarea{min-height:170px}
.fld span{position:absolute;left:17px;top:17px;color:var(--mute);font-size:15px;pointer-events:none;transform-origin:left top;transition:transform .3s var(--ease),color .3s}
.fld input:focus,.fld textarea:focus{border-color:rgba(201,184,255,.6);background:rgba(255,255,255,.04);box-shadow:0 0 0 4px rgba(201,184,255,.08)}
.fld input:focus+span,.fld textarea:focus+span,.fld input:not(:placeholder-shown)+span,.fld textarea:not(:placeholder-shown)+span{transform:translateY(-10px) scale(.74);color:var(--accent)}
.fld.bad input,.fld.bad textarea{border-color:rgba(255,120,140,.6)}
.fld.bad span{color:#ff8fa3}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cform-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:4px}
.cform-status{color:#ff8fa3;text-transform:none;letter-spacing:.02em;font-size:12px}
.cform button[disabled]{opacity:.6;cursor:wait}
.cform-done{padding:40px 0}
.cform-done h3{font-family:var(--display);font-weight:200;font-size:44px;letter-spacing:-.03em}
.cform-done p{color:var(--ink2);margin-top:12px}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr;padding-top:120px}.row2{grid-template-columns:1fr}.contact-soc{flex-direction:row;flex-wrap:wrap;gap:18px}}
/* Games: gameplay player */
.gplayer{margin:0 var(--gut);border-radius:2px}
.gplayer video{opacity:0;transition:opacity 1.2s var(--ease)}
.gplayer video.on{opacity:1}
.gplayer .banner-in{display:grid;max-width:560px}
.gp-info{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .7s var(--ease),transform .7s var(--ease),visibility .7s}
.gp-info.on{opacity:1;visibility:visible;transform:none}
.gp-info h2{font-family:var(--display);font-weight:200;font-size:clamp(38px,4.6vw,64px);line-height:.95;letter-spacing:-.03em;margin:10px 0 12px}
.gp-info p{color:#dcd8d1;line-height:1.55;margin-bottom:14px}
.gp-info .acts{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.gstrip button{width:170px}
@media (min-width:901px){.gplayer{height:min(80vh,780px)}.gplayer .banner-in{bottom:170px}.gstrip{left:var(--gut);right:auto;bottom:34px}}
@media (max-width:900px){
  .gplayer{margin:0;height:auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding-top:56vw}
  .gplayer .banner-in{position:relative;left:auto;right:auto;bottom:auto;padding:0 var(--gut);margin-top:-24px}
  .gstrip{position:relative;padding:20px var(--gut) 6px;overflow-x:auto}.gstrip button{flex:0 0 130px}
}
/* essay media */
.evid{margin:22px 0 30px}
.evid .tile{aspect-ratio:16/9;cursor:pointer;border-radius:2px}
.evid figcaption{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-family:var(--display);font-size:16px;color:var(--ink)}
.eimgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:22px 0 30px}
.eimgs .tile{aspect-ratio:3/4}
.eimgs .tile img{width:100%;height:100%;object-fit:cover}
/* essay media groups */
.evids{display:grid;gap:18px;margin:26px 0 36px}
.evids.n2{grid-template-columns:1fr 1fr}
.evids .evid{margin:0}
.evids.n2 .evid figcaption{font-size:14.5px}
.eimgs.n5{grid-template-columns:repeat(5,1fr);gap:8px}
.eimgs.n1{grid-template-columns:1fr}
.eimgs.n1 .tile{aspect-ratio:2/1}
.essay{max-width:780px}
@media (max-width:560px){.evids.n2{grid-template-columns:1fr}.eimgs.n5{grid-template-columns:repeat(3,1fr)}}
.crail .ctile-v span{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:999px;background:rgba(8,12,24,.7);color:var(--ink);font-size:9.5px}

/* =====================================================================
   galaxy-eggs.com: on top of the shared galbarkan.com design system
   ===================================================================== */
:root{--bg:#080c18;--bg2:#10162a;--gold:#e8c987}
.nav-soc{display:flex;gap:14px;align-items:center;margin-left:8px;padding-left:22px;border-left:1px solid var(--line)}
.nav-soc .soc .ico{opacity:.7}
@media (max-width:1180px){.nav-soc{margin:10px 0 0;padding:16px 0 0;border-left:0;border-top:1px solid var(--line);gap:22px}}
@media (min-width:1181px){.links{align-items:center}}

/* home: vertical video strips */
/* like galbarkan.com's opener (capped at 1000px), and a little short of the full screen, so the next section
   always peeks in and it's clear there is more below */
.hero.ge{height:88vh;max-height:1000px;min-height:600px}
.hero.ge+.coll{padding-top:44px}  /* the Galaxy Eggs headline is what peeks in under the opener */
.hero.ge .chooser{gap:3px;flex-direction:row}
.hero.ge .chooser a:hover{flex:1.9}
.hero.ge .chooser .lbl{bottom:34px;left:20px;right:16px}
.hero.ge .chooser .lbl b{font-size:clamp(17px,1.6vw,24px);white-space:normal;line-height:1.15}
.hero.ge .hero-shade{background:radial-gradient(70% 55% at 50% 47%,rgba(8,12,24,.62),rgba(8,12,24,0) 75%),linear-gradient(180deg,rgba(8,12,24,.7) 0%,rgba(8,12,24,0) 22%,rgba(8,12,24,0) 62%,rgba(8,12,24,.9) 100%)}
.ge-title{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-56%);width:min(92vw,760px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;pointer-events:none}
.ge-title>*{animation:ge-in 1.4s var(--ease) both}
.ge-title>:nth-child(2){animation-delay:.12s}.ge-title>:nth-child(3){animation-delay:.3s}.ge-title>:nth-child(4){animation-delay:.45s}
@keyframes ge-in{from{opacity:0;transform:translateY(16px);filter:blur(6px)}}
.ge-title h1 img{width:clamp(250px,44vw,640px);height:auto;filter:drop-shadow(0 6px 30px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(201,184,255,.18))}
.ge-title .mono{color:rgba(242,239,233,.85)}
.ge-title .prod{letter-spacing:.2em;font-size:10.5px;color:var(--gold)}
.ge-title .acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;pointer-events:auto;margin-top:6px}
@media (max-width:900px){
  .hero.ge{height:88svh;min-height:540px}
  .hero.ge .chooser .lbl{bottom:16px;left:10px;right:8px}.hero.ge .chooser .lbl .mono{display:none}
  .hero.ge .chooser .lbl b{font-size:13px}
}
@media (max-width:600px){.hero.ge .chooser .panel:nth-child(n+4){display:none}.hero.ge .chooser .lbl b{font-size:12px}}

/* Galaxy Eggs x Galaxy Warriors band */
.duo{padding-top:96px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px}
.duo-logos{display:flex;align-items:center;gap:clamp(18px,4vw,54px)}
.duo-logos img{width:clamp(110px,13vw,170px);height:auto;transition:transform 1s var(--ease),filter .8s}
.duo-logos img:hover{transform:translateY(-4px) scale(1.04);filter:drop-shadow(0 0 22px rgba(201,184,255,.35))}
.x{font-family:var(--display);font-weight:200;font-size:clamp(28px,3vw,44px);color:var(--accent);opacity:.8}
.duo-txt{max-width:600px;color:var(--ink2);line-height:1.65}
.duo-partners{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px);flex-wrap:wrap;justify-content:center}
.duo-partners img{height:clamp(26px,2.8vw,40px);width:auto}
.duo-partners .x{font-size:clamp(22px,2.2vw,30px)}
.duo-logos{padding-top:30px;border-top:1px solid var(--line)}
/* home: press quote and exhibitions, two matching cards under the partnership */
.press{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-top:80px}
.pcard{display:grid;grid-template-columns:clamp(110px,10vw,150px) minmax(0,1fr);gap:clamp(18px,2vw,28px);align-items:start;padding:clamp(20px,2.4vw,32px);border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,rgba(201,184,255,.05),rgba(8,12,24,0) 60%)}
.pcard .pic{aspect-ratio:1;overflow:hidden;border-radius:4px}
.pcard .mono{color:var(--accent)}
.pcard h2{font-family:var(--display);font-weight:300;font-size:clamp(21px,1.9vw,27px);letter-spacing:-.02em;line-height:1.15;margin:8px 0 14px}
.pcard p{color:var(--ink2);font-size:14.5px;line-height:1.7;margin-bottom:10px}
.pcard .quote-sm{font-size:clamp(16px,1.35vw,18.5px)!important}
.pcard .press-by{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pcard .acts{margin-top:14px}
@media (max-width:1000px){.press{grid-template-columns:1fr}}
@media (max-width:560px){.pcard{grid-template-columns:1fr}.pcard .pic{width:120px}}
/* SuperRare collection: the wordmark is the heading */
.sr-logo{display:block;transition:transform .8s var(--ease),filter .8s var(--ease)}
.sr-logo img{width:clamp(220px,30vw,420px);height:auto}
.sr-logo:hover{transform:translateY(-3px);filter:drop-shadow(0 0 26px rgba(201,184,255,.4))}

/* collections: headline, text, full-bleed strip, rail */
.coll{padding-top:120px}
.coll-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;margin-bottom:46px}
.coll-head .headline{width:clamp(220px,34vw,460px);height:auto}
.coll-head p{color:var(--ink2);font-size:17px}
.coll-head .acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn.sr{padding:9px 20px}.btn.sr img{height:19px;width:auto;transition:filter var(--fast)}.btn.sr:hover img{filter:invert(1)}
/* wide strips. The strip dissolves into the page at top and bottom (a mask, eased over about a third of
   its height), with a light wash of the page colour so the art sits in the page rather than on top of it.
   Parallax ("reveal", as on the old Wix site): on computers and landscape tablets the image is fixed to the
   screen and the strip is a window sliding over it (clip-path clips the fixed image to the strip). Nothing is
   animated, the browser's own scrolling does it all, so it cannot shake, even when the scrollbar is dragged.
   (Moving the image from a script, or with a scroll-driven animation, lagged a frame behind and shook.)
   (This pinned version is only the fallback for browsers without scroll-driven animations; see below.) */
.wide{--H:max(300px,min(84vh,62vw));position:relative;height:var(--H);overflow:hidden;margin-bottom:40px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.18) 8%,rgba(0,0,0,.55) 18%,rgba(0,0,0,.88) 28%,#000 36%,#000 64%,rgba(0,0,0,.88) 72%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.18) 92%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.18) 8%,rgba(0,0,0,.55) 18%,rgba(0,0,0,.88) 28%,#000 36%,#000 64%,rgba(0,0,0,.88) 72%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.18) 92%,transparent 100%)}
.wide img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.wide::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,rgba(8,12,24,0) 55%,rgba(8,12,24,.45) 100%)}
.wide+.wrap{margin-top:-30px;position:relative}
.wide.eggs{--H:max(300px,min(92vh,84vw))}
.wide.lineup{--H:max(300px,min(80vh,60vw))}
.wide.lineup img{object-position:50% 40%}
.wide.bio{--H:max(300px,min(76vh,56vw));margin:130px 0 0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 7%,rgba(0,0,0,.3) 16%,rgba(0,0,0,.62) 26%,rgba(0,0,0,.9) 36%,#000 44%,#000 56%,rgba(0,0,0,.9) 64%,rgba(0,0,0,.62) 74%,rgba(0,0,0,.3) 84%,rgba(0,0,0,.08) 93%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 7%,rgba(0,0,0,.3) 16%,rgba(0,0,0,.62) 26%,rgba(0,0,0,.9) 36%,#000 44%,#000 56%,rgba(0,0,0,.9) 64%,rgba(0,0,0,.62) 74%,rgba(0,0,0,.3) 84%,rgba(0,0,0,.08) 93%,transparent 100%)}
/* the bright cyan city sits deeper in the page: a little more see-through, washed with the page's blue, darker at the sides */
.wide.bio img{opacity:.86}
.wide.bio::after{background:radial-gradient(130% 100% at 50% 50%,rgba(8,12,24,0) 55%,rgba(8,12,24,.5) 100%),linear-gradient(0deg,rgba(8,12,24,.1),rgba(8,12,24,.1))}
@media (max-width:760px){.wide{min-height:0}.wide.eggs{--H:84vw}.wide.lineup{--H:62vw}.wide.bio{--H:60vw;margin-top:90px}}
@media (orientation:landscape) and (prefers-reduced-motion:no-preference){
  /* fallback ("reveal"): the image held still on the screen while the strip slides over it */
  .wide{clip-path:inset(0)}
  .wide img{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh}
}
/* Real parallax on computers and landscape tablets: the image drifts at half the page's speed. A scroll-driven
   animation written with plain values only. With var() in the keyframes Chrome ran it on the main thread, a
   frame behind the scrollbar (that was the shaking); with fixed values it runs inside the scroll itself.
   Strip heights are fixed in vh here. Landscape windows of any size drift at half speed; upright windows and
   phones drift gently (15%), since a wide picture would be cropped too much for a stronger move there.
   For a strip of height H whose image lags by k of the scroll: image height 100k + (1-k)H, top
   100(1-k) - 100 + T, travelling ±T = k(100 + H)/2 across the strip's pass through the screen (all in vh,
   plus 1vh spare at each end). */
@supports (animation-timeline:view()){
  @media (orientation:portrait) and (prefers-reduced-motion:no-preference){
    .wide{clip-path:none;view-timeline:--wide block}
    .wide img{position:absolute;width:100%;will-change:transform;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--wide;animation-range:cover 0% cover 100%}
    .wide.eggs{height:42vh}   .wide.eggs img{height:52.7vh;top:-5.35vh;animation-name:par-eggs-p}
    .wide.lineup{height:32vh} .wide.lineup img{height:44.2vh;top:-6.1vh;animation-name:par-lineup-p}
    .wide.bio{height:30vh}    .wide.bio img{height:42.5vh;top:-6.25vh;animation-name:par-bio-p}
  }
  @media (orientation:landscape) and (prefers-reduced-motion:no-preference){
    .wide{clip-path:none;view-timeline:--wide block}
    .wide img{position:absolute;width:100%;will-change:transform;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--wide;animation-range:cover 0% cover 100%}
    .wide.eggs{height:92vh}   .wide.eggs img{height:98vh;top:-3vh;animation-name:par-eggs}
    .wide.lineup{height:80vh} .wide.lineup img{height:92vh;top:-6vh;animation-name:par-lineup}
    .wide.bio{height:76vh}    .wide.bio img{height:90vh;top:-7vh;animation-name:par-bio}
  }
}
@keyframes par-eggs{from{transform:translate3d(0,-48vh,0)}to{transform:translate3d(0,48vh,0)}}
@keyframes par-lineup{from{transform:translate3d(0,-45vh,0)}to{transform:translate3d(0,45vh,0)}}
@keyframes par-bio{from{transform:translate3d(0,-44vh,0)}to{transform:translate3d(0,44vh,0)}}
@keyframes par-eggs-p{from{transform:translate3d(0,-10.65vh,0)}to{transform:translate3d(0,10.65vh,0)}}
@keyframes par-lineup-p{from{transform:translate3d(0,-9.9vh,0)}to{transform:translate3d(0,9.9vh,0)}}
@keyframes par-bio-p{from{transform:translate3d(0,-9.75vh,0)}to{transform:translate3d(0,9.75vh,0)}}
.rail-sq .tile{width:clamp(170px,17vw,250px);aspect-ratio:1}
.rail-tall .tile{width:clamp(190px,19vw,280px);aspect-ratio:4/5}
.rail .tile img{width:100%;height:100%;object-fit:cover}

/* (art)ificial + roadmaps */
.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(36px,6vw,90px);align-items:start}
.studio-in{position:sticky;top:110px}
.studio-logo{width:min(260px,70%);height:auto;margin-bottom:26px;opacity:.95}
.studio .quote{font-size:clamp(19px,1.9vw,25px)}
.roads{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.roads h3{font-family:var(--display);font-weight:300;font-size:24px;margin-bottom:18px}
.road{list-style:none;border-top:1px solid var(--line)}
.road li{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:16px 0;border-bottom:1px solid var(--line)}
.road li .mono{color:var(--accent);padding-top:3px}
.road b{display:block;font-family:var(--display);font-weight:400;font-size:16px;margin-bottom:5px}
.road p{color:var(--ink2);font-size:14.5px;line-height:1.6}
@media (max-width:1100px){.roads{grid-template-columns:1fr}}
@media (max-width:900px){.studio{grid-template-columns:1fr}.studio-in{position:static}}

/* team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.member .pic{width:150px;aspect-ratio:1;border-radius:50%;overflow:hidden;margin-bottom:22px;box-shadow:0 0 0 1px rgba(201,184,255,.35),0 0 0 6px rgba(8,12,24,.9),0 0 0 7px rgba(242,239,233,.08);transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.member:hover .pic{transform:scale(1.04);box-shadow:0 0 0 1px rgba(201,184,255,.6),0 0 0 6px rgba(8,12,24,.9),0 0 0 7px rgba(242,239,233,.14),0 0 34px rgba(201,184,255,.25)}
.member h3{font-family:var(--display);font-weight:300;font-size:26px;margin:6px 0 10px}
.member p{color:var(--ink2);line-height:1.65;font-size:15px}
.mlinks{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:16px;font-size:14px}
@media (max-width:900px){.team{grid-template-columns:1fr}.member{display:grid;grid-template-columns:110px 1fr;gap:0 22px}.member .pic{width:110px;grid-row:span 4}}
@media (max-width:480px){.member{grid-template-columns:1fr}.member .pic{grid-row:auto}}

/* contract + FAQ */
.facts{display:grid;gap:22px;max-width:860px;margin:0 auto;text-align:center;justify-items:center}
.contract{display:block;margin-top:10px;font-family:var(--mono);font-size:clamp(11px,1.4vw,15px);letter-spacing:.04em;color:var(--ink);overflow-wrap:anywhere;border-bottom:1px solid rgba(201,184,255,.4);transition:color var(--fast),border-color var(--fast)}
.contract:hover{color:var(--accent);border-color:var(--accent)}
.faq{width:100%;border:1px solid var(--line);border-radius:14px;padding:18px 22px;text-align:left;transition:border-color var(--fast),background var(--fast)}
.faq[open]{border-color:rgba(201,184,255,.4);background:rgba(255,255,255,.02)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-family:var(--display);font-size:17px}
.faq summary::after{content:"+";color:var(--accent);transition:transform var(--fast) var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary::-webkit-details-marker{display:none}
.faq p{color:var(--ink2);line-height:1.7;margin-top:12px}

/* footer logos */
.foot-logos{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,36px);flex-wrap:wrap;padding:10px var(--gut) 40px}
.foot-logos img{height:64px;width:auto;opacity:.85}
.foot-logos img.lw,.duo-logos img.lw{scale:1.1;translate:0 -5%}  /* the Warriors art sits smaller and lower in its square than the Eggs: match their size and line */
.foot-logos img.wm{height:22px;opacity:.65}
.foot-logos .x{font-size:26px}
.foot-logos i{width:1px;height:40px;background:var(--line)}
@media (max-width:560px){.foot-logos i{display:none}.foot-logos{gap:16px}}

/* the story */
.story-hero{position:relative;min-height:min(86vh,820px);display:flex;align-items:flex-end;overflow:hidden;padding:150px var(--gut) 60px}
.story-bg{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;object-position:50% 30%;filter:blur(2px) brightness(.5) saturate(.9);animation:bannerdrift 30s ease-in-out infinite alternate}
.story-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,24,.6),rgba(8,12,24,.15) 40%,var(--bg) 100%),linear-gradient(90deg,rgba(8,12,24,.7),rgba(8,12,24,0) 70%)}
.story-hero-in{position:relative;z-index:2;max-width:780px}
.story-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(38px,5.4vw,78px);line-height:.98;letter-spacing:-.04em;margin:16px 0 18px}
.story-hero p{color:#dcd8d1;line-height:1.6;max-width:520px;margin-bottom:26px}
.story-hero h1{font-size:clamp(54px,8vw,120px)}
.stats{display:flex;flex-wrap:wrap;gap:12px 34px;margin:6px 0 26px}
.stats b{display:block;font-family:var(--display);font-weight:200;font-size:clamp(26px,2.8vw,40px);letter-spacing:-.03em;line-height:1}
.stats .mono{font-size:9.5px}
.credits{display:flex;flex-wrap:wrap;gap:10px 30px;padding-top:18px;border-top:1px solid var(--line)}
.credits dt{font-size:9.5px;margin-bottom:4px}.credits dd{font-family:var(--display);font-size:15px}

/* timeline: sticky list of milestones beside the sections */
.tl{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start;padding-top:40px}
.tl-nav{position:sticky;top:96px;display:flex;flex-direction:column;border-left:1px solid var(--line);max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:none}
.tl-nav a{position:relative;display:block;padding:9px 0 9px 18px;opacity:.5;transition:opacity var(--fast)}
.tl-nav a::before{content:"";position:absolute;left:-4px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--bg);border:1px solid var(--mute);transition:all .4s var(--ease)}
.tl-nav a b{display:block;font-family:var(--display);font-weight:400;font-size:14px;margin-top:2px;line-height:1.25}
.tl-nav a .mono{font-size:9.5px}
.tl-nav a:hover{opacity:.85}
.tl-nav a.on{opacity:1}
.tl-nav a.on::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(201,184,255,.7)}
.tl-nav a.on .mono{color:var(--accent)}
.tl-nav a.latest{opacity:.8}
.tl-nav .tl-k{display:block;padding:14px 0 4px 18px;font-size:9px;color:var(--mute);border-top:1px solid var(--line);margin-top:8px}
.tl-start{display:flex;align-items:baseline;gap:18px;padding:90px 0 0}
.tl-start b{font-family:var(--display);font-weight:200;font-size:clamp(30px,3.6vw,52px);letter-spacing:-.03em}
@media (max-width:1000px){.tl-nav .tl-k{display:none}}
.ms{padding:80px 0 10px;border-bottom:1px solid var(--line);scroll-margin-top:80px}
.ms:first-child{padding-top:30px}
.ms-head{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:start;margin-bottom:34px}
.ms-date{font-family:var(--display);font-weight:200;font-size:clamp(34px,4vw,58px);line-height:.95;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(242,239,233,.55)}
.ms-head h2{font-family:var(--display);font-weight:300;font-size:clamp(26px,3vw,42px);letter-spacing:-.02em;line-height:1.05;margin:10px 0 14px}
.ms-head p{color:var(--ink2);line-height:1.7;max-width:640px}
#interview .ms-head h2{font-size:clamp(20px,2.1vw,30px)}  /* a long title: smaller, so it stays on one line */
@media (min-width:1000px){#interview .ms-head h2{white-space:nowrap}}
.ms-head .mono{color:var(--accent)}
.sub{font-family:var(--display);font-weight:300;font-size:20px;margin:34px 0 16px}.ms .pgrid+h3.sub{margin-top:56px;margin-bottom:12px}
.sub:has(+.sub-note){margin-bottom:6px}.sub-note{color:var(--ink2);font-size:14px;margin-bottom:16px}
.sub-note a{color:var(--ink);border-bottom:1px solid rgba(201,184,255,.4);transition:color var(--fast),border-color var(--fast)}.sub-note a:hover{color:var(--accent);border-color:var(--accent)}
.ms .sub:first-of-type{margin-top:0}
@media (max-width:1000px){
  .tl{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0}
  .tl-nav{position:sticky;top:58px;z-index:20;flex-direction:row;max-height:none;overflow-x:auto;border-left:0;border-bottom:1px solid var(--line);margin:0 calc(-1 * var(--gut));padding:6px var(--gut);background:rgba(8,12,24,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .tl-nav a{flex:0 0 auto;padding:6px 14px 6px 0;margin-right:6px}
  .tl-nav a::before{display:none}
  .tl-nav a b{font-size:12.5px;white-space:nowrap}
  .ms-head{grid-template-columns:1fr;gap:8px}
}

/* page strips: comics, story book, animated pages, the saga's chapters */
.reader-bar{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.reader-prog{flex:1;height:1px;background:var(--line);position:relative}
.reader-prog b{position:absolute;left:0;top:0;bottom:0;width:6%;background:var(--accent);transition:width .25s}
.reader-nav{display:flex;gap:8px}
.reader-nav .iconbtn{width:38px;height:38px}
.reader-nav .iconbtn:disabled{opacity:.3;pointer-events:none}
.prail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:#333 transparent;cursor:grab}
.prail.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.prail.drag *{pointer-events:none}
.pg{flex:0 0 auto;height:clamp(300px,58vh,560px);aspect-ratio:var(--ar);scroll-snap-align:start;border-radius:2px;box-shadow:0 0 0 1px var(--line)}
.pg img{width:100%;height:100%;object-fit:cover}
.pg .pn{position:absolute;left:10px;top:10px;padding:3px 8px;border-radius:999px;background:rgba(8,12,24,.7);backdrop-filter:blur(6px);color:var(--ink);font-size:9.5px;z-index:2}
.pg:hover{box-shadow:0 0 0 1px rgba(201,184,255,.5),0 14px 40px -12px rgba(201,184,255,.35)}
.vpg video{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.vpg.playing video{opacity:1}
.vpg .playmark{opacity:0;transform:scale(.8)}
.vpg:hover .playmark{opacity:1;transform:none}
/* the saga: chapter cards with their opening line */
.chcard{flex:0 0 auto;width:clamp(220px,22vw,290px);scroll-snap-align:start;background:none;cursor:zoom-in}
.ch-img{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--bg2)}
.ch-cap{display:block;padding:12px 2px 0}
.ch-cap .mono{color:var(--accent);font-size:9.5px}
.ch-cap b{display:block;font-family:var(--display);font-weight:400;font-size:17px;margin:5px 0 6px}
.ch-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--mute);font-size:13.5px;line-height:1.55}
.chcard:hover .ch-img img{transform:scale(1.04)}
.season-tag{flex:0 0 auto;align-self:flex-start;display:flex;flex-direction:column;justify-content:flex-end;padding:0 8px 0 4px;height:clamp(275px,27.5vw,362px)}
.season-tag b{font-family:var(--display);font-weight:200;font-size:72px;line-height:.9;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(242,239,233,.5)}

/* masonry boards (characters, worlds, figures) */
/* justified rows: each picture grows in proportion to its width/height (--r), so a row shares one height and fills
   the width; the last row keeps the aimed-for height (--rh) instead of stretching (the ::after filler takes the rest) */
.pgrid{--k:1;display:flex;flex-wrap:wrap;gap:12px}.pgrid::after{content:"";flex:999 1 0}.pgrid.fill::after{content:none}
.pgrid .tile{display:flex;flex-direction:column;justify-content:flex-end;flex:var(--r) 1 calc(var(--r) * var(--rh) * var(--k));min-width:0;border-radius:2px;
  max-width:calc(var(--r) * var(--rh) * 1.8)}  /* a picture left alone on the last row can't grow past 1.8× the row height (it stretched to the full width) */
.pgrid .tile img{width:100%;height:auto}
.pgrid.even{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px}.pgrid.even::after{content:none}  /* same-shape boards: an even grid */
.pgrid.even .tile{max-width:none}
@media (max-width:1100px){.pgrid.even{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pgrid.even{grid-template-columns:1fr;margin-top:8px}}
@media (max-width:900px){.pgrid{--k:.7}}
@media (max-width:560px){.pgrid{--k:.5;gap:8px}}
.pgrid .tile:has(.bcap),.pgrid.titled .tile{background:none;overflow:visible}  /* a picture without a caption in a captioned row: no empty box above it */.pgrid .bpic{position:relative;display:block;overflow:hidden;background:var(--bg2);container-type:inline-size}
/* boards whose own lettering was painted out: the title sits above the picture, in the site's type */
.bcap{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:0 0 8px;cursor:zoom-in;min-height:calc(2.5em + 22px)}  /* room for a two-line title, so the pictures in a row line up; the title sits right on its picture */
.pgrid.titled{row-gap:34px}  /* and well clear of the row above */
.bcap .mono{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.bcap b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:-.005em;line-height:1.25;color:var(--ink)}
.blabel{position:absolute;font-size:max(8.5px,1.7cqw);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);opacity:.85;white-space:nowrap;pointer-events:none}

/* game cards: they turn over on hover; a click opens the card viewer (.cv). Named tcard: galbarkan.com's
   .gcard (game tiles, with a hover zoom on its images) would override the back face's turn */
.tcards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 20px;perspective:1600px;padding-bottom:10px}
@media (max-width:900px){.tcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.tcards{gap:22px 12px}}
.tcard{position:relative;display:block;padding:0;text-align:left;cursor:zoom-in;outline:none}
.tcard .gc-in{position:relative;display:block;aspect-ratio:var(--car);transform-style:preserve-3d;transition:transform .9s var(--ease)}
.tcard .gc-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))}
.tcard .gc-b{transform:rotateY(180deg)}
@media (hover:hover){.tcard:hover .gc-in{transform:rotateY(180deg) translateY(-6px)}}
.tcard:focus-visible .gc-in{transform:rotateY(180deg)}
.tcard .gc-name{display:block;margin-top:12px;font-size:10px;color:var(--mute);transition:color var(--fast)}
.tcard:hover .gc-name{color:var(--accent)}

/* the end of the timeline: every milestone as a dot, ending in the latest version, and a way back up to it */
.tl-end{padding:90px 0 20px}
.tl-end-k{display:block;margin-bottom:22px}
.tl-dots{position:relative;display:flex;justify-content:space-between;gap:6px;margin-bottom:46px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px}
.tl-dots::before{content:"";position:absolute;left:6px;right:6px;top:7px;height:1px;background:linear-gradient(90deg,rgba(201,184,255,.15),var(--accent))}
.tl-dots a{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:44px}
.tl-dots i{width:9px;height:9px;margin-top:3px;border-radius:50%;background:var(--bg);border:1px solid rgba(201,184,255,.55);transition:all .4s var(--ease)}
.tl-dots .mono{font-size:9px;white-space:nowrap}
.tl-dots a:hover i{background:var(--accent);box-shadow:0 0 10px rgba(201,184,255,.6)}
.tl-dots a.now i{width:15px;height:15px;margin-top:0;background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 5px rgba(232,201,135,.12),0 0 22px rgba(232,201,135,.6);animation:nowpulse 2.4s ease-in-out infinite}
.tl-dots a.now .mono{color:var(--gold)}
@keyframes nowpulse{50%{box-shadow:0 0 0 9px rgba(232,201,135,.05),0 0 30px rgba(232,201,135,.75)}}
.tl-latest{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;padding:22px;border:1px solid rgba(232,201,135,.3);border-radius:16px;
  background:radial-gradient(120% 140% at 0% 50%,rgba(232,201,135,.08),rgba(255,255,255,0) 60%);transition:border-color var(--fast),transform .6s var(--ease)}
.tl-latest:hover{border-color:rgba(232,201,135,.6);transform:translateY(-3px)}
.tl-latest img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:3px;box-shadow:0 18px 40px -12px rgba(0,0,0,.7)}
.tl-latest>span{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.tl-latest .mono{color:var(--gold)}
.tl-latest b{font-family:var(--display);font-weight:200;font-size:clamp(28px,3.4vw,48px);letter-spacing:-.03em;line-height:1}
.tl-latest .btn{margin-top:8px}
@media (max-width:560px){.tl-latest{grid-template-columns:96px minmax(0,1fr);padding:16px}.tl-latest .btn{white-space:normal;padding:11px 16px}.tl-dots{justify-content:flex-start;gap:14px}}

/* the card viewer */
.cv{position:fixed;inset:0;z-index:120;display:none}
.cv.open{display:block}
.cv-bg{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 45%,rgba(30,36,70,.82),rgba(4,6,14,.96));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .45s var(--ease)}
.cv.show .cv-bg{opacity:1}
.cv-stage{position:absolute;left:0;right:0;top:0;bottom:120px;display:grid;place-items:center;perspective:1800px;pointer-events:none}
.cv-card{height:min(76vh,780px);max-width:86vw;aspect-ratio:727/1206;pointer-events:auto;cursor:pointer;transition:transform .25s ease-out;transform-style:preserve-3d}
.cv-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.3,.7,.2,1)}
.cv-in.flip{transform:rotateY(180deg)}
.cv-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 30px 60px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(201,184,255,.12))}
.cv-b{transform:rotateY(180deg)}
.cv-shine{position:absolute;inset:3% 4%;border-radius:4%;pointer-events:none;mix-blend-mode:screen;transform:translateZ(1px)}
.cv-ui{position:absolute;left:0;right:0;bottom:30px;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease) .1s,transform .45s var(--ease) .1s}
.cv.show .cv-ui{opacity:1;transform:none}
.cv-name{font-family:var(--display);font-weight:300;font-size:26px;letter-spacing:-.01em}
.cv-act{display:flex;align-items:center;gap:10px;margin-top:4px}
.cv-x{position:absolute;top:20px;right:var(--gut);opacity:0;transition:opacity .4s}
.cv.show .cv-x{opacity:1}
@media (max-width:640px){.cv-stage{bottom:150px}.cv-card{height:min(64vh,620px)}.cv-name{font-size:22px}}

/* milestone cards: the venture and the treatment */
.venture{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:30px;border:1px solid var(--line);border-radius:14px;background:radial-gradient(120% 140% at 0% 0%,rgba(201,184,255,.08),rgba(255,255,255,0) 60%)}
.v-logos{display:flex;align-items:center;gap:22px;max-width:100%}.v-logos img{height:clamp(28px,3vw,42px);width:auto;min-width:0;max-width:42%;object-fit:contain}
@media (max-width:560px){.v-logos{gap:12px}}
.treat{padding:34px;border:1px solid var(--line);border-radius:14px}
.treat .quote{margin-bottom:26px}
/* the full treatment: a reading box that scrolls by itself, fading out at the bottom edge */
.treat-read{max-height:min(62vh,560px);overflow-y:auto;overscroll-behavior:contain;padding:4px 18px 40px 0;scrollbar-width:thin;scrollbar-color:rgba(201,184,255,.35) transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 85%,transparent);mask-image:linear-gradient(180deg,#000 85%,transparent);outline:none}
.treat-read h3{font-family:var(--display);font-weight:300;font-size:22px;letter-spacing:-.01em;margin:30px 0 10px;color:var(--ink)}
.treat-read h3:first-child{margin-top:0}
.treat-read h4{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:20px 0 6px}
.treat-read p{color:var(--ink2);line-height:1.75;font-size:15px;margin-bottom:12px;max-width:720px}
.treat-read p b{color:var(--ink);font-weight:500}
.treat-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line);font-size:9.5px}
.treat dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 36px}
.treat dt{color:var(--accent);margin-bottom:6px}
.treat dd{color:var(--ink2);line-height:1.7;font-size:15px}
@media (max-width:760px){.treat{padding:22px}.treat dl{grid-template-columns:1fr}.venture{padding:22px}}

/* video gallery */
.vbanner video{opacity:1}
.vgrid{grid-template-columns:repeat(3,1fr);gap:22px 18px}
@media (min-width:561px){.vgrid.two{grid-template-columns:repeat(2,1fr);max-width:960px}}  /* two videos: half the row each (no empty third slot), not too big on wide screens */
.vtile .prev{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
.vtile.playing .prev{opacity:1}
.vtile.playing .playmark{opacity:0;transform:scale(.8)}
.vtile .playmark{transition:transform .5s var(--ease),opacity .4s,background var(--fast)}
.dur{position:absolute;right:10px;bottom:10px;padding:3px 8px;border-radius:999px;background:rgba(8,12,24,.65);backdrop-filter:blur(6px);color:var(--ink);font-size:9.5px}
.fcard p{color:var(--mute);font-size:13.5px;line-height:1.55;margin-top:4px}
.lb-vid{object-fit:contain;background:#000}
/* dated videos (the 2025 trailer, the 2023 interview) carry their date in gold */
.dur.dated{color:var(--gold);border:1px solid rgba(232,201,135,.45)}
.onx{position:absolute;left:10px;top:10px;padding:3px 8px;border-radius:999px;background:rgba(8,12,24,.65);backdrop-filter:blur(6px);color:var(--ink);font-size:9.5px}
.xtile{cursor:pointer}
.ms-video{max-width:560px}
.prints-v{margin-top:18px}
.fcard .by{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.art-key{display:block;max-width:1100px;border-radius:2px}.art-key img{width:100%;height:auto}
/* a post on X: the photo opens the post; its text below, credited */
.xpost{max-width:760px}
.xpost-pic{position:relative;display:block;overflow:hidden;border-radius:2px;background:var(--bg2)}
.xpost-pic img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.xpost-pic:hover img{transform:scale(1.02)}
.xpost-pic .onx{position:absolute;left:12px;top:12px}
.xpost figcaption{margin-top:16px;padding-left:16px;border-left:1px solid rgba(201,184,255,.4)}
.xpost blockquote{font-family:var(--display);font-weight:300;font-size:clamp(19px,1.8vw,24px);line-height:1.35;color:var(--ink)}
.xpost-by{display:inline-block;margin-top:8px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);transition:color var(--fast)}
.xpost-by:hover{color:var(--accent)}
@media (max-width:900px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.vgrid{grid-template-columns:1fr}}
/* video page banner: three panels running side by side (home.js) */
.vbanner{height:min(84vh,820px)}
.vbanner::after{pointer-events:none}
.vbanner .chooser{gap:3px}
.vbanner .chooser a{cursor:pointer}
.vbanner .chooser a:hover{flex:1.6}
.vbanner .chooser .lbl{bottom:40px}
.vbanner .chooser .lbl b{white-space:normal;line-height:1.15}
.vbanner .banner-in{top:96px;bottom:auto;pointer-events:none;z-index:4}
.vbanner .banner-in h1{margin-top:8px}
@media (max-width:900px){.vbanner{height:auto;min-height:0;aspect-ratio:auto;display:block}.vbanner .chooser{position:relative;flex-direction:column;height:150vw}.vbanner .banner-in{top:76px}}

.tile img,.lb img,.tcard img,.cv img,.wide img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}

/* terms */
.terms{padding-top:10px}
.terms h3{font-size:20px;margin-top:40px}
.terms p{font-size:15px}