/* ═══════════════════════════════════════════════════════════
   MERLOW — UNFILTERED
   Palette sampled from the release artwork:
   red M / bronze face / bone stencil / dusty slate sky /
   the blue "TIC." on the merch plate.
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink:        #0A0B0D;
  --ink-2:      #14171A;
  --ink-3:      #1D2126;
  --bone:       #EDEAE4;
  --ash:        #8E959C;
  --slate:      #2B3742;
  --rust:       #8C5A34;
  --red:        #C2211F;
  --red-hot:    #E33A2E;
  --blue:       #3D63FF;

  --line:       rgba(237, 234, 228, 0.14);
  --line-soft:  rgba(237, 234, 228, 0.07);

  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'Courier New', monospace;

  --wrap:  1180px;
  --gut:   clamp(1.25rem, 4vw, 3rem);
  --sect:  clamp(4.5rem, 10vw, 9rem);
  --radius: 0;

  --z-hero-ui: 30;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* A long, soft landing: almost all of the distance is covered early and the
     last few pixels take their time, so nothing arrives with a snap. Used by
     the chorus, where the motion is meant to be felt rather than noticed. */
  --ease-soft:   cubic-bezier(0.16, 1, 0.3, 1);
  /* Symmetrical and slow at both ends — for anything that drifts rather than
     arrives, so it eases out of rest and back into it without a turn. */
  --ease-breath: cubic-bezier(0.37, 0, 0.63, 1);
}

/* ─────────────── reset / base ─────────────── */

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

/* The UA stylesheet gives [hidden] `display: none`, but any author rule that
   sets `display` outranks it. `.cart` is `display: flex` and `.cart__toggle`
   is `display: inline-flex`, so both ignored their `hidden` attribute and the
   cart drawer sat open against the right edge permanently. This is the
   standard catch-all, and it keeps the next `display`-styled element that
   toggles via `hidden` from doing the same thing. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0;
  text-transform: uppercase;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--red); color: var(--bone); }

:focus-visible {
  outline: 2px solid var(--red-hot);
  outline-offset: 3px;
}

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


/* ─────────────── shared type ─────────────── */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-hot);
  margin: 0 0 1rem;
}

.section-title {
  font-size: clamp(2.5rem, 7vw, 5.25rem);
  margin: 0 0 1rem;
}

.section-lede {
  color: var(--ash);
  max-width: 46ch;
  margin: 0 0 3rem;
}

/* ═══════════════════════════════════════════════════════════
   Distressed material type — the hero's wood UNFILTERED plaque

   The fill is a gradient clipped to the glyphs; the wear is a
   fractal-noise mask over it, whose alpha never reaches 0, so a
   worn patch thins a stroke instead of cutting through it.
   ═══════════════════════════════════════════════════════════ */

.metal {
  /* Fallback for anything without background-clip: text — a flat, legible
     colour rather than an invisible headline. Overridden just below. */
  color: var(--bone);
  font-weight: inherit;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .metal {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

    /* drop-shadow, not text-shadow: a text-shadow paints *between* the
       clipped background and the glyph, so it shows through as a dark
       blob inside every letter. */
    filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.85));
  }
}

:root {
  /* Gentler wear, coarser cells — for the smaller, letter-spaced type where
     the full-strength mask eats whole sections of a 2px stroke and the word
     reads as broken rather than weathered. */
  --wear-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.28' numOctaves='3' seed='5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0.82 0.95 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23w)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════
   Chipped stencil — matched to the MERLOW mark on the cover art

   The hero mark is the cover's own wordmark, keyed out of the
   artwork, so it is exact. These three lines cannot be cropped
   from anywhere, so they are set in a stencil face and worn with
   `media/chips.png` — a tile built from the chipped paint inside
   the cover wordmark's own strokes, not synthetic noise.
   ═══════════════════════════════════════════════════════════ */

.chipped {
  font-family: 'Saira Stencil One', var(--font-display), sans-serif;
  font-weight: 400;
  color: var(--bone);
  -webkit-mask-image: url('../media/chips.png');
  mask-image: url('../media/chips.png');
  /* Chips must scale with the type, not with the page — at a fixed px size
     they read as camouflage on the big lines and vanish on the small ones.
     0.95em keeps roughly the cover's chip-to-letter ratio at any size. */
  -webkit-mask-size: 0.95em 0.95em;
  mask-size: 0.95em 0.95em;
  /* the tile is generated on a torus, so `repeat` has no seam */
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}

