/* ============================================================
   FONTS — self-hosted so the page makes no third-party request.
   Both faces are variable, so one file covers every weight used.
   ============================================================ */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/inter.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('assets/fonts/space-grotesk.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Yeah Nah Yeah: one-page site
   Palette pulled from the band logo + album artwork.
   ============================================================ */

:root{
  --ink:        #0d1117;   /* page background */
  --ink-2:      #131a23;   /* raised panels */
  --slate:      #3e4e63;   /* logo slate blue */
  --slate-dim:  #26313f;
  --cream:      #ede6d6;   /* album paper */
  --cream-dim:  #b9b2a5;
  --gold:       #d3a73a;   /* logo sun */
  --red:        #d8383a;
  --orange:     #e8873b;
  --amber:      #f0a93f;
  --violet:     #7b6e9b;

  --text:       var(--cream);
  --text-dim:   var(--cream-dim);
  --rule:       rgba(237,230,214,.14);

  --wrap:       1120px;
  --gutter:     clamp(1.25rem, 5vw, 3rem);

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:5rem; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* height:auto is required, not cosmetic: the width/height attributes on each img
   act as presentational hints, so without it a CSS width:100% stretches the
   rendered box to the attribute height and the picture comes out distorted. */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#101010; padding:.75rem 1.25rem;
  font-weight:600; border-radius:0 0 4px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* ---------- shared type ---------- */

.eyebrow{
  font-family:var(--font-display);
  font-size:.75rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1rem;
}

.section__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.1rem,1.4rem + 3.2vw,3.6rem);
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0 0 1.25rem;
}
.section__title--sm{ font-size:clamp(1.7rem,1.25rem + 1.9vw,2.5rem); }

.section{ padding-block:clamp(4.5rem,10vw,8rem); position:relative; }

/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(13,17,23,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--rule);
}

.nav__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:1.1rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.nav__brand{
  font-family:var(--font-display); font-weight:700;
  font-size:1rem; letter-spacing:.02em;
  text-decoration:none; white-space:nowrap;
}

.nav__links{ display:flex; gap:2rem; }
.nav__links a{
  font-size:.8125rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--text-dim);
  position:relative; padding-block:.25rem;
  transition:color .2s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ transform:scaleX(1); }

.nav__toggle{
  display:none; width:2.75rem; height:2.75rem;
  background:none; border:0; cursor:pointer; padding:.6rem;
  flex-direction:column; justify-content:space-between;
}
.nav__toggle span{
  display:block; height:2px; width:100%; background:var(--cream);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(.5rem) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-.5rem) rotate(-45deg); }

