/* ───────────────────────────────────────────────────────────
   ORIGIN PRINCE — EDITION 05b · "SPECTRUM"
   Black base, club-light colour. Vinyl intro, in-page players,
   custom social marks. Shorter page, no index numerals.
   ─────────────────────────────────────────────────────────── */

@font-face{font-family:Syne;src:url(/assets/fonts/syne-700.woff2) format('woff2');font-weight:700;font-display:block}
@font-face{font-family:Syne;src:url(/assets/fonts/syne-800.woff2) format('woff2');font-weight:800;font-display:block}
@font-face{font-family:InterT;src:url(/assets/fonts/inter-300.woff2) format('woff2');font-weight:300;font-display:block}
@font-face{font-family:InterT;src:url(/assets/fonts/inter-400.woff2) format('woff2');font-weight:400;font-display:block}
@font-face{font-family:InterT;src:url(/assets/fonts/inter-500.woff2) format('woff2');font-weight:500;font-display:block}

:root{
  --black:#050505;
  --carbon:#0A0A0A;
  --steel:#111111;
  --platinum:#E6F0E9;          /* cool off-white, not pure white */
  --ash:#7B827D;
  --line:rgba(230,240,233,.11);
  --line-hi:rgba(230,240,233,.30);
  --gold:#D6B46A;

  /* one metal, lit from two sides — warm gold with a cold steel glint */
  --c1:#8A6A35;   /* deep gold  */
  --c2:#D6B46A;   /* gold       */
  --c3:#F6E6BE;   /* lit gold   */
  --c4:#A6BAC6;   /* cold steel */
  --spectrum:linear-gradient(100deg,#8A6A35 0%,#D6B46A 20%,#F6E6BE 38%,#A6BAC6 54%,#D6B46A 74%,#8A6A35 100%);
  /* richer metal for the hero wordmark — bronze → gold → champagne → white glint → steel */
  --spectrum-hero:linear-gradient(100deg,
    #8A6A35 0%,  #B98E3F 7%,  #D6B46A 14%, #F6E6BE 21%, #FFFFFF 27%,
    #F0DCAC 33%, #D6B46A 42%, #A6BAC6 51%, #E4ECF1 57%, #A6BAC6 63%,
    #D6B46A 72%, #F6E6BE 80%, #C89B4A 89%, #8A6A35 100%);

  --display:Syne,'Helvetica Neue',Arial,sans-serif;
  --ui:InterT,'Helvetica Neue',Arial,sans-serif;

  --pad:clamp(1.15rem,4.5vw,4.5rem);
  --max:92rem;
  --e:cubic-bezier(.22,1,.36,1);
  --e2:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{margin:0;background:var(--black);color:var(--platinum);font-family:var(--ui);font-weight:300;
  font-size:clamp(.92rem,.88rem + .2vw,1rem);line-height:1.7;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}

img,svg,iframe,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  line-height:.88;letter-spacing:-.03em;text-wrap:balance}
::selection{background:var(--gold);color:#0A0A0A}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.skip{position:absolute;left:-9999px;z-index:300;background:var(--platinum);color:var(--black);padding:.8rem 1.4rem}
.skip:focus{left:0;top:0}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/* ── spectrum type ───────────────────────────────────────── */
.spec{background:var(--spectrum);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent}
@media (prefers-reduced-motion:no-preference){.spec{animation:flow 9s linear infinite}}
@keyframes flow{from{background-position:0 0}to{background-position:260% 0}}

.chrome{background:linear-gradient(96deg,#7A7D86 0%,#FFF 18%,#B6BAC6 34%,#FFF 50%,#CED4E2 64%,#90949F 78%,#FFF 92%,#7A7D86 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-reduced-motion:no-preference){.chrome{animation:flow 11s linear infinite}}

/* ── ambient colour glows ────────────────────────────────── */
.glow{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow i{position:absolute;display:block;border-radius:50%;filter:blur(100px);opacity:.17}
.glow i:nth-child(1){width:46vmax;height:46vmax;left:-14vmax;top:-10vmax;background:#8A6A35}
.glow i:nth-child(2){width:38vmax;height:38vmax;right:-12vmax;top:22vmax;background:#D6B46A}
.glow i:nth-child(3){width:34vmax;height:34vmax;left:24vmax;bottom:-14vmax;background:#5C6E78}
@media (prefers-reduced-motion:no-preference){
  .glow i{animation:float 26s var(--e2) infinite alternate}
  .glow i:nth-child(2){animation-duration:34s;animation-delay:-8s}
  .glow i:nth-child(3){animation-duration:30s;animation-delay:-16s}
}
@keyframes float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vmax,-5vmax,0) scale(1.18)}}
main,.head,.foot,.vel{position:relative;z-index:2}

/* ── micro label ─────────────────────────────────────────── */
.lbl{font-family:var(--ui);font-weight:500;font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ash);text-indent:.32em;display:inline-block}

/* ── buttons ─────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;gap:.7rem;padding:.95rem 1.8rem;
  border:1px solid var(--line);border-radius:999px;overflow:hidden;isolation:isolate;cursor:pointer;
  font-family:var(--ui);font-weight:500;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  text-indent:.24em;color:var(--platinum);background:none;
  transition:color .45s var(--e),border-color .45s var(--e)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--spectrum);
  transform:translateY(101%);transition:transform .55s var(--e)}
.btn:hover{color:#0A0A0A;border-color:transparent}
.btn:hover::before{transform:none}
.btn .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.btn-solid{background:var(--spectrum);color:#0A0A0A;border-color:transparent}
.btn-solid::before{background:#fff}
.btn-solid:hover{color:#0A0A0A}
.btn-sm{padding:.65rem 1.15rem;font-size:.54rem;gap:.5rem}

/* ── vinyl intro ─────────────────────────────────────────── */
.pre{display:none}
.js-on .pre{position:fixed;inset:0;z-index:250;background:var(--black);display:grid;place-items:center;
  transition:opacity .7s var(--e) .2s,visibility .7s .2s}
.pre.gone{opacity:0;visibility:hidden;pointer-events:none}
.pre-in{display:grid;justify-items:center;gap:clamp(1.4rem,4vw,2.2rem);width:min(86vw,24rem);text-align:center}

.deck{position:relative;width:min(62vw,16rem);aspect-ratio:1}
.disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.045) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 50%, #17171C 0 33%, #0C0C10 33.5% 100%),
    #0A0A0D;
  box-shadow:0 0 0 1px rgba(230,240,233,.08), 0 30px 80px -20px rgba(214,180,106,.4)}
@media (prefers-reduced-motion:no-preference){.disc{animation:spin 2.6s linear infinite}}
@keyframes spin{to{transform:rotate(360deg)}}
.disc .sheen{position:absolute;inset:-25%;border-radius:50%;mix-blend-mode:screen;opacity:.5;
  background:conic-gradient(from 0deg,transparent 0 12%,rgba(246,230,190,.55) 18%,transparent 26% 58%,
    rgba(166,186,198,.4) 66%,transparent 76% 100%)}
.disc .lab{position:absolute;inset:33%;border-radius:50%;background:var(--spectrum);display:grid;
  place-items:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.disc .lab svg{width:50%;height:auto;color:#0A0A0A}
.disc .hole{position:absolute;left:50%;top:50%;width:5.5%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--black)}
.arm{position:absolute;right:-7%;top:-5%;width:58%;height:58%;transform-origin:88% 12%;
  color:rgba(236,238,242,.55)}
@media (prefers-reduced-motion:no-preference){.arm{animation:drop 1.5s var(--e2) both .25s}}
@keyframes drop{from{transform:rotate(-26deg)}to{transform:rotate(0)}}

.pre .track{width:100%;height:1px;background:var(--line)}
.pre .track i{display:block;height:100%;width:0;background:var(--spectrum);transition:width .25s linear}
.pre .pct{font-size:.56rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ash);text-indent:.32em}

/* ── custom cursor ───────────────────────────────────────── */
/* one fixed colour — no blend mode, so it never inverts over artwork */
.cur{position:fixed;top:0;left:0;z-index:240;pointer-events:none;width:12px;height:12px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 1px rgba(5,5,5,.35),0 0 18px rgba(214,180,106,.35);opacity:0;
  transition:opacity .4s,width .4s var(--e),height .4s var(--e),background .4s}
.cur.on{opacity:1}
.cur.big{width:58px;height:58px;background:rgba(214,180,106,.22);
  box-shadow:inset 0 0 0 1px var(--gold),0 0 26px rgba(214,180,106,.25)}
@media (pointer:coarse){.cur{display:none}}

/* ── header ──────────────────────────────────────────────── */
.head{position:fixed;inset:0 0 auto;z-index:120;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1rem var(--pad);transition:transform .6s var(--e),background .5s,padding .5s}
.head.hide{transform:translateY(-115%)}
.head.stuck{background:rgba(5,5,6,.7);backdrop-filter:blur(20px) saturate(140%);padding-block:.7rem}
.brand{display:inline-flex;align-items:center;gap:.6rem}
.brand .mark{height:22px;width:auto;color:var(--gold);flex:none}
.brand b{font-family:var(--display);font-weight:800;font-size:.76rem;letter-spacing:.02em;text-transform:uppercase}
.head nav{display:none;gap:1.8rem}
@media (min-width:62rem){.head nav{display:flex}}
.head nav a{position:relative;font-size:.59rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash);text-indent:.2em;transition:color .4s}
.head nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--spectrum);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e)}
.head nav a:hover{color:var(--platinum)}
.head nav a:hover::after{transform:none;transform-origin:left}
.head-r{display:flex;align-items:center;gap:.7rem}
.head-r .btn{padding:.68rem 1.25rem;font-size:.54rem}
@media (max-width:42rem){
  /* Subscribe stays beside the menu on phones; Bookings drops into the menu */
  .head-r .btn{padding:.6rem 1rem;font-size:.5rem;letter-spacing:.18em;text-indent:.18em}
  .head-r .btn .dot{width:4px;height:4px}
  .head{gap:.5rem;padding-inline:clamp(.9rem,4vw,1.2rem)}
  .brand b{font-size:.66rem;letter-spacing:.01em}
  .brand .mark{height:19px}
  .brand{gap:.45rem}
}
@media (max-width:23rem){.brand b{display:none}}