/* — distressed wood, brass fittings — */
.metal--wood {
  background-image:
    /* grain: sparse, low-contrast lines running with the plank */
    repeating-linear-gradient(90deg,
      rgba(74,44,20,0.20) 0 1px, rgba(0,0,0,0) 1px 10px),
    repeating-linear-gradient(90deg,
      rgba(255,238,208,0.14) 0 1px, rgba(0,0,0,0) 1px 23px),
    linear-gradient(178deg,
      #F0DCBE 0%, #D8B98E 20%, #BE9A6C 38%, #EBD6B6 54%,
      #C7A377 72%, #A98457 88%, #E2C9A4 100%);
  /* small type: the strokes are only a couple of px wide here */
  -webkit-mask-image: var(--wear-soft);
  mask-image: var(--wear-soft);
}

.fitting {
  position: relative;
  flex: 0 0 auto;
  width: 0.5em;
  height: 1.85em;
  border-radius: 1px;
  background:
    linear-gradient(90deg,
      #6B4E1C 0%, #C9A03E 22%, #F2E1A6 42%, #D6AE48 52%,
      #B98C2C 70%, #7A5B26 100%);
  box-shadow:
    inset 0 0 0 1px rgba(40, 26, 6, 0.55),
    0 2px 5px rgba(0, 0, 0, 0.6);
}
.fitting::before,
.fitting::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0.15em;
  height: 0.15em;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 34% 30%, #FFF6CE, #C89C38 58%, #63481A);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}
.fitting::before { top: 0.3em; }
.fitting::after  { bottom: 0.3em; }

/* ═══════════════════════════════════════════════════════════
   Worn headings — H2 / H3

   Same chip tile as the slogan, but nothing is masked away. The
   worn areas are painted deep blue instead of cut out, so the
   headings read as paint worn through to an undercoat rather
   than as damaged type. `media/chips-blue.png` is the chip tile
   with its alpha inverted and run through a gamma curve, so the
   deepest chips go fully opaque — properly blue, not washed out —
   while the faint halo around each one drops away. Stronger in
   colour, lighter in coverage than the slogan.

   Deliberately not applied to the chorus words (already chipped,
   and their own colours would be overwritten) or `.footer__h`,
   which is an 11px mono label where the texture is just noise.
   ═══════════════════════════════════════════════════════════ */

.section-title,
.footer__title,
.band__text h3 {
  color: var(--bone);   /* fallback; overridden just below */
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .section-title,
  .footer__title,
  .band__text h3 {
    background-image:
      url('../media/chips-blue.png'),
      linear-gradient(var(--bone), var(--bone));
    /* chips scale with the type; the flat colour fills the whole box */
    background-size: 0.8em 0.8em, 100% 100%;
    background-repeat: repeat, no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* ─────────────── buttons ─────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}

.btn--primary {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn--primary:hover { background: var(--red-hot); border-color: var(--red-hot); }

/* secondary: outline, so it reads as the quieter of the pair */
.btn--line {
  background: transparent;
  color: var(--bone);
  border-color: var(--line);
}
.btn--line:hover {
  border-color: var(--bone);
  background: rgba(237, 234, 228, 0.06);
}

/* ─────────────── hero ─────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

/* No filter, no grade — the loop plays exactly as delivered. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The loop is not uniformly dark — it peaks at an average luma of 117/255 at
   t≈7.6s (a bright flare). A light, even scrim looks good on the dark frames
   and destroys text contrast on that one, so the darkening is concentrated
   where the copy sits rather than spread across the whole frame: the logo
   stays readable at the edges and the headline is legible on every frame. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 44% 26% at 50% 45%,
      rgba(10,11,13,0.82) 0%, rgba(10,11,13,0.62) 48%,
      rgba(10,11,13,0.18) 82%, rgba(10,11,13,0) 100%),
    linear-gradient(to bottom,
      rgba(10,11,13,0.70) 0%, rgba(10,11,13,0.10) 30%,
      rgba(10,11,13,0.16) 62%, rgba(10,11,13,0.90) 100%),
    rgba(10,11,13,0.12);
}

/* The ellipse is sized in percentages, so on a narrow viewport it shrinks with
   the column and the copy spills past its dark core — visible as red-on-flame
   on the eyebrow at 375px. Widen it there. */
@media (max-width: 700px) {
  /* No .hero__video override on mobile. The base rule already fills the hero
     edge to edge with no feathering; the scale and the edge mask that used to
     live here are gone. */

  .hero__scrim {
    background:
      radial-gradient(ellipse 82% 30% at 50% 42%,
        rgba(10,11,13,0.86) 0%, rgba(10,11,13,0.66) 55%,
        rgba(10,11,13,0.20) 85%, rgba(10,11,13,0) 100%),
      linear-gradient(to bottom,
        rgba(10,11,13,0.72) 0%, rgba(10,11,13,0.14) 26%,
        rgba(10,11,13,0.20) 62%, rgba(10,11,13,0.90) 100%),
      rgba(10,11,13,0.16);
  }
}

.hero__content {
  position: relative;
  z-index: var(--z-hero-ui);
  text-align: center;
  padding: 4rem var(--gut) 7rem;
  max-width: 60rem;
}
/* Belt and braces over the flare frame — the scrim carries the contrast, the
   shadow keeps the smaller type crisp where the gradient is weakest.
   The gold and wood headlines get drop-shadow from .metal instead. */
.hero__content .eyebrow {
  font-size: 0.875rem;          /* 14px — 2px up from the shared 12px */
  color: var(--bone);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9);
}

/* The mark itself, lifted from the cover art — not type trying to imitate it. */
.hero__title {
  margin: 0.25rem 0 0.75rem;
  padding: 50px;
  line-height: 0;
}
.hero__wordmark {
  /* 100% of the padded box, not of the viewport — otherwise the 50px padding
     is space the mark simply overflows, and nothing actually moves. */
  width: min(100%, 880px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 4px 22px rgba(0, 0, 0, 0.9));
}

.hero__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.4vw, 1rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 4vw, 2.25rem);
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}

.hero__plank {
  letter-spacing: 0.34em;
  padding-left: 0.34em; /* optical centring against the tracking */
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  justify-content: center;
}

.hero__cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-hero-ui);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ash);
  transition: color 0.2s var(--ease);
}
.hero__cue:hover { color: var(--bone); }
.hero__cue-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, transparent, var(--red-hot));
  animation: cue 2.2s var(--ease) infinite;
}
.hero__cue-text {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0,0,0,0.9);
}
@keyframes cue {
  0%, 100% { opacity: 0.35; transform: scaleY(0.6); transform-origin: top; }
  50%      { opacity: 1;    transform: scaleY(1);   transform-origin: top; }
}

