/* ==========================================================================
   LOCUORIO — locuoriorecords.com
   Design system: gold on deep night, brand red accents.
   ========================================================================== */

/* ---------- Fonts (self-hosted, GDPR-safe, no Google request) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,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:500;font-display:swap;
  src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,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:600;font-display:swap;
  src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,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:700;font-display:swap;
  src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/playfair-display-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Tokens ---------- */
:root{
  color-scheme: dark;

  --ink:        #0B0A09;
  --ink-2:      #121010;
  --surface:    #171413;
  --surface-2:  #1F1B19;
  --line:       rgba(214,166,58,.16);
  --line-soft:  rgba(255,255,255,.08);

  --gold:       #D6A63A;
  --gold-lite:  #EFCE7E;
  --gold-deep:  #A87C1E;
  --red:        #85010F;
  --red-lite:   #B3121F;

  --text:       #F3EEE6;
  --text-2:     #BDB3A6;
  --text-3:     #948B7E;

  --radius:     14px;
  --radius-lg:  22px;
  --shadow:     0 18px 50px rgba(0,0,0,.55);
  --shadow-sm:  0 6px 22px rgba(0,0,0,.4);

  --wrap:       1200px;
  --gutter:     clamp(20px, 5vw, 56px);
  --sect:       clamp(64px, 9vw, 130px);

  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg,iframe{max-width:100%; display:block}
img{height:auto}
a{color:var(--gold); text-decoration:none; transition:color .2s ease}
a:hover{color:var(--gold-lite)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}
ul{margin:0; padding:0}

h1,h2,h3,h4{font-family:var(--serif); font-weight:700; line-height:1.1; margin:0; letter-spacing:-.015em}
h1{font-size:clamp(2.5rem, 6.4vw, 4.6rem)}
h2{font-size:clamp(1.95rem, 4.1vw, 3rem)}
h3{font-size:clamp(1.25rem, 2.1vw, 1.6rem)}
h4{font-size:1.06rem; font-family:var(--sans); font-weight:600; letter-spacing:0}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{color:#fff; font-weight:600}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--sect); position:relative}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.section--alt{background:
    radial-gradient(1100px 460px at 82% -8%, rgba(133,1,15,.28), transparent 62%),
    linear-gradient(180deg, var(--ink-2), var(--ink))}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#160f02;padding:12px 18px;z-index:999;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}

.eyebrow{
  font-size:.77rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px; display:flex; align-items:center; gap:13px;
}
.eyebrow::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); max-width:160px}
.eyebrow--center{justify-content:center}
.eyebrow--center::after,.eyebrow--center::before{content:"";flex:0 0 46px;height:1px;background:var(--line);max-width:46px}