.burger{width:42px;height:42px;display:grid;place-items:center;gap:5px;background:none;border:1px solid var(--line);
  border-radius:50%;cursor:pointer;transition:border-color .4s}
.burger span{display:block;width:15px;height:1px;background:var(--platinum);
  transition:transform .5s var(--e),opacity .3s}
.burger:hover{border-color:var(--line-hi)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
@media (min-width:62rem){.burger{display:none}}

/* ── overlay menu ────────────────────────────────────────── */
.ov{position:fixed;inset:0;z-index:119;background:rgba(8,8,11,.96);backdrop-filter:blur(26px);
  display:grid;grid-template-rows:1fr auto;padding:6rem var(--pad) 2.4rem}
.ov[hidden]{display:none}
.ov nav{align-self:center;display:grid;gap:.1rem;justify-items:center;text-align:center}
.ov nav a{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(1.9rem,8.4vw,3.6rem);line-height:1.14;transition:color .4s}
.ov nav a:hover{color:var(--gold)}
.ov .f{display:grid;gap:.5rem;justify-items:center;border-top:1px solid var(--line);padding-top:1.3rem}
.ov .f span{font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ash);text-indent:.28em}
@media (prefers-reduced-motion:no-preference){
  .ov:not([hidden]) nav a{animation:up .6s var(--e2) both;animation-delay:calc(var(--i,0)*50ms)}
}
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ── hero ────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:grid;align-content:end;gap:clamp(1.4rem,3.4vw,2.2rem);
  padding:6.5rem 0 clamp(1.8rem,5vh,3rem);overflow:hidden;isolation:isolate}