/* ═══════════════════════════════════════════════════════════
   Chorus / manifesto

   The three plate words and the chorus lyric were saying the
   same thing in two places, so they are one section: each word
   is the call, and the line beside it is the answer.

   Everything rises on scroll-in. The stagger comes from
   transition-delay on the shared `.reveal` mechanism rather
   than keyframes, so the reduced-motion block that already
   flattens transition-duration flattens this too.
   ═══════════════════════════════════════════════════════════ */

.chorus {
  position: relative;
  padding: var(--sect) 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}

.chorus__bg {
  position: absolute;
  inset: -8%;
  background: url('../media/plate.jpg') center/cover no-repeat;
  opacity: 0.07;
  filter: grayscale(1) contrast(1.3);
  /* Slower than before and eased at both ends, so the turn at each extreme is
     a breath rather than a stop — at 42s the reversal was catchable. */
  animation: plate-drift 78s var(--ease-breath) infinite alternate;
}
@keyframes plate-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}

.chorus .wrap { position: relative; }

.chorus__quote {
  margin: 0 0 clamp(2rem, 5vw, 3.25rem);
  border: 0;
  padding: 0;
}

/* — call and answer — */

.chorus__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 clamp(0.75rem, 2vw, 1.75rem);
  margin: 0 0 clamp(0.5rem, 1.4vw, 1rem);
}