.nav__mobile{
  display:none; flex-direction:column;
  background:rgba(13,17,23,.97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.nav__mobile a{
  padding:1rem var(--gutter);
  font-family:var(--font-display); font-size:.875rem;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; border-top:1px solid var(--rule);
}

@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
  .nav__mobile.is-open{ display:flex; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  min-height:100svh;
  /* type sits high, in the sky above their faces, rather than across them */
  display:flex; align-items:flex-start;
  overflow:hidden;
  isolation:isolate;
}

/* On wide screens the photo is a full-bleed backdrop and the text sits on it.
   The media box is taller than the hero for two reasons: it leaves room for the
   parallax drift, and a taller box crops less off a square photo. */
.hero__media{
  position:absolute; inset:0 0 auto 0;
  height:130%;
  z-index:-1;
  will-change:transform;
}

/* <picture> is inline by default, which breaks the img's percentage height */
.hero__media picture{ display:block; width:100%; height:100%; }

.hero__bg{
  width:100%; height:100%;
  /* biased upward so there is open sky behind the type */
  object-fit:cover; object-position:center 38%;
}

.hero__scrim{
  position:absolute; inset:0;
  background:
    /* dark where the words are, then off their faces, then down into the page */
    linear-gradient(180deg,
      rgba(13,17,23,.72) 0%,
      rgba(13,17,23,.48) 22%,
      rgba(13,17,23,.12) 46%,
      rgba(13,17,23,.10) 64%,
      rgba(13,17,23,.72) 88%,
      var(--ink) 100%),
    /* the type is left-aligned, so the left column carries the contrast and
       the faces on the right stay bright (measured for WCAG AA, not eyeballed) */
    linear-gradient(100deg,
      rgba(13,17,23,.78) 0%,
      rgba(13,17,23,.62) 22%,
      rgba(13,17,23,.24) 46%,
      transparent 70%);
}

.hero__content{
  position:relative;
  width:100%; max-width:var(--wrap);
  margin-inline:auto;
  padding:clamp(6rem,13vh,9rem) var(--gutter) 0;
}

/* On narrow screens a full-bleed crop would cut two of the four of them out of
   frame, so the photo becomes a block at its own aspect ratio and the text
   moves underneath it. */
@media (max-width:760px){
  .hero{
    display:block;
    min-height:0;
  }

  .hero__media{
    position:relative; inset:auto;
    height:auto;                      /* no parallax headroom needed here */
    transform:none !important;        /* overrides whatever the scroll handler set */
    z-index:auto;                     /* back into normal flow, not behind it */
    margin-bottom:-1px;               /* hides a sub-pixel seam under the fade */
  }

  .hero__media picture{ height:auto; }

  .hero__bg{
    height:auto;                      /* full frame, nothing cropped */
    object-fit:contain;
  }

  .hero__scrim{
    /* just a fade off the bottom of the photo into the page */
    top:auto; height:42%;
    background:linear-gradient(180deg, transparent 0%, rgba(13,17,23,.55) 45%, var(--ink) 100%);
  }

  .hero__content{
    padding-top:2.25rem;
    padding-bottom:3.75rem;
    background:var(--ink);
  }

  .hero__title{ text-shadow:none; }
}

.hero__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(3rem,1.2rem + 9vw,7.5rem);
  line-height:.92; letter-spacing:-.035em;
  margin:0 0 .5rem;
  /* the scrim is lighter now, so the type carries its own contrast */
  text-shadow:0 2px 12px rgba(13,17,23,.7), 0 4px 60px rgba(13,17,23,.6);
}
.hero__tagline{ text-shadow:0 2px 14px rgba(13,17,23,.85); }
.hero .eyebrow{ text-shadow:0 2px 12px rgba(13,17,23,.9); }

.hero__tagline{
  font-family:var(--font-display);
  font-size:clamp(1rem,.9rem + .6vw,1.375rem);
  font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream);           /* full cream: this sits over the photo, not a flat panel */
  margin:0 0 2.25rem;
}

/* over a photo the outline alone does not carry enough contrast */
.hero__cta .btn--ghost{
  background:rgba(13,17,23,.55);
  border-color:rgba(237,230,214,.6);
}
.hero__cta .btn--ghost:hover{ background:rgba(13,17,23,.75); border-color:var(--cream); }

.hero__cta{ display:flex; flex-wrap:wrap; gap:.875rem; }

