/* ============================================================
   FONTS — self-hosted variable subsets (Syne 400-800, Inter 300-500)
   latin-ext only downloads if a character needs it
   ============================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/syne-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/syne-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ============================================================
   MARCO — Afro House / Tech House
   Palette: charcoal base · burnt orange · warm red · magenta ·
   deep purple · amber highlights
   ============================================================ */
:root{
  --ink:#0b0708;
  --ink-2:#120b0d;
  --ink-3:#1a1013;
  --cream:#f4ede4;
  --cream-dim:rgba(244,237,228,.62);
  --cream-faint:rgba(244,237,228,.38);
  --amber:#e8a54b;
  --ember:#ff6b35;
  --red:#e04a3a;
  --magenta:#c33764;
  --plum:#6b2d5c;
  --deep:#2a1030;
  --grad-sunset:linear-gradient(120deg,#e8a54b 0%,#ff6b35 28%,#e04a3a 52%,#c33764 76%,#6b2d5c 100%);
  --font-display:'Syne',sans-serif;
  --font-body:'Inter',sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --nav-h:72px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--ember);color:var(--ink)}
img{max-width:100%;display:block}
picture{display:contents}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;
  transition:opacity .9s ease,visibility .9s ease;
}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-disc{
  width:clamp(120px,26vw,160px);aspect-ratio:1;border-radius:50%;position:relative;
  animation:loaderspin 2.4s linear infinite;
  background:
    repeating-radial-gradient(circle at 50% 50%,#0d0a0b 0px,#161114 1.5px,#0d0a0b 3px),
    radial-gradient(circle at 50% 50%,#181316 0%,#0a0708 70%);
  box-shadow:0 18px 50px -12px rgba(0,0,0,.9),0 0 0 1px rgba(244,237,228,.07),
    0 0 60px -10px rgba(255,107,53,.35);
}
@keyframes loaderspin{to{transform:rotate(360deg)}}
.loader-label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46%;aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;
  background:radial-gradient(circle at 38% 32%,#f0c268,#ff6b35 48%,#c33764 90%);
  box-shadow:0 0 0 3px #0a0708,0 0 0 4px rgba(244,237,228,.1);
  text-align:center;color:#2a0e08;
}
.loader-label .ll-1{font-family:var(--font-display);font-weight:800;font-size:clamp(.66rem,2vw,.82rem);letter-spacing:.12em;line-height:1.1}
.loader-label .ll-2{font-family:var(--font-display);font-weight:600;font-size:clamp(.4rem,1.2vw,.5rem);letter-spacing:.42em;margin-top:.3em}
.loader-hole{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:6px;height:6px;border-radius:50%;background:var(--ink);
  box-shadow:0 0 0 1px rgba(244,237,228,.15)}
.loader-tag{
  font-family:var(--font-display);font-size:.6rem;font-weight:600;
  letter-spacing:.46em;text-transform:uppercase;color:var(--cream-faint);
  animation:loaderpulse 1.6s ease-in-out infinite;
}
@keyframes loaderpulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ---------- film grain ---------- */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:120;opacity:.05;will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-3%,-4%)}
  20%{transform:translate(-6%,3%)}30%{transform:translate(4%,-6%)}
  40%{transform:translate(-3%,7%)}50%{transform:translate(-6%,4%)}
  60%{transform:translate(6%,0)}70%{transform:translate(0,5%)}
  80%{transform:translate(2%,7%)}90%{transform:translate(-4%,3%)}
}

/* ---------- reveal system ---------- */
.rv{opacity:0;transform:translateY(34px);
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.12s}.rv-d2{transition-delay:.24s}.rv-d3{transition-delay:.36s}.rv-d4{transition-delay:.48s}

/* ---------- shared ---------- */
.wrap{width:min(1180px,92%);margin:0 auto}
.kicker{
  font-family:var(--font-display);font-size:.72rem;font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;color:var(--amber);
  display:flex;align-items:center;gap:16px;
}
.kicker::before{content:"";width:38px;height:1px;background:linear-gradient(90deg,var(--amber),transparent)}
/* centred variant: mirrored rule, otherwise the single left rule offsets the text */
.kicker-center{justify-content:center}
.kicker-center::after{content:"";width:38px;height:1px;background:linear-gradient(90deg,transparent,var(--amber))}
.h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.1rem,5.5vw,3.6rem);
  line-height:1.06;letter-spacing:-.015em;margin:.9rem 0 1.4rem;
}
.h2 em{
  font-style:normal;
  background:var(--grad-sunset);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
section{position:relative}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-display);font-weight:600;font-size:.82rem;
  letter-spacing:.22em;text-transform:uppercase;
  padding:1.15em 2.3em;border-radius:100px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{color:var(--ink);background:var(--grad-sunset);background-size:200% 100%;
  animation:btnshift 6s ease infinite;
  box-shadow:0 8px 32px -8px rgba(255,107,53,.45)}