/* Two plates of the same frame — a defocused background and a cut-out of him.
   They move at different rates, so the still reads as moving footage. */
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 12%;
  transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.hero-bg .plate{filter:saturate(.9) contrast(1.02) brightness(.92);
  transform:translate3d(var(--bx,0),var(--by,0),0);scale:1.14}
.hero-bg .shadow{opacity:.85;transform:translate3d(var(--hx,0),var(--hy,0),0);scale:1.05}
.hero-bg .subject{filter:saturate(1.08) contrast(1.12) brightness(.96);
  transform:translate3d(var(--sx,0),var(--sy,0),0);scale:1.02}
@media (prefers-reduced-motion:no-preference){
  .hero-bg{clip-path:inset(0 0 100% 0);animation:wipe 1.5s var(--e2) .15s forwards}
  .ready .hero-bg .plate{animation:driftA 30s ease-in-out 1.6s infinite alternate}
  .ready .hero-bg .shadow{animation:driftC 22s ease-in-out 1.6s infinite alternate}
  .ready .hero-bg .subject{animation:driftB 22s ease-in-out 1.6s infinite alternate}
}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes driftA{from{scale:1.14}to{scale:1.24}}
@keyframes driftB{from{scale:1.02}to{scale:1.09}}
@keyframes driftC{from{scale:1.05}to{scale:1.12}}

/* a rim of gold light that breathes behind him */
.hero .rim{position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(38% 46% at 50% 34%,rgba(214,180,106,.16),transparent 70%)}
@media (prefers-reduced-motion:no-preference){
  .ready .hero .rim{animation:rim 8s ease-in-out infinite alternate}
}
@keyframes rim{from{opacity:.45;transform:scale(.94)}to{opacity:1;transform:scale(1.08)}}

/* slow drifting haze, so the frame is never completely still */
.hero .haze{position:absolute;inset:-12%;z-index:-1;pointer-events:none;opacity:.5;
  background:radial-gradient(28% 34% at 22% 62%,rgba(166,186,198,.16),transparent 70%),
             radial-gradient(26% 30% at 78% 44%,rgba(214,180,106,.14),transparent 70%)}
@media (prefers-reduced-motion:no-preference){
  .ready .hero .haze{animation:haze 24s ease-in-out infinite alternate}
}
@keyframes haze{from{transform:translate3d(-3%,2%,0) scale(1)}to{transform:translate3d(4%,-3%,0) scale(1.12)}}

/* a slow gold light passes over the portrait */
.hero .sweep{position:absolute;inset:-20% -40%;z-index:-1;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(104deg,transparent 38%,rgba(246,230,190,.55) 48%,rgba(255,255,255,.3) 52%,
    transparent 62%);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .ready .hero .sweep{animation:pass 9s ease-in-out 2.4s infinite}
}
@keyframes pass{0%{transform:translateX(-62%);opacity:0}
  12%{opacity:.9}36%{opacity:.9}50%{transform:translateX(62%);opacity:0}100%{opacity:0}}
/* club wash over the portrait */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;mix-blend-mode:color-dodge;opacity:.42;
  background:radial-gradient(58% 48% at 20% 24%,rgba(214,180,106,.6),transparent 70%),
             radial-gradient(52% 44% at 84% 38%,rgba(120,150,168,.4),transparent 72%),
             radial-gradient(60% 38% at 50% 94%,rgba(138,106,53,.45),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(5,5,6,.78) 0%,rgba(5,5,6,.08) 30%,rgba(5,5,6,.7) 72%,var(--black) 100%)}

.hero-type{padding-inline:var(--pad);max-width:var(--max);margin-inline:auto;width:100%}
.hero h1{font-size:clamp(2.1rem,8.4vw,6.6rem);line-height:1;letter-spacing:-.025em}
.hero h1 .ln:last-child>span{animation-delay:calc(var(--i,0)*90ms),4.5s}
.ln{display:block;overflow:hidden}
.ln>span{display:block}
@media (prefers-reduced-motion:no-preference){
  .ln>span{transform:translateY(104%)}
  .ready .ln>span{animation:rise 1.1s var(--e2) both;animation-delay:calc(var(--i,0)*90ms)}
}
html:not(.js-on) .ln>span{transform:none}
@keyframes rise{to{transform:none}}

/* ── hero wordmark: living metal ──────────────────────────── */
.hero h1 .spec{
  /* background-image, NOT the `background` shorthand — the shorthand resets
     background-clip back to border-box and the letters render as solid bars */
  background-image:var(--spectrum-hero);
  background-size:420% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  will-change:background-position,filter;
}
@media (prefers-reduced-motion:no-preference){
  /* the rise-in must not replace the colour flow — run both */
  .ready .hero h1 .ln>span{
    animation:rise 1.1s var(--e2) both, hero-flow 7.5s linear infinite, hero-lume 7.5s ease-in-out infinite;
    animation-delay:calc(var(--i,0) * 90ms), calc(var(--i,0) * -1.6s), calc(var(--i,0) * -1.6s);
  }
  /* before the page is ready, hold still and un-risen */
  .hero h1 .ln>span{animation:none}
}
@keyframes hero-flow{
  from{background-position:0 50%}
  to  {background-position:420% 50%}
}
@keyframes hero-lume{
  0%,100%{filter:saturate(1)   brightness(1)}
  30%    {filter:saturate(1.18) brightness(1.09)}
  60%    {filter:saturate(.94)  brightness(1.03)}
}

