*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--page-bg);color:var(--text);font:400 clamp(15px,1vw + 11px,18px)/1.5 "DM Sans",system-ui,sans-serif;overflow:hidden;overscroll-behavior:none;transition:background-color .9s ease}
h1,h2,.brand,button.nav{font-family:Unbounded,"Arial Black",sans-serif}
header{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) clamp(16px,4vw,40px) 12px;pointer-events:none}
header>*{pointer-events:auto}
.brand{font-weight:800;font-size:clamp(12px,3.4vw,15px);color:var(--big-name)}
button.nav{background:var(--big-name);color:var(--dark);border:0;border-radius:99px;padding:10px 20px;font-weight:500;font-size:13px;cursor:pointer}
button.nav:focus-visible,.frame:focus-visible{outline:3px solid var(--text);outline-offset:4px}

h1{position:fixed;top:0;right:0;bottom:0;left:0;margin:0;display:grid;place-items:center;text-align:center;padding:0 4vw;font-weight:800;font-size:clamp(38px,11.5vw,190px);line-height:.9;letter-spacing:-.04em;color:var(--big-name);pointer-events:none;user-select:none;z-index:0}
.stage{position:fixed;top:0;right:0;bottom:0;left:0;perspective:900px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;overflow:hidden}
.stage:active{cursor:grabbing}
.world{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d}
.frame{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);border:0;padding:0;border-radius:6px;background-color:#14121f;background-size:cover;background-position:center;box-shadow:0 0 0 clamp(1.5px,.22vw,3px) var(--frame),0 16px 32px rgba(0,0,0,.4);cursor:pointer;will-change:transform,opacity}

.hud{position:fixed;z-index:5;left:0;right:0;bottom:0;padding:16px clamp(16px,4vw,40px) calc(16px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:flex-end;gap:16px;pointer-events:none;font-weight:500}
.hud #cap{font-family:Unbounded,sans-serif;font-size:clamp(13px,2.4vw,20px);color:var(--text);text-align:right}
.hud small{display:block;opacity:.85;font-size:13px;margin-top:4px}

.panel{position:fixed;top:0;right:0;bottom:0;left:0;z-index:34;background:var(--panel-bg);color:var(--dark);padding:calc(72px + env(safe-area-inset-top,0px)) clamp(16px,5vw,64px) calc(32px + env(safe-area-inset-bottom,0px));overflow:auto;transform:translateY(100%);visibility:hidden;transition:transform .6s cubic-bezier(.7,0,.2,1),visibility 0s .6s}
.panel.on{transform:none;visibility:visible;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.panel .nav{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:clamp(16px,4vw,40px);background:var(--dark);color:var(--panel-bg)}
.panel .cols{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));max-width:1200px}
h2{margin:0 0 .5em;font-size:clamp(26px,5vw,60px);line-height:1.08;font-weight:800;letter-spacing:-.03em}
.panel p{max-width:60ch;margin:0 0 1em}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.stats b{background:var(--dark);color:var(--panel-bg);padding:8px 16px;border-radius:99px;font-weight:500;font-size:.9em}
.mail{display:inline-block;margin-top:8px;padding:14px 22px;border-radius:99px;background:var(--accent);color:var(--panel-bg);font:800 clamp(14px,3.6vw,24px) Unbounded,sans-serif;text-decoration:none;overflow-wrap:anywhere}

