@font-face{font-family:Archivo;src:url('/assets/archivo-var.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:Space;src:url('/assets/space-grotesk.woff2') format('woff2');font-weight:300 700;font-display:swap}
:root{
  --ink:#0b0c0a;--ink-2:#131511;--ink-3:#1b1e18;--paper:#f2f3ea;--muted:#b4baab;--acid:#d5ff3f;--acid-ink:#0b0c0a;--line:#2b3027;
  --display:Archivo,'Arial Narrow',Impact,sans-serif;--body:Space,system-ui,Arial,sans-serif;
  --gut:clamp(1rem,4.4vw,4.5rem);--r:18px;--ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:5rem
}
@media (prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--acid);outline-offset:4px;border-radius:6px}
.skip{position:fixed;left:1rem;top:-100px;z-index:200;background:var(--acid);color:var(--acid-ink);padding:.8rem 1rem;font-weight:700;border-radius:10px}
.skip:focus{top:1rem}
.alias{position:relative;top:-5rem;display:block;height:0}
.acid{color:var(--acid)}

/* type */
.display{font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.005em;margin:0}
.kicker,.label{font-family:var(--display);font-stretch:125%;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;margin:0 0 .9rem;color:var(--paper)}
.kicker.acid{color:var(--acid)}
.note{color:var(--muted);max-width:34rem;margin:.9rem 0 0}

/* controls */
.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.85rem 1.35rem;border:0;border-radius:999px;background:var(--acid);color:var(--acid-ink);font-weight:700;text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px #ffffff5c}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--acid);color:var(--acid)}
.chip{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.55rem 1rem;border:0;border-radius:999px;background:#ffffff14;color:var(--paper);font-size:.9rem;font-weight:600;text-decoration:none;cursor:pointer}
.chip:hover{background:#ffffff26}
.actions{display:flex;flex-wrap:wrap;gap:.7rem}

/* header */
.bar{position:fixed;inset:0 0 auto;z-index:50;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem var(--gut);padding-top:max(.7rem,env(safe-area-inset-top));transition:background .3s,backdrop-filter .3s}
.bar.solid{background:#0b0c0acc;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.brand{min-width:0;display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--display);font-stretch:62%;font-weight:900;font-size:1.5rem;letter-spacing:.01em}
.brand img{width:auto;height:40px;flex:none}
.brand span{min-width:0;overflow:hidden;white-space:nowrap}
.bar>.chip{flex:none}
.brand b{color:var(--acid);font-weight:900}
.bar nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.1rem 1.6rem;min-width:0;font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.bar nav a{text-decoration:none;padding:.6rem 0;opacity:.9;white-space:nowrap}
.bar nav a:hover{color:var(--acid);opacity:1}
@media (max-width:960px){.bar nav{display:none}}

/* OPEN — split poster: type, cutout portrait over a ghost 16, and a live real-play card.
   Type and media are separate in-flow boxes so enlarged text pushes the media down instead of under it. */
.open{position:relative;min-height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(58svh,1fr);padding:calc(5.2rem + env(safe-area-inset-top)) var(--gut) 0;background:radial-gradient(90% 60% at 72% 48%,#26310f 0%,#12160c 34%,var(--ink) 66%)}
.open:after{content:"";position:absolute;inset:auto 0 0;height:16%;background:linear-gradient(transparent,var(--ink));z-index:2;pointer-events:none}
.ghost-num{position:absolute;right:-7vw;top:9svh;z-index:0;font-family:var(--display);font-stretch:62%;font-weight:900;font-size:min(98vw,64svh);line-height:.8;color:transparent;-webkit-text-stroke:2px #d5ff3f3d;user-select:none}
.open-type{position:relative;z-index:4;align-self:start}
.open h1{font-size:clamp(4.6rem,25vw,13.5rem)}
.open h1 span{display:block}
.tags{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:1rem 0 1.2rem}
.open-media{position:relative;z-index:3;min-height:58svh;margin:0 calc(var(--gut) * -1)}
.open-portrait{position:absolute;right:-6vw;bottom:0;height:100%;max-height:min(68svh,125vw);width:auto;max-width:none;filter:drop-shadow(0 30px 50px #000c);transform:translateY(var(--py,0));will-change:transform}
.open-clip{position:absolute;z-index:5;left:var(--gut);bottom:1.4rem;width:min(40vw,240px);aspect-ratio:9/16;padding:0;border:0;border-radius:var(--r);overflow:hidden;background:#000;cursor:pointer;box-shadow:0 0 0 1px #ffffff2e,0 24px 60px #000e;transition:transform .3s var(--ease)}
.open-clip:hover{transform:translateY(-4px)}
.open-clip video{width:100%;height:100%;object-fit:cover}
.clip-tag{position:absolute;left:.6rem;right:.6rem;top:.6rem;display:flex;align-items:center;gap:.45rem;font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 8px #000}
.dot{width:8px;height:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 4px #d5ff3f33;flex:none}
.clip-play{position:absolute;left:.6rem;bottom:.6rem;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--acid);color:var(--acid-ink);font-size:1rem}
.motion-toggle{position:absolute;z-index:6;right:var(--gut);bottom:1.4rem;min-height:40px;padding:.4rem .9rem;border:0;border-radius:999px;background:#0b0c0aa8;color:var(--paper);font-size:.8rem;cursor:pointer;box-shadow:inset 0 0 0 1px #ffffff30}
@media (min-width:900px){
  .open{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr);align-items:stretch;padding-bottom:0}
  .open-type{align-self:center;padding-bottom:4rem}
  .open h1{font-size:clamp(7rem,15vw,17rem)}
  .open-media{margin:0;min-height:0}
  .open-portrait{right:4%;max-height:88svh}
  .ghost-num{right:4vw;top:6svh;font-size:min(46vw,92svh)}
  .open-clip{left:0;bottom:3.5rem;width:clamp(170px,14vw,230px)}
  .motion-toggle{bottom:3.5rem}
}

/* sections */
.section{position:relative;padding:clamp(4.5rem,11vw,9rem) var(--gut) 0}
.head{margin-bottom:clamp(1.8rem,4vw,3rem)}
.head h2{font-size:clamp(4rem,17vw,11rem)}

/* WATCH */
.cut{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;align-items:center;margin-bottom:1.4rem}
.cut-card{position:relative;padding:0;border:0;border-radius:calc(var(--r) + 6px);overflow:hidden;cursor:pointer;background:#000;aspect-ratio:9/16;max-height:80svh;width:min(100%,460px);justify-self:center;box-shadow:0 0 0 1px #ffffff24,0 40px 90px #000}
.cut-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cut-card:hover img{transform:scale(1.03)}
.big-play{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--acid);color:var(--acid-ink);font-size:1.6rem;box-shadow:0 0 0 12px #d5ff3f2e}
.cut-copy h3{font-size:clamp(3.2rem,12vw,7rem);margin-bottom:1rem}
.cut-copy p:not(.kicker){color:var(--muted);max-width:30rem;margin:0 0 1.4rem}
@media (min-width:900px){.cut{grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:4rem}.cut-card{justify-self:start}}
.clips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.clips .wide{grid-column:1/-1}
@media (min-width:900px){.clips{grid-template-columns:repeat(6,minmax(0,1fr))}.clips .wide{grid-column:span 2;grid-row:span 1}.clips li{grid-column:span 1}.clips .wide{grid-column:span 2}}
.clip{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--r);overflow:hidden;cursor:pointer;background:var(--ink-3);aspect-ratio:4/5;text-align:left}
.clips .wide .clip{aspect-ratio:16/10}
@media (min-width:900px){.clips .wide .clip{aspect-ratio:auto;height:100%}}
.clip img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .4s}
.clip:hover img{transform:scale(1.04)}
.clip:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#000000d0)}
.clip-info{position:absolute;z-index:2;left:.9rem;right:.9rem;bottom:.85rem;display:grid;gap:.15rem}
.clip-info small{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acid)}
.clip-info strong{font-family:var(--display);font-stretch:62%;font-weight:900;font-size:1.9rem;line-height:.9;text-transform:uppercase}
.mini-play{position:absolute;z-index:2;right:.7rem;top:.7rem;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0b0c0acc;color:var(--acid);font-size:.8rem;box-shadow:inset 0 0 0 1px #ffffff30}

/* HYPE STUDIO — a quiet portal into the interactive studio; no extra autoplay. */
.studio-feature{display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;border:1px solid var(--line);border-radius:calc(var(--r) + 8px);background:var(--ink-2)}
.hype-studio .head h2{font-size:clamp(3.5rem,17vw,11rem)}
.studio-preview{position:relative;display:block;min-width:0;overflow:hidden;background:#050805;aspect-ratio:16/9}
.studio-preview img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}
.studio-preview:hover img{transform:scale(1.025)}
.studio-preview-tag{position:absolute;left:1rem;top:1rem;padding:.4rem .65rem;border:1px solid #d5ff3f40;border-radius:999px;background:#0b0c0abf;color:var(--acid);font-family:var(--display);font-size:.62rem;font-weight:700;font-stretch:125%;letter-spacing:.12em;text-transform:uppercase}
.studio-preview-arrow{position:absolute;right:1rem;bottom:1rem;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--acid);color:var(--acid-ink);font-size:1.6rem}
.studio-copy{padding:clamp(20px,3.5vw,54px)}
.studio-copy h3{font-size:clamp(2.4rem,6.8vw,6rem);margin:0 0 1.1rem}
.studio-copy>p:not(.kicker){max-width:32rem;color:var(--muted);margin:0 0 1.3rem}
.studio-looks{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;font-size:.8rem;color:var(--paper)}
.studio-looks span{margin-right:.3rem;color:var(--acid);font-variant-numeric:tabular-nums}
.studio-film{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem clamp(20px,3.5vw,54px);border-top:1px solid var(--line);background:#0e100c}
.studio-film .kicker{margin:0 0 .2rem;color:var(--muted);font-size:.65rem}
.studio-film p:not(.kicker){margin:0;font-size:.95rem;font-weight:600}
.studio-film .actions{min-width:0;max-width:100%}
.studio-film .btn{max-width:100%;flex-wrap:wrap;justify-content:center}
.studio-duration{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
@media (min-width:1100px){.studio-feature{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.studio-preview{aspect-ratio:auto;min-height:400px}.studio-preview img{object-fit:contain}.studio-copy{align-self:center}.studio-film{grid-column:1/-1}}

/* FRAMES */
/* Masonry columns keep every photo at its original framing: no cropped heads, no holes. */
.wall{list-style:none;margin:0;padding:0;columns:2;column-gap:.6rem}
.wall li{break-inside:avoid;margin:0 0 .6rem}
.wall .frame img{height:auto;aspect-ratio:auto}
@media (min-width:900px){.wall{columns:3;column-gap:.8rem}.wall li{margin-bottom:.8rem}}
.frame{position:relative;display:block;width:100%;height:100%;padding:0;line-height:0;border:0;border-radius:var(--r);overflow:hidden;cursor:zoom-in;background:var(--c,var(--ink-3))}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.frame:hover img{transform:scale(1.035)}
.frame-label{position:absolute;left:.7rem;bottom:.7rem;right:auto;max-width:calc(100% - 1.4rem);line-height:1.25;padding:.35rem .6rem;border-radius:999px;background:#0b0c0ad0;font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}

/* DROP */
.drop-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem}
@media (min-width:1000px){.drop-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3rem;align-items:start}}
.emblem-stage{position:relative;aspect-ratio:1;max-height:86svh;border-radius:calc(var(--r) + 8px);overflow:hidden;background:radial-gradient(60% 55% at 50% 50%,#1e2710 0%,#0e100c 55%,var(--ink) 100%);box-shadow:inset 0 0 0 1px #ffffff17}
.emblem-stage video,.emblem-stage .ident-still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-mask-image:radial-gradient(circle,#000 58%,transparent 71%);mask-image:radial-gradient(circle,#000 58%,transparent 71%)}
.emblem-stage .ident-still{padding:14%;object-fit:contain;-webkit-mask-image:none;mask-image:none;opacity:0;transition:opacity .4s}
.emblem-stage.still .ident-still{opacity:1}
.emblem-stage.still video{opacity:0}
.emblem-stage.is-3d video,.emblem-stage.is-3d .ident-still{visibility:hidden}
.viewer-mount{position:absolute;inset:0}
.stage-controls{position:absolute;z-index:3;left:1rem;right:1rem;bottom:1rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.tools{display:flex;flex-wrap:wrap;gap:.4rem}
.tools .chip{background:#0b0c0ac8;box-shadow:inset 0 0 0 1px #ffffff2c}
.viewer-status{position:absolute;z-index:3;left:1rem;right:1rem;top:1rem;margin:0;font-size:.85rem;color:var(--muted)}
.downloads .label{margin-top:.4rem}
.walls{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.walls li{display:grid;gap:.7rem;background:var(--ink-2);border-radius:var(--r);padding:.7rem;box-shadow:inset 0 0 0 1px #ffffff12}
.walls img{border-radius:12px;width:100%;height:auto;aspect-ratio:360/780;object-fit:cover}
.walls li div{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.walls strong{width:100%;font-family:var(--display);font-stretch:62%;font-weight:900;font-size:1.5rem;text-transform:uppercase;line-height:1}
.cards{list-style:none;margin:0;padding:0 0 .4rem;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,1fr);gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory}
.cards a{display:grid;gap:.4rem;text-decoration:none;scroll-snap-align:start}
.cards img{border-radius:12px;aspect-ratio:9/16;object-fit:cover;width:100%;height:auto;box-shadow:inset 0 0 0 1px #ffffff12}
.cards span{font-size:.82rem;color:var(--muted)}
.cards a:hover span{color:var(--acid)}
.edition{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;margin-top:clamp(3rem,7vw,5rem);padding-top:clamp(2rem,5vw,3rem);border-top:1px solid var(--line)}
@media (min-width:1000px){.edition{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:3rem;align-items:center}}
.edition h3{font-size:clamp(2.6rem,8vw,5rem);margin-bottom:.8rem}
.edition-copy p:not(.kicker){color:var(--muted);margin:0}
.collectible-stage{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--ink-2)}
.collectible-stage #collectible-poster{width:100%;height:100%;object-fit:cover}
.collectible-stage.is-3d #collectible-poster{visibility:hidden}
@media (max-width:600px){.collectible-stage{aspect-ratio:4/5}}

/* OFF FIELD */
.off{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.off li{aspect-ratio:4/5}
.off .wide{grid-column:1/-1;aspect-ratio:16/10}
.off .clip{aspect-ratio:auto;height:100%}
@media (min-width:900px){.off{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.off .wide{grid-column:span 3;aspect-ratio:21/9}}

/* closing / footer */
.closing{position:relative;display:grid;justify-items:center;text-align:center;gap:1.4rem;padding:clamp(5rem,12vw,10rem) var(--gut) clamp(4rem,9vw,7rem)}
.closing img{width:clamp(96px,16vw,150px);height:auto;filter:drop-shadow(0 20px 40px #000)}
.closing h2{font-size:clamp(4.6rem,22vw,15rem)}
.closing .actions{justify-content:center}
.foot{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;padding:2rem var(--gut) calc(2rem + env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.foot p{margin:0;max-width:36rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--acid)}

/* dialogs */
dialog{border:0;padding:0;color:var(--paper);background:var(--ink-2);box-shadow:0 0 0 1px #ffffff1a,0 50px 120px #000}
dialog::backdrop{background:#050604e8;backdrop-filter:blur(6px)}
body.dialog-open{overflow:hidden}
.dialog-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem 1.1rem .6rem}
.dialog-bar h2{margin:0;font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,6vw,2.8rem);line-height:.95}
.dialog-bar .kicker{margin-bottom:.4rem}
.close-dialog{flex:none;width:48px;height:48px;border:0;border-radius:50%;background:#ffffff14;cursor:pointer;font-size:1.1rem}
.close-dialog:hover{background:var(--acid);color:var(--acid-ink)}
.cinema{width:min(1100px,96vw);max-height:96svh;border-radius:22px;overflow:auto}
.player-wrap{display:grid;place-items:center;background:#000;margin:0 .8rem;border-radius:14px;overflow:hidden}
#film-player{width:100%;max-height:70svh;background:#000}
.cinema.vertical{width:min(520px,96vw)}
.cinema.vertical #film-player{width:auto;max-width:100%;max-height:74svh;aspect-ratio:9/16}
.film-description{color:var(--muted);margin:.9rem 1.1rem 0}
.media-error{margin:.8rem 1.1rem 0;color:#ffd7a8}
.film-actions{margin:.8rem 1.1rem 0}
.cinema-next{display:flex;flex-wrap:wrap;gap:.4rem;padding:1rem 1.1rem 1.2rem}
.cinema-next button{min-height:44px;padding:.5rem .9rem;border:0;border-radius:999px;background:#ffffff12;cursor:pointer;font-size:.88rem}
.cinema-next button[aria-pressed=true]{background:var(--acid);color:var(--acid-ink);font-weight:700}
.photo-dialog{width:min(1200px,98vw);height:min(96svh,1100px);border-radius:22px;display:none;grid-template-rows:auto 1fr auto}
.photo-dialog[open]{display:grid}
.photo-stage{margin:0 .8rem;min-height:0;display:grid;place-items:center;touch-action:pan-y pinch-zoom;overflow:hidden}
#full-photo{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;transition:opacity .25s,transform .25s}
#full-photo.loading{opacity:.35}
.photo-navigation{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1.1rem 1.1rem;color:var(--muted)}
.share-dialog{width:min(620px,94vw);border-radius:22px}
.share-body{display:grid;gap:1rem;padding:0 1.1rem 1.2rem}
#share-card{width:100%;max-height:34svh;object-fit:contain;border-radius:12px;background:#000}
.share-content{display:grid;gap:.6rem}
.share-content p{margin:0;color:var(--muted)}
.share-content label{font-size:.85rem;color:var(--muted)}
.share-link-row{display:flex;gap:.5rem}
.share-link-row input{flex:1;min-width:0;min-height:48px;padding:0 .9rem;border-radius:12px;border:1px solid var(--line);background:var(--ink);color:var(--paper);font:inherit}
.share-status{min-height:1.5em}

/* motion: entrances only when scripting confirms support; content never depends on them */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}.open-portrait{transform:none}}
@media (forced-colors:active){.btn,.chip{border:1px solid ButtonText}}
