/* ===== Famous Davis — dark street style, green-forward =====
   Palette B. The primary accent is the forest green lifted straight off the FD
   logo; coral is the warm counterweight, sampled from Jeremy's artwork. The
   -rgb triplets exist so rgba() shadows and washes derive from the same values
   instead of hardcoding the hue — recolouring the site means editing only the
   six lines below. Both accents clear WCAG AA on --bg as text. */
:root {
  --bg: #0b0d0a;
  --bg-alt: #0f1310;
  --panel: #141a13;
  --accent: #3c9632;          /* forest green — the logo's own green */
  --accent-rgb: 60,150,50;
  --accent-bright: #8fbf5a;
  --accent-2: #da715d;        /* coral — warm counterweight */
  --accent-2-rgb: 218,113,93;
  --text: #efe9dc;
  --text-dim: #c2c8bd;
  /* Single colour for all big block lettering (hero + section + block titles).
     Swap this one value to recolour every display heading at once. */
  --display: #efe9dc;
  --display-shadow: rgba(var(--accent-rgb), 0.32);
  /* Concrete texture for the big display letters, painted via background-clip.
     Two layers at different scales read as weathered stone rather than uniform
     grain: --concrete-grain is fine speckle; --concrete-stain is coarser,
     uneven mid-scale patches (turbulence) for the variation between marks. */
  --concrete-grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='f'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20seed='3'%20stitchTiles='stitch'%20result='n'/%3E%3CfeColorMatrix%20in='n'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.55%200.45%200%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='gamma'%20amplitude='1'%20exponent='2.0'%20offset='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='200'%20height='200'%20filter='url%28%23f%29'%20opacity='0.4'/%3E%3C/svg%3E");
  --concrete-stain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='340'%20height='340'%3E%3Cfilter%20id='f'%3E%3CfeTurbulence%20type='turbulence'%20baseFrequency='0.06'%20numOctaves='3'%20seed='11'%20stitchTiles='stitch'%20result='n'/%3E%3CfeColorMatrix%20in='n'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.55%200.45%200%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='gamma'%20amplitude='1'%20exponent='2.6'%20offset='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='340'%20height='340'%20filter='url%28%23f%29'%20opacity='0.5'/%3E%3C/svg%3E");
  /* Torn-paper mask + worn grain for the stickers, so they read as ripped,
     gig-worn scraps rather than clean die-cuts. */
  --torn-r1: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='t'%20x='-15%25'%20y='-15%25'%20width='130%25'%20height='130%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.045'%20numOctaves='4'%20seed='11'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='10'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3Crect%20x='16'%20y='16'%20width='208'%20height='208'%20rx='5'%20fill='%23fff'%20filter='url%28%23t%29'/%3E%3C/svg%3E");
  --torn-r2: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='t'%20x='-15%25'%20y='-15%25'%20width='130%25'%20height='130%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.035'%20numOctaves='4'%20seed='19'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='13'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3Crect%20x='16'%20y='16'%20width='208'%20height='208'%20rx='5'%20fill='%23fff'%20filter='url%28%23t%29'/%3E%3C/svg%3E");
  --torn-r3: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='t'%20x='-15%25'%20y='-15%25'%20width='130%25'%20height='130%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.06'%20numOctaves='4'%20seed='4'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='8'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3Crect%20x='16'%20y='16'%20width='208'%20height='208'%20rx='5'%20fill='%23fff'%20filter='url%28%23t%29'/%3E%3C/svg%3E");
  --torn-c1: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='t'%20x='-15%25'%20y='-15%25'%20width='130%25'%20height='130%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.05'%20numOctaves='4'%20seed='5'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='9'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3Ccircle%20cx='120'%20cy='120'%20r='98'%20fill='%23fff'%20filter='url%28%23t%29'/%3E%3C/svg%3E");
  --torn-c2: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='t'%20x='-15%25'%20y='-15%25'%20width='130%25'%20height='130%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.04'%20numOctaves='4'%20seed='23'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='11'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3Ccircle%20cx='120'%20cy='120'%20r='98'%20fill='%23fff'%20filter='url%28%23t%29'/%3E%3C/svg%3E");
  --sticker-worn: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='w'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.5'%20numOctaves='3'%20seed='11'%20result='n'/%3E%3CfeColorMatrix%20in='n'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.6%200.4%200%200%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='gamma'%20exponent='2.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='200'%20height='200'%20filter='url%28%23w%29'%20opacity='0.5'/%3E%3C/svg%3E");
  --header-h: 64px;
  --font-display: 'Anton', Impact, sans-serif;
  --font-body: 'Inter', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  /* Stickers hang into the side margins. `clip` (not `hidden`) contains them
     without creating a scroll container, which would break the sticky header. */
  overflow-x: clip;
  /* subtle CSS noise texture */
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(var(--accent-rgb), 0.06), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(var(--accent-2-rgb), 0.04), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

a { color: var(--accent-bright); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 3px;
}

/* ===== Header / Nav ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.2rem;
  background: rgba(13,12,10,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--accent);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.12em;
}
/* The FD is now inline vector (see the #fd-mark symbol), so colour is just
   `color` — no filter tricks — and it stays crisp at any size. The viewBox is
   cropped to the glyph's ink, so height maps straight to the mark's height. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav-mark {
  height: 26px;
  width: auto;
  aspect-ratio: 1256 / 1955;
  color: var(--text);
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  gap: 1.6rem;
  list-style: none;
}
.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.3rem 0.15rem;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 2px solid var(--accent);
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--accent);
}

/* ===== Sections ===== */
.section {
  padding: 5rem 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  /* keeps the sticky header from covering headings on anchor jumps */
  scroll-margin-top: var(--header-h);
  /* z-index:0 makes each section its own stacking context, which traps the
     z-index:-1 stickers inside it — otherwise they'd fall behind .section-alt's
     background and vanish. */
  position: relative;
  z-index: 0;
}

/* ===== Stickers =====
   Faded scraps of Jeremy's work, scattered in the margins like a gig-worn
   guitar case. Purely decorative: aria-hidden in the markup, pointer-events
   none, and z-index -1 so they sit above the section background but under all
   the text. Position/size/angle come in per-sticker via custom properties. */
.sticker {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  left: var(--x, auto);
  top: var(--y, auto);
  width: var(--s, 120px);
  height: var(--s, 120px);
  transform: rotate(var(--r, 0deg));
  padding: 8px;
  background: #f4f0e6;                 /* white die-cut border, torn through at the edges */
  opacity: var(--o, 0.4);
  /* torn silhouette; drop-shadow (not box-shadow) so the shadow follows the
     ripped edge instead of a clean rectangle */
  -webkit-mask: var(--tv, var(--torn-r1)) center / 100% 100% no-repeat;
          mask: var(--tv, var(--torn-r1)) center / 100% 100% no-repeat;
  filter: saturate(0.85) drop-shadow(0 7px 14px rgba(0,0,0,0.5));
}
/* worn scuffs across the face, clipped to the torn shape by the parent mask */
.sticker::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sticker-worn) center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}
.sticker img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* shape is defined by --sticker-torn now; round/rect classes are inert */
.section-alt {
  max-width: none;
  background: var(--bg-alt);
  border-top: 2px dashed rgba(var(--accent-rgb), 0.35);
  border-bottom: 2px dashed rgba(var(--accent-rgb), 0.35);
}
.section-alt > * { max-width: 1100px; margin-left: auto; margin-right: auto; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--display);
  transform: rotate(-1.5deg);
  text-shadow: 4px 4px 0 var(--display-shadow);
  margin-bottom: 0.4rem;
}
.section-sub { color: var(--text-dim); margin-bottom: 2.5rem; font-size: 1.05rem; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 1.6rem;
  border: 2px solid var(--accent);
  color: var(--accent-bright);
  background: transparent;
  transition: all 0.2s;
  cursor: pointer;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent-2); }
