:root{--ink:#07060a;--paper:#f1e9d6;--mute:#8a8273;--gold:#FFD400;--line:rgba(241,233,214,.14);--serif:'Bodoni Moda',serif;--sans:'Archivo',sans-serif;--narrow:'Archivo Narrow',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-loading,body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
em{font-family:var(--serif);font-style:italic;font-weight:400}
::selection{background:var(--gold);color:var(--ink)}
.kicker{font:500 11px var(--narrow);letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}

#field{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
main,footer{position:relative;z-index:2}
.grain{position:fixed;inset:-50%;z-index:80;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(4) infinite}
@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}}
.flash{position:fixed;inset:0;z-index:70;pointer-events:none;background:radial-gradient(circle at 50% 50%,#fff 0,#ffe680 30%,rgba(255,212,0,0) 70%);opacity:0}

/* cursor with label */
#cursor{position:fixed;left:0;top:0;z-index:95;pointer-events:none;display:none}
#cursor span{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--gold);border-radius:50%;transition:width .35s,height .35s,margin .35s,background .35s;mix-blend-mode:difference}
#cursor b{position:absolute;transform:translate(-50%,-50%) scale(.4);opacity:0;font:700 11px var(--narrow);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);transition:transform .35s,opacity .35s;white-space:nowrap}
#cursor.hover span{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--gold)}
#cursor.label span{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--gold);mix-blend-mode:normal}
#cursor.label b{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:hover) and (pointer:fine){#cursor{display:block}body,a,button{cursor:none}}

/* loader */
#loader{position:fixed;inset:0;z-index:60;display:grid;place-items:center;align-content:center;gap:18px;pointer-events:none}
.ld-count{font:400 clamp(64px,9vw,128px)/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:34vh}
.ld-count i{font-style:italic;color:var(--mute);font-size:.4em;margin-left:.2em}
.ld-cap{font:500 11px var(--narrow);letter-spacing:.34em;text-transform:uppercase;color:var(--mute)}
.ld-skip{position:fixed;right:4vw;bottom:4vh;font:500 11px var(--narrow);letter-spacing:.3em;text-transform:uppercase;color:var(--mute);pointer-events:auto}
.ld-skip:hover{color:var(--gold)}

/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:24px 4vw;mix-blend-mode:difference;opacity:0}
.brand{display:flex;align-items:center;gap:10px;font:900 14px var(--sans);letter-spacing:.34em}
.brand svg{width:26px;height:18px}
.top nav{display:flex;gap:30px}
.top nav a{font:500 11px var(--narrow);letter-spacing:.26em;text-transform:uppercase;position:relative;padding-bottom:4px}
.top nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.top nav a:hover::after{transform:scaleX(1);transform-origin:left}
.top-year{font:italic 400 20px var(--serif);min-width:3em;text-align:right}

/* ---------- 1 hero ---------- */
.hero{position:relative;height:100vh;min-height:640px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 4vw 6vh;overflow:hidden}
.hero-video{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0}
.hero-video img,.hero-video iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;transform:translate(-50%,-50%) scale(1.2);border:0;object-fit:cover}
.hero-video::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(7,6,10,.45),rgba(7,6,10,.88) 75%),linear-gradient(180deg,transparent 55%,var(--ink))}
.hero-kicker{position:absolute;top:13vh;left:4vw;right:4vw;display:flex;justify-content:space-between;font:500 11px var(--narrow);letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.hero-title{position:relative;display:flex;align-items:flex-end;gap:2.4vw;line-height:.78;white-space:nowrap}
.hero-title .w{display:flex}
.hero-title b{display:inline-block;font-weight:inherit;will-change:transform}
.w1{font:900 clamp(90px,17.5vw,300px)/.78 var(--sans);letter-spacing:-.05em}
.w2{font:italic 400 clamp(100px,19vw,330px)/.78 var(--serif);color:var(--gold);letter-spacing:-.03em}
.hero-names{position:relative;display:flex;gap:4vw;margin-top:4vh;font:500 12px var(--narrow);letter-spacing:.36em;text-transform:uppercase}
.now-playing{position:absolute;right:4vw;bottom:6vh;display:flex;align-items:center;gap:14px;text-align:left;padding:12px 18px 12px 14px;border:1px solid var(--line);border-radius:99px;background:rgba(7,6,10,.4);backdrop-filter:blur(10px);transition:border-color .3s}
.now-playing:hover{border-color:var(--gold)}
.now-playing small{display:block;font:500 9px var(--narrow);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.now-playing span{font:italic 400 17px var(--serif)}
.eq{display:flex;gap:3px;align-items:flex-end;height:16px}
.eq s{width:3px;background:var(--gold);animation:eq 1s ease-in-out infinite}
.eq s:nth-child(2){animation-delay:-.3s}.eq s:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}

/* ---------- 2 archive tunnel ---------- */
.archive{position:relative;height:100vh}
.tunnel{position:relative;height:100vh;overflow:hidden;perspective:900px;perspective-origin:50% 50%}
.tunnel-world{position:absolute;inset:0;transform-style:preserve-3d}
.t-card{position:absolute;left:50%;top:50%;transform-style:preserve-3d;will-change:transform,opacity;cursor:none}
.t-card img{width:100%;height:100%;object-fit:cover;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.t-card figcaption{margin-top:8px;font:500 10px var(--narrow);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.tunnel-cap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:2;pointer-events:none}
.tunnel-cap p{margin-top:16px;font:400 clamp(28px,3vw,46px)/1.1 var(--serif)}
.tunnel-cap b{display:block;font:900 clamp(80px,11vw,180px)/.9 var(--sans);letter-spacing:-.04em;color:var(--gold);font-variant-numeric:tabular-nums}

/* ---------- 3 years ---------- */
.years{position:relative;height:100vh}
.years-stage{position:relative;height:100vh;overflow:hidden}
.years-label{position:absolute;top:13vh;left:4vw;font:500 11px var(--narrow);letter-spacing:.34em;text-transform:uppercase;color:var(--mute)}
.years-label span{color:var(--gold);font:italic 400 16px var(--serif);letter-spacing:0;margin-right:10px}
.chapter{position:absolute;right:5vw;top:50%;transform:translateY(-50%);width:min(38vw,560px)}
.ch-media{position:relative;aspect-ratio:4/3}
.ch-media figure{position:absolute;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6);background:#111;cursor:none}
.ch-media figure img{width:100%;height:100%;object-fit:cover}
.ch-media figure:nth-child(1){inset:0 18% 14% 0;z-index:3}
.ch-media figure:nth-child(2){width:46%;height:52%;right:0;top:-8%;z-index:2}
.ch-media figure:nth-child(3){width:40%;height:46%;right:6%;bottom:-10%;z-index:4}
.ch-media figure figcaption{position:absolute;left:10px;bottom:8px;font:500 9px var(--narrow);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 6px #000}
.ch-media.empty{aspect-ratio:auto;height:0}
.ch-text{margin-top:6vh;display:grid;grid-template-columns:auto 1fr;column-gap:18px}
.ch-media.empty+.ch-text{margin-top:0}
.ch-no{grid-row:span 3;font:italic 400 20px var(--serif);color:var(--gold);padding-top:6px}
.ch-text h2{font:800 clamp(28px,2.8vw,44px)/1 var(--sans);text-transform:uppercase}
.ch-text h2 em{text-transform:none;font-size:1.12em}
.ch-text p{margin-top:12px;font:300 16px/1.55 var(--sans);color:#cbc2ae;max-width:40ch}
.ch-play{justify-self:start;margin-top:18px;display:inline-flex;align-items:center;gap:12px;font:700 11px var(--narrow);letter-spacing:.24em;text-transform:uppercase}
.ch-play[hidden]{display:none}
.ch-play i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--ink);font-style:normal;font-size:12px;transition:transform .3s}
.ch-play:hover i{transform:scale(1.15)}
.rail{position:absolute;left:4vw;right:4vw;bottom:6vh;display:flex;justify-content:space-between;list-style:none;border-top:1px solid var(--line)}
.rail li{position:relative;padding-top:14px;font:500 11px var(--narrow);letter-spacing:.2em;color:var(--mute);transition:color .4s}
.rail li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--ink);border:1px solid var(--mute);transition:all .4s}
.rail li.on{color:var(--gold)}
.rail li.on::before{background:var(--gold);border-color:var(--gold);transform:scale(1.5)}
.rail .fill{position:absolute;left:0;top:-1px;height:1px;background:var(--gold);width:0;padding:0}
.rail .fill::before{display:none}