.hero-foot{padding-inline:var(--pad);max-width:var(--max);margin-inline:auto;width:100%;
  display:grid;gap:1.4rem;align-items:end}
@media (min-width:52rem){.hero-foot{grid-template-columns:1fr auto;gap:2.2rem}}
.hero-foot p{color:var(--ash);max-width:40ch;font-size:clamp(.94rem,1.5vw,1.02rem)}
.hero-foot .acts{display:flex;gap:.7rem;flex-wrap:wrap}
@media (max-width:52rem){
  .hero{text-align:center}
  .hero-foot{justify-items:center;text-align:center}
  .hero-foot p{max-width:34ch}.hero-foot .acts{justify-content:center}
}

/* ── velocity marquee ────────────────────────────────────── */
.vel{border-block:1px solid var(--line);background:rgba(11,11,14,.7);backdrop-filter:blur(8px);
  overflow:hidden;padding-block:clamp(.8rem,1.8vw,1.2rem)}
.vel .run{display:flex;width:max-content;will-change:transform}
.vel .run>span{display:flex;align-items:center;gap:2rem;padding-right:2rem;white-space:nowrap}
.vel em{font-family:var(--display);font-weight:700;font-style:normal;text-transform:uppercase;
  font-size:clamp(1rem,2.8vw,1.7rem);letter-spacing:-.02em;color:var(--platinum)}
.vel i{width:7px;height:7px;border-radius:50%;background:var(--spectrum);flex:none}

/* ── sections ────────────────────────────────────────────── */
.sec{position:relative;padding-block:clamp(2.6rem,5.2vw,4.4rem)}
.sec-carbon{background:rgba(11,11,14,.82)}
.hd{display:grid;gap:.8rem;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.hd h2{font-size:clamp(2rem,6.6vw,4.8rem)}
.hd p{color:var(--ash);max-width:48ch}
@media (min-width:60rem){
  .hd{grid-template-columns:1fr minmax(16rem,24rem);align-items:end;gap:2.2rem}
  .hd .lbl{grid-column:1/-1}
}
@media (max-width:60rem){.hd{justify-items:center;text-align:center}}

/* ── craft: one compact row, no numerals ─────────────────── */
.craft{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;
  overflow:hidden}
@media (min-width:52rem){.craft{grid-template-columns:repeat(3,1fr)}}
.craft article{background:rgba(5,5,6,.72);padding:clamp(1.4rem,3vw,2.2rem);display:grid;gap:.7rem;
  transition:background .5s var(--e)}
.craft article:hover{background:rgba(20,20,25,.85)}
.craft .k{width:30px;height:2px;border-radius:2px;background:var(--spectrum)}
.craft h3{font-size:clamp(1.15rem,2.4vw,1.5rem)}
.craft p{color:var(--ash);font-size:.9rem}
@media (max-width:52rem){.craft article{text-align:center;justify-items:center}}

/* ── in-page players ─────────────────────────────────────── */
.player{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--steel);
  border:1px solid var(--line);border-radius:12px}
.player img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.84);
  transition:transform 1.2s var(--e2),filter .55s var(--e)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit}
.player .pl{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;border:0;
  padding:0;cursor:pointer;display:grid;place-items:center;background:rgba(5,5,6,.42);
  backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(236,238,242,.4);
  transition:transform .5s var(--e),box-shadow .5s,background .5s}
.player .pl::after{content:"";border-left:15px solid var(--platinum);border-block:10px solid transparent;
  margin-left:5px;transition:border-left-color .4s}
.player .pl::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--spectrum);
  opacity:0;z-index:-1;transition:opacity .45s}
.card:hover .player img,.player:hover img{transform:scale(1.05);filter:saturate(1.15) brightness(1)}
.card:hover .pl,.player .pl:hover{transform:scale(1.09)}
.card:hover .pl::before,.player .pl:hover::before{opacity:1}
.card:hover .pl::after,.player .pl:hover::after{border-left-color:#0A0A0A}
.player.live .pl,.player.live img{display:none}

.card{display:grid;gap:.9rem}
.card .meta{display:flex;justify-content:space-between;gap:.8rem;align-items:baseline}
.card h3{font-size:clamp(1.05rem,2vw,1.35rem)}
.card p{color:var(--ash);font-size:.86rem}
.card .out{display:inline-flex;align-items:center;gap:.45rem;font-size:.54rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ash);text-indent:.2em;
  border-bottom:1px solid transparent;transition:color .4s,border-color .4s;justify-self:start}
.card .out:hover{color:var(--platinum);border-color:var(--line-hi)}
@media (max-width:52rem){
  .card{text-align:center}
  .card .meta{flex-direction:column;align-items:center;gap:.2rem}
  .card .out{justify-self:center}
}

.films{display:grid;gap:clamp(1.3rem,2.6vw,1.9rem)}
@media (min-width:54rem){.films{grid-template-columns:repeat(3,1fr)}}

/* ── sets grid (Mixcloud) ────────────────────────────────── */
.sets{display:grid;gap:clamp(1.3rem,2.6vw,1.9rem)}
@media (min-width:44rem){.sets{grid-template-columns:repeat(2,1fr)}}
@media (min-width:68rem){.sets{grid-template-columns:repeat(3,1fr)}}
.sets .player{aspect-ratio:4/3}
.sets .player .pl{width:58px;height:58px}
.sets .player.live{aspect-ratio:auto;border:0;background:none}
.sets .player.live iframe{position:static;height:120px;border-radius:12px}