.lede{font-size:clamp(1.04rem,1.6vw,1.2rem); color:var(--text-2); max-width:62ch}
.muted{color:var(--text-2)}
.small{font-size:.9rem; color:var(--text-3)}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.stack>*+*{margin-top:1.1em}
.mt-l{margin-top:clamp(32px,4vw,56px)}
.mt-m{margin-top:26px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:100px; font-weight:600; font-size:.955rem;
  letter-spacing:.012em; border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
  text-align:center; line-height:1.2;
}
.btn svg{width:19px;height:19px;flex:none;fill:currentColor}
.btn--primary{background:linear-gradient(135deg,var(--gold-lite),var(--gold) 46%,var(--gold-deep)); color:#1A1204; box-shadow:0 10px 30px rgba(214,166,58,.24)}
.btn--primary:hover{color:#1A1204; transform:translateY(-2px); box-shadow:0 16px 40px rgba(214,166,58,.34)}
.btn--spotify{background:#1DB954; color:#06120a; box-shadow:0 10px 30px rgba(29,185,84,.24)}
.btn--spotify:hover{background:#25DC68; color:#06120a; transform:translateY(-2px)}
.btn--yt{background:#E60000; color:#fff; box-shadow:0 10px 30px rgba(230,0,0,.26)}
.btn--yt:hover{background:#D40000; color:#fff; transform:translateY(-2px); box-shadow:0 16px 40px rgba(230,0,0,.34)}
.btn--ghost{border-color:var(--line); background:rgba(255,255,255,.035); color:var(--text)}
.btn--ghost:hover{border-color:var(--gold); color:var(--gold-lite); background:rgba(214,166,58,.08); transform:translateY(-2px)}
.btn--sm{padding:11px 20px; font-size:.875rem}
.btn--block{width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:14px}
.btn-row--center{justify-content:center}

/* ---------- Header ---------- */
.hdr{
  position:sticky; top:0; z-index:60; background:rgba(11,10,9,.72);
  backdrop-filter:saturate(150%) blur(16px); -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.055); transition:background .3s ease, border-color .3s ease;
}
.hdr__in{display:flex; align-items:center; gap:22px; min-height:74px}
.brand{display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:.13em;
  font-size:.86rem; text-transform:uppercase; color:var(--text); flex:none}
.brand:hover{color:#fff}
.brand img{width:36px; height:36px}
.nav{display:flex; align-items:center; gap:5px; margin-left:auto}
.nav a{
  color:var(--text-2); font-size:.905rem; font-weight:500; padding:9px 13px; border-radius:8px;
  transition:color .18s ease, background .18s ease; white-space:nowrap;
}
.nav a:hover{color:var(--text); background:rgba(255,255,255,.05)}
.nav a[aria-current="page"]{color:var(--gold)}
.hdr__cta{display:flex; align-items:center; gap:10px; flex:none}

/* language switch */
.lang{display:flex; align-items:center; gap:2px; border:1px solid var(--line-soft); border-radius:100px; padding:3px; background:rgba(255,255,255,.03)}
.lang a{font-size:.76rem; font-weight:600; letter-spacing:.06em; padding:5px 11px; border-radius:100px; color:var(--text-3)}
.lang a:hover{color:var(--text)}
.lang a[aria-current="true"]{background:var(--gold); color:#1A1204}

/* mobile nav */
.burger{display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-soft); border-radius:10px; color:var(--text); cursor:pointer; flex:none}
.burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
@media (max-width:960px){
  .burger{display:flex}
  .nav{
    position:fixed; inset:74px 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:#0C0A09; padding:14px var(--gutter) 30px;
    border-bottom:1px solid var(--line); margin:0; box-shadow:0 24px 60px rgba(0,0,0,.7);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
    max-height:calc(100dvh - 74px); overflow:auto;
  }
  .nav[data-open="true"]{opacity:1; transform:none; pointer-events:auto}
  .nav a{padding:14px 6px; font-size:1.02rem; border-bottom:1px solid rgba(255,255,255,.05)}
  .hdr__cta .btn{display:none}
}
@media (max-width:380px){ .brand span{display:none} }

/* ---------- Hero ---------- */
.hero{position:relative; min-height:min(92vh,860px); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate}
.hero__media{position:absolute; inset:0; z-index:-2}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:58% 30%}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(11,10,9,.78) 0%, rgba(11,10,9,.30) 34%, rgba(11,10,9,.86) 76%, var(--ink) 100%),
    radial-gradient(900px 620px at 12% 82%, rgba(133,1,15,.42), transparent 66%);
}
.hero__in{padding-block:clamp(72px,11vw,140px) clamp(52px,7vw,92px); width:100%}
.hero h1{max-width:16ch}
.hero h1 em{font-style:normal; color:var(--gold); display:block}
.hero .lede{margin-top:22px; max-width:56ch; font-size:clamp(1.05rem,1.75vw,1.28rem); color:#DCD4C7}
.hero .btn-row{margin-top:34px}
.hero__stats{display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,54px); margin-top:clamp(38px,5vw,58px);
  padding-top:28px; border-top:1px solid var(--line-soft)}
.hero__stats div{min-width:96px}
.hero__stats b{display:block; font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.1rem); color:var(--gold); line-height:1.1}
.hero__stats span{font-size:.775rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3)}

/* page hero (inner pages) */
.phero{padding-block:clamp(58px,8vw,104px) clamp(34px,4vw,56px); position:relative; overflow:hidden}
.phero::before{content:""; position:absolute; inset:0;
  background:radial-gradient(760px 380px at 8% 0%, rgba(133,1,15,.34), transparent 62%); pointer-events:none}
.phero>*{position:relative}
.phero h1{max-width:19ch}
.phero .lede{margin-top:20px}

/* breadcrumbs */
.crumbs{font-size:.8rem; color:var(--text-3); margin-bottom:18px; display:flex; gap:9px; flex-wrap:wrap; align-items:center}
.crumbs a{color:var(--text-3)} .crumbs a:hover{color:var(--gold)}
.crumbs span[aria-hidden]{opacity:.45}

/* ---------- Grid & cards ---------- */
.grid{display:grid; gap:clamp(18px,2.4vw,30px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); align-items:start}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(285px,100%),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr))}