/* ---------- 4 members ---------- */
.members{position:relative;height:100vh}
.mem-stage{position:relative;height:100vh;overflow:hidden;background:var(--ink)}
.mem-layer{position:absolute;inset:0;clip-path:circle(0% at 50% 55%);will-change:clip-path}
.mem-layer:first-child{clip-path:circle(150% at 50% 55%)}
.mem-hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.mem-layer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,6,10,.75),transparent 45%),linear-gradient(180deg,transparent 45%,rgba(7,6,10,.9));pointer-events:none}
.mem-info{position:absolute;left:4vw;right:24vw;bottom:7vh;z-index:2}
.mem-info span{display:block;font:500 11px var(--narrow);letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:2vh}
.mem-info h3{font:900 clamp(72px,13vw,220px)/.8 var(--sans);letter-spacing:-.05em;white-space:nowrap}
.mem-title{position:absolute;top:13vh;left:4vw;z-index:3;font:500 11px var(--narrow);letter-spacing:.34em;text-transform:uppercase}
.mem-title em{font-size:18px;letter-spacing:0;text-transform:none;color:var(--gold)}
.reel{position:absolute;right:4vw;top:0;bottom:0;width:17vw;overflow:hidden;z-index:2;-webkit-mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent)}
.reel-track{display:flex;flex-direction:column;gap:14px;animation:reel 38s linear infinite}
.reel:hover .reel-track{animation-play-state:paused}
@keyframes reel{to{transform:translateY(-50%)}}
.reel figure{position:relative;cursor:none}
.reel img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.6);transition:filter .5s}
.reel figure:hover img{filter:none}
.reel figcaption{position:absolute;left:8px;bottom:6px;right:8px;font:500 9px var(--narrow);letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 6px #000}

/* ---------- 5 theater ---------- */
.theater{position:relative;min-height:100vh;padding:16vh 4vw 12vh;overflow:hidden}
.theater-ambient{position:absolute;inset:-10%;z-index:-1;background-size:cover;background-position:center;filter:blur(70px) saturate(1.4) brightness(.45);transform:scale(1.2);transition:background-image .8s}
.theater-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:5vh;font:500 11px var(--narrow);letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.theater-grid{display:grid;grid-template-columns:minmax(260px,.8fr) 1.6fr;gap:4vw;align-items:start}
.mv-list{list-style:none}
.mv-list button{width:100%;display:grid;grid-template-columns:34px 1fr auto;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);text-align:left;transition:padding .5s cubic-bezier(.2,.7,.2,1),color .3s}
.mv-list i{font:italic 400 14px var(--serif);color:var(--mute)}
.mv-list b{font:400 clamp(24px,2.4vw,38px)/1.05 var(--serif);letter-spacing:-.01em;font-weight:400}
.mv-list span{font:500 10px var(--narrow);letter-spacing:.2em;color:var(--mute)}
.mv-list button.cur{padding-left:14px;color:var(--gold)}
.mv-list button.cur b{font-style:italic}
.screen{position:sticky;top:14vh;aspect-ratio:16/9;overflow:hidden;background:#000;box-shadow:0 40px 120px rgba(0,0,0,.7);cursor:none}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen-video{position:absolute;inset:0;opacity:0;transition:opacity .8s}
.screen-video.on{opacity:1}
.screen-video iframe{position:absolute;inset:-12% 0;width:100%;height:124%;border:0;pointer-events:none}
.screen-meta{position:absolute;left:24px;bottom:20px;z-index:2;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.screen-meta b{display:block;font:400 clamp(30px,3.4vw,58px)/1 var(--serif)}
.screen-meta span{font:500 11px var(--narrow);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.screen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.7));pointer-events:none}
.screen-play{position:absolute;right:24px;bottom:22px;z-index:2;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--gold);color:var(--ink);font-style:normal;font-size:16px;transition:transform .4s}
.screen:hover .screen-play{transform:scale(1.12)}