.chorus__word {
  font-family: var(--font-display);
  font-weight: 900;
  /* Capped at 6rem, not 6.4: measured at 1440, "Uncensored." plus its answer
     needed 1092px against 1084px available, so that one line alone dropped its
     answer onto a second row and broke the rhythm of the other two. */
  font-size: clamp(1.9rem, 7.6vw, 6rem);
  line-height: 1.06;
  text-transform: uppercase;
}
.chorus__word b { font-weight: inherit; }

/* The full stops keep the merch plate's signature — red, bone, blue — and stay
   solid so the punctuation reads at a glance against the distressed words. */
.chorus .dot { font-style: normal; color: var(--bone); }
.chorus .dot--red  { color: var(--red-hot); }
.chorus .dot--blue { color: var(--blue); }

.chorus__answer {
  position: relative;
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 1.5vw, 1rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  padding-left: clamp(1.5rem, 3vw, 2.75rem);
  white-space: nowrap;
  /* the answer arrives after its word, sliding in behind a drawn rule */
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: opacity 1.5s var(--ease-soft), transform 1.5s var(--ease-soft);
  transition-delay: 0.75s;
}
.chorus__answer::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(1rem, 2.2vw, 2rem);
  height: 1px;
  background: var(--red-hot);
  transform: scaleX(0);
  transform-origin: left;
  /* the rule draws itself first and the answer follows it in */
  transition: transform 1.3s var(--ease-soft);
  transition-delay: 0.5s;
}
.chorus__line.is-in .chorus__answer { opacity: 1; transform: none; }
.chorus__line.is-in .chorus__answer::before { transform: scaleX(1); }

/* — the payoff line — */

.chorus__standing {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 5.2vw, 4rem);
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--bone);
  margin: clamp(1.5rem, 4vw, 2.75rem) 0 0;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
/* the only line that moves down instead of up — it is about walls falling */
.chorus__falling {
  display: inline-block;
  color: var(--ash);
  opacity: 0;
  transform: translateY(-0.3em);
  transition: opacity 1.7s var(--ease-soft), transform 1.7s var(--ease-soft);
  transition-delay: 0.6s;
}
.chorus__standing.is-in .chorus__falling { opacity: 1; transform: none; }

.chorus__note {
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 2vw, 0.9375rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  margin: 0 0 0.85rem;
}

.chorus__credit {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(142, 149, 156, 0.7);
  margin: 0;
}

/* — hover replays the entrance —
   Keyframes rather than a transition, because a transition has nowhere to
   return from once the line has landed. An animation restarts every time the
   pointer re-enters, which is the whole point. Guarded on `hover: hover` so
   it never fires from a tap on a touch screen, where it would flash once and
   look like a glitch. */

@media (hover: hover) and (pointer: fine) {
  /* Hover used to replay the whole entrance as a keyframe animation. Sweeping
     the pointer down the three lines therefore re-fired three entrances, each
     snapping back to its start frame before rising again — the jumpiest thing
     in the section. It is a transition now: the rule reaches a little further
     and the answer lifts out of grey, continuous in both directions, so
     crossing the lines feels like passing a hand over them. */
  .chorus__line:hover .chorus__answer { color: var(--bone); }
  .chorus__line:hover .chorus__answer::before {
    width: clamp(1.6rem, 3.4vw, 3.2rem);
    background: var(--red-hot);
  }
  .chorus__answer { transition-property: opacity, transform, color; }
  .chorus__answer::before { transition-property: transform, width, background; }
  .chorus__line:hover .chorus__answer,
  .chorus__line:hover .chorus__answer::before {
    /* the hover response is quicker than the entrance, but still unhurried,
       and carries no delay — the delays above are for the arrival only */
    transition-duration: 0.9s;
    transition-delay: 0s;
  }
  .chorus__line, .chorus__standing { cursor: default; }
}

/* — the rise, staggered — */

/* A short distance covered slowly reads as calm; a long distance covered
   quickly reads as a jump. This travels a third of what it used to over more
   than twice the time, and lands on --ease-soft, so the last few pixels drift
   rather than snap. The faint scale settles the line into the page with it. */