/* ── embeds (Spotify / SoundCloud) ───────────────────────── */
.embeds{display:grid;gap:clamp(1.2rem,2.6vw,1.6rem)}
@media (min-width:62rem){.embeds{grid-template-columns:1.15fr .85fr}}
/* the iframe paints its own white before it loads — give it a dark bed and
   round the corners on the iframe itself so no light edge shows */
.embed{position:relative;border-radius:14px;overflow:hidden;background:#121212;
  box-shadow:0 0 0 1px var(--line)}
.embed iframe{border:0;display:block;width:100%;background:#121212;color-scheme:dark}

/* ── story ───────────────────────────────────────────────── */
.story{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
@media (min-width:60rem){.story{grid-template-columns:.85fr 1.15fr}}
.story .pic{position:relative;overflow:hidden;background:var(--steel);aspect-ratio:4/5;
  border-radius:14px;box-shadow:0 0 0 1px var(--line)}
.story .pic img{width:100%;height:100%;object-fit:cover}
.story .pic::after{content:"";position:absolute;inset:0;mix-blend-mode:color-dodge;opacity:.3;
  background:radial-gradient(70% 55% at 32% 20%,rgba(214,180,106,.42),transparent 70%),
             radial-gradient(60% 50% at 80% 74%,rgba(120,150,168,.3),transparent 72%)}
.story .txt{display:grid;gap:1.1rem}
.story .txt h2{font-size:clamp(1.9rem,5.4vw,3.6rem)}
.story .txt p{color:var(--ash);max-width:48ch}
@media (max-width:60rem){.story{justify-items:center}.story .txt{text-align:center;justify-items:center}}

.figs{display:grid;gap:1.3rem;margin:clamp(1.1rem,2.4vw,1.6rem) 0 0;padding-top:clamp(1.1rem,2.4vw,1.5rem);
  border-top:1px solid var(--line)}
@media (min-width:34rem){.figs{grid-template-columns:repeat(3,1fr)}}
.figs div{margin:0}
.figs dt{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.4vw,2.7rem);line-height:1;
  letter-spacing:-.04em}
.figs dt.t{font-size:clamp(.98rem,1.9vw,1.1rem);line-height:1.35;letter-spacing:-.01em}
.figs dd{margin:.45rem 0 0;font-size:.53rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ash);
  text-indent:.26em}
@media (max-width:60rem){.figs{text-align:center;justify-items:center}}

/* ── colour band ─────────────────────────────────────────── */
.cband{position:relative;overflow:hidden;border-block:1px solid var(--line);background:var(--black);
  display:grid;place-items:center;padding-block:clamp(3.4rem,9vw,6.5rem)}
/* a slow gold aura behind the mark, nothing else */
.cband::before{content:"";position:absolute;width:min(70vw,34rem);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(214,180,106,.22),transparent 68%);filter:blur(30px)}
@media (prefers-reduced-motion:no-preference){.cband::before{animation:aura 7s ease-in-out infinite alternate}}
@keyframes aura{from{transform:scale(.86);opacity:.55}to{transform:scale(1.14);opacity:1}}
.cband .veil{position:relative;display:grid;place-items:center;gap:1.2rem;text-align:center}

/* ── rooms as chips ──────────────────────────────────────── */
.rooms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center}
.rooms li{position:relative;border:1px solid var(--line);border-radius:999px;padding:.65rem 1.25rem;
  font-family:var(--display);font-weight:700;font-size:clamp(.72rem,1.6vw,.92rem);text-transform:uppercase;
  letter-spacing:-.01em;color:var(--ash);isolation:isolate;overflow:hidden;
  transition:color .45s var(--e),border-color .45s}
.rooms li::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--spectrum);
  transform:translateY(101%);transition:transform .5s var(--e)}
.rooms li:hover{color:#0A0A0A;border-color:transparent}
.rooms li:hover::before{transform:none}

/* ── social marks ────────────────────────────────────────── */
.plat{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;grid-template-columns:repeat(2,1fr)}
@media (min-width:44rem){.plat{grid-template-columns:repeat(4,1fr)}}
.plat a{position:relative;background:rgba(5,5,6,.78);padding:clamp(1.3rem,3vw,1.9rem) 1rem;
  display:grid;justify-items:center;gap:.7rem;isolation:isolate;transition:background .5s var(--e)}
.plat .ico{width:30px;height:30px;color:var(--platinum);transition:color .45s var(--e),transform .5s var(--e)}
.plat b{font-family:var(--display);font-weight:700;font-size:.82rem;text-transform:uppercase;
  letter-spacing:-.01em;transition:color .4s}
.plat span{font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);text-indent:.24em}
.plat a::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s var(--e);
  background:radial-gradient(90% 90% at 50% 0%,var(--gold),transparent 72%)}
.plat a:hover{background:rgba(16,16,21,.9)}
.plat a:hover::before{opacity:.2}
.plat a:hover .ico{color:var(--gold);transform:translateY(-3px) scale(1.06)}

/* ── bookings ────────────────────────────────────────────── */
.book{display:grid;gap:clamp(1.8rem,4vw,3.4rem)}
@media (min-width:60rem){.book{grid-template-columns:.85fr 1.15fr}}
.book .side p{color:var(--ash);max-width:40ch;margin-bottom:1.8rem}
.book dl{display:grid;gap:1.3rem;margin:0}
.book dt{font-size:.53rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ash);text-indent:.26em;
  margin-bottom:.3rem}
.book dd{margin:0;font-size:1rem}
.book dd a{border-bottom:1px solid var(--line);transition:border-color .4s,color .4s}
.book dd a:hover{border-color:var(--gold);color:var(--gold)}
form{display:grid;gap:1.4rem}
form label{display:grid;gap:.5rem;font-size:.53rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ash);text-indent:.26em}
form :is(input,select,textarea){font-family:var(--ui);font-weight:300;font-size:1rem;color:var(--platinum);
  background:none;border:0;border-bottom:1px solid var(--line);padding:.65rem 0;width:100%;border-radius:0;
  transition:border-color .4s}