/* ---------- 6 wall ---------- */
.wall{position:relative;padding:14vh 0 12vh;overflow:hidden}
.wall-head{display:flex;justify-content:space-between;align-items:flex-end;padding:0 4vw 6vh}
.wall-head h2{font:900 clamp(56px,8vw,140px)/.85 var(--sans);text-transform:uppercase;letter-spacing:-.04em}
.wall-head h2 em{text-transform:none;color:var(--gold);font-size:1.05em;letter-spacing:-.02em}
.wall-head span{font:500 11px var(--narrow);letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.wall-rows{display:flex;flex-direction:column;gap:14px}
.w-row{display:flex;gap:14px;width:max-content;will-change:transform}
.w-row figure{position:relative;flex:0 0 auto;height:30vh;overflow:hidden;cursor:none}
.w-row:nth-child(2) figure{height:36vh}
.w-row img{height:100%;width:auto;filter:grayscale(.85) brightness(.8);transition:filter .5s,transform .8s cubic-bezier(.2,.7,.2,1)}
.w-row figure:hover img{filter:none;transform:scale(1.06)}
.w-row figcaption{position:absolute;left:10px;bottom:8px;font:500 9px var(--narrow);letter-spacing:.18em;text-transform:uppercase;opacity:0;transition:opacity .4s;text-shadow:0 1px 6px #000}
.w-row figure:hover figcaption{opacity:1}

/* ---------- 7 ocean ---------- */
.ocean{position:relative;height:200vh}
.ocean-bg{position:absolute;inset:0;opacity:.28}
.ocean-bg img{position:sticky;top:0;width:100%;height:100vh;object-fit:cover;filter:saturate(1.2)}
.ocean-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--ink),transparent 30%,transparent 70%,var(--ink))}
.ocean-inner{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;padding-top:20vh;text-align:center}
.ocean-title{margin:3vh 0;line-height:.88}
.ocean-title span{display:block;font:900 clamp(44px,7.6vw,128px)/.9 var(--sans);text-transform:uppercase;letter-spacing:-.04em}
.ocean-title em{display:block;font-size:clamp(56px,9.6vw,160px);color:var(--gold)}
.ocean-when{font:500 12px var(--narrow);letter-spacing:.3em;text-transform:uppercase}
.btn{position:relative;display:inline-flex;gap:14px;align-items:center;margin-top:5vh;padding:18px 34px;border:1px solid var(--gold);font:700 12px var(--narrow);letter-spacing:.26em;text-transform:uppercase;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .5s cubic-bezier(.7,0,.2,1);z-index:-1}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:none}
.btn i{font-style:normal}