/* Longhands, not the `transition` shorthand: the shorthand carries an implicit
   transition-delay: 0s, and at (0,2,0) it outranks the bare `.chorus__standing`
   below, which flattened the payoff line's 1.05s wait to nothing. Measured —
   it was peaking at 39ms alongside the first line instead of after the third. */
.chorus .reveal {
  transform: translateY(0.9rem) scale(0.994);
  transition-property: opacity, transform;
  transition-duration: 1.8s;
  transition-timing-function: var(--ease-soft);
}

/* Wide enough apart that the three lines arrive one at a time and the payoff
   waits for them, instead of the four landing as one clump. */
.chorus__line:nth-of-type(1) { transition-delay: 0.00s; }
.chorus__line:nth-of-type(2) { transition-delay: 0.34s; }
.chorus__line:nth-of-type(3) { transition-delay: 0.68s; }
/* `.chorus` qualifier is load-bearing. Bare `.chorus__standing` is (0,1,0),
   which ties with the base `.reveal` shorthand — and that sets delay 0s and
   sits later in the file, so it won and the payoff line arrived in step with
   the first line instead of after the third. It had been landing early since
   the stagger was written; the per-line rules only escaped it because
   :nth-of-type takes them to (0,2,0). */
.chorus .chorus__standing    { transition-delay: 1.05s; }

@media (max-width: 620px) {
  /* Stacked. `display: block` on the row alone was not enough: the word and
     the answer are inline spans, so the answer ran straight on from the full
     stop ("UNFILTERED.THIS IS WHO I AM") and only wrapped when it happened to
     be too long. Both are blocks here, so every answer sits on its own line
     under its word and the three rows read the same way. */
  .chorus__line { display: block; margin-bottom: 1.4rem; }
  .chorus__word { display: block; }
  .chorus__answer {
    display: block;
    white-space: normal;
    padding-left: 2.1rem;
    margin-top: 0.45rem;
  }
  .chorus__answer::before {
    width: 1.35rem;
    top: 0.62em;   /* aligns to the first line, not the middle of a wrapped block */
  }
}

@media (prefers-reduced-motion: reduce) {
  .chorus__bg { animation: none; }
  .chorus__answer,
  .chorus__falling { opacity: 1; transform: none; }
  .chorus__answer::before { transform: scaleX(1); }
  /* The hover response is a colour and a width now, not a replayed entrance,
     so it is left alone here — the global rule above already flattens its
     duration, which leaves the state change without the movement. */
}

/* ─────────────── story ─────────────── */

.story { padding: var(--sect) 0 0; }
.story .section-title { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

.band {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  max-width: var(--wrap);
  margin: 0 auto clamp(3.5rem, 8vw, 7rem);
  padding-inline: var(--gut);
}
.band--flip .band__media { order: 2; }

/* One frame for all four bands. The sources range from 1:1 to 2.2:1, and left
   to their natural sizes the bands read as a ragged pile rather than a series.
   Every image is pre-cropped to 3:2 or wider, so `cover` only ever trims. */
.band__media { position: relative; aspect-ratio: 16 / 9; }
.band__media img,
.band__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink-2);
}

.band__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-soft);
  pointer-events: none;
}

.band__num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--red-hot);
  margin: 0 0 0.75rem;
}

.band__text h3 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  margin: 0 0 1.25rem;
}
.band__text p { color: var(--ash); max-width: 44ch; }
.band__text em { color: var(--bone); font-style: italic; }

@media (max-width: 780px) {
  .band { grid-template-columns: 1fr; }
  .band--flip .band__media { order: 0; }
}

/* ─────────────── album ─────────────── */

/* 03 is the record itself. The cover is ~1.17:1, so it must not be forced
   into the 16:9 frame the clip bands use — `cover` would slice the artwork. */
.band--album .band__media { aspect-ratio: auto; }
.band--album .band__media img {
  height: auto;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}
.band--album .band__text p { max-width: 46ch; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  margin: 0 0 2.25rem;
  padding: 1.5rem 0;
  border-block: 1px solid var(--line);
}
.facts div { margin: 0; }
.facts dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 0.25rem;
}
.facts dd {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  margin: 0;
}