form textarea{resize:vertical;min-height:5rem}
form :is(input,select,textarea):focus{border-bottom-color:var(--gold);outline:none}
form select{appearance:none;cursor:pointer}
form option{background:var(--black)}
form button{justify-self:start;margin-top:.3rem}
form small{font-size:.57rem;letter-spacing:.1em;color:var(--ash)}
.err{font-size:.8rem;color:#E09A86}
@media (max-width:60rem){
  .book{justify-items:center;text-align:center}
  .book .side,.book dl{justify-items:center}
  form{width:100%;max-width:32rem;text-align:center}
  form label{justify-items:center}
  form :is(input,select,textarea){text-align:center}
  form select{text-align-last:center}
  form button{justify-self:center}
}

/* ── footer ──────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding-block:clamp(1.8rem,3.6vw,2.6rem)}
.foot .big{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.045em;
  font-size:clamp(1.8rem,9.4vw,8.5rem);line-height:.88;margin-bottom:clamp(1rem,2.4vw,1.6rem)}
.foot .row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding-top:1.2rem}
.foot .row p{font-size:.53rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);text-indent:.24em}
@media (max-width:60rem){.foot .row{justify-content:center;text-align:center}}

/* ── reveal ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--e2),transform .9s var(--e2)}
  .js .rv.in{opacity:1;transform:none}
  .js .stg>*{opacity:0;transform:translateY(22px);
    transition:opacity .8s var(--e2),transform .8s var(--e2)}
  .js .stg.in>*{opacity:1;transform:none}
  .js .stg.in>*:nth-child(2){transition-delay:.09s}
  .js .stg.in>*:nth-child(3){transition-delay:.18s}
  .js .stg.in>*:nth-child(4){transition-delay:.27s}
  .js .stg.in>*:nth-child(5){transition-delay:.36s}
  .js .stg.in>*:nth-child(6){transition-delay:.45s}
  .js .stg.in>*:nth-child(7){transition-delay:.54s}
  .js .stg.in>*:nth-child(8){transition-delay:.63s}
  .js .stg.in>*:nth-child(9){transition-delay:.72s}
}

/* ── grain ───────────────────────────────────────────────── */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── Mixcloud slim player + playing badge ────────────────── */
.mcbar{border-radius:10px;overflow:hidden;background:#0F0F13;box-shadow:0 0 0 1px var(--line)}
.mcbar iframe{width:100%;height:62px;border:0;display:block}
.player.playing .pl{display:none}
.player.playing img{filter:saturate(1.1) brightness(.6)}
.badge{position:absolute;inset:auto auto 0 0;margin:.8rem;display:none;align-items:center;gap:.5rem;
  padding:.45rem .8rem;border-radius:999px;background:rgba(5,5,6,.6);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px var(--line-hi);font-size:.5rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;text-indent:.2em;color:var(--platinum)}
.player.playing .badge{display:inline-flex}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.eq i{width:2px;border-radius:1px;background:var(--spectrum);height:30%}
@media (prefers-reduced-motion:no-preference){
  .eq i{animation:bump .9s ease-in-out infinite}
  .eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}
  .eq i:nth-child(4){animation-delay:.45s}
}
@keyframes bump{0%,100%{height:25%}50%{height:100%}}
@media (max-width:52rem){.badge{inset:auto 0 0 50%;transform:translateX(-50%)}}


/* ── phones: two sets per row keeps the page short ───────── */
@media (max-width:44rem){
  .sets{grid-template-columns:repeat(2,1fr);gap:1rem}
  .sets .card p{display:none}
  .sets .card{gap:.6rem}
  .sets .player{aspect-ratio:1}
  .sets .player .pl{width:46px;height:46px}
  .sets .player .pl::after{border-left-width:11px;border-block-width:7px}
  .sets .card h3{font-size:.92rem}
  .sets .card .meta .lbl{font-size:.46rem}
  .sets .card .out{font-size:.46rem}
  .sets .badge{font-size:.42rem;padding:.3rem .55rem;margin:.45rem}
}


/* ── stood-up cut-outs ───────────────────────────────────── */


/* ── logo band ───────────────────────────────────────────── */
.cband .veil .op{width:clamp(7rem,20vw,15rem);height:auto;
  filter:drop-shadow(0 0 26px rgba(214,180,106,.35))}
.cband .veil .op path{fill:url(#opgrad)}
.cband .veil .tag{font-size:.56rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ash);
  text-indent:.42em}
@media (prefers-reduced-motion:no-preference){
  .js .cband .veil .op{opacity:0;transform:translateY(18px) scale(.94);
    transition:opacity 1s var(--e2),transform 1.1s var(--e2)}
  .js .cband .veil .op.in{opacity:1;transform:none}
}

/* ── studio feature ──────────────────────────────────────── */
.studio{position:relative;overflow:hidden;border-radius:16px;box-shadow:0 0 0 1px var(--line);
  margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.studio img{width:100%;height:auto;display:block;will-change:transform}
.studio .cap{position:absolute;inset:auto 0 0 0;display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:.8rem;padding:clamp(1rem,2.6vw,1.8rem);
  background:linear-gradient(transparent,rgba(5,5,5,.88) 76%)}
.studio .cap h3{font-size:clamp(1.2rem,3.4vw,2.2rem)}
.studio .cap p{font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ash);
  text-indent:.26em}
@media (max-width:52rem){.studio .cap{justify-content:center;text-align:center}}

/* ── genre chooser ───────────────────────────────────────── */
.genres{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:clamp(1.3rem,3vw,2rem)}
.genres button{font-family:var(--ui);font-weight:500;font-size:.56rem;letter-spacing:.24em;
  text-transform:uppercase;text-indent:.24em;color:var(--ash);background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:.6rem 1.15rem;position:relative;
  isolation:isolate;overflow:hidden;transition:color .45s var(--e),border-color .45s}
.genres button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--spectrum);
  transform:translateY(101%);transition:transform .5s var(--e)}