/* footer */
footer{padding:6vh 4vw;display:flex;justify-content:space-between;align-items:flex-start;gap:40px;border-top:1px solid var(--line);background:var(--ink)}
.ft-brand{font:900 22px var(--sans);letter-spacing:.3em;white-space:nowrap}
.ft-brand em{font-size:16px;letter-spacing:0;color:var(--mute);margin-left:10px}
.credits{max-width:760px;font:300 11px/1.7 var(--sans);color:var(--mute);text-align:right}

/* modals */
.modal{position:fixed;inset:0;z-index:90;background:rgba(7,6,10,.94);display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.modal.open{opacity:1;visibility:visible}
.modal-close{position:absolute;top:22px;right:4vw;font-size:44px;line-height:1;color:var(--paper);transition:transform .4s,color .3s}
.modal-close:hover{transform:rotate(90deg);color:var(--gold)}
.player-frame{width:min(88vw,calc(78vh * 16 / 9));aspect-ratio:16/9;background:#000;transform:scale(.92);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.modal.open .player-frame{transform:none}
.player-frame iframe{width:100%;height:100%;border:0}
.player-title{margin-top:20px;font:italic 400 24px var(--serif)}
#lightbox figure{display:flex;flex-direction:column;align-items:center}
#lightbox img{max-width:84vw;max-height:78vh;object-fit:contain;transform:scale(.94);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#lightbox.open img{transform:none}
#lightbox figcaption{margin-top:14px;font:500 11px var(--narrow);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border:1px solid var(--line);border-radius:50%;font-size:20px;transition:background .3s,color .3s}
.lb-nav:hover{background:var(--gold);color:var(--ink)}
.lb-nav.prev{left:3vw}.lb-nav.next{right:3vw}

/* mobile */
@media (max-width:860px){
  .top nav{display:none}
  .hero-title{flex-direction:column;align-items:flex-start;gap:0}
  .w1{font-size:30vw}.w2{font-size:33vw}
  .hero-names{gap:5vw;font-size:10px}
  .now-playing{top:19vh;bottom:auto}
  .chapter{left:6vw;right:6vw;width:auto;top:auto;bottom:13vh;transform:none}
  .ch-media{aspect-ratio:16/10;width:86%}
  .ch-text{margin-top:5vh}
  .rail li{font-size:9px;letter-spacing:.06em}
  .mem-info{right:4vw}
  .mem-info h3{font-size:16vw}
  .reel{left:0;right:0;top:20vh;bottom:auto;width:auto;height:24vh;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
  .reel-track{flex-direction:row;height:100%;animation-name:reelx}
  .reel figure{height:100%}
  .reel img{height:100%;width:auto}
  .theater-grid{grid-template-columns:1fr}
  .screen{position:relative;top:0;order:-1}
  .theater-head span:last-child{display:none}
  .w-row figure{height:22vh}.w-row:nth-child(2) figure{height:26vh}
  .wall-head{flex-direction:column;align-items:flex-start;gap:14px}
  .ocean-when{letter-spacing:.14em;font-size:10px;padding:0 6vw;line-height:1.8}
  footer{flex-direction:column}
  .credits{text-align:left}
  .lb-nav{top:auto;bottom:4vh;transform:none}
}
@keyframes reelx{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.grain,.reel-track{animation:none}}