/* sunset stripes lifted from the logo */
.stripes{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column;
}
.stripes span{ height:3px; }
.stripes span:nth-child(1){ background:var(--red); }
.stripes span:nth-child(2){ background:var(--orange); }
.stripes span:nth-child(3){ background:var(--amber); }
.stripes span:nth-child(4){ background:var(--cream-dim); }
.stripes span:nth-child(5){ background:var(--violet); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.75rem;
  font-family:var(--font-display); font-size:.8125rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border-radius:2px;
  border:1px solid transparent;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn--solid{ background:var(--gold); color:#12161c; }
.btn--solid:hover{ background:#e3ba52; transform:translateY(-2px); }
.btn--ghost{ border-color:rgba(237,230,214,.42); color:var(--cream); }
.btn--ghost:hover{ border-color:var(--cream); background:rgba(237,230,214,.08); transform:translateY(-2px); }

@media (prefers-reduced-motion:reduce){
  .btn:hover{ transform:none; }
}

/* ============================================================
   LISTEN
   ============================================================ */

.section--listen{ background:var(--ink); }

.section__lede{
  max-width:52ch;
  color:var(--text-dim);
  font-size:1.0625rem;
  margin:0 0 2.75rem;
}
.section__lede a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(211,167,58,.4); }
.section__lede a:hover{ border-bottom-color:var(--gold); }

.platforms{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  grid-template-columns:1fr;            /* 6 links: 1 / 2 / 3 columns, never a ragged row */
  background:var(--rule);
  border:1px solid var(--rule);
}
@media (min-width:520px){ .platforms{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:860px){ .platforms{ grid-template-columns:repeat(3,1fr); } }
.platforms a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--ink-2);
  padding:1.35rem 1.5rem;
  text-decoration:none;
  height:100%;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.platforms a:hover{ background:var(--slate-dim); }
.platforms__name{
  font-family:var(--font-display); font-weight:500;
  font-size:.9375rem; letter-spacing:.06em;
}
.platforms__go{ color:var(--gold); font-size:.9375rem; transition:transform .25s var(--ease); }
.platforms a:hover .platforms__go{ transform:translate(3px,-3px); }

/* ============================================================
   ALBUM
   ============================================================ */

.section--album{
  background:
    linear-gradient(180deg, var(--ink) 0%, #101822 40%, #101822 100%);
  border-top:1px solid var(--rule);
}

.album{
  display:grid; gap:clamp(2.5rem,6vw,4.5rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:860px){
  .album{ grid-template-columns:1fr; }
}

.album__art{ position:relative; }
.album__art img{
  width:100%; border-radius:3px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(237,230,214,.09);
}
@media (min-width:861px){
  .album__art{ position:sticky; top:6.5rem; }
}

.tracks{
  list-style:none; counter-reset:t;
  margin:0 0 2.25rem; padding:0;
  border-top:1px solid var(--rule);
}
.tracks li{
  counter-increment:t;
  display:flex; align-items:baseline; gap:1rem;
  padding:.85rem .25rem;
  border-bottom:1px solid var(--rule);
}
.tracks li::before{
  content:counter(t,decimal-leading-zero);
  font-family:var(--font-display); font-size:.75rem;
  color:var(--gold); letter-spacing:.08em;
  min-width:1.75rem;
}
.tracks__title{ flex:1; font-weight:500; }
.tracks__time{ color:var(--text-dim); font-size:.875rem; font-variant-numeric:tabular-nums; }

.credits{
  color:var(--text-dim);
  font-size:.9375rem; line-height:1.8;
  margin:0;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
}

/* ============================================================
   ABOUT
   ============================================================ */

.section--about{ background:#101822; border-top:1px solid var(--rule); }

.about{
  display:grid; gap:clamp(2.5rem,6vw,4.5rem);
  grid-template-columns:minmax(0,.55fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:860px){
  .about{ grid-template-columns:1fr; }
  .about__mark{ max-width:230px; }
}

.about__mark img{
  width:100%;
  border-radius:50%;             /* logo art is a circle, crops the black corners */
  box-shadow:0 0 0 1px rgba(237,230,214,.12), 0 20px 50px -18px rgba(0,0,0,.8);
}

.prose p{ margin:0 0 1.35rem; max-width:62ch; color:#ddd6c8; }
.prose p:last-child{ margin-bottom:0; }
.prose em{ color:var(--cream); font-style:italic; }

.facts{
  margin:2.75rem 0 0; padding:0;
  display:grid; gap:1px;
  grid-template-columns:repeat(2,1fr);   /* 4 facts: 2×2, then a single row when wide */
  background:var(--rule);
  border:1px solid var(--rule);
}
@media (min-width:1000px){ .facts{ grid-template-columns:repeat(4,1fr); } }
.facts > div{ background:#131c26; padding:1.1rem 1.25rem; }
.facts dt{
  font-family:var(--font-display); font-size:.6875rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.4rem;
}
.facts dd{ margin:0; font-size:.9375rem; font-weight:500; }
.facts dd a{ text-decoration:none; border-bottom:1px solid var(--rule); }
.facts dd a:hover{ border-bottom-color:var(--cream); }

/* ============================================================
   SHOWS
   ============================================================ */

.section--shows{ background:#101822; border-top:1px solid var(--rule); }

.shows__group + .shows__group{ margin-top:3.5rem; }

.shows__heading{
  font-family:var(--font-display);
  font-size:.75rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-dim);
  margin:0 0 1.25rem;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--rule);
}

.shows--empty{
  margin:0; padding:1.75rem 0 .5rem;
  color:var(--text-dim);
}
.shows--empty a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(211,167,58,.4); }
.shows--empty a:hover{ border-bottom-color:var(--gold); }

.shows{ list-style:none; margin:0; padding:0; }

.show{
  display:grid;
  grid-template-columns:4.25rem minmax(0,1fr) auto;
  align-items:center;
  gap:1.25rem;
  padding:1.1rem .25rem;
  border-bottom:1px solid var(--rule);
}

.show__date{
  display:flex; flex-direction:column; align-items:center;
  padding:.45rem .25rem;
  border:1px solid var(--rule);
  border-radius:3px;
  background:rgba(62,78,99,.18);
}
.show__mon{
  font-family:var(--font-display); font-size:.625rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.show__day{
  font-family:var(--font-display); font-size:1.375rem; font-weight:700;
  line-height:1.1; font-variant-numeric:tabular-nums;
}

.show__body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.show__venue{ font-family:var(--font-display); font-weight:700; font-size:1.0625rem; }
.show__bill{ font-size:.9375rem; color:#cfc8ba; }
.show__where{ font-size:.8125rem; color:rgba(237,230,214,.58); }

.show__tix{
  justify-self:end;
  font-family:var(--font-display); font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  padding:.6rem 1.1rem; border-radius:2px;
  background:var(--gold); color:#12161c;
  transition:background .25s var(--ease);
}
.show__tix:hover{ background:#e3ba52; }

/* past dates read quieter than upcoming ones */
.shows--past .show{ opacity:.82; }
.shows--past .show__mon{ color:var(--cream-dim); }

@media (max-width:600px){
  .show{ grid-template-columns:3.75rem minmax(0,1fr); gap:1rem; align-items:start; }
  .show__tix{ grid-column:2; justify-self:start; margin-top:.6rem; }
}

/* ============================================================
   BOOKING
   ============================================================ */

.section--booking{
  background:linear-gradient(180deg,#101822 0%, var(--slate-dim) 100%);
  border-top:1px solid var(--rule);
}
.booking{ max-width:760px; margin-inline:auto; }

.booking__lede{
  max-width:56ch; color:#d6cfc1;
  font-size:1.0625rem;
  margin:0 0 2.75rem;
}

/* ---------- form ---------- */

.form__grid{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:600px){
  .form__grid{ grid-template-columns:1fr; }
}

.field{ margin:0; display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.field--wide{ grid-column:1 / -1; }

.field label{
  font-family:var(--font-display);
  font-size:.6875rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim);
}
.req{ color:var(--gold); }

.field input,
.field textarea{
  font-family:var(--font-body); font-size:1rem;
  color:var(--cream);
  background:rgba(13,17,23,.55);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:.8rem .9rem;
  width:100%;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:6rem; }

.field input::placeholder,
.field textarea::placeholder{ color:rgba(237,230,214,.55); }

.field input:hover,
.field textarea:hover{ border-color:rgba(237,230,214,.28); }

.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(13,17,23,.75);
}

/* date pickers render dark-on-dark in Chrome without this */
.field input[type="date"]{ color-scheme:dark; }

.field__error{
  font-size:.8125rem; color:#f08e8f;
  min-height:0;
}
.field.is-invalid input,
.field.is-invalid textarea{ border-color:var(--red); }

/* honeypot */
.hp{
  position:absolute; left:-9999px;
  width:1px; height:1px; overflow:hidden;
}

.form__foot{
  display:flex; flex-wrap:wrap; gap:.875rem;
  margin-top:2rem;
}
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

.form__status{
  margin:1.25rem 0 0;
  font-size:.9375rem;
  min-height:1.4em;
}
.form__status.is-ok{ color:#8fd39a; }
.form__status.is-err{ color:#f08e8f; }
.form__status a{ color:inherit; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer{
  background:var(--ink);
  border-top:1px solid var(--rule);
  padding-block:clamp(3rem,6vw,4.5rem);
}
.footer__inner{ display:flex; flex-direction:column; gap:2rem; align-items:center; text-align:center; }

.footer__name{
  font-family:var(--font-display); font-weight:700;
  font-size:1.5rem; letter-spacing:-.01em; margin:0 0 .35rem;
}
.footer__meta{
  margin:0; font-size:.8125rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-dim);
}

.footer__links{ display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; justify-content:center; }
.footer__links a{
  font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color:var(--text-dim);
  padding-block:.35rem;            /* WCAG 2.2 SC 2.5.8: 24px minimum target */
  transition:color .2s var(--ease);
}
.footer__links a:hover{ color:var(--gold); }

.footer__legal{ margin:0; font-size:.8125rem; color:rgba(237,230,214,.6); }
.footer__legal a{ color:inherit; text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(237,230,214,.45); }
.footer__legal a:hover{ color:var(--text-dim); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   DOCUMENT PAGES (privacy, terms, accessibility statement)
   ============================================================ */

.doc{
  padding-block:clamp(7rem,14vh,10rem) clamp(4rem,9vw,7rem);
}
.doc__inner{ max-width:44rem; margin-inline:auto; padding-inline:var(--gutter); }

.doc__back{
  display:inline-block; margin-bottom:2.5rem;
  font-family:var(--font-display); font-size:.75rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); text-decoration:none;
}
.doc__back:hover{ text-decoration:underline; text-underline-offset:4px; }

.doc h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2rem,1.4rem + 2.4vw,3rem);
  line-height:1.08; letter-spacing:-.02em;
  margin:0 0 .75rem;
}

.doc__meta{
  color:var(--text-dim); font-size:.875rem;
  margin:0 0 2.5rem; padding-bottom:2rem;
  border-bottom:1px solid var(--rule);
}

.doc h2{
  font-family:var(--font-display); font-weight:700;
  font-size:1.25rem; letter-spacing:-.01em;
  margin:2.75rem 0 .85rem;
}

.doc p, .doc li{ color:#ddd6c8; }
.doc p{ margin:0 0 1.15rem; }
.doc ul{ margin:0 0 1.15rem; padding-left:1.25rem; }
.doc li{ margin-bottom:.5rem; }
.doc strong{ color:var(--cream); }

.doc a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.doc a:hover{ color:#e3ba52; }

.doc__note{
  background:var(--ink-2);
  border:1px solid var(--rule);
  border-left:3px solid var(--gold);
  border-radius:3px;
  padding:1.15rem 1.35rem;
  margin:0 0 2.5rem;
}
.doc__note p{ margin:0; font-size:.9375rem; }

.footer__legal-links{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:center; }
.footer__legal-links a{
  font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); text-decoration:none;
  padding-block:.35rem;            /* WCAG 2.2 SC 2.5.8: 24px minimum target */
  transition:color .2s var(--ease);
}
.footer__legal-links a:hover{ color:var(--gold); text-decoration:underline; text-underline-offset:4px; }

/* ============================================================
   LINK IN BIO  (/links)
   Built mobile-first: nearly all of this page's traffic arrives
   from a phone, tapped out of an Instagram profile.
   ============================================================ */

.links-page{
  background:
    radial-gradient(90% 55% at 50% 0%, #1b2534 0%, transparent 60%),
    var(--ink);
  min-height:100svh;
}

.links{
  width:100%; max-width:30rem;
  margin-inline:auto;
  padding:clamp(2.5rem,7vw,4rem) var(--gutter) clamp(3rem,8vw,4.5rem);
  display:flex; flex-direction:column; gap:2rem;
}

/* ---------- header ---------- */

.links__head{ text-align:center; }

.links__mark{
  width:clamp(5rem,20vw,6.5rem);
  margin:0 auto .9rem;
  border-radius:50%;                 /* the logo art is a circle inside a square */
  box-shadow:0 0 0 1px rgba(237,230,214,.14), 0 16px 40px -14px rgba(0,0,0,.8);
}

.links__name{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.6rem,1.2rem + 1.8vw,2.1rem);
  letter-spacing:-.02em; line-height:1.1;
  margin:0 0 .4rem;
}

.links__meta{
  margin:0;
  font-family:var(--font-display);
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim);
}

/* ---------- featured record ---------- */

.feature{
  display:flex; align-items:center; gap:1rem;
  padding:.85rem;
  text-decoration:none;
  background:var(--ink-2);
  border:1px solid var(--rule);
  border-radius:4px;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.feature:hover{ background:#18222e; border-color:rgba(237,230,214,.3); transform:translateY(-2px); }

.feature__art{
  width:4.5rem; flex:none;
  border-radius:3px;
}

.feature__body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }

.feature__eyebrow{
  font-family:var(--font-display); font-size:.625rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.feature__title{
  font-family:var(--font-display); font-weight:700;
  font-size:1.0625rem; line-height:1.2;
}
.feature__note{ font-size:.8125rem; color:var(--text-dim); }

/* ---------- link groups ---------- */

.links__group{ display:flex; flex-direction:column; gap:.5rem; }

.links__label{
  font-family:var(--font-display);
  font-size:.625rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-dim);
  margin:0 0 .25rem;
}

.lnk{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:3.25rem;                /* comfortable thumb target */
  padding:.9rem 1.1rem;
  text-decoration:none;
  background:var(--ink-2);
  border:1px solid var(--rule);
  border-radius:4px;
  transition:background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.lnk:hover{ background:var(--slate-dim); border-color:rgba(237,230,214,.32); transform:translateY(-2px); }

.lnk__name{
  font-family:var(--font-display); font-weight:500;
  font-size:.9375rem; letter-spacing:.04em;
}
.lnk__go{ color:var(--gold); font-size:.9375rem; transition:transform .22s var(--ease); }
.lnk:hover .lnk__go{ transform:translate(3px,-3px); }
.lnk--solid .lnk__go{ color:#12161c; }
.lnk:hover .lnk--solid .lnk__go{ transform:translateX(3px); }

.lnk--solid{
  background:var(--gold);
  border-color:var(--gold);
  color:#12161c;
}
.lnk--solid .lnk__name{ font-weight:700; }
.lnk--solid:hover{ background:#e3ba52; border-color:#e3ba52; }

/* ---------- footer ---------- */

.links__foot{
  text-align:center;
  padding-top:.5rem;
}
.links__foot p{
  margin:0;
  font-size:.8125rem;
  color:rgba(237,230,214,.6);
}
.links__foot a{
  color:inherit;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(237,230,214,.4);
}
.links__foot a:hover{ color:var(--cream); }

@media (prefers-reduced-motion:reduce){
  .lnk:hover, .feature:hover{ transform:none; }
  .lnk:hover .lnk__go{ transform:none; }
}

.links__legal{ margin-top:.6rem !important; }
.links__legal a{ display:inline-block; padding-block:.3rem; }