.genres button:hover{color:var(--platinum);border-color:var(--line-hi)}
.genres button[aria-pressed="true"]{color:#0A0A0A;border-color:transparent}
.genres button[aria-pressed="true"]::before{transform:none}
.genres .n{opacity:.6;margin-left:.45em;font-size:.9em}

.follow{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  margin-top:clamp(1.6rem,3.4vw,2.4rem)}
.follow a{display:inline-flex;align-items:center;gap:.6rem}
.follow .ico{width:17px;height:17px;flex:none;color:currentColor}

.card[hidden]{display:none}
.empty{text-align:center;color:var(--ash);font-size:.86rem;padding:1.6rem 0}

/* ── smaller mix boxes ───────────────────────────────────── */
.sets{grid-template-columns:repeat(2,1fr);gap:clamp(.8rem,2vw,1.4rem)}
/* auto-fill, not auto-fit: filtering down to one mix must not stretch it
   across the entire row */
@media (min-width:44rem){.sets{grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr))}}
.sets .card{gap:.6rem}
.sets .card h3{font-size:clamp(.92rem,1.5vw,1.05rem)}
.sets .card p{font-size:.78rem}
.sets .player .pl{width:46px;height:46px}
.sets .player .pl::after{border-left-width:11px;border-block-width:7px}

/* ── the record turns inside the sleeve while it plays ───── */
.player .disc-in{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  opacity:0;transition:opacity .5s var(--e)}
.player.playing .disc-in{opacity:1}
.player.playing img{filter:saturate(1) brightness(.42)}
.spin{display:block;position:relative;width:54%;aspect-ratio:1;border-radius:50%;
  transform:scale(.55);transition:transform .8s var(--e2);
  background:
    repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.055) 0 1px,transparent 1px 3.5px),
    radial-gradient(circle at 50% 50%,#17171A 0 34%,#0B0B0D 34.5% 100%),#0A0A0C;
  box-shadow:0 0 0 1px rgba(230,240,233,.1),0 14px 30px -10px rgba(0,0,0,.8)}
.player.playing .spin{transform:none}
@media (prefers-reduced-motion:no-preference){
  .player.playing .spin{animation:spin 3.4s linear infinite}
}
.spin::before{content:"";position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen;opacity:.4;
  background:conic-gradient(from 0deg,transparent 0 14%,rgba(246,230,190,.5) 20%,transparent 28% 60%,
    rgba(166,186,198,.36) 68%,transparent 78% 100%)}
.spin .lab{position:absolute;inset:31%;border-radius:50%;background:var(--spectrum)}
.spin .hole{position:absolute;left:50%;top:50%;width:7%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--black)}

/* the control stays put and becomes pause, sitting on the label */
.player.playing .pl{display:grid;z-index:2;background:rgba(5,5,5,.5);width:44px;height:44px}
.player.playing .pl::after{border:0;width:11px;height:12px;margin:0;border-radius:1px;
  border-left:3.5px solid var(--platinum);border-right:3.5px solid var(--platinum)}