.btn-primary:hover{box-shadow:0 14px 44px -8px rgba(255,107,53,.62)}
@keyframes btnshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* background-position animation repaints every frame — main.js parks it when off-screen */
.anim-idle{animation-play-state:paused}
.btn-ghost{color:var(--cream);border:1px solid rgba(244,237,228,.22);background:rgba(11,7,8,.35)}
.btn-ghost:hover{border-color:rgba(232,165,75,.6);box-shadow:0 0 30px -6px rgba(232,165,75,.3)}
.btn .arr{transition:transform .4s var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .5s,backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(11,7,8,.92);
  border-bottom-color:rgba(244,237,228,.07)}
.nav-inner{width:min(1180px,92%);margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:.34em;display:flex;align-items:center;gap:.65em}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--grad-sunset);box-shadow:0 0 14px rgba(255,107,53,.8);animation:pulse 2.4s ease infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.7}}
.nav-links{display:none;gap:2.4rem;font-family:var(--font-display);font-size:.72rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase}
.nav-links a{color:var(--cream-dim);transition:color .3s;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--amber);transition:width .35s var(--ease-out)}
.nav-links a:hover{color:var(--cream)}
.nav-links a:hover::after{width:100%}
.nav-book{font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  padding:.85em 1.7em;border-radius:100px;color:var(--ink);background:var(--grad-sunset);background-size:200% 100%;
  transition:box-shadow .4s;box-shadow:0 4px 20px -6px rgba(255,107,53,.4)}
.nav-book:hover{box-shadow:0 8px 30px -6px rgba(255,107,53,.65)}
@media(min-width:880px){.nav-links{display:flex}}

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;position:relative}
.hero-bg{position:absolute;inset:0;z-index:0}
/* real photo behind the sunset graphics — the sun orb reads as stage haze over it */
.hero-photo{position:absolute;inset:0;overflow:hidden}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;
  opacity:.46;filter:saturate(1.06) contrast(1.04);
  transform:scale(1.06);transform-origin:50% 45%;will-change:transform;
  animation:heropan 30s ease-in-out infinite alternate;
}
@keyframes heropan{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-1.5%,-1.5%,0)}}
/* keeps the headline readable over the photo */
.hero-photo::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(64% 50% at 50% 45%,rgba(11,7,8,.78),rgba(11,7,8,.34) 60%,transparent 84%),
    linear-gradient(180deg,rgba(11,7,8,.92) 0%,rgba(11,7,8,.25) 32%,rgba(11,7,8,.35) 60%,rgba(11,7,8,.95) 92%)}
/* sun orb */
.sun{
  position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);
  width:min(78vw,620px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,
    rgba(232,165,75,.85) 0%,rgba(255,107,53,.65) 22%,
    rgba(224,74,58,.4) 42%,rgba(195,55,100,.22) 62%,
    rgba(107,45,92,.08) 80%,transparent 100%);
  animation:sunbreathe 9s ease-in-out infinite;
}
@keyframes sunbreathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-48%) scale(1.06)}}
/* horizon glow line */
.horizon{position:absolute;left:0;right:0;top:58%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,165,75,.5) 30%,rgba(255,107,53,.7) 50%,rgba(195,55,100,.5) 70%,transparent);
  box-shadow:0 0 40px 2px rgba(255,107,53,.35)}