.album__links { display: flex; flex-wrap: wrap; gap: 0.875rem; }

.featured { border-top: 1px solid var(--line); padding-top: clamp(2rem, 5vw, 3rem); }
.featured__more { margin: 1.5rem 0 0; }

/* ─────────────── youtube slots ─────────────── */

.yt {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--ink-3);
  border: 1px solid var(--line);
  overflow: hidden;
}
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* — empty state: an obviously-intentional placeholder — */
.yt__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.25rem;
  text-align: center;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(237,234,228,0.035) 0 12px,
      transparent 12px 24px);
}
.yt__badge {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-hot);
  border: 1px solid var(--red);
  padding: 0.35rem 0.7rem;
}
.yt__label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ash);
  max-width: 34ch;
  margin: 0;
}
.yt__hint {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: rgba(142,149,156,0.65);
  margin: 0;
}
.yt__hint a {
  color: var(--ash);
  text-underline-offset: 0.25em;
}
.yt__hint a:hover { color: var(--red-hot); }

/* — filled state: click-to-load facade — */
.yt__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000 center/cover no-repeat;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.yt__facade::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,11,13,0.35);
  transition: background-color 0.2s var(--ease);
}
.yt__facade:hover::before { background: rgba(10,11,13,0.12); }
.yt__play {
  position: relative;
  width: 68px; height: 48px;
  background: rgba(10,11,13,0.72);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: background-color 0.2s var(--ease);
}
.yt__facade:hover .yt__play { background: var(--red); border-color: var(--red); }
.yt__play svg { width: 20px; height: 20px; fill: #fff; }

/* ─────────────── tracklist ─────────────── */

.tracks { padding: var(--sect) 0; }

.tracklist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.track { border-bottom: 1px solid var(--line); }

.track__btn {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto 2rem;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 64px;
  padding: 1.1rem 0.25rem;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background-color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.track__btn:hover { background: rgba(237,234,228,0.04); padding-left: 0.75rem; }

.track__num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ash);
  transition: color 0.2s var(--ease);
}
.track__btn:hover .track__num,
.track__btn[aria-expanded="true"] .track__num { color: var(--red-hot); }

.track__artist {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 3vw, 1.85rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.track__genre {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  white-space: nowrap;
}

/* Unreleased rows read a shade quieter than the eleven you can actually play,
   without dropping out of the numbered sequence — the record is still fifteen. */
.track--pending .track__artist { color: var(--ash); }

.track__soon {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--line);
  color: rgba(142,149,156,0.9);
  letter-spacing: 0.14em;
}

.track__chev {
  justify-self: end;
  width: 14px; height: 14px;
  border-right: 2px solid var(--ash);
  border-bottom: 2px solid var(--ash);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.25s var(--ease), border-color 0.2s var(--ease);
}
.track__btn[aria-expanded="true"] .track__chev {
  transform: rotate(-135deg) translate(-3px, -3px);
  border-color: var(--red-hot);
}

.track__panel { display: none; padding: 0 0 1.75rem; }
.track__panel.is-open { display: block; }
.track__panel .yt { max-width: 44rem; }

@media (max-width: 620px) {
  .track__btn {
    grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem;
    row-gap: 0.15rem;
  }
  .track__genre { grid-column: 2; }
  .track__chev { grid-row: 1 / span 2; grid-column: 3; }
}

/* ─────────────── video ─────────────── */

/* ─────────────── shop ─────────────── */

.shop {
  padding: var(--sect) 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line-soft);
}

.shop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.shop__item {
  display: block;
  border: 1px solid var(--line-soft);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.shop__item:hover { border-color: var(--line); background: rgba(237, 234, 228, 0.03); }

.shop__media {
  display: block;
  overflow: hidden;
  background: var(--ink);
  /* Reserves the box before the image arrives, so a card cannot sit collapsed
     and then snap open under the reader on a slow connection. The static cards
     this section replaced carried width/height attributes and got this for
     free; the JS-injected ones lost it. 1/1 because Printful's mockup previews
     are square — measured 800x800 on all three current products.
     contain, not cover: a future Printful product whose preview is not square
     would be cropped by cover, and the ink background letterboxes it cleanly. */
  aspect-ratio: 1 / 1;
}
.shop__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* scale only, so the card's own box never moves and the grid cannot reflow */
  transition: transform 0.45s var(--ease);
}
.shop__item:hover .shop__media img { transform: scale(1.04); }

