/* drum_atic_art v2: no 3D, black / white / gold, Bodoni Moda + Manrope (self-hosted) */
:root{
  --black:#000;--ink:#0b0b0b;--white:#f5f3ee;--mute:rgba(245,243,238,.62);--line:rgba(245,243,238,.14);
  --gold:#c9a45c;--gold-2:#e3c78d;
  --disp:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --text:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(20px,5vw,72px);--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--black);color:var(--white);font:400 17px/1.65 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
em{font-style:italic}
.us{font-variation-settings:'opsz' 11;font-weight:400;color:var(--gold)}
.nav__brand .us,.footer .us{font-family:var(--text);font-weight:600}
::selection{background:var(--gold);color:#000}

.eyebrow{font:600 12px/1 var(--text);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.display{font:500 clamp(44px,6.6vw,108px)/.98 var(--disp);letter-spacing:-.015em;font-optical-sizing:auto}
.display em{color:var(--gold-2);font-weight:400}
.lead{font-size:clamp(19px,1.6vw,24px);line-height:1.5;color:var(--white);font-weight:300}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad);transition:background .5s var(--ease),padding .5s var(--ease)}
.nav.is-solid{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.nav__brand{font:500 20px/1 var(--disp);text-decoration:none;letter-spacing:.01em}
.nav__links{display:flex;gap:clamp(18px,3vw,40px)}
.nav__links a{font:500 12px/1 var(--text);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--mute);transition:color .3s}
.nav__links a:hover{color:var(--gold-2)}

/* music toggle */
.nav__links{align-items:center}
.snd{display:inline-flex;align-items:center;gap:9px;background:none;border:1px solid rgba(201,164,92,.45);color:var(--mute);border-radius:99px;padding:8px 13px;font:600 10px/1 var(--text);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:color .3s,border-color .3s}
.snd:hover,.snd.on{color:var(--gold-2);border-color:var(--gold)}
.snd__bars{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.snd__bars i{width:2px;height:3px;background:currentColor;border-radius:1px}
.snd.on .snd__bars i{animation:eq 1s ease-in-out infinite alternate}
.snd.on .snd__bars i:nth-child(2){animation-delay:-.3s}.snd.on .snd__bars i:nth-child(3){animation-delay:-.6s}.snd.on .snd__bars i:nth-child(4){animation-delay:-.15s}
@keyframes eq{from{height:3px}to{height:11px}}

/* HERO video */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000}
.hero__media{position:absolute;inset:0}
.hero__poster,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__video{opacity:0;transition:opacity 1.4s var(--ease)}
.hero__video.is-active{opacity:1}
.hero__shade{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.05),rgba(0,0,0,.55) 78%),
  linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 50%,rgba(0,0,0,.82) 100%)}
.hero__copy{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(96px,15vh,170px);max-width:1100px}
.hero__title{font:500 clamp(52px,10.5vw,184px)/.92 var(--disp);letter-spacing:-.025em;margin:18px 0 18px;text-shadow:0 2px 40px rgba(0,0,0,.35);overflow-wrap:anywhere}
.hero__tag{font:300 clamp(18px,2vw,28px)/1.35 var(--text);max-width:34ch}
.hero__tag em{font:italic 400 1.12em/1 var(--disp);color:var(--gold-2)}
.hero__ui{position:absolute;right:var(--pad);bottom:clamp(36px,6vh,56px);display:flex;align-items:center;gap:20px}
.hero__label{font:500 11px/1 var(--text);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);transition:opacity .6s}
.hero__dots{display:flex;gap:6px}
.hero__dots button{width:34px;height:24px;border:0;background:none;cursor:pointer;position:relative;padding:0}
.hero__dots button::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(245,243,238,.28)}
.hero__dots button i{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;width:0;background:var(--gold)}
.hero__dots button.is-done i{width:100%}
.hero__hint{position:absolute;left:var(--pad);bottom:clamp(36px,6vh,56px);display:flex;align-items:center;gap:12px;font:500 11px/1 var(--text);letter-spacing:.28em;text-transform:uppercase;text-decoration:none;color:var(--mute)}
.hero__hint i{width:44px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);animation:hint 2.2s var(--ease) infinite}
@keyframes hint{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}

