/* ============================================================
   DANA MONIQUE — Shared Design System
   Dark · warm · editorial · 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Hanken+Grotesk:ital,wght@0,300..800;1,400..600&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  /* warm near-black ground */
  --bg:        #0a0806;
  --bg-elev:   #110d0a;
  --surface:   #19130e;
  --surface-2: #221a13;

  --cream:  #f6efe3;
  --muted:  #a3958180;
  --muted-s:#a89a86;

  --gold:      #eeba2b;
  --gold-2:    #f9cd52;
  --amber:     #e09900;
  --coral:     #fa7653;
  --magenta:   #c0438f;
  --plum:      #8e2d6e;

  --grad: linear-gradient(102deg, #c0438f 0%, #eeba2b 48%, #fa7653 100%);
  --grad-soft: linear-gradient(102deg, #c0438f33 0%, #eeba2b33 50%, #fa765333 100%);

  --line:   rgba(246,239,227,.12);
  --line-2: rgba(246,239,227,.07);

  --maxw: 1480px;
  --gut: clamp(20px, 5vw, 76px);

  --ff-disp: "Bricolage Grotesque", sans-serif;
  --ff-serif:"Instrument Serif", serif;
  --ff-body: "Hanken Grotesk", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.76,0,.24,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--ff-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

/* warm grain / vignette overlay applied via body::after */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, transparent 55%, #00000066 100%);
  mix-blend-mode:multiply;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--gold); color:#1a1206; }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ position:relative; padding-block:clamp(80px,12vh,180px); }
.eyebrow{
  font-family:var(--ff-body);
  font-weight:600; font-size:.74rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--gold); opacity:.7; }