.shop__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding: 1.1rem clamp(1rem, 2vw, 1.5rem) 1.25rem;
  border-top: 1px solid var(--line-soft);
}
.shop__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--bone);
}
/* Sits opposite .shop__name in the baseline-aligned .shop__meta row — the slot
   the old static cards gave to .shop__note. The range now runs a cap to a
   letterman jacket, so a price on the face of the card does real work. */
.shop__price {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--bone);
  white-space: nowrap;
}
.shop__price-from {
  margin-right: 0.45em;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}

.shop__note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}

.shop__status {
  grid-column: 1 / -1;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ash);
}

.shop__form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0 clamp(1rem, 2vw, 1.5rem) 1.25rem;
}
.shop__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
}
.shop__select {
  width: 100%;
  min-height: 42px;
  background: var(--ink-3);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.shop__add { width: 100%; }

/* Cards are links now — the size and colour choice moved to the product page,
   where there is room to show what is being chosen between. */
.shop__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.shop__cta {
  display: block;
  padding: 0 clamp(1rem, 2vw, 1.5rem) 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  transition: color 0.25s var(--ease);
}
.shop__item:hover .shop__cta,
.shop__link:focus-visible .shop__cta { color: var(--bone); }

.shop__more { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }

/* ─────────────── shop / product pages ─────────────── */

.page { display: flex; flex-direction: column; min-height: 100vh; }
.page main { flex: 1 0 auto; }

.pagehead {
  border-bottom: 1px solid var(--line-soft);
  background: var(--ink);
}
.pagehead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.pagehead__home img { display: block; width: auto; height: clamp(1.5rem, 3.5vw, 2.1rem); }
.pagehead__nav {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pagehead__nav a { color: var(--ash); text-decoration: none; transition: color 0.25s var(--ease); }
.pagehead__nav a:hover,
.pagehead__nav a[aria-current] { color: var(--bone); }

.shop--page { background: var(--ink); border-top: 0; }
.shop--page .section-title { margin-bottom: 1rem; }

.crumb {
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.crumb a { color: var(--ash); text-decoration: none; transition: color 0.25s var(--ease); }
.crumb a:hover { color: var(--bone); }

.product { padding: clamp(2rem, 5vw, 3.5rem) 0 var(--sect); }
.product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .product__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
}

.product__stage {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
}
.product__stage img { display: block; width: 100%; height: 100%; object-fit: contain; }

.product__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}
.product__thumb {
  width: clamp(3.5rem, 7vw, 4.75rem);
  aspect-ratio: 1 / 1;
  padding: 0;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), opacity 0.25s var(--ease);
  opacity: 0.65;
}
.product__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product__thumb:hover { opacity: 1; }
.product__thumb.is-on { border-color: var(--bone); opacity: 1; }

.product__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 3.1rem);
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0 0 0.6rem;
}
.product__price {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  color: var(--bone);
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
}

.product__option { margin: 0 0 clamp(1.25rem, 3vw, 1.75rem); }
.product__option-label {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}
.product__option-label b { color: var(--bone); font-weight: 400; }