/* STORY */
.story{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:center;padding:clamp(80px,14vh,160px) var(--pad)}
.story__photo{margin:0;background:#111}
.story__photo{display:flex;justify-content:center;background:none}
.story__photo img{width:auto;max-width:100%;height:auto;max-height:90vh;max-height:90svh}
.story__text{max-width:560px}
.story__text .display{margin:22px 0 34px}
.story__text p+p{margin-top:22px}
.story__text p:not(.lead):not(.eyebrow):not(.story__motto){color:var(--mute)}
.story__motto{margin-top:40px!important;padding-top:28px;border-top:1px solid var(--line);font:italic 400 clamp(22px,2vw,30px)/1.3 var(--disp);color:var(--gold-2)}
.story__motto span{display:block}

/* MANIFESTO */
.manifesto{padding:clamp(80px,16vh,200px) var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.manifesto__line{font:500 clamp(36px,6.4vw,104px)/1.06 var(--disp);letter-spacing:-.02em}
.manifesto__line em{color:var(--gold-2);font-weight:400}

/* WORKS */
.works{padding:clamp(80px,14vh,160px) var(--pad)}
.section-head{margin-bottom:clamp(40px,7vh,80px)}
.section-head .display{margin-top:22px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.tile{position:relative;aspect-ratio:4/5;overflow:hidden;background:#111;border:0;padding:0;cursor:zoom-in;color:inherit;text-align:left}
.tile img{width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease),filter .6s var(--ease)}
.tile:hover img{filter:brightness(1.08)}
.tile span{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;font:500 13px/1.35 var(--text);letter-spacing:.04em;background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transition:opacity .4s}
.tile:hover span,.tile:focus-visible span{opacity:1}
.tile:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

/* CONTACT */
.contact{padding:clamp(100px,18vh,220px) var(--pad);text-align:center;display:flex;flex-direction:column;align-items:center;border-top:1px solid var(--line)}
.contact .display{margin:22px 0 30px}
.contact .lead{max-width:36ch;color:var(--mute)}
.btn{margin-top:44px;display:inline-block;padding:18px 38px;border:1px solid var(--gold);color:var(--gold-2);text-decoration:none;font:600 12px/1 var(--text);letter-spacing:.26em;text-transform:uppercase;transition:background .35s,color .35s}
.btn:hover{background:var(--gold);color:#000}

/* FOOTER */
.footer{padding:56px var(--pad) 40px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px}
.footer__row{display:flex;gap:28px;align-items:baseline;flex-wrap:wrap}
.footer__row span{font:500 22px/1 var(--disp)}
.footer__row a{font-size:14px;color:var(--mute);text-decoration:none}
.footer__row a:hover{color:var(--gold-2)}
.footer__sig{width:96px;height:auto;opacity:.85;grid-row:span 2}
.footer__note{font-size:12px;color:rgba(245,243,238,.4);letter-spacing:.06em}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.lightbox.is-open{opacity:1}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(92vw,1400px);display:flex;flex-direction:column;align-items:center}
.lightbox img{max-height:82vh;width:auto;max-width:100%;object-fit:contain}
.lightbox figcaption{margin-top:16px;font-size:14px;color:var(--mute);text-align:center;max-width:60ch}
.lightbox button{position:absolute;background:none;border:0;color:var(--white);font:300 44px/1 var(--text);cursor:pointer;padding:12px 18px;opacity:.75}
.lightbox button:hover{opacity:1;color:var(--gold-2)}
.lightbox__close{top:12px;right:12px}
.lightbox__prev{left:8px;top:50%;margin-top:-34px}
.lightbox__next{right:8px;top:50%;margin-top:-34px}

/* fades (opacity + small translate only) */
.js .fade{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .fade.in{opacity:1;transform:none}

@media (max-width:900px){
  .story{grid-template-columns:1fr;padding-top:0;padding-left:0;padding-right:0}
  .story__text{padding:0 var(--pad)}
  .story__photo img{max-height:none;width:100%}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__label{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .nav__links{gap:16px}.nav__links a{font-size:10px;letter-spacing:.18em}
  .nav__brand{font-size:17px}
  .nav__links a{display:none}
  .snd__txt{display:none}
  .snd{padding:9px 11px}
  .hero__copy{bottom:120px}
  .hero__ui{left:var(--pad);right:auto;bottom:44px}
  .hero__hint{left:auto;right:var(--pad);bottom:44px}
  .hero__hint span{display:none}
  .footer{grid-template-columns:1fr}
  .footer__sig{grid-row:auto}
}
@media (prefers-reduced-motion:reduce){
  .js .fade{opacity:1;transform:none;transition:none}
  .hero__video{transition:opacity .3s}
  html{scroll-behavior:auto}
}