/* drifting light fields (pure gradients, no blur) */
.blob{position:absolute;border-radius:50%;opacity:.55;will-change:transform}
.blob-1{width:60vw;height:60vw;left:-20vw;top:-14vw;background:radial-gradient(circle,rgba(107,45,92,.55),rgba(107,45,92,.18) 45%,transparent 70%);animation:drift1 22s ease-in-out infinite}
.blob-2{width:52vw;height:52vw;right:-16vw;bottom:-10vw;background:radial-gradient(circle,rgba(195,55,100,.4),rgba(195,55,100,.12) 45%,transparent 70%);animation:drift2 26s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(6vw,4vw)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-5vw,-6vw)}}
/* darkening from top+bottom */
.hero-fade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(11,7,8,.85) 0%,transparent 30%,transparent 62%,rgba(11,7,8,.92) 92%,var(--ink) 100%)}
/* waveform ridge */
.hero-wave{position:absolute;left:0;right:0;bottom:6%;height:120px;z-index:1;opacity:.5}
.hero-wave svg{width:100%;height:100%}
.hero-wave path{fill:none;stroke:url(#wavegrad);stroke-width:1.2}

.hero-content{position:relative;z-index:2;width:min(1180px,92%);margin:0 auto;padding-top:var(--nav-h);text-align:center}
.hero-tag{
  font-family:var(--font-display);font-size:clamp(.62rem,1.8vw,.78rem);font-weight:600;
  letter-spacing:.5em;text-transform:uppercase;color:var(--amber);
  display:inline-flex;align-items:center;gap:18px;margin-bottom:1.6rem;
}
.hero-tag::before,.hero-tag::after{content:"";width:44px;height:1px;background:rgba(232,165,75,.5)}
@media(max-width:620px){
  .hero-tag{letter-spacing:.26em;gap:10px}
  .hero-tag::before,.hero-tag::after{width:18px}
}
@media(max-width:400px){
  .hero-tag{letter-spacing:.18em;gap:8px}
  .hero-tag::before,.hero-tag::after{width:12px}
}
.hero-name{
  font-family:var(--font-display);font-weight:800;
  /* Syne 800 measures 6.62em for "MARCO" but 9.23em for "DJ MARCO" — 40% wider — so
     the old 13vw/10.5rem would overflow a phone. 9vw keeps the block the same on-screen
     width as before (~300px at 359px, ~1010px at 1200px) with smaller letters, and the
     1.6rem floor keeps it inside the 92% column even on a 280px-wide screen. */
  font-size:clamp(1.6rem,9vw,7rem);
  line-height:.88;letter-spacing:.015em;white-space:nowrap;
}
/* The gradient lives on the letters, not on .hero-name. WebKit renders nothing when
   background-clip:text sits on a parent that also has a filter, or whose text is held
   by inline-block children — this element hit both, so it was invisible on iOS.
   As a bonus, if JS never splits the letters the h1 still shows as plain cream text. */
.hero-name span{
  display:inline-block;
  background:linear-gradient(180deg,#f4ede4 8%,#f0c895 48%,#ff6b35 82%,#c33764 108%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  opacity:0;transform:translateY(.35em) rotate(2deg);
  animation:letter 1.1s var(--ease-out) forwards;
}
@keyframes letter{to{opacity:1;transform:none}}
.hero-sub{
  max-width:560px;margin:1.9rem auto 0;
  font-size:clamp(.98rem,2.4vw,1.14rem);color:var(--cream-dim);line-height:1.75;
}
.hero-sub strong{color:var(--cream);font-weight:500}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.6rem}
/* equalizer strip */
.eq{display:flex;align-items:flex-end;gap:4px;height:26px;justify-content:center;margin-top:3rem}
.eq i{width:3px;border-radius:2px;background:linear-gradient(180deg,var(--amber),var(--magenta));
  animation:eq 1.1s ease-in-out infinite;transform-origin:bottom}
@keyframes eq{0%,100%{height:22%}50%{height:100%}}
/* scroll indicator */
.scroll-hint{
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-family:var(--font-display);font-size:.6rem;font-weight:600;letter-spacing:.4em;
  text-transform:uppercase;color:var(--cream-faint);
}
.scroll-hint .line{width:1px;height:44px;overflow:hidden;background:rgba(244,237,228,.12);position:relative}
.scroll-hint .line::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;
  background:linear-gradient(180deg,transparent,var(--amber));animation:scrollline 2.2s ease infinite}
@keyframes scrollline{to{top:100%}}

/* ============================================================
   VINYL STORY
   ============================================================ */
.vinyl-story{height:480svh;position:relative}
.vinyl-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* each chapter carries a real photo underneath its colour wash — they cross-fade with .on */
.vinyl-atmo{position:absolute;inset:0;transition:opacity 1.2s ease;opacity:0;pointer-events:none;overflow:hidden}
.vinyl-atmo.on{opacity:1}
.vinyl-atmo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.32;filter:saturate(1.08);transform:scale(1.04);
}
/* scrim first, then the chapter colour on top */
.vinyl-atmo::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,7,8,.9) 0%,rgba(11,7,8,.42) 26%,rgba(11,7,8,.48) 62%,rgba(11,7,8,.94) 100%)}
.vinyl-atmo::after{content:"";position:absolute;inset:0;z-index:2}
.atmo-0::after{background:radial-gradient(120% 90% at 50% 110%,rgba(232,165,75,.28),rgba(255,107,53,.12) 40%,transparent 72%)}
.atmo-1::after{background:radial-gradient(120% 90% at 15% 40%,rgba(224,74,58,.22),transparent 60%),radial-gradient(90% 80% at 90% 80%,rgba(255,107,53,.14),transparent 60%)}
.atmo-2::after{background:radial-gradient(120% 90% at 80% 20%,rgba(195,55,100,.22),transparent 58%),radial-gradient(90% 80% at 20% 90%,rgba(107,45,92,.28),transparent 62%)}
.atmo-3::after{background:radial-gradient(140% 100% at 50% 0%,rgba(42,16,48,.7),transparent 62%),radial-gradient(80% 60% at 50% 100%,rgba(232,165,75,.2),transparent 66%)}