.product__swatches, .product__sizes { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.product__swatch {
  /* 44px, because a colour chip is a touch target before it is a decoration */
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  background: var(--swatch);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 2px var(--ink-2);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.product__swatch:hover { border-color: var(--ash); }
.product__swatch.is-on { border-color: var(--bone); box-shadow: inset 0 0 0 2px var(--ink-2), 0 0 0 1px var(--bone); }

.product__size {
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.85rem;
  cursor: pointer;
  background: var(--ink-3);
  color: var(--bone);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.product__size:hover:not(:disabled) { border-color: var(--ash); }
.product__size.is-on { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.product__size:disabled {
  cursor: not-allowed;
  opacity: 0.32;
  /* struck through, so "sold out in this colour" is not carried by opacity
     alone — the same information without relying on colour or contrast */
  text-decoration: line-through;
}

.product__add { width: 100%; margin-top: 0.5rem; }
.product__add:disabled { opacity: 0.45; cursor: not-allowed; }

.product__note {
  margin: 0.9rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
}

.product__desc {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 2rem);
  border-top: 1px solid var(--line-soft);
  color: var(--ash);
  max-width: 60ch;
}
.product__desc p { margin: 0 0 1rem; line-height: 1.7; }
.product__features {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.product__features li {
  position: relative;
  padding-left: 1.1rem;
  line-height: 1.55;
}
.product__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.4rem;
  height: 1px;
  background: var(--red-hot);
}

.product__spec {
  display: grid;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
.product__spec > div { display: flex; gap: 0.75rem; }
.product__spec dt { color: var(--ash); text-transform: uppercase; min-width: 5rem; }
.product__spec dd { margin: 0; color: var(--bone); }

.pagefoot {
  border-top: 1px solid var(--line-soft);
  padding: 2rem 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
}
.pagefoot__inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.pagefoot p { margin: 0; }
.pagefoot a { color: var(--ash); text-decoration: none; transition: color 0.25s var(--ease); }
.pagefoot a:hover { color: var(--bone); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────── cart ─────────────── */

.cart__toggle {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
  border-radius: 999px;
  padding: 0.7rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.cart__toggle:hover { background: var(--red-hot); border-color: var(--red-hot); }
.cart__count {
  min-width: 1.4em;
  padding: 0.1em 0.4em;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  text-align: center;
}

.cart {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
  background: rgba(10, 11, 13, 0.6);
}
.cart__panel {
  width: min(420px, 100%);
  height: 100%;
  background: var(--ink-2);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 1.5rem clamp(1.25rem, 4vw, 2rem);
  overflow-y: auto;
}
.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.cart__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  margin: 0;
}
.cart__close {
  background: none;
  border: none;
  color: var(--bone);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.cart__items {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cart__empty {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ash);
}
.cart__item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.cart__item-name { grid-column: 1 / -1; text-transform: uppercase; letter-spacing: 0.04em; }
.cart__item-qty { display: inline-flex; align-items: center; gap: 0.4rem; }
.cart__item-qty button {
  width: 1.6rem;
  height: 1.6rem;
  background: var(--ink-3);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.cart__item-remove {
  background: none;
  border: none;
  color: var(--ash);
  font-size: 1.1rem;
  cursor: pointer;
}
.cart__foot {
  border-top: 1px solid var(--line-soft);
  padding-top: 1rem;
  margin-top: 1rem;
}
.cart__total {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.85rem;
}
.cart__checkout { width: 100%; }
.cart__checkout:disabled { opacity: 0.5; cursor: not-allowed; }
.cart__note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ash);
  margin: 0.6rem 0 0;
  min-height: 1em;
}

/* ─────────────── footer ─────────────── */

.footer {
  background: var(--ink-2);
  border-top: 1px solid var(--line-soft);
  padding-top: clamp(3.5rem, 8vw, 6rem);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.footer__title { font-size: clamp(2.25rem, 6vw, 3.5rem); margin: 0 0 0.75rem; }
.footer__blurb {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0;
}

.footer__h {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 1.1rem;
}

.signup__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 0.5rem;
}
.signup__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.signup__input {
  flex: 1 1 12rem;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--bone);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.2s var(--ease);
}
.signup__input::placeholder { color: rgba(142,149,156,0.6); }
.signup__input:focus { border-color: var(--bone); outline-offset: 1px; }
.signup__note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  color: rgba(142,149,156,0.8);
  margin: 0.75rem 0 0;
}
.signup__note[data-state="ok"] { color: var(--red-hot); }

.social { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.social a {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--line);
  color: var(--bone);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease);
}
.social a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.social svg { width: 19px; height: 19px; fill: currentColor; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line-soft);
  padding-block: 1.5rem;
}
.footer__bar p {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0;
}
.footer__tag { color: var(--rust) !important; }

/* ─────────────── scroll reveal ─────────────── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ─────────────── reduced motion ─────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__cue-line { animation: none; opacity: 0.8; }
}