.lb{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:rgba(10,8,40,.95);display:none;place-items:center;padding:calc(64px + env(safe-area-inset-top,0px)) 16px calc(56px + env(safe-area-inset-bottom,0px))}
.lb.on{display:grid}
.lb .big{display:block;width:auto;height:auto;max-width:calc(100vw - 48px);max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));object-fit:contain;border-radius:6px;box-shadow:0 0 0 clamp(2px,.4vw,5px) var(--frame)}
.lb{overflow:hidden;touch-action:none}
.lb div.big{width:min(86vw,60vh);aspect-ratio:4/5;background-color:#14121f}
.lb p{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;margin:0}
.lb .nav{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px}
@media (max-width:520px){.hud small{display:none}}
@media (prefers-reduced-motion:reduce){body,.panel{transition:none}}

.grp{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:420px){button.nav{padding:9px 14px;font-size:12px}}

/* shiny gold text */
.gold{background:linear-gradient(100deg,#8a6a12 0%,#d4af37 20%,#fff3b0 32%,#d4af37 44%,#8a6a12 60%,#d4af37 80%,#8a6a12 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:shine 5s linear infinite;}
@keyframes shine{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.gold{animation:none}}

/* camera cursor + shutter */
.cam{position:fixed;left:0;top:0;z-index:60;width:clamp(44px,9vw,60px);color:var(--big-name);pointer-events:none;opacity:0;transition:opacity .2s;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));will-change:transform}
.cam svg{display:block;width:100%;height:auto;transition:transform .15s}
.cam.press svg{transform:scale(.88)}
.cam .iris{transform-box:fill-box;transform-origin:center}
.cam.snap .iris{animation:iris .26s ease-out}
@keyframes iris{0%{transform:scale(1)}35%{transform:scale(.1)}100%{transform:scale(1)}}
.flash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:55;background:#fff6d6;opacity:0;pointer-events:none}
.flash.on{animation:flash .35s ease-out}
@keyframes flash{0%{opacity:.35}100%{opacity:0}}
@media (hover:hover) and (pointer:fine){.stage,.frame{cursor:none}}
@media (prefers-reduced-motion:reduce){.flash.on,.cam.snap .iris{animation:none}}

/* categories */
header{flex-wrap:wrap;gap:8px}
.endcta{position:fixed;z-index:6;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .3s;white-space:nowrap}
.cats{position:fixed;top:0;right:0;bottom:0;left:0;z-index:32;background:var(--page-bg);color:var(--text);overflow-y:auto;overscroll-behavior:contain;transform:translateY(100%);visibility:hidden;transition:transform .6s cubic-bezier(.7,0,.2,1),visibility 0s .6s}
.cats.on{transform:none;visibility:visible;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.cats>.nav{position:fixed;z-index:2;top:calc(14px + env(safe-area-inset-top,0px));right:clamp(16px,4vw,40px)}
.cwrap{max-width:1100px;margin:0 auto;padding:calc(84px + env(safe-area-inset-top,0px)) clamp(16px,5vw,64px) calc(56px + env(safe-area-inset-bottom,0px))}
.cwrap h2{font-size:clamp(30px,6.5vw,76px);margin:0 0 .25em}
.cwrap .sub{margin:0 0 clamp(20px,4vw,40px);opacity:.8}
.clist{list-style:none;margin:0;padding:0}
.crow{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:0;border-bottom:1px solid rgba(212,175,55,.3);padding:clamp(14px,2.4vw,26px) 0;color:var(--text);text-align:left;cursor:pointer;font:800 clamp(24px,5.6vw,66px)/1.05 Unbounded,"Arial Black",sans-serif;letter-spacing:-.03em}
.crow:disabled{cursor:default;opacity:.5}
.crow:not(:disabled):hover .cname,.crow:not(:disabled):focus-visible .cname{background:linear-gradient(100deg,#8a6a12 0%,#d4af37 20%,#fff3b0 32%,#d4af37 44%,#8a6a12 60%,#d4af37 80%,#8a6a12 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:shine 3s linear infinite}
.crow:focus-visible{outline:3px solid var(--big-name);outline-offset:4px}
.cthumb{flex:none;width:clamp(44px,8vw,72px);aspect-ratio:4/5;margin-right:6px;border-radius:4px;background-color:#14121f;background-size:cover;background-position:center;box-shadow:0 0 0 2px var(--frame)}
.pill{flex:none;border:1px solid var(--big-name);color:var(--big-name);border-radius:99px;padding:6px 14px;font:500 13px "DM Sans",sans-serif;letter-spacing:0}
.cgrid{display:grid;gap:clamp(16px,3vw,30px);grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.ctile{position:relative;overflow:hidden;border:0;padding:0;aspect-ratio:4/5;border-radius:6px;background-color:#14121f;background-size:cover;background-position:center;box-shadow:0 0 0 2px var(--frame);cursor:pointer}
.ctile span{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 12px;background:linear-gradient(transparent,rgba(8,7,15,.88));color:var(--text);font:500 13px "DM Sans",sans-serif;text-align:left}
.ctile:focus-visible{outline:3px solid var(--text);outline-offset:6px}
@media (prefers-reduced-motion:reduce){.cats{transition:none}.crow:hover .cname{animation:none}}

/* horizontal category rail */
.cats.hz{overflow:hidden}
.hwrap{position:fixed;top:0;right:0;bottom:0;left:0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.hwrap:active{cursor:grabbing}
.htrack{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;gap:clamp(16px,4vw,56px);padding:76px clamp(24px,24vw,380px) 150px clamp(24px,22vw,360px);will-change:transform}
.hcard{position:relative;flex:none;height:clamp(220px,calc(100vh - 320px),620px);height:clamp(220px,calc(100svh - 320px),620px);width:calc(clamp(220px,calc(100vh - 320px),620px) * .8);width:calc(clamp(220px,calc(100svh - 320px),620px) * .8);border:0;padding:0;border-radius:6px;overflow:hidden;background:#0d0b18;box-shadow:0 0 0 2px var(--frame);cursor:pointer;will-change:transform,opacity}
.himg{position:absolute;top:0;bottom:0;left:-14%;right:-14%;background-color:#14121f;background-size:cover;background-position:center;will-change:transform}
.hcount{position:absolute;left:12px;bottom:12px;font:500 13px "DM Sans",sans-serif;color:var(--text);background:rgba(8,7,15,.65);padding:4px 12px;border-radius:99px}
.soon .himg{opacity:.45}
.soonpill{position:absolute;left:12px;bottom:12px;background:rgba(8,7,15,.65)}
.hcard:focus-visible{outline:3px solid var(--text);outline-offset:6px}
.hbig{position:fixed;left:clamp(16px,4vw,40px);bottom:calc(20px + env(safe-area-inset-bottom,0px));max-width:82vw;font:800 clamp(28px,7.5vw,92px)/1 Unbounded,"Arial Black",sans-serif;letter-spacing:-.04em;pointer-events:none}
.hbig small{display:block;margin-top:8px;font:500 14px "DM Sans",sans-serif;letter-spacing:0;-webkit-text-fill-color:var(--text);color:var(--text);opacity:.85}
.hbig.swap{animation:swap .45s cubic-bezier(.2,.8,.2,1)}
@keyframes swap{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hhint{position:fixed;right:clamp(16px,4vw,40px);bottom:calc(24px + env(safe-area-inset-bottom,0px));font-size:13px;opacity:.8;pointer-events:none}
@media (max-width:520px){.hhint{display:none}}
@media (prefers-reduced-motion:reduce){.hbig.swap{animation:none}}

/* about page (same black and gold design) */
.panel{background:var(--page-bg);color:var(--text)}
.panel .nav{background:var(--big-name);color:var(--dark)}
.about-body{max-width:1100px;margin:0 auto}
.agrid{display:grid;gap:clamp(24px,5vw,64px);grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);align-items:center}
.aportrait{aspect-ratio:4/5;border-radius:6px;background-color:#14121f;background-size:cover;background-position:center;box-shadow:0 0 0 3px var(--frame),0 30px 60px rgba(0,0,0,.5);max-width:420px;width:100%;justify-self:center}
.atext h2,.acontact h2{font-size:clamp(26px,4.6vw,56px);margin:0 0 .5em}
.atext p,.acontact p{max-width:58ch;margin:0 0 1em;color:var(--text)}
.atags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.atags b{border:1px solid var(--big-name);color:var(--big-name);padding:7px 16px;border-radius:99px;font-weight:500;font-size:.9em}
.acontact{margin-top:clamp(40px,7vw,96px);padding-top:clamp(24px,4vw,48px);border-top:1px solid rgba(212,175,55,.3)}
.clinks{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:8px}
.clink{display:flex;align-items:center;gap:16px;padding:14px 18px;border:1px solid rgba(212,175,55,.45);border-radius:14px;color:var(--text);text-decoration:none;transition:border-color .2s,background-color .2s}
.clink:hover,.clink:focus-visible{border-color:var(--big-name);background:rgba(212,175,55,.1);outline:none}
.cicon{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid var(--big-name);color:var(--big-name)}
.cicon svg{width:26px;height:26px}
.clink:hover .cicon,.clink:focus-visible .cicon{background:var(--big-name);color:var(--dark)}
.ctext{display:grid;min-width:0}
.ctext b{font:500 16px "DM Sans",sans-serif}
.ctext small{font-size:14px;opacity:.85;overflow-wrap:anywhere}
@media (max-width:720px){.agrid{grid-template-columns:1fr}.aportrait{max-width:320px}}

/* mobile hardening */
html{overscroll-behavior:none}
body{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.panel,.cats{-webkit-overflow-scrolling:touch}
button,a{-webkit-tap-highlight-color:transparent}

/* short landscape screens and small phones */
@media (max-height:500px){
  .htrack{padding-top:64px;padding-bottom:104px}
  .hcard{height:calc(100vh - 168px);width:calc((100vh - 168px) * .8)}
  .hbig{font-size:clamp(24px,5vw,44px)}
  .hbig small{margin-top:4px}
}
@media (max-width:420px){.aportrait{max-width:230px}}

/* smoothness */
h1.gold{animation-play-state:paused}
h1.gold.live{animation-play-state:running}
.world{will-change:transform}
.frame{backface-visibility:hidden;-webkit-backface-visibility:hidden;contain:layout paint}
/* logo beside the brand name */
.brandwrap{display:flex;align-items:center;gap:12px;min-width:0}
.logo{display:block;height:clamp(46px,10vw,62px);width:auto;max-width:96px;object-fit:contain}

/* dive-into-the-name animation (after the name reveal, before the categories) */
.dive{position:fixed;top:0;right:0;bottom:0;left:0;z-index:45;display:none;background:var(--page-bg);overflow:hidden;pointer-events:none}
.dive.on{display:block}
.dive h1{opacity:1}
.diveFlash{position:absolute;top:0;right:0;bottom:0;left:0;background:#d4af37;opacity:0}