.vinyl-grid{
  position:relative;z-index:2;width:min(1180px,92%);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:0;align-items:center;height:100%;
  padding-top:var(--nav-h);
}
@media(min-width:880px){
  .vinyl-grid{grid-template-columns:1.05fr 1fr;gap:4rem}
}

/* the disc stack — 4 records, swapped like a DJ changing plates */
.disc-holder{display:flex;align-items:center;justify-content:center;position:relative;height:min(58svh,440px)}
@media(min-width:880px){.disc-holder{height:auto}}
.disc-glow{position:absolute;width:105%;aspect-ratio:1;border-radius:50%;opacity:.8;transition:background 1.2s ease}
.disc-stack{
  position:relative;width:min(76vw,min(52svh,470px));aspect-ratio:1;
}
@media(min-width:880px){.disc-stack{width:min(38vw,470px)}}
.disc{
  position:absolute;inset:0;border-radius:50%;
  will-change:transform,opacity;
  box-shadow:0 30px 90px -20px rgba(0,0,0,.85),0 0 0 1px rgba(244,237,228,.05);
}
.disc-spin{position:absolute;inset:0;border-radius:50%;will-change:transform}
.disc-body{
  position:absolute;inset:0;border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      #0d0a0b 0px,#141013 1.5px,#0d0a0b 3px),
    radial-gradient(circle at 50% 50%,#181316 0%,#0a0708 70%);
}
/* light streak across the grooves — stays still while disc spins */
.disc-sheen{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:3;
  background:
    conic-gradient(from 210deg at 50% 50%,
      transparent 0deg,rgba(244,237,228,.09) 16deg,rgba(255,150,80,.13) 30deg,transparent 52deg,
      transparent 175deg,rgba(244,237,228,.06) 196deg,rgba(195,55,100,.09) 210deg,transparent 232deg);
}
.disc-rim{position:absolute;inset:0;border-radius:50%;z-index:4;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(244,237,228,.07),inset 0 4px 30px rgba(0,0,0,.6)}
/* labels — one per record */
.disc-label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:37%;aspect-ratio:1;border-radius:50%;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em;
  text-align:center;
  box-shadow:0 0 0 4px #0a0708,0 0 0 5px rgba(244,237,228,.08);
}
.disc-label .lbl-no{font-family:var(--font-display);font-weight:400;font-size:.5rem;letter-spacing:.4em;opacity:.75}
.disc-label .lbl-t{font-family:var(--font-display);font-weight:700;font-size:clamp(.6rem,2vw,.82rem);letter-spacing:.1em;line-height:1.25;text-transform:uppercase;padding:0 12%}
.disc-label .lbl-rpm{font-size:.44rem;letter-spacing:.34em;opacity:.6;text-transform:uppercase;font-family:var(--font-display)}
.lbl-0{background:radial-gradient(circle at 38% 32%,#f0c268,#e8722f 55%,#b8451f);color:#2a1207}
.lbl-1{background:radial-gradient(circle at 38% 32%,#ff8a5c,#e04a3a 55%,#8c2420);color:#2a0b07}
.lbl-2{background:radial-gradient(circle at 38% 32%,#e06d97,#c33764 55%,#5e1b3c);color:#f8e9ee}
.lbl-3{background:radial-gradient(circle at 38% 32%,#8a4a80,#4a1e50 55%,#22102c);color:#f0d9a8}
.disc-hole{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:3.2%;aspect-ratio:1;border-radius:50%;background:var(--ink);z-index:5;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9),0 0 0 1px rgba(244,237,228,.1)}

/* chapter copy */
.chapters{position:relative;min-height:280px;display:flex;align-items:center}
@media(min-width:880px){.chapters{min-height:340px}}
.chapter{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(30px);pointer-events:none;
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
  text-align:center;
}
@media(min-width:880px){.chapter{text-align:left}}
.chapter.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.15s}
.ch-no{font-family:var(--font-display);font-size:.68rem;font-weight:600;letter-spacing:.44em;text-transform:uppercase;margin-bottom:1rem}
.ch-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,5.4vw,3.4rem);line-height:1.04;letter-spacing:-.01em;margin-bottom:1.2rem}
.ch-text{color:var(--cream-dim);max-width:440px;font-size:clamp(.92rem,2.2vw,1.02rem);margin:0 auto}
@media(min-width:880px){.ch-text{margin:0}}
.ch-cta{margin-top:1.8rem}
/* progress rail */
.story-rail{
  position:absolute;right:4%;top:50%;transform:translateY(-50%);z-index:5;
  display:none;flex-direction:column;gap:14px;
}
@media(min-width:880px){.story-rail{display:flex}}
.story-rail i{width:6px;height:6px;border-radius:50%;background:rgba(244,237,228,.18);transition:all .5s var(--ease-out)}
.story-rail i.on{background:var(--amber);box-shadow:0 0 12px rgba(232,165,75,.8);transform:scale(1.3)}
/* mobile progress */
.story-count{
  position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:5;
  font-family:var(--font-display);font-size:.64rem;letter-spacing:.4em;color:var(--cream-faint);
}
@media(min-width:880px){.story-count{display:none}}

/* ============================================================
   ABOUT
   ============================================================ */
.about{padding:clamp(6rem,14vw,11rem) 0;overflow:hidden}
.about-grid{display:grid;gap:3.5rem}
@media(min-width:880px){.about-grid{grid-template-columns:1fr 1fr;gap:5rem;align-items:center}}
.about-visual{position:relative;aspect-ratio:4/5;max-width:440px;margin:0 auto;width:100%}
.about-frame{
  position:absolute;inset:0;border-radius:2px;overflow:hidden;
  background:
    radial-gradient(90% 70% at 70% 20%,rgba(195,55,100,.5),transparent 60%),
    radial-gradient(100% 80% at 20% 90%,rgba(255,107,53,.45),transparent 60%),
    radial-gradient(80% 60% at 50% 55%,rgba(232,165,75,.3),transparent 70%),
    linear-gradient(160deg,#1c1016,#0d080a);
}
.about-frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease-out);
}
.about-visual:hover .about-frame img{transform:scale(1.04)}
/* grain over the photo, kept light so it stays a portrait and not a texture */
.about-frame::after{content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;opacity:.22}
/* dark foot so the signature waveform reads over the controller */
.about-frame::before{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(11,7,8,.55) 45%,rgba(11,7,8,.88))}
.about-frame .silhouette{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
}
/* abstract waveform inside portrait frame */
.about-frame svg{position:absolute;left:0;right:0;bottom:8%;width:100%;height:26%;opacity:.6;z-index:2}
.about-border{position:absolute;inset:-14px;border:1px solid rgba(232,165,75,.28);border-radius:2px;pointer-events:none;
  transform:translate(10px,10px)}
.about-tag{
  position:absolute;bottom:-14px;left:-8px;
  font-family:var(--font-display);font-size:.6rem;font-weight:600;letter-spacing:.4em;text-transform:uppercase;
  color:var(--amber);background:var(--ink);padding:.7em 1.3em;border:1px solid rgba(232,165,75,.3)}
.about-copy p{color:var(--cream-dim);margin-bottom:1.3rem;max-width:520px}
.about-copy p strong{color:var(--cream);font-weight:500}
.about-stats{display:flex;gap:2.6rem;margin-top:2.4rem;flex-wrap:wrap}
.stat .n{font-family:var(--font-display);font-weight:700;font-size:1.9rem;
  background:var(--grad-sunset);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-faint);font-family:var(--font-display)}

/* ============================================================
   EVENT FIT
   ============================================================ */
.fit{padding:clamp(5rem,12vw,9rem) 0;background:
  radial-gradient(120% 80% at 50% 0%,rgba(107,45,92,.14),transparent 60%)}
.fit-head{max-width:640px;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.fit-grid{display:grid;gap:1px;background:rgba(244,237,228,.08);border:1px solid rgba(244,237,228,.08)}
@media(min-width:680px){.fit-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.fit-grid{grid-template-columns:repeat(4,1fr)}}
.fit-card{
  background:var(--ink);padding:2.6rem 2rem 2.8rem;position:relative;overflow:hidden;
  transition:background .5s;
}
.fit-card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .6s;
  background:radial-gradient(120% 100% at 50% 0%,var(--card-glow,rgba(255,107,53,.12)),transparent 70%)}
.fit-card:hover::before{opacity:1}
.fit-card:hover .fit-ico{transform:translateY(-4px)}
.fit-ico{width:44px;height:44px;margin-bottom:1.6rem;transition:transform .5s var(--ease-out)}
.fit-ico svg{width:100%;height:100%}
.fit-card h3{font-family:var(--font-display);font-weight:700;font-size:1.08rem;letter-spacing:.04em;margin-bottom:.7rem}
.fit-card p{font-size:.9rem;color:var(--cream-dim)}
.fit-card .no{position:absolute;top:1.6rem;right:1.8rem;font-family:var(--font-display);
  font-size:.62rem;letter-spacing:.3em;color:var(--cream-faint)}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{padding:clamp(5rem,12vw,9rem) 0}
.gal-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(2.5rem,6vw,4rem)}
.gal-note{font-size:.82rem;color:var(--cream-faint);max-width:300px}
.gal-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:880px){.gal-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:215px}}
.gal-item{
  position:relative;border-radius:3px;overflow:hidden;aspect-ratio:1;min-height:160px;
  transition:transform .6s var(--ease-out);isolation:isolate;
  display:block;width:100%;padding:0;text-align:left;
}
.gal-item:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media(min-width:880px){.gal-item{aspect-ratio:auto}}
.gal-item:hover{transform:translateY(-4px)}
.gal-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-out),filter .6s ease}
.gal-item:hover .gal-ph,.gal-item:focus-visible .gal-ph{transform:scale(1.06)}
/* the gp-* gradients now sit behind the photo as a warm loading skeleton */
.gal-item::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,7,8,.12),transparent 32%,transparent 58%,rgba(11,7,8,.5));
  opacity:.9;transition:opacity .6s}