/* gradient ink for type */
.ink-grad{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- display type ---------- */
.display{
  font-family:var(--ff-disp);
  font-weight:800;
  line-height:.9;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.serif{ font-family:var(--ff-serif); font-weight:400; letter-spacing:.005em; }
.serif-i{ font-family:var(--ff-serif); font-style:italic; }

.h-sec{
  font-family:var(--ff-disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.6rem, 7vw, 6.5rem); line-height:.88; letter-spacing:-.025em;
}
.lede{
  font-size:clamp(1.05rem,1.5vw,1.4rem); line-height:1.6; color:var(--cream);
  max-width:54ch;
}
.muted{ color:var(--muted-s); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px var(--gut);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:#0a0806e6;
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom-color:var(--line-2);
  padding-block:12px;
}
.nav__logo{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.nav__logo img{ height:26px; width:auto; }
.nav__links{
  display:flex; align-items:center; gap:clamp(14px,2vw,34px);
  font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
.nav__links a{ position:relative; color:var(--cream); opacity:.78; transition:opacity .3s; padding-block:6px; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after, .nav__links a.active::after{ transform:scaleX(1); }
.nav__links a.active{ opacity:1; }

.btn{
  display:inline-flex; align-items:center; gap:.65em;
  font-family:var(--ff-body); font-weight:700; font-size:.82rem;
  letter-spacing:.05em; text-transform:uppercase;
  padding:.85em 1.5em; border-radius:100px; border:1px solid transparent;
  background:var(--grad); color:#1a1005;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), filter .3s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -12px #eeba2b88; filter:brightness(1.05); }
.btn--ghost{ background:transparent; color:var(--cream); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--gold); box-shadow:none; background:#ffffff08; }
.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

.nav__burger{ display:none; flex-direction:column; gap:6px; width:42px; height:42px; align-items:center; justify-content:center; background:none; border:none; position:relative; z-index:1001; }
.nav__burger span{ display:block; width:26px; height:2px; background:var(--cream); border-radius:2px; transition:transform .45s var(--ease-io), opacity .25s; }
.nav__burger.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; transform:scaleX(.3); }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:999; background:#080605;
  display:flex; flex-direction:column; justify-content:center; gap:clamp(2px,1vh,8px);
  padding:max(104px,15vh) var(--gut) max(40px,7vh); overflow-y:auto;
  transform:translateY(-101%); transition:transform .7s var(--ease-io); pointer-events:none; counter-reset:mm;
}
.mobile-menu::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 48% at 88% 10%, #c0438f33, transparent 70%),
             radial-gradient(54% 44% at 2% 96%, #eeba2b22, transparent 70%); }
.mobile-menu.open{ transform:translateY(0); pointer-events:auto; }
.mobile-menu a{ position:relative; display:flex; align-items:center; gap:.7em;
  font-family:var(--ff-disp); font-weight:700; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(2.1rem,8.5vw,3.5rem); line-height:1.04; color:var(--cream);
  padding:clamp(8px,1.5vh,17px) 0; border-bottom:1px solid var(--line-2);
  opacity:0; transform:translateY(30px);
  transition:opacity .55s var(--ease), transform .65s var(--ease-io), color .35s, padding-left .35s; }
.mm-num{ font-family:var(--ff-body); font-weight:700; font-size:.82rem; letter-spacing:.1em; color:var(--gold); flex:0 0 auto; }
.mobile-menu a:last-child{ border-bottom:none; margin-top:6px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mobile-menu.open a{ opacity:1; transform:none; }
.mobile-menu.open a:nth-child(1){ transition-delay:.10s; }
.mobile-menu.open a:nth-child(2){ transition-delay:.16s; }
.mobile-menu.open a:nth-child(3){ transition-delay:.22s; }
.mobile-menu.open a:nth-child(4){ transition-delay:.28s; }
.mobile-menu.open a:nth-child(5){ transition-delay:.34s; }
.mobile-menu.open a:nth-child(6){ transition-delay:.40s; }
.mobile-menu.open a:nth-child(7){ transition-delay:.46s; }
.mobile-menu.open a:nth-child(8){ transition-delay:.52s; }
.mobile-menu a:active{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding-left:.4em; }
@media (hover:hover){
  .mobile-menu a:hover{ padding-left:.5em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
}
@media (max-height:720px){
  .mobile-menu{ justify-content:flex-start; padding-top:max(92px,12vh); }
  .mobile-menu a{ font-size:clamp(1.7rem,7vw,2.6rem); padding:clamp(6px,1vh,12px) 0; }
}

@media (max-width:1040px){
  .nav__links{ display:none; }
  .nav .btn--cta{ display:none; }
  .nav__burger{ display:flex; }
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.08s; }
.reveal-d2{ transition-delay:.16s; }
.reveal-d3{ transition-delay:.24s; }
.reveal-d4{ transition-delay:.32s; }

/* clip-reveal for images */
.clip{ clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease-io); }
.clip.in{ clip-path:inset(0 0 0 0); }
.img-zoom{ overflow:hidden; }
.img-zoom img{ transition:transform 1.4s var(--ease); will-change:transform; }
.img-zoom:hover img{ transform:scale(1.06); }

/* line reveal — slide + fade, NO overflow clip (prevents cut-off gradient/descenders) */
.line-mask{ display:block; }
.line-mask > *{ display:block; opacity:0; transform:translateY(38px); transition:transform 1s var(--ease-io), opacity .9s var(--ease); }
.line-mask > * + *{ transition-delay:.08s; }
.line-mask.in > *{ transform:none; opacity:1; }

@media (prefers-reduced-motion: reduce){
  .reveal,.clip,.line-mask>*{ opacity:1!important; transform:none!important; clip-path:none!important; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ overflow:hidden; white-space:nowrap; display:flex; user-select:none; }
.marquee__track{ display:flex; flex:0 0 auto; gap:.5em; padding-right:.5em; animation:marq 30s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ font-family:var(--ff-disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(3rem,11vw,9rem); line-height:1; letter-spacing:-.02em; }
.marquee .star{ color:var(--gold); -webkit-text-fill-color:var(--gold); }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ position:relative; padding-top:clamp(70px,10vh,130px); border-top:1px solid var(--line-2); overflow:hidden; }
.footer__cta{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:40px; }
.footer__cta h2{ font-family:var(--ff-disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.2rem,6vw,5rem); line-height:.92; letter-spacing:-.02em; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-top:clamp(50px,8vh,90px); padding-bottom:50px; }
.footer__col h4{ font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; font-weight:700; }
.footer__col a, .footer__col p{ display:block; color:var(--muted-s); font-size:1rem; margin-bottom:10px; transition:color .3s; }
.footer__col a:hover{ color:var(--cream); }
.footer__word{ font-family:var(--ff-disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(3.4rem,21vw,20rem); line-height:.8; letter-spacing:-.03em; white-space:nowrap;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:.92; margin-top:30px; }
.footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  padding-block:26px; border-top:1px solid var(--line-2); font-size:.8rem; color:var(--muted-s); letter-spacing:.03em; }
@media (max-width:760px){ .footer__grid{ grid-template-columns:1fr 1fr; } }

/* social pills */
.socials{ display:flex; gap:10px; flex-wrap:wrap; }
.socials a{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); color:var(--cream); transition:all .35s var(--ease); }
.socials a:hover{ background:var(--grad); color:#1a1005; border-color:transparent; transform:translateY(-3px); }
.socials svg{ width:18px; height:18px; }

/* ---------- page hero (inner pages) ---------- */
.phero{ position:relative; padding-top:clamp(150px,22vh,260px); padding-bottom:clamp(40px,6vh,90px); }
.phero h1{ font-family:var(--ff-disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(3.2rem,12vw,11rem); line-height:.86; letter-spacing:-.03em; }
.phero .crumbs{ display:flex; gap:10px; align-items:center; font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted-s); margin-bottom:26px; }
.phero .crumbs a:hover{ color:var(--gold); }

/* utility */
.tag-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; padding:.5em 1em; border:1px solid var(--line);
  border-radius:100px; color:var(--muted-s); }
.divider{ height:1px; background:var(--line-2); border:0; margin:0; }

/* ---------- custom cursor ---------- */
.cursor-dot, .cursor-ring{ position:fixed; top:0; left:0; z-index:9600; pointer-events:none; border-radius:50%;
  margin-left:0; margin-top:0; mix-blend-mode:difference; }
.cursor-dot{ width:7px; height:7px; background:var(--cream); margin:-3.5px 0 0 -3.5px; }
.cursor-ring{ width:38px; height:38px; border:1px solid var(--cream); margin:-19px 0 0 -19px;
  transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .35s; }
.cursor-ring.cursor-grow{ width:70px; height:70px; margin:-35px 0 0 -35px; }
@media (hover:none){ .cursor-dot,.cursor-ring{ display:none; } }

/* page transition curtain */
.curtain{ position:fixed; inset:0; z-index:9500; background:var(--bg); transform-origin:top;
  pointer-events:none; transform:scaleY(0); }
.curtain.cover{ transform:scaleY(1); transform-origin:bottom; transition:transform .6s var(--ease-io); }
.curtain.reveal-up{ transform:scaleY(0); transform-origin:top; transition:transform .7s var(--ease-io); }

/* ============================================================
   HERO — 3D layered scene
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; padding-top:84px; }

/* atmosphere */
.hero__atmos{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.orb{ position:absolute; border-radius:50%; filter:blur(70px); will-change:transform; }
.orb--1{ width:54vw; height:54vw; top:-16%; right:-10%; background:radial-gradient(circle,#c0438f55,transparent 68%); }
.orb--2{ width:46vw; height:46vw; bottom:-18%; left:-12%; background:radial-gradient(circle,#eeba2b3d,transparent 68%); }
.orb--3{ width:34vw; height:34vw; top:36%; left:46%; background:radial-gradient(circle,#fa765330,transparent 68%); }
.hero__spot{ position:absolute; left:0; top:0; width:720px; height:720px; border-radius:50%; opacity:0;
  transform:translate(calc(var(--sx,50%) - 360px), calc(var(--sy,50%) - 360px));
  background:radial-gradient(circle,rgba(255,238,205,.12),transparent 60%); mix-blend-mode:screen; transition:opacity .6s; }
.hero__grain{ position:absolute; inset:-50%; opacity:.05; mix-blend-mode:overlay;
  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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hero__tag{ position:relative; z-index:3; text-align:center; font-size:clamp(1.05rem,2vw,1.55rem);
  color:var(--gold-2); letter-spacing:.04em; margin-bottom:clamp(2px,1vh,10px); }

/* 3D scene */
.hero__scene{ position:relative; z-index:2; flex:1 1 auto; width:100%; display:grid; place-items:center;
  perspective:1600px; perspective-origin:50% 44%; }
.hero__tilt{ position:relative; width:min(94vw,1080px); height:min(64svh,620px);
  transform-style:preserve-3d; transition:transform .7s var(--ease); will-change:transform; }
.hero__layer{ position:absolute; inset:0; display:grid; transform-style:preserve-3d; }
.hl-back{ place-items:start center; transform:translateZ(-180px); }
.hl-mid{ place-items:center; transform:translateZ(10px); }
.hl-front{ place-items:end center; transform:translateZ(150px); }

.hero__name{ font-family:var(--ff-disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(3.6rem,17vw,17rem); line-height:.78; letter-spacing:-.035em; text-align:center; }
.hl-back .hero__name{ color:var(--cream); transform:translateY(-10%); }
.hl-front .hero__name{ transform:translateY(12%); filter:drop-shadow(0 26px 44px rgba(0,0,0,.55)); }

.hero__portrait{ position:relative; width:clamp(230px,30vw,410px); aspect-ratio:.72; will-change:transform; }
.hero__portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 28%;
  -webkit-mask-image:radial-gradient(72% 78% at 50% 38%, #000 48%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(72% 78% at 50% 38%, #000 48%, rgba(0,0,0,0) 100%);
  filter:contrast(1.06) saturate(1.08) drop-shadow(0 50px 55px rgba(0,0,0,.65)); }
.hero__glow{ position:absolute; inset:-16% -12% -8% -12%; z-index:-1; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 44%, #c0438f4d, #eeba2b26 46%, transparent 72%); filter:blur(26px); }

.hero__foot{ position:relative; z-index:3; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:30px; width:100%; margin-top:clamp(16px,3vh,40px); }
.hero__blurb{ max-width:44ch; font-size:clamp(1rem,1.4vw,1.2rem); color:var(--muted-s); }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }

.hero__scroll{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:10px; font-size:.7rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted-s); }
.hero__scroll-line{ width:1px; height:46px; background:linear-gradient(var(--gold), transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--cream);
  animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ to{ top:100%; } }

/* entrance + idle (base state is visible; animate from hidden only when motion is OK) */
@media (prefers-reduced-motion: no-preference){
  .hero__tag{ animation:hUp 1s var(--ease) .15s backwards; }
  .hl-back{ animation:hBack 1.4s var(--ease-io) .2s backwards; }
  .hl-mid{ animation:hMid 1.5s var(--ease-io) .42s backwards; }
  .hl-front{ animation:hFront 1.4s var(--ease-io) .6s backwards; }
  .hero__foot{ animation:hUp 1s var(--ease) .85s backwards; }
  .hero__scroll{ animation:hUp 1s var(--ease) 1s backwards; }
  .hero__portrait{ animation:floaty 8s ease-in-out 1.8s infinite; }
}
@keyframes hUp{ from{ opacity:0; transform:translateY(26px); } }
@keyframes hBack{ from{ opacity:0; transform:translateZ(-560px) translateY(-10%); } }
@keyframes hMid{ from{ opacity:0; transform:translateZ(-160px) scale(.84); filter:blur(8px); } }
@keyframes hFront{ from{ opacity:0; transform:translateZ(520px) translateY(12%); } }
@keyframes floaty{ 50%{ transform:translateY(-2.6%); } }

@media (max-width:760px){
  .hero__tilt{ height:min(58svh,520px); }
  .hl-back{ transform:translateZ(-120px); }
  .hl-front{ transform:translateZ(100px); }
  .hero__foot{ flex-direction:column; align-items:flex-start; }
  .hero__scroll{ display:none; }
}

/* marquee band */
.marq-band{ border-block:1px solid var(--line-2); padding-block:18px; }

/* ============================================================
   SECTION HEAD (shared)
   ============================================================ */
.sec-head{ display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:24px 40px;
  margin-bottom:clamp(40px,6vh,72px); }
.sec-head .eyebrow{ grid-column:1; align-self:start; margin-top:14px; }
.sec-head .h-sec{ grid-column:2; }
.sec-head .btn, .sec-head .btn--ghost{ grid-column:3; align-self:end; }
@media (max-width:760px){
  .sec-head{ grid-template-columns:1fr; gap:18px; }
  .sec-head .eyebrow,.sec-head .h-sec,.sec-head .btn{ grid-column:1; }
}

/* ============================================================
   ABOUT teaser
   ============================================================ */
.about__grid{ display:grid; grid-template-columns:0.85fr 1fr; gap:clamp(40px,7vw,100px); align-items:center; }
.about__media{ position:relative; }
.about__media .img-zoom{ border-radius:10px; overflow:hidden; aspect-ratio:0.92; }
.about__media img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.reveal-img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.3s var(--ease-io); }
.reveal-img.in{ clip-path:inset(0 0 0 0); }
.about__badge{ position:absolute; right:-18px; bottom:30px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:18px 22px; display:flex; flex-direction:column; gap:2px; box-shadow:0 30px 60px -30px #000; }
.about__badge .serif-i{ color:var(--muted-s); font-size:1.1rem; }
.about__badge strong{ font-size:1.5rem; line-height:1; letter-spacing:-.02em; }
.about__badge span:last-child{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-top:4px; }
.about__stats{ display:flex; gap:clamp(20px,4vw,48px); margin-top:44px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; gap:8px; }
.stat__n{ font-size:clamp(2.6rem,5vw,4rem); line-height:.9; letter-spacing:-.02em; }
.stat__l{ font-size:.8rem; line-height:1.3; color:var(--muted-s); letter-spacing:.04em; }
@media (max-width:860px){ .about__grid{ grid-template-columns:1fr; } .about__media{ max-width:480px; } }

/* ============================================================
   BIG QUOTE
   ============================================================ */
.quote-sec{ text-align:center; }
.bigquote{ font-family:var(--ff-disp); font-weight:500; text-transform:none;
  font-size:clamp(1.8rem,5vw,4.4rem); line-height:1.08; letter-spacing:-.02em; max-width:18ch; margin-inline:auto; }
.bigquote em{ font-weight:400; }
.bigquote__by{ margin-top:34px; font-size:1rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-s); }

/* ============================================================
   MUSIC
   ============================================================ */
.music__grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(24px,4vw,56px); align-items:start; }
.music__side{ display:flex; flex-direction:column; gap:16px; }
.music__note{ border-left:2px solid var(--gold); padding:6px 0 6px 24px; color:var(--cream); margin-bottom:14px; }
.platform{ display:flex; align-items:center; justify-content:space-between; padding:22px 26px; border:1px solid var(--line);
  border-radius:12px; font-family:var(--ff-disp); font-weight:600; font-size:clamp(1.2rem,2vw,1.7rem); text-transform:uppercase;
  letter-spacing:-.01em; transition:all .4s var(--ease); }
.platform:hover{ background:var(--surface); border-color:var(--gold); padding-left:34px; }
.platform .arr{ color:var(--gold); transition:transform .4s var(--ease); }
.platform:hover .arr{ transform:translate(4px,-4px); }
@media (max-width:860px){ .music__grid{ grid-template-columns:1fr; } }

/* ============================================================
   VIDEOS
   ============================================================ */
.videos__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.5vw,32px); }
.vcard--lg{ grid-column:1 / -1; }
.vcard__meta{ display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; gap:16px; }
.vcard__meta .serif-i{ font-size:clamp(1.2rem,2vw,1.6rem); }
.vcard__meta .muted{ font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; }
.yt-facade{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/9; cursor:pointer; background:var(--surface); }
.vcard--lg .yt-facade{ aspect-ratio:16/8; }
.yt-facade img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter .5s; }
.yt-facade:hover img{ transform:scale(1.05); filter:brightness(.7); }
.yt-play{ position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%; border:none;
  background:var(--grad); display:grid; place-items:center; transition:transform .4s var(--ease), box-shadow .4s; }
.yt-facade:hover .yt-play{ transform:scale(1.12); box-shadow:0 0 0 14px #eeba2b22; }
.yt-play span{ width:0; height:0; border-left:22px solid #1a1005; border-top:13px solid transparent; border-bottom:13px solid transparent; margin-left:5px; }
@media (max-width:680px){ .videos__grid{ grid-template-columns:1fr; } }

/* ============================================================
   TOUR
   ============================================================ */
.tour__grid{ display:grid; grid-template-columns:0.7fr 1.3fr; gap:clamp(40px,6vw,90px); align-items:start; }
.tour__list{ list-style:none; }
.tour__row{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:clamp(16px,3vw,40px);
  padding:clamp(20px,3vh,30px) 6px; border-top:1px solid var(--line-2); transition:padding .4s var(--ease); position:relative; }
.tour__row:last-child{ border-bottom:1px solid var(--line-2); }
.tour__row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--grad-soft);
  z-index:-1; transition:width .5s var(--ease); }
.tour__row:hover{ padding-left:22px; }
.tour__row:hover::before{ width:100%; }
.tour__date{ display:flex; align-items:baseline; gap:8px; min-width:84px; }
.tour__date b{ font-size:clamp(2rem,4vw,3.2rem); line-height:1; }
.tour__date i{ font-style:normal; font-size:.9rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); }
.tour__city{ font-family:var(--ff-disp); font-weight:600; font-size:clamp(1.2rem,2.4vw,1.9rem); text-transform:uppercase; letter-spacing:-.01em; }
.tour__venue{ font-size:.95rem; }
.tour__cta{ display:inline-flex; align-items:center; gap:.5em; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap; }
.tour__cta .arr{ transition:transform .4s var(--ease); }
.tour__cta:hover .arr{ transform:translate(3px,-3px); }
@media (max-width:860px){ .tour__grid{ grid-template-columns:1fr; } }
@media (max-width:620px){
  .tour__row{ grid-template-columns:auto 1fr; row-gap:6px; }
  .tour__venue{ grid-column:2; }
  .tour__cta{ grid-column:1 / -1; justify-self:start; }
}

/* ============================================================
   EPK CTA
   ============================================================ */
.epk-cta__inner{ display:grid; grid-template-columns:0.8fr 1fr; gap:clamp(40px,7vw,100px); align-items:center; }
.epk-cta__media{ border-radius:10px; overflow:hidden; box-shadow:0 50px 100px -50px #000; }
.epk-cta__media img{ width:100%; }
@media (max-width:860px){ .epk-cta__inner{ grid-template-columns:1fr; } .epk-cta__media{ max-width:420px; } }

.footer__word-wrap{ overflow:hidden; padding-inline:var(--gut); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.ab-intro{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.ab-intro__media{ border-radius:10px; overflow:hidden; aspect-ratio:0.78; box-shadow:0 50px 120px -50px #000; }
.ab-intro__media img{ width:100%; height:100%; object-fit:cover; }
.ab-intro__lead{ font-family:var(--ff-serif); font-size:clamp(1.7rem,3vw,2.7rem); line-height:1.28; letter-spacing:.005em; }
.ab-intro__lead em{ font-style:italic; }
.ab-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
@media (max-width:860px){ .ab-intro{ grid-template-columns:1fr; } .ab-intro__media{ max-width:460px; } }

.ab-story{ display:grid; grid-template-columns:0.4fr 1fr; gap:clamp(30px,5vw,80px); }
.ab-story__body{ columns:2; column-gap:54px; font-size:1.05rem; line-height:1.75; color:var(--muted-s); }
.ab-story__body p{ margin-bottom:1.2em; break-inside:avoid; }
.ab-story__body strong{ color:var(--cream); font-weight:600; }
@media (max-width:860px){ .ab-story{ grid-template-columns:1fr; } .ab-story__body{ columns:1; } }

/* timeline */
.timeline{ display:flex; flex-direction:column; }
.tl-row{ display:grid; grid-template-columns:160px 1fr; gap:clamp(20px,4vw,60px); padding-block:clamp(26px,4vh,42px);
  border-top:1px solid var(--line-2); position:relative; }
.tl-row:last-child{ border-bottom:1px solid var(--line-2); }
.tl-year{ font-family:var(--ff-disp); font-weight:800; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tl-body h3{ font-family:var(--ff-disp); font-weight:700; text-transform:uppercase; font-size:clamp(1.2rem,2.2vw,1.7rem);
  letter-spacing:-.01em; margin-bottom:8px; }
.tl-body p{ color:var(--muted-s); max-width:60ch; }
@media (max-width:620px){ .tl-row{ grid-template-columns:1fr; gap:10px; } }

/* two big quotes */
.q-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); }
.q-card{ border:1px solid var(--line); border-radius:16px; padding:clamp(28px,4vw,48px); background:var(--surface);
  display:flex; flex-direction:column; justify-content:space-between; gap:30px; }
.q-card__mark{ font-family:var(--ff-serif); font-size:5rem; line-height:0.6; color:var(--gold); height:.5em; }
.q-card p{ font-family:var(--ff-disp); font-weight:500; font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1.32; letter-spacing:-.01em; }
.q-card cite{ font-style:normal; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
@media (max-width:760px){ .q-grid{ grid-template-columns:1fr; } }

/* shared the stage */
.shared{ display:flex; flex-wrap:wrap; gap:clamp(14px,2.5vw,28px); }
.shared span{ font-family:var(--ff-disp); font-weight:700; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(1.4rem,4vw,3rem); color:var(--muted-s); transition:color .35s; }
.shared span:hover{ color:var(--cream); }
.shared .dot{ color:var(--gold); -webkit-text-fill-color:var(--gold); }

/* ============================================================
   GENERIC: embed cards / platform tiles (music)
   ============================================================ */
.mus-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,40px); }
.mus-embed{ border-radius:18px; overflow:hidden; }
.mus-embed iframe{ display:block; width:100%; border:0; }
@media (max-width:860px){ .mus-grid{ grid-template-columns:1fr; } }
.plat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.plat-tile{ display:flex; flex-direction:column; gap:14px; padding:28px; border:1px solid var(--line); border-radius:16px;
  transition:all .4s var(--ease); min-height:160px; justify-content:space-between; }
.plat-tile:hover{ background:var(--surface); border-color:var(--gold); transform:translateY(-4px); }
.plat-tile .pt-name{ font-family:var(--ff-disp); font-weight:700; font-size:1.4rem; text-transform:uppercase; }
.plat-tile .pt-sub{ font-size:.85rem; color:var(--muted-s); }
.plat-tile .arr{ color:var(--gold); font-size:1.3rem; align-self:flex-end; transition:transform .4s var(--ease); }
.plat-tile:hover .arr{ transform:translate(4px,-4px); }

/* video page grid */
.vgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); }
.vgrid .vcard--feat{ grid-column:1 / -1; }
@media (max-width:900px){ .vgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .vgrid{ grid-template-columns:1fr; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:start; }
.contact-item{ padding-block:26px; border-top:1px solid var(--line-2); }
.contact-item:last-child{ border-bottom:1px solid var(--line-2); }
.contact-item .ci-label{ font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.contact-item a, .contact-item p{ font-family:var(--ff-disp); font-weight:600; font-size:clamp(1.4rem,3vw,2.2rem);
  letter-spacing:-.01em; transition:color .3s; }
.contact-item a:hover{ color:var(--gold); }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

/* ============================================================
   FORMS (book a show / contact)
   ============================================================ */
.form{ display:grid; gap:clamp(24px,3vw,38px); }
.form-sec{ display:grid; gap:18px; }
.form-sec__title{ font-family:var(--ff-disp); font-weight:700; text-transform:uppercase; font-size:1.1rem;
  letter-spacing:.04em; color:var(--gold); padding-bottom:14px; border-bottom:1px solid var(--line-2); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-row--3{ grid-template-columns:1fr 1fr 1fr; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-s); }
.field label .req{ color:var(--coral); }
.field input, .field select, .field textarea{ font-family:var(--ff-body); font-size:1rem; color:var(--cream);
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px; transition:border-color .3s, background .3s; }
.field input::placeholder, .field textarea::placeholder{ color:#7a6f5e; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); background:var(--surface-2); }
.field textarea{ resize:vertical; min-height:120px; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23eeba2b' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.radio-row{ display:flex; gap:10px; flex-wrap:wrap; }
.radio-pill{ position:relative; }
.radio-pill input{ position:absolute; opacity:0; pointer-events:none; }
.radio-pill span{ display:inline-block; padding:11px 20px; border:1px solid var(--line); border-radius:100px; font-size:.9rem;
  cursor:pointer; transition:all .3s; color:var(--muted-s); }
.radio-pill input:checked + span{ background:var(--grad); color:#1a1005; border-color:transparent; font-weight:600; }
.radio-pill:hover span{ border-color:var(--gold); color:var(--cream); }
@media (max-width:680px){ .form-row, .form-row--3{ grid-template-columns:1fr; } }

/* ============================================================
   EPK PAGE
   ============================================================ */
.epk-hero{ display:grid; grid-template-columns:1fr 0.8fr; gap:clamp(40px,6vw,90px); align-items:center; }
.epk-doc{ border-radius:10px; overflow:hidden; box-shadow:0 60px 120px -50px #000; border:1px solid var(--line); }
.epk-doc img{ width:100%; }
.epk-facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:14px; overflow:hidden; }
.epk-fact{ background:var(--bg); padding:26px; }
.epk-fact dt{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.epk-fact dd{ font-family:var(--ff-disp); font-weight:600; font-size:clamp(1.1rem,2vw,1.5rem); letter-spacing:-.01em; line-height:1.15; }
@media (max-width:860px){ .epk-hero{ grid-template-columns:1fr; } .epk-doc{ max-width:440px; } }

/* ============================================================
   RESPONSIVE POLISH — all screen sizes
   ============================================================ */
/* tablet */
@media (max-width:900px){
  .epk-facts{ grid-template-columns:1fr 1fr; }
}
/* large phones */
@media (max-width:600px){
  .section{ padding-block:clamp(56px,9vh,90px); }
  .hero__cta{ width:100%; }
  .hero__cta .btn{ flex:1 1 auto; justify-content:center; }
  .q-card{ padding:26px; }
  .epk-facts{ grid-template-columns:1fr; }
  .footer__cta{ flex-direction:column; align-items:flex-start; }
  .footer__cta .btn{ width:100%; justify-content:center; }
}
/* small phones */
@media (max-width:430px){
  :root{ --gut:18px; }
  .hero__tilt{ height:min(54svh,460px); }
  .hero__name{ font-size:clamp(2.9rem,18vw,17rem); }
  .hero__portrait{ width:clamp(190px,52vw,300px); }
  .hero__blurb{ font-size:.95rem; }
  .phero h1{ font-size:clamp(2.7rem,15vw,7rem); }
  .h-sec{ font-size:clamp(2.2rem,9vw,4rem); }
  .bigquote{ font-size:clamp(1.5rem,7vw,2.4rem); }
  .footer__grid{ grid-template-columns:1fr; gap:30px; }
  .contact-item a, .contact-item p{ font-size:clamp(1.2rem,6vw,1.7rem); word-break:break-word; }
  .nav__logo img{ height:22px; }
  .tour__date{ min-width:64px; }
  .tour__date b{ font-size:2rem; }
}
/* guard against any horizontal overflow from large embeds/media */
iframe, img, video{ max-width:100%; }
/* very large screens — keep it from getting too sparse */
@media (min-width:1800px){
  :root{ --maxw:1600px; }
}