.player.playing .pl:hover::after{border-color:#0A0A0A}
.player.playing .badge{display:none}

/* ── waveform ────────────────────────────────────────────── */
.wave{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .6s var(--e2),opacity .45s var(--e)}
.card.live-set .wave{grid-template-rows:1fr;opacity:1}
.wave>span{overflow:hidden;display:block}
.wave .box{display:block;padding:.6rem .7rem .5rem;border-radius:10px;background:rgba(10,10,12,.72);
  box-shadow:inset 0 0 0 1px var(--line);margin-top:.45rem}
.wave .bars{display:flex;align-items:center;gap:1px;height:34px;cursor:pointer;touch-action:none}
.wave .bars i{flex:1 1 0;min-width:1px;border-radius:1px;background:rgba(230,240,233,.14);
  transition:background .18s linear,opacity .18s linear}
.wave .bars i.on{background:var(--gold)}
.wave .bars i.at{background:var(--c3);box-shadow:0 0 6px rgba(246,230,190,.55)}
.wave .t{display:flex;justify-content:space-between;margin-top:.4rem;font-size:.52rem;
  letter-spacing:.14em;font-variant-numeric:tabular-nums;color:var(--ash)}
.wave .t b{font-weight:500;color:var(--gold)}
.mc-host{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none;border-radius:inherit}
.mc-host iframe{width:100%;height:100%;border:0}

/* ── SoundCloud deck ─────────────────────────────────────── */
.sc{position:relative;border-radius:14px;background:rgba(10,10,12,.78);box-shadow:inset 0 0 0 1px var(--line);
  padding:clamp(1.1rem,2.6vw,1.6rem);display:grid;gap:.9rem;align-content:start}
.sc .top{display:flex;align-items:center;gap:.6rem}
.sc .top .ico{width:19px;height:19px;color:var(--gold);flex:none}
.sc h3{font-size:.95rem;letter-spacing:.01em}
.sc .now{font-size:.86rem;color:var(--platinum);min-height:1.3em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc .wave{grid-template-rows:1fr;opacity:1;width:100%;justify-self:stretch}
.sc .wave .box{margin-top:0}
.sc .row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.sc .ctl{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;
  display:grid;place-items:center;color:var(--platinum);flex:none;
  transition:background .4s var(--e),border-color .4s,color .4s}
.sc .ctl:hover{background:var(--gold);border-color:var(--gold);color:#0A0A0A}
.sc .ctl svg{width:15px;height:15px;fill:currentColor}
.sc .ctl.big{width:52px;height:52px}
.sc .sc-host{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.sc .sc-host iframe{width:100%;height:100%;border:0}
@media (max-width:60rem){.sc{justify-items:center;text-align:center}.sc .top,.sc .row{justify-content:center}}


/* ── YouTube box, inside the Watch heading ───────────────── */
.watch-hd{grid-template-columns:1fr!important;gap:clamp(1.1rem,2.4vw,1.8rem)}
@media (min-width:62rem){.watch-hd{grid-template-columns:1fr auto!important;align-items:end}}
.hd-txt{display:grid;gap:.8rem}
@media (max-width:62rem){.hd-txt{justify-items:center;text-align:center}}

.yt-box{position:relative;border-radius:12px;overflow:hidden;background:rgba(10,10,12,.82);
  box-shadow:inset 0 0 0 1px var(--line);padding:.7rem .8rem;display:flex;align-items:center;
  gap:.9rem;flex-wrap:wrap;justify-content:center;width:fit-content;justify-self:end;
  transition:box-shadow .5s var(--e)}
.yt-box::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(80% 160% at 8% 0%,rgba(214,180,106,.18),transparent 60%)}
.yt-box:hover{box-shadow:inset 0 0 0 1px var(--line-hi)}
.yt-head{position:relative;display:flex;align-items:center;gap:.65rem}
.yt-box .yt{width:30px;height:30px;color:var(--gold);flex:none;
  filter:drop-shadow(0 4px 12px rgba(214,180,106,.3));transition:transform .5s var(--e)}
.yt-box:hover .yt{transform:scale(1.08)}
.yt-txt{display:grid;gap:.1rem;text-align:left}
.yt-txt b{font-family:var(--display);font-weight:700;font-size:.78rem;text-transform:uppercase;
  letter-spacing:-.01em;white-space:nowrap}
.yt-txt span{font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
  white-space:nowrap}
.yt-acts{position:relative;display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
.yt-acts .btn{padding:.55rem 1rem;font-size:.5rem}
@media (max-width:62rem){
  .yt-box{justify-self:center;width:100%;max-width:21rem}
}

/* ── subscribe ───────────────────────────────────────────── */
.only-lg{display:none}
@media (min-width:62rem){.only-lg{display:inline-flex}}

.join{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
@media (min-width:62rem){.join{grid-template-columns:1.05fr .95fr}}
.join-txt{display:grid;gap:.9rem}
.join-txt h2{font-size:clamp(1.9rem,5.4vw,3.4rem)}
.join-txt p{color:var(--ash);max-width:46ch}
.perks{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.6rem}
.perks li{position:relative;padding-left:1.5rem;font-size:.88rem;color:var(--platinum)}
.perks li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:50%;
  background:var(--spectrum)}
@media (max-width:62rem){
  .join{justify-items:center}
  .join-txt{justify-items:center;text-align:center}
  .perks li{padding-left:0;text-align:center}
  .perks li::before{display:none}
}

.join-form{display:grid;gap:1.1rem;width:100%;max-width:30rem;justify-self:end;
  border-radius:16px;background:rgba(10,10,12,.8);box-shadow:inset 0 0 0 1px var(--line);
  padding:clamp(1.3rem,3vw,2rem)}
@media (max-width:62rem){.join-form{justify-self:center;text-align:center}
  .join-form label{justify-items:center}
  .join-form :is(input):not([type=checkbox]){text-align:center}
  .join-form button{justify-self:center}}
.join-form label{display:grid;gap:.5rem;font-size:.53rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ash);text-indent:.26em}
.join-form label small{font-size:.85em;opacity:.6;letter-spacing:.2em}
.join-form input{font-family:var(--ui);font-weight:300;font-size:1rem;color:var(--platinum);background:none;
  border:0;border-bottom:1px solid var(--line);padding:.65rem 0;width:100%;border-radius:0;
  transition:border-color .4s}
.join-form input::placeholder{color:rgba(230,240,233,.25)}
.join-form input:focus{border-bottom-color:var(--gold);outline:none}
.join-form button{justify-self:start;margin-top:.2rem}
.join-form .fine{font-size:.56rem;letter-spacing:.1em;color:var(--ash);line-height:1.6}
.ok{font-size:.84rem;color:var(--gold)}

/* ── the vault (inactive until the section's `hidden` is removed) ───────── */
.vault{display:grid;gap:clamp(1rem,2.2vw,1.5rem)}
@media (min-width:52rem){.vault{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.tier{position:relative;border-radius:16px;background:rgba(10,10,12,.8);box-shadow:inset 0 0 0 1px var(--line);
  padding:clamp(1.3rem,3vw,1.9rem);display:grid;gap:.6rem;align-content:start;text-align:center;
  justify-items:center;transition:box-shadow .5s var(--e)}
.tier:hover{box-shadow:inset 0 0 0 1px var(--line-hi)}
.tier.feature{box-shadow:inset 0 0 0 1px rgba(214,180,106,.4)}
.tier.feature::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;
  background:radial-gradient(90% 120% at 50% 0%,rgba(214,180,106,.16),transparent 64%)}
.tier h3{font-size:clamp(1.1rem,2.4vw,1.4rem)}
.tier .price{font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--gold);letter-spacing:-.02em}
.tier .price b{font-size:clamp(2rem,4.6vw,2.8rem);font-weight:800}
.tier .price span{font-family:var(--ui);font-weight:300;font-size:.8rem;color:var(--ash);letter-spacing:0}
.tier p{color:var(--ash);font-size:.86rem;max-width:30ch}
.tier .btn{margin-top:.5rem}