.gal-item:hover::after{opacity:.7}
.gp-1{background:radial-gradient(110% 90% at 30% 20%,rgba(232,165,75,.65),transparent 55%),radial-gradient(100% 90% at 80% 90%,rgba(195,55,100,.55),transparent 60%),#160d11}
.gp-2{background:radial-gradient(120% 100% at 70% 10%,rgba(255,107,53,.55),transparent 55%),#130a0e}
.gp-3{background:radial-gradient(110% 90% at 20% 80%,rgba(107,45,92,.75),transparent 60%),radial-gradient(90% 70% at 90% 20%,rgba(224,74,58,.35),transparent 55%),#100910}
.gp-4{background:radial-gradient(130% 110% at 50% 100%,rgba(224,74,58,.55),transparent 60%),radial-gradient(90% 60% at 60% 10%,rgba(42,16,48,.9),transparent 70%),#120a0d}
.gp-6{background:radial-gradient(120% 100% at 50% 0%,rgba(107,45,92,.6),transparent 60%),radial-gradient(80% 70% at 80% 100%,rgba(255,107,53,.4),transparent 55%),#0f090c}
.gp-5{background:radial-gradient(100% 90% at 85% 80%,rgba(232,165,75,.5),transparent 55%),radial-gradient(110% 90% at 15% 15%,rgba(195,55,100,.5),transparent 60%),#140b10}
.gal-item .gal-meta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem 1.2rem;
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,transparent,rgba(11,7,8,.85));
  font-family:var(--font-display);font-size:.6rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-dim);
  opacity:0;transform:translateY(8px);transition:all .5s var(--ease-out);
}
.gal-item:hover .gal-meta{opacity:1;transform:none}
@media(hover:none){
  .gal-item .gal-meta{opacity:1;transform:none}
  .gal-item .gal-plus{opacity:0}
}
.gal-item .gal-plus{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  font-family:var(--font-display);font-size:.58rem;font-weight:600;letter-spacing:.36em;text-transform:uppercase;
  color:var(--cream-faint);border:1px solid rgba(244,237,228,.14);border-radius:100px;
  padding:.8em 1.6em;white-space:nowrap;background:rgba(11,7,8,.3);
  transition:all .5s;
}
.gal-item:hover .gal-plus{color:var(--amber);border-color:rgba(232,165,75,.5)}

/* ============================================================
   INSTAGRAM
   ============================================================ */
.insta{padding:clamp(5rem,12vw,9rem) 0;text-align:center;overflow:hidden;position:relative}
.insta::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(90vw,760px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(195,55,100,.18),rgba(255,107,53,.08) 50%,transparent 72%);pointer-events:none}
.insta-handle{
  display:inline-block;font-family:var(--font-display);font-weight:800;
  /* Syne 800 is unusually wide (M alone is 1.58em); @marco._.roman measures 13.77em,
     so it needs <=6.55vw to fit a 92% column. 7.5vw with a 1.7rem floor overflowed. */
  font-size:clamp(1.1rem,6vw,4.4rem);letter-spacing:.02em;margin:1.4rem 0 1rem;
  background:var(--grad-sunset);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:letter-spacing .6s var(--ease-out);animation:btnshift 8s ease infinite;
}
.insta-handle:hover{letter-spacing:.06em}
.insta p{color:var(--cream-dim);max-width:420px;margin:0 auto 2.2rem}
.insta-strip{display:flex;gap:clamp(6px,2vw,10px);justify-content:center;margin-top:3rem;flex-wrap:wrap}
.insta-tile{width:clamp(50px,16vw,120px);aspect-ratio:1;border-radius:3px;position:relative;overflow:hidden;
  transition:transform .5s var(--ease-out)}
.insta-tile:hover{transform:translateY(-5px)}
.insta-tile img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.45) contrast(1.05) brightness(.92);transition:filter .5s ease}
.insta-tile:hover img{filter:none}
.insta-tile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;opacity:.5}
.insta-tile.insta-more{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid rgba(232,165,75,.32);background:rgba(232,165,75,.06);
  font-family:var(--font-display);font-size:.56rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--amber);line-height:1.7;
  transition:transform .5s var(--ease-out),background .4s,border-color .4s}