.btn-solid { background: var(--accent); color: #12100b; }
.btn-solid:hover { background: var(--accent-bright); color: #12100b; }
.btn-outline { border-color: var(--accent-2); color: var(--accent-2); }

/* ===== Hero ===== */
.hero {
  /* ~78vh, not a full screen: enough to dominate the first view without leaving
     a big dead band between the centered content and the Music section below. */
  min-height: calc(78vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.hero-inner { position: relative; z-index: 2; max-width: 760px; }
/* Sized by height, not width: the old PNG was a padded 1200px square whose glyph
   only filled 61% of it, so 224px-wide PNG == ~137px of actual mark. This keeps
   the mark the same size on screen now that the viewBox is cropped to the ink. */
.hero-logo {
  height: min(138px, 26vw);
  width: auto;
  aspect-ratio: 1256 / 1955;
  margin-bottom: 1.4rem;
  color: var(--text);
  filter: drop-shadow(0 0 26px rgba(var(--accent-rgb), 0.55));
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 6rem);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--display);
  transform: rotate(-2deg);
  text-shadow: 5px 5px 0 var(--display-shadow);
}

/* Concrete texture on the largest display type (hero + section titles).
   The cream fill is painted through --concrete via background-clip:text; the
   offset shadow moves to a drop-shadow filter because text-shadow doesn't show
   through a transparent text fill. Guarded by @supports so unsupported browsers
   keep the solid cream fallback above. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-title, .section-title {
    background-color: var(--display);
    background-image: var(--concrete-grain), var(--concrete-stain);
    background-size: auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .hero-title { text-shadow: none; filter: drop-shadow(5px 5px 0 var(--display-shadow)); }
  .section-title { text-shadow: none; filter: drop-shadow(4px 4px 0 var(--display-shadow)); }
}
.hero-tag {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 1rem 0;
  color: var(--accent);
}
.hero-bio {
  font-size: 1.1rem;
  color: var(--text-dim);
  margin: 0 auto 2rem;
  max-width: 620px;
}
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-badge {
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 320px;
  opacity: 0.14;
  transform: rotate(12deg);
  pointer-events: none;
}

/* Tighten only the hero→music transition; other sections keep the full 5rem. */
#music { padding-top: 3rem; }

/* ===== Music player ===== */
/* The visualiser is gone and the controls sit on the title row, so the box has
   no dead space in it — which means it can be generous without being wasteful.
   --col keeps the player and the video block below it on the same width. */
.player-shell {
  background: var(--panel);
  border: 2px solid var(--accent);
  box-shadow: 8px 8px 0 rgba(var(--accent-rgb), 0.25);
  padding: 1.5rem 1.7rem;
  max-width: var(--col, 880px);
  transform: rotate(-0.5deg);
}
.player-top {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 0.8rem;
}
/* ===== Turntable =====
   Every length below is a base value multiplied by --tt, the master scale. That
   matters: the arm angles in main.js (-53deg on the outer groove, -28deg at the
   run-out) are only correct for this exact pivot/arm/platter geometry. Scaling
   all lengths by one factor is a similarity transform, so the angles stay valid
   — but changing any single number in isolation breaks them.
   Base geometry (at --tt:1): 130x100 box, 84px platter at (0,8),
   pivot at (112,16), 64px arm. */
.turntable {
  --tt: 1.55;
  position: relative;
  width: calc(130px * var(--tt));
  height: calc(100px * var(--tt));
  flex-shrink: 0;
}
.platter {
  position: absolute;
  left: 0;
  top: calc(8px * var(--tt));
  width: calc(84px * var(--tt));
  height: calc(84px * var(--tt));
  border-radius: 50%;
  border: calc(3px * var(--tt)) solid var(--accent);
  background:
    /* groove rings */
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.055) 0 calc(1px * var(--tt)),
      transparent calc(1px * var(--tt)) calc(3px * var(--tt))),
    /* vinyl body, slightly lighter toward the label */
    radial-gradient(circle at 50% 50%, #1c1c1c 0 26%, #0e0e0e 60%, #131313 100%);
}
.platter.spinning { animation: spin 1.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* fd-badge.png is a gold mark on a black disc, which disappears against black
   vinyl — so the label is built from the bare monogram on a coloured disc. */
.record-label {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(32px * var(--tt));   /* ~38% of the record, as a real label sits */
  height: calc(32px * var(--tt));
  margin: calc(-16px * var(--tt)) 0 0 calc(-16px * var(--tt));
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
}
.record-label svg {
  height: 62%;
  width: auto;
  aspect-ratio: 1256 / 1955;
  color: #12100b;   /* black mark on the green label */
}
.spindle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(5px * var(--tt));
  height: calc(5px * var(--tt));
  margin: calc(-2.5px * var(--tt)) 0 0 calc(-2.5px * var(--tt));
  border-radius: 50%;
  background: #d8d4c8;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
}
/* Static highlight — the light source doesn't rotate with the record, so this
   sits above the spinning platter rather than on it. */
.platter-sheen {
  position: absolute;
  left: 0;
  top: calc(8px * var(--tt));
  width: calc(84px * var(--tt));
  height: calc(84px * var(--tt));
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%, rgba(255,255,255,0.07) 44%,
    rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.07) 56%, transparent 70%);
}