.card{
  background:linear-gradient(165deg, var(--surface-2), var(--surface));
  border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:clamp(24px,3vw,34px);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease; height:100%;
  display:flex; flex-direction:column;
}
.card:hover{border-color:var(--line); transform:translateY(-3px); box-shadow:var(--shadow-sm)}
.card h3{margin-bottom:11px}
.card p{color:var(--text-2); font-size:.965rem}
.card__ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(214,166,58,.11); border:1px solid var(--line); color:var(--gold)}
.card__ico svg{width:22px;height:22px}
.card__foot{margin-top:auto; padding-top:20px}

/* ---------- Playlist cards ---------- */
.pl{
  background:linear-gradient(170deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  position:relative;
}
.pl:hover{border-color:var(--line); transform:translateY(-4px); box-shadow:var(--shadow)}
.pl__art{position:relative; aspect-ratio:1; overflow:hidden; background:#000}
.pl__art img{width:100%;height:100%;object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pl:hover .pl__art img{transform:scale(1.045)}
.pl__rank{position:absolute; top:14px; left:14px; z-index:2; width:34px;height:34px; border-radius:50%;
  display:grid;place-items:center; background:rgba(11,10,9,.74); backdrop-filter:blur(8px);
  border:1px solid var(--line); color:var(--gold); font-size:.83rem; font-weight:700; font-family:var(--serif)}
.pl__body{padding:22px clamp(18px,2vw,24px) 24px; display:flex; flex-direction:column; flex:1; gap:11px}
.pl__body h3{font-size:1.2rem}
.pl__meta{display:flex; flex-wrap:wrap; gap:8px; font-size:.8rem; color:var(--text-3);
  letter-spacing:.06em; text-transform:uppercase}
.pl__meta span{background:rgba(255,255,255,.045); border:1px solid var(--line-soft); border-radius:100px; padding:4px 11px}
.pl__body p{font-size:.93rem; color:var(--text-2); flex:1}
.pl__body .btn{margin-top:4px}

/* ---------- Release grid ---------- */
.rel{display:block; border-radius:var(--radius); overflow:hidden; background:var(--surface); position:relative;
  border:1px solid var(--line-soft); color:inherit;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease}
.rel:hover{transform:translateY(-4px); border-color:var(--line); box-shadow:var(--shadow-sm); color:inherit}
.rel__art{aspect-ratio:1; background:linear-gradient(150deg,#241E1A,#151211); position:relative; overflow:hidden;
  display:grid; place-items:center}
.rel__art img{width:100%;height:100%;object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.rel:hover .rel__art img{transform:scale(1.05)}
.rel__art::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35));
  opacity:0; transition:opacity .25s ease}
.rel:hover .rel__art::after{opacity:1}
.rel__play{position:absolute; right:12px; bottom:12px; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:#1DB954; box-shadow:0 8px 22px rgba(0,0,0,.5);
  opacity:0; transform:translateY(10px) scale(.9); transition:opacity .25s ease, transform .25s cubic-bezier(.2,.8,.3,1)}
.rel__play::before{content:""; width:0;height:0; margin-left:3px;
  border-left:11px solid #06120a; border-top:7px solid transparent; border-bottom:7px solid transparent}
.rel:hover .rel__play, .rel:focus-visible .rel__play{opacity:1; transform:none}
.rel__b{padding:15px 16px 18px}
.rel__b strong{display:block; font-size:.955rem; color:var(--text); font-weight:600; line-height:1.35}
.rel__b span{font-size:.795rem; color:var(--text-3)}
.rel:hover .rel__b strong{color:var(--gold-lite)}

/* ---------- Spotify embeds ---------- */
.embed{
  position:relative; border-radius:var(--radius); overflow:hidden; background:var(--surface);
  border:1px solid var(--line-soft); box-shadow:var(--shadow-sm);
}
.embed iframe{border:0; display:block; width:100%}
.embed--tall iframe{height:420px}
.embed--compact iframe{height:152px}
.embed--artist iframe{height:352px}
/* reserve the exact iframe height so the player never shifts the layout while it loads */
.embed{min-height:var(--embed-h,352px)}
.embed iframe{border-radius:var(--radius)}

/* ---------- Follow / conversion band ---------- */
.band{
  border-radius:var(--radius-lg); padding:clamp(32px,4.4vw,58px);
  background:
    radial-gradient(700px 320px at 88% 10%, rgba(214,166,58,.16), transparent 62%),
    linear-gradient(140deg, var(--red) -10%, #380209 46%, #14100E 100%);
  border:1px solid rgba(214,166,58,.24); position:relative; overflow:hidden;
}
.band h2{max-width:20ch}
.band p{color:#E4DACC; max-width:56ch}
.band .btn-row{margin-top:28px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-weight:600; font-size:1.03rem; color:var(--text); transition:color .2s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:1.8px solid var(--gold); border-bottom:1.8px solid var(--gold);
  transform:translateY(-65%) rotate(45deg); transition:transform .25s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details>div{padding:0 8px 26px 0; color:var(--text-2); max-width:76ch}

/* ---------- Tag pills / keyword clouds ---------- */
.tags{display:flex; flex-wrap:wrap; gap:9px; list-style:none}
.tags li{font-size:.83rem; color:var(--text-2); border:1px solid var(--line-soft);
  background:rgba(255,255,255,.03); border-radius:100px; padding:7px 15px}
.tags li a{color:inherit}
.tags li:hover{border-color:var(--line); color:var(--text)}

/* ---------- Split feature ---------- */
.split{display:grid; gap:clamp(30px,5vw,68px); align-items:center; grid-template-columns:1fr}
@media (min-width:900px){ .split{grid-template-columns:1.02fr .98fr} .split--rev>*:first-child{order:2} }
.split figure{margin:0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-soft); box-shadow:var(--shadow)}
.split figure img{width:100%}

/* ---------- List with gold bullets ---------- */
.ticks{list-style:none; display:grid; gap:13px}
.ticks li{position:relative; padding-left:32px; color:var(--text-2)}
.ticks li::before{content:""; position:absolute; left:4px; top:.62em; width:9px;height:9px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 4px rgba(214,166,58,.13)}

/* ---------- Steps ---------- */
.steps{counter-reset:s; list-style:none; display:grid; gap:20px}
.steps li{counter-increment:s; position:relative; padding-left:60px; color:var(--text-2)}
.steps li::before{content:counter(s); position:absolute; left:0; top:-2px; width:40px;height:40px;
  border-radius:50%; display:grid;place-items:center; font-family:var(--serif); font-weight:700; color:var(--gold);
  background:rgba(214,166,58,.09); border:1px solid var(--line)}
.steps li b{display:block; color:var(--text); font-weight:600; margin-bottom:2px}

/* ---------- Form ---------- */
.form{display:grid; gap:18px; max-width:620px}
.field{display:grid; gap:7px}
.field label{font-size:.83rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2)}
.field input,.field select,.field textarea{
  width:100%; background:rgba(255,255,255,.035); border:1px solid var(--line-soft); border-radius:11px;
  padding:14px 16px; color:var(--text); font:inherit; font-size:.98rem; transition:border-color .2s ease, background .2s ease;
}
.field textarea{min-height:150px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold); background:rgba(214,166,58,.05); outline:none}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 21px) calc(1.35em),calc(100% - 16px) calc(1.35em); background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.field select option{background:#171413; color:var(--text)}
.form .consent{display:flex; gap:11px; align-items:flex-start; font-size:.86rem; color:var(--text-3)}
.form .consent input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--gold)}
.hp{position:absolute!important; left:-9999px!important; opacity:0; height:0; width:0}
.form-note{margin-top:14px; padding:13px 16px; border-radius:11px; font-size:.92rem;
  background:rgba(230,0,0,.12); border:1px solid rgba(230,0,0,.34); color:#FFD9D9}

/* ---------- Social row ---------- */
.social{display:flex; gap:12px; flex-wrap:wrap; list-style:none}
.social a{
  width:46px;height:46px;border-radius:13px; display:grid;place-items:center;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.035); color:var(--text-2);
  transition:all .22s ease;
}
.social a:hover{color:var(--gold); border-color:var(--gold); background:rgba(214,166,58,.09); transform:translateY(-2px)}
.social svg{width:20px;height:20px;fill:currentColor; flex:none}

/* named variant: icon + platform name, so the link says what it is */
.social--named{gap:10px}
.social--named a{
  width:auto; height:auto; min-height:46px; padding:11px 18px 11px 15px;
  display:inline-flex; align-items:center; gap:11px; border-radius:100px;
  font-size:.925rem; font-weight:500; letter-spacing:.005em; white-space:nowrap;
}
.social--named a span{line-height:1}
.social--named a:hover span{color:var(--gold-lite)}

/* ---------- Sticky follow bar ---------- */
.followbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(12,10,9,.90); backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-top:1px solid rgba(214,166,58,.26); box-shadow:0 -12px 44px rgba(0,0,0,.5);
  transform:translateY(110%); transition:transform .42s cubic-bezier(.2,.8,.25,1); padding:12px 0 max(12px, env(safe-area-inset-bottom));
}
.followbar[data-show="true"]{transform:none}
.followbar__in{display:flex; align-items:center; gap:clamp(12px,2.2vw,26px)}
.followbar img{width:38px;height:38px;flex:none}
.followbar__txt{flex:1; min-width:0}
.followbar__txt b{display:block; font-size:.955rem; font-weight:600; color:var(--text); line-height:1.3}
.followbar__txt span{display:block; font-size:.815rem; color:var(--text-3); line-height:1.45}
.followbar__txt a{text-decoration:underline; text-underline-offset:2px}
.followbar .btn{flex:none}
.followbar__x{
  width:34px;height:34px;flex:none;border-radius:50%; border:1px solid var(--line-soft); background:none;
  color:var(--text-3); cursor:pointer; font-size:19px; line-height:1; display:grid;place-items:center; transition:all .2s ease;
}
.followbar__x:hover{color:var(--text); border-color:var(--text-3)}
@media (max-width:1040px){ .followbar__yt span{display:none} .followbar__yt{padding-inline:14px} }
@media (max-width:820px){ .followbar__yt{display:none} }
@media (max-width:720px){
  .followbar img{display:none}
  .followbar__txt span{display:none}
  .followbar__txt b{font-size:.9rem}
  .followbar .btn{padding:12px 18px; font-size:.875rem}
}
@media (max-width:430px){
  .followbar__txt{display:none}
  .followbar .btn--spotify{flex:1}
}
body{padding-bottom:0}