.insta-tile.insta-more:hover{background:rgba(232,165,75,.14);border-color:rgba(232,165,75,.6)}
.insta-tile.insta-more::after{display:none}

/* ============================================================
   BOOKING
   ============================================================ */
.booking{padding:clamp(6rem,14vw,11rem) 0;position:relative;overflow:hidden}
.booking::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 70% at 50% 115%,rgba(232,165,75,.22),rgba(255,107,53,.1) 40%,transparent 70%),
    radial-gradient(70% 50% at 15% 20%,rgba(107,45,92,.2),transparent 60%)}
.booking-inner{position:relative;z-index:2;text-align:center;max-width:760px;margin:0 auto}
.booking .h2{font-size:clamp(2.4rem,7vw,4.4rem)}
.booking-sub{color:var(--cream-dim);max-width:480px;margin:0 auto 2.8rem}
.booking-ctas{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:3.6rem}
.contact-rows{display:grid;gap:1px;background:rgba(244,237,228,.08);border:1px solid rgba(244,237,228,.08);
  max-width:560px;margin:0 auto;text-align:left}
.contact-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.4rem 1.7rem;background:rgba(11,7,8,.75);
  transition:background .4s;
}
.contact-row:hover{background:rgba(26,16,19,.9)}
.contact-row .cl{font-family:var(--font-display);font-size:.62rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--cream-faint)}
.contact-row .cv{font-family:var(--font-display);font-weight:600;font-size:clamp(.86rem,2.6vw,1.02rem);letter-spacing:.05em;display:flex;align-items:center;gap:.6em}
.contact-row .cv .go{color:var(--amber);transition:transform .4s var(--ease-out)}
.contact-row:hover .cv .go{transform:translateX(4px)}
.booking-note{margin-top:2.2rem;font-size:.8rem;color:var(--cream-faint);letter-spacing:.06em}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid rgba(244,237,228,.07);padding:2.6rem 0 3rem}
.foot{display:flex;flex-direction:column;gap:1.4rem;align-items:center;text-align:center}
@media(min-width:680px){.foot{flex-direction:row;justify-content:space-between;text-align:left}}
.foot .logo{font-size:.95rem}
.foot-links{display:flex;gap:2rem;font-family:var(--font-display);font-size:.66rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-dim)}
.foot-links a:hover{color:var(--amber)}
.foot-fine{font-size:.7rem;color:var(--cream-faint);letter-spacing:.08em}
/* studio signature — quiet enough not to compete with Marco's own footer row */
.byline{margin-top:2.6rem;padding-top:2.1rem;text-align:center;
  border-top:1px solid rgba(244,237,228,.06)}