/* Cradle the arm sits in when parked, so it isn't floating in space. */
.tonearm-rest {
  position: absolute;
  left: calc(95px * var(--tt));
  top: calc(77px * var(--tt));
  width: calc(14px * var(--tt));
  height: calc(5px * var(--tt));
  border-radius: calc(3px * var(--tt));
  background: linear-gradient(180deg, #5a574f, #322f2b);
}
.tonearm-rest::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(4px * var(--tt));
  width: calc(3px * var(--tt));
  height: calc(7px * var(--tt));
  margin-left: calc(-1.5px * var(--tt));
  border-radius: 0 0 1px 1px;
  background: #2b2925;
}
.tonearm-pivot {
  position: absolute;
  left: calc(105px * var(--tt));
  top: calc(9px * var(--tt));
  width: calc(14px * var(--tt));
  height: calc(14px * var(--tt));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #cfcbc0, #6e6a62);
  box-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.tonearm {
  position: absolute;
  left: calc(48px * var(--tt));   /* right end lands on the pivot at x=112 */
  top: calc(14px * var(--tt));
  width: calc(64px * var(--tt));
  height: calc(4px * var(--tt));
  transform-origin: 100% 50%;
  transform: rotate(var(--arm, -80deg));   /* -80deg = parked off the record */
  /* Landing on (and lifting off) the record is a deliberate sweep... */
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ...but once the stylus is down, progress ticks arrive every few hundred ms.
   A long ease would restart on every tick and the arm would never settle, so
   riding the groove uses a short linear transition instead. */
.tonearm.tracking {
  transition: transform 0.4s linear;
}
.tonearm-tube {
  position: absolute;
  inset: 0;
  border-radius: calc(2px * var(--tt));
  background: linear-gradient(180deg, #e2ded3, #9b978e 55%, #6f6c65);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.tonearm-weight {
  position: absolute;
  right: calc(-13px * var(--tt));
  top: calc(-4px * var(--tt));
  width: calc(13px * var(--tt));
  height: calc(12px * var(--tt));
  border-radius: calc(2px * var(--tt));
  background: linear-gradient(180deg, #8e8a82, #4d4a45);
}
.tonearm-head {
  position: absolute;
  left: calc(-5px * var(--tt));
  top: calc(-3px * var(--tt));
  width: calc(12px * var(--tt));
  height: calc(10px * var(--tt));
  border-radius: 1px 1px 3px 3px;
  background: linear-gradient(180deg, #dcd8cd, #7d7a72);
  transform: rotate(22deg);
}
/* the stylus itself */
.tonearm-head::after {
  content: "";
  position: absolute;
  left: calc(3px * var(--tt));
  bottom: calc(-3px * var(--tt));
  width: calc(2px * var(--tt));
  height: calc(4px * var(--tt));
  background: var(--accent-bright);
}

.player-info { flex: 1; min-width: 0; }
.player-label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.player-track {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: auto;   /* sits at the right end of the title row */
  flex-shrink: 0;
}
.ctrl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: #0f0e0b;
  color: var(--accent-bright);
  cursor: pointer;
  transition: all 0.15s;
}
.ctrl-btn:hover { color: var(--accent-2); border-color: var(--accent-2); transform: scale(1.08); }
.ctrl-play {
  width: 68px;
  height: 68px;
  background: var(--accent);
  color: #12100b;
}
.ctrl-play:hover { background: var(--accent-2); color: #12100b; }

.player-credit { text-align: center; font-size: 0.9rem; color: var(--text-dim); }
.sc-hidden {
  width: 100%;
  height: 0;
  border: 0;
  visibility: hidden;
  position: absolute;
}

/* video block — shares --col with the player so the two stay aligned, and the
   panel hugs the video instead of framing empty space */
.video-block { margin-top: 3rem; max-width: var(--col, 880px); }

.video-cta-row { margin-top: 1.4rem; text-align: center; }
.logo-reel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem;
  background: var(--panel);
  border: 2px solid var(--accent);
  box-shadow: 8px 8px 0 rgba(var(--accent-rgb), 0.18);
  transform: rotate(-0.4deg);
}
.logo-reel-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  outline: none;
}

/* ===== Art ===== */
.art-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
.art-piece {
  margin: 0;
  background: var(--panel);
  border: 2px solid rgba(var(--accent-rgb), 0.6);
  padding: 0.5rem;
  box-shadow: 6px 6px 0 rgba(var(--accent-rgb), 0.22);
  transition: transform 0.2s, border-color 0.2s;
}
.art-piece:nth-child(odd) { transform: rotate(-0.7deg); }
.art-piece:nth-child(even) { transform: rotate(0.6deg); }
.art-piece:hover { border-color: var(--accent-2); }
.art-piece img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.art-more { margin-top: 2rem; text-align: center; }

/* ===== Shop ===== */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}
.product {
  /* Pure black to match the product photos' backdrop, so the image edges melt
     into the card instead of showing a seam against the green-tinted panel. */
  background: #000;
  border: 2px solid rgba(var(--accent-rgb), 0.5);
  padding: 1.2rem;
  text-align: center;
  transition: transform 0.2s, border-color 0.2s;
  /* Column layout + margin-top:auto on the price pins price/Buy to the bottom,
     so they line up across cards whether or not a card has option dropdowns. */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product:hover { transform: translateY(-4px) rotate(-0.4deg); border-color: var(--accent-2); }
.product img {
  width: 100%;
  /* match the source photos (3:4 portrait) so nothing is cropped */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #000;   /* matches the photo backdrop; only shows before load */
  margin-bottom: 0.9rem;
}
.product h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
}
.price {
  color: var(--accent-2);
  font-weight: 700;
  font-size: 1.1rem;
  margin: auto 0 0.9rem;   /* auto top margin drops price+Buy to the card bottom */
}
/* Product photo swaps to the selected colour; brief fade while the next
   image preloads so the change doesn't pop. */
.product-img { transition: opacity 0.18s ease; }
.product-img.is-swapping { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) {
  .product-img { transition: none; }
  .product-img.is-swapping { opacity: 1; }
}

/* Colour / size pickers for multi-variant products */
.product-opts {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0.2rem 0 0.8rem;
}
.opt { display: flex; flex-direction: column; gap: 0.2rem; text-align: left; }
.opt-label {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.opt-select {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text);
  background: #0f130e;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
}
.opt-select:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.btn-buy { padding: 0.5rem 2rem; background: var(--accent); color: #12100b; }
.btn-buy:hover { background: var(--accent-bright); color: #12100b; }
/* Sold-out / unavailable — a Buy that isn't a link */
.btn-buy.is-disabled {
  background: transparent;
  color: var(--text-dim);
  border-color: var(--rule, rgba(var(--accent-rgb), 0.4));
  cursor: not-allowed;
  pointer-events: none;
}
.btn-buy.is-disabled:hover { transform: none; box-shadow: none; }

/* Fallback shown when the shop has no token yet, or the catalog can't load.
   Spans the whole grid so the section reads as intentional, never broken. */
.shop-fallback {
  grid-column: 1 / -1;
  max-width: 46ch;
  margin: 1rem auto;
  text-align: center;
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.7;
}
.shop-fallback-btn { display: inline-block; margin-top: 1.4rem; }

.shop-note {
  margin-top: 2.2rem;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.95rem;
}

/* ===== Contact ===== */
#contact { text-align: center; }
.contact-email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4vw, 2.2rem);
  letter-spacing: 0.05em;
  color: var(--accent-2);
  text-decoration: none;
  border-bottom: 3px solid var(--accent);
  margin-bottom: 2.5rem;
}
.contact-email:hover { color: var(--accent-bright); }
.social-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  list-style: none;
  margin-bottom: 3rem;
}
.social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  color: var(--text);
  transition: all 0.2s;
}
.social-row a:hover {
  color: #12100b;
  background: var(--accent-2);
  border-color: var(--accent-2);
  transform: translateY(-3px);
}
.site-footer { color: var(--text-dim); font-size: 0.9rem; }

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: #0d0c0a;
    border-bottom: 2px solid var(--accent);
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    display: block;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.25);
  }
  .section { padding: 3.5rem 1.1rem; }
  .shop-grid { grid-template-columns: 1fr; }
  .art-grid { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
  /* Narrow: the controls drop to their own line and centre, rather than
     clinging to the right edge under the track title. The turntable scales
     down as one piece, so the arm angles stay correct. */
  .player-top { flex-wrap: wrap; justify-content: center; }
  .player-controls { margin-left: 0; width: 100%; justify-content: center; }
  .turntable { --tt: 1.2; }
  .player-shell { padding: 1.1rem 1.2rem; }
  .hero-badge { display: none; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .shop-grid { grid-template-columns: 1fr 1fr; }
}

/* The 1100px content column needs ~100px of margin either side for a sticker to
   sit beside it rather than on top of it. Below 1200px that margin is gone. */
@media (max-width: 1199px) {
  .sticker { display: none; }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .art-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .platter.spinning { animation: none; }
  /* The arm still moves to the record — it conveys play state — it just
     snaps there instead of sweeping. */
  .tonearm { transition: none; }
}