/* ---------- Footer ---------- */
.ftr{background:linear-gradient(180deg,var(--ink),#080707); border-top:1px solid var(--line-soft);
  padding-block:clamp(52px,6vw,78px) 34px; margin-bottom:86px}
.ftr__grid{display:grid; gap:clamp(30px,4vw,50px); grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ftr h2{color:var(--gold); font-family:var(--sans); font-size:.76rem; letter-spacing:.17em;
  text-transform:uppercase; margin-bottom:16px; font-weight:600; line-height:1.3}
.ftr ul{list-style:none; display:grid; gap:10px}
.ftr ul a{color:var(--text-2); font-size:.925rem}
.ftr ul a:hover{color:var(--gold)}
.ftr__brand p{color:var(--text-3); font-size:.9rem; max-width:34ch; margin-top:14px}
.ftr__bot{margin-top:clamp(38px,5vw,58px); padding-top:26px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between; align-items:center;
  color:var(--text-3); font-size:.845rem}
.ftr__bot nav{display:flex; gap:20px; flex-wrap:wrap}
.ftr__bot a{color:var(--text-3)} .ftr__bot a:hover{color:var(--gold)}

/* ---------- Reveal on scroll ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- Utility ---------- */
.hr{height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); border:0; margin-block:clamp(40px,5vw,64px)}
.badge{display:inline-flex;align-items:center;gap:7px;font-size:.755rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);background:rgba(214,166,58,.09);border:1px solid var(--line);
  border-radius:100px;padding:6px 14px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.prose h2{margin-top:1.9em} .prose h3{margin-top:1.5em; margin-bottom:.5em}
.prose h2:first-child{margin-top:0}
.prose{max-width:74ch; color:var(--text-2)}
.prose ul{margin:0 0 1.1em; padding-left:1.3em; display:grid; gap:.5em}
.prose li{list-style:disc}


/* ---------- Touch targets (WCAG 2.5.5: min 44x44 on coarse pointers) ---------- */
@media (pointer:coarse){
  .lang{padding:2px}
  .lang a{min-height:44px; display:grid; place-items:center; padding:0 16px}
  .btn--sm{padding:14px 22px}
  .followbar__x{width:44px; height:44px}
  .nav a{min-height:44px; display:flex; align-items:center}
  .ftr ul a{display:inline-block; padding-block:6px}
  .crumbs a{padding-block:6px}
  .faq summary{padding-block:24px}
}