.byline-made{font-family:var(--font-display);font-size:.68rem;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--cream-faint)}
/* gradient sits on the span itself, never on a parent that carries a filter —
   that pairing is what made the hero title render blank on WebKit */
.byline-name{font-weight:800;letter-spacing:.16em;
  background:var(--grad-sunset);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* link to noviq.ro — inline-block so the underline bar can be positioned, and so the
     tap target is the word itself rather than the whole uppercase line */
  position:relative;display:inline-block;text-decoration:none;
  /* padding grows the tap target from 18px to ~29px tall; the matching negative margin
     cancels it so the footer spacing is unchanged */
  padding:.5em .25em;margin:-.5em -.25em;
  transition:background-position .5s var(--ease-out)}
/* text-decoration is useless here: its colour follows currentColor, which the gradient
   forces to transparent. A pseudo-element bar is the only underline that stays visible. */
.byline-name::after{content:"";position:absolute;left:.25em;right:.25em;bottom:.22em;height:1px;
  background:var(--grad-sunset);
  transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-out)}
.byline-name:hover,.byline-name:focus-visible{background-position:100% 0}
.byline-name:hover::after,.byline-name:focus-visible::after{transform:scaleX(1);transform-origin:left}
.byline-name:focus-visible{outline:none}
@media(prefers-reduced-motion:reduce){
  .byline-name,.byline-name::after{transition:none}
}
.byline-tag{margin-top:.7rem;font-family:var(--font-display);font-size:.58rem;font-weight:500;
  letter-spacing:.38em;text-transform:uppercase;color:rgba(244,237,228,.26)}
@media(max-width:420px){
  .byline-made{letter-spacing:.24em}
  .byline-tag{letter-spacing:.24em;font-size:.54rem}
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,5vw,3.5rem);
  background:rgba(6,4,5,.94);
  opacity:0;transition:opacity .45s var(--ease-out);
}
.lightbox[hidden]{display:none}
.lightbox.open{opacity:1}
.lb-figure{
  max-width:min(1100px,100%);max-height:100%;
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  transform:scale(.96);transition:transform .5s var(--ease-out);
}
.lightbox.open .lb-figure{transform:none}
.lb-figure img{
  max-width:100%;max-height:calc(100svh - 11rem);object-fit:contain;
  border-radius:3px;box-shadow:0 40px 100px -30px rgba(0,0,0,.9),0 0 0 1px rgba(244,237,228,.08);
}
.lb-figure figcaption{
  font-family:var(--font-display);font-size:.62rem;font-weight:600;letter-spacing:.36em;
  text-transform:uppercase;color:var(--cream-dim);text-align:center;
}
.lb-btn{
  position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(244,237,228,.16);background:rgba(11,7,8,.7);
  color:var(--cream-dim);font-size:1.3rem;line-height:1;
  transition:color .3s,border-color .3s,background .3s,transform .3s var(--ease-out);
}
.lb-btn:hover{color:var(--amber);border-color:rgba(232,165,75,.55);background:rgba(11,7,8,.95)}
.lb-btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.lb-close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);font-size:1rem}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:1.9rem;padding-bottom:.16em}
.lb-prev{left:clamp(.6rem,2.5vw,2rem)}
.lb-next{right:clamp(.6rem,2.5vw,2rem)}
.lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.06)}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.2s!important}
  html{scroll-behavior:auto}
  .hero-name span{opacity:1;transform:none;filter:none;animation:none}
  .rv{opacity:1;transform:none;filter:none}
  .hero-photo img{animation:none;transform:scale(1.02)}
  .lb-figure{transform:none}
}

/* ============================================================
   GENERATED — do not edit by hand.
   Crop focus points and gallery spans come from photos.json;
   run `npm run photos` in tools/ to regenerate.
   Last in the file so it wins on equal specificity.
   ============================================================ */
/* @gen:photos */
.hero-photo img{object-position:50% 38%}
.about-frame img{object-position:50% 26%}
.atmo-0 img{object-position:50% 55%}
.atmo-1 img{object-position:50% 40%}
.atmo-2 img{object-position:50% 32%}
.atmo-3 img{object-position:50% 62%}

@media(min-width:880px){
  .gal-item:nth-child(1){grid-column:span 2;grid-row:span 2}
  .gal-item:nth-child(2){grid-row:span 2}
}
/* /@gen:photos */