/* Colter Crowe. Page styles on top of the scrollcraft floor.
   Locked tokens from the brand moodboard. Nothing in here restyles a
   [data-sc-*] mechanism; it only themes and composes. */

:root {
  --bg: #150D08;          /* Midnight Smoke  */
  --surface: #2A1A11;     /* Saddle Leather  */
  --text: #F4E8CF;        /* Coldwater Cream */
  --muted: #B39C86;       /* Dust Road       */
  --accent: #EF944E;      /* Golden Hour     */
  --accent-2: #F0564A;    /* Neon Lone Star  */
  --neon: #C0281E;        /* glow and large decoration only, never body text */
  --line: #3D2A1E;

  --sc-canvas: var(--bg);
  --sc-surface: var(--surface);
  --sc-ink: var(--text);
  --sc-ink-soft: var(--muted);
  --sc-accent: var(--accent);
  --sc-accent-ink: var(--bg);
  --sc-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sc-font-text: "Rubik", system-ui, sans-serif;
  --sc-shadow-color: 22 45% 3%;

  --leak: 239 148 78;            /* written by site.js: amber at sundown, neon red at the bar */
  --film-w: 0px;                 /* desktop: the width of the fixed film column */
  --gutter: clamp(16px, 4vw, 56px);
  --road: 46svh;                 /* open road between signs on a phone */
  --r: 8px;
  --hp: 0;                       /* hero progress, written by site.js */
}

@media (min-width: 900px) and (orientation: landscape) {
  :root {
    --film-w: min(calc(100svh * 9 / 16), 44vw);
    --road: clamp(4.5rem, 13vh, 8.5rem);
  }
}

html { background: var(--bg); scroll-padding-top: 76px; }
body {
  background: var(--bg);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  letter-spacing: 0.002em;
}
img { height: auto; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--accent); }
button { cursor: pointer; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--accent); color: var(--bg); font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
  transition: transform 160ms var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

/* ---------------------------------------------------------------- type -- */
.display {
  font-family: var(--sc-font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.display--lg { font-size: clamp(2.6rem, 1.9rem + 3.2vw, 4.6rem); }
.display--md { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
.eyebrow {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.98rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}
.subhead {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 16px;
}
.subhead::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lede { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.3rem); line-height: 1.55; max-width: 34rem; text-wrap: pretty; }
.meta { font-size: 0.92rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sc-font-text); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-2); border: 1px solid currentColor;
  border-radius: 999px; padding: 3px 10px; line-height: 1.4; white-space: nowrap;
}
.tag--hot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.tag--quiet { color: var(--muted); }

.textlink {
  color: var(--accent); font-weight: 500; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.24em;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 140ms var(--sc-ease-out);
}
.textlink svg { width: 0.95em; height: 0.95em; }
@media (hover: hover) and (pointer: fine) { .textlink:hover { color: var(--text); } }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out),
              border-color 150ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn--primary { background: var(--accent); color: var(--bg); }
.btn--ghost { border: 1.5px solid var(--text); color: var(--text); background: rgb(21 13 8 / 0.35); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 1.02rem; }
.btn:active { transform: scale(0.97); }
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--text); }
  .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
}

.listen { display: flex; flex-wrap: wrap; gap: 10px; }

/* ================================================================ DRIVE == */
.drive {
  position: fixed; left: 0; top: 0; z-index: 0;
  width: 100%; height: 100lvh;
  overflow: hidden; background: var(--bg);
}
.drive__legs, .leg { position: absolute; inset: 0; }
.leg { opacity: 0; visibility: hidden; }
.leg:first-child { opacity: 1; visibility: visible; }
.leg__poster, .leg video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; object-fit: cover; object-position: 50% 30%;
}
.leg__poster { transform-origin: 50% 40%; }
.leg video { opacity: 0; }
.leg.has-clip video { opacity: 1; }

/* One light leak, one corner, in the palette: Golden Hour by day,
   Neon Lone Star by night. site.js moves --leak along the drive. */
.drive__leak {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(60% 42% at 100% 0%, rgb(var(--leak) / 0.42), rgb(var(--leak) / 0) 72%);
}
/* A whisper of shade at the top so the dash reads over bright sky. */
.drive__floor {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(21 13 8 / 0.55) 0%, rgb(21 13 8 / 0) 16%);
}
.drive__clock { display: none; }

@media (min-width: 900px) and (orientation: landscape) {
  .drive {
    width: var(--film-w); height: 100svh;
    box-shadow: 1px 0 0 var(--line), 24px 0 60px -20px rgb(0 0 0 / 0.6);
  }
  .drive__floor { background: linear-gradient(0deg, rgb(21 13 8 / 0.7) 0%, rgb(21 13 8 / 0) 22%); }
  .drive__clock {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; left: 20px; bottom: 18px;
    font-family: var(--sc-font-display); text-transform: uppercase; line-height: 1.1;
  }
  .clock__place { font-weight: 600; font-size: 0.85rem; letter-spacing: 0.3em; color: var(--muted); }
  .clock__time { font-weight: 700; font-size: 1.6rem; letter-spacing: 0.06em; color: var(--text); font-variant-numeric: tabular-nums; }
}

/* The film's light on the page beside it. Six tiny frames the browser blurs
   by scaling them up; site.js crossfades them with the legs. */
.ambient { display: none; }
@media (min-width: 900px) and (orientation: landscape) {
  .ambient {
    display: block; position: fixed; z-index: 0; top: 0; bottom: 0;
    left: var(--film-w); right: 0; opacity: 0.34; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 0.55) 35%, transparent 80%);
            mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 0.55) 35%, transparent 80%);
  }
  .ambient img {
    position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none;
    object-fit: cover; opacity: 0;
  }
  .ambient img:first-child { opacity: 1; }
}

/* Sunset light bleeding out of the film into the room. Desktop only. Anchored
   on the film's right edge at sun height, colored by the drive clock's --leak
   (Golden Hour amber by day, Neon Lone Star red at the bar), gone well before
   the right edge of the screen. Two soft gradients, no hard edges. */
.glow { display: none; }
@media (min-width: 900px) and (orientation: landscape) {
  .glow {
    display: block; position: fixed; z-index: 1; top: 0; bottom: 0;
    left: var(--film-w); right: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 80% 72% at 0% 42%,
        rgb(var(--leak) / 0.3) 0%, rgb(var(--leak) / 0.17) 34%, rgb(var(--leak) / 0.065) 60%, rgb(var(--leak) / 0) 84%),
      linear-gradient(90deg, rgb(var(--leak) / 0.1) 0%, rgb(var(--leak) / 0.04) 40%, rgb(var(--leak) / 0) 66%);
  }
}

.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: url("assets/brand/grain.webp") 0 0 / 320px 320px;
  mix-blend-mode: overlay; opacity: 0.16;
}

main { position: relative; z-index: 2; margin-left: var(--film-w); }

/* ================================================================= DASH == */
.dash {
  position: fixed; z-index: 60; top: 0; left: var(--film-w); right: 0;
  display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) var(--gutter) 10px;
  background: rgb(21 13 8 / 0.9);
  border-bottom: 1px solid var(--line);
  transition: background-color 240ms var(--sc-ease-out), border-color 240ms var(--sc-ease-out);
}
.dash.is-hero { background: rgb(21 13 8 / 0); border-color: transparent; }
.dash__mark { flex: none; display: block; transition: opacity 240ms var(--sc-ease-out); border-radius: 4px; }
.dash__mark img { height: 34px; width: auto; }
.dash.is-hero .dash__mark { opacity: 0; pointer-events: none; }
.dash__clock {
  display: flex; flex-direction: column; line-height: 1.05; margin-right: auto;
  font-family: var(--sc-font-display); text-transform: uppercase;
}
.dash__clock [data-place] { font-weight: 600; font-size: 0.68rem; letter-spacing: 0.28em; color: var(--muted); }
.dash__clock [data-time] { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.dash.is-hero .dash__clock { opacity: 0; }
.dash__nav { position: relative; }
.dash__menu {
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid rgb(244 232 207 / 0.7); background: rgb(21 13 8 / 0.4); color: var(--text);
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.dash__exits {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 13rem; padding: 8px;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--sc-e3), var(--sc-edge);
  display: none;
}
.dash__nav.is-open .dash__exits { display: block; }
.dash__exits a {
  display: block; padding: 10px 14px; border-radius: 6px;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1.2rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); text-decoration: none;
}
.dash__exits a[aria-current="true"] { color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .dash__exits a:hover { background: rgb(244 232 207 / 0.06); color: var(--accent); } }

@media (max-width: 359px) { .dash__clock { display: none; } .dash__menu { margin-left: auto; } }

@media (min-width: 900px) and (orientation: landscape) {
  .dash__clock { display: none; }
  .dash__nav { margin-left: auto; }
  /* Desktop: clear over the hero, solid once the hero's copy reaches it.
     site.js writes --dash-a (0 to 1) from scroll, so the fade is continuous
     and headings never pass behind transparent links. */
  .dash, .dash.is-hero {
    --a: var(--dash-a, 1);
    background: rgb(21 13 8 / calc(0.9 * var(--a)));
    -webkit-backdrop-filter: blur(calc(12px * var(--a))); backdrop-filter: blur(calc(12px * var(--a)));
    border-bottom: 1px solid rgb(42 26 17 / var(--a));
    transition: none;
  }
  .dash .dash__mark, .dash.is-hero .dash__mark { opacity: var(--a); pointer-events: auto; }
  /* Over the bare glow the links get a soft dark lift, so they stay readable
     before the bar fills in. */
  .dash__exits a { text-shadow: 0 1px 10px rgb(21 13 8 / calc(0.85 * (1 - var(--a)))); }
}
@media (min-width: 1260px) and (orientation: landscape) {
  .dash__menu { display: none; }
  .dash__exits {
    position: static; display: flex; gap: 2px; padding: 0; min-width: 0;
    background: none; box-shadow: none;
  }
  .dash__exits a { font-size: 1.05rem; padding: 8px 12px; }
}

/* ================================================================= HERO == */
.hero {
  position: relative; min-height: 100svh;
  display: grid; align-content: end; gap: 22px;
  padding: 96px 16px calc(28px + env(safe-area-inset-bottom));
  isolation: isolate;
}
/* Scrim only where the copy sits: a band under the bottom stack. */
.hero::before {
  /* Runs past the hero's bottom edge and feathers out there, so scrolling
     never shows a hard horizontal line across the film. */
  content: ""; position: absolute; inset: auto 0 -34svh 0; height: calc(72% + 34svh); z-index: -1;
  background: linear-gradient(0deg, rgb(21 13 8 / 0) 0%, rgb(21 13 8 / 0.95) 32%, rgb(21 13 8 / 0.9) 58%, rgb(21 13 8 / 0.62) 76%, rgb(21 13 8 / 0) 100%);
  pointer-events: none;
}
.hero__atmos {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.hero__atmos span { position: absolute; inset: -10%; mix-blend-mode: screen; will-change: transform; }
.hero__atmos span:first-child {
  background: radial-gradient(45% 30% at 88% 6%, rgb(var(--leak) / 0.55), rgb(var(--leak) / 0) 70%);
  transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--hp) * -12vh + var(--my, 0) * -10px), 0);
}
/* Low gold dust hanging over the gravel. */
.hero__atmos span:last-child {
  background: radial-gradient(70% 26% at 30% 62%, rgb(239 148 78 / 0.2), transparent 70%);
  transform: translate3d(calc(var(--mx, 0) * 22px), calc(var(--hp) * -20vh + var(--my, 0) * 14px), 0);
}
/* The mark recedes as the drive starts: it lags the page a little, shrinks
   and fades, so it reads as further away and never slides into the copy. */
.hero__mark-plane {
  transform: translate3d(0, calc(var(--hp) * 6vh), 0) scale(calc(1 - var(--hp) * 0.08));
  opacity: calc(1 - var(--hp) * 1.6);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
@media (min-width: 900px) and (orientation: landscape) {
  .hero__mark-plane {
    transform: translate3d(0, calc(var(--hp) * 9vh), 0) scale(calc(1 - var(--hp) * 0.06));
    opacity: calc(1 - var(--hp) * 1.3); transform-origin: 0 100%;
  }
}
.hero__mark img {
  width: min(78vw, 380px);
  filter: drop-shadow(0 6px 18px rgb(21 13 8 / 0.65));
}
.hero__sign { display: grid; gap: 14px; }
.hero__shade { display: none; }
.hero .tag { background: rgb(21 13 8 / 0.9); }
.hero__now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hero__title {
  font-family: var(--sc-font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 1.5rem + 2.6vw, 3.4rem); line-height: 0.95; letter-spacing: 0.01em;
}
/* Phone: Spotify takes the full row, the other two share the next. */
.listen--hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.listen--hero li:first-child { grid-column: 1 / -1; }
.listen--hero .btn { width: 100%; padding: 0 12px; }

@media (min-width: 900px) and (orientation: landscape) {
  .hero {
    align-content: center; gap: 28px;
    padding: 110px var(--gutter) 80px;
  }
  .hero::before { display: none; }
  /* On desktop the light comes from the film side (.glow), so the hero's own
     corner leak would be a second, competing sun. */
  .hero__atmos span:first-child { display: none; }
  /* A feathered shade sharing the copy's grid cell, so the sunset glow can
     spill around the copy without lifting the background behind it. */
  .hero__mark-plane { grid-area: 1 / 1; }
  .hero__sign { grid-area: 2 / 1; position: relative; }
  .hero__shade {
    display: block; grid-area: 2 / 1; z-index: -1; pointer-events: none;
    margin: -190px -140px -110px calc(var(--gutter) * -1 - 60px);
    background: radial-gradient(farthest-side, rgb(21 13 8 / 0.8), rgb(21 13 8 / 0.62) 55%, rgb(21 13 8 / 0.25) 82%, rgb(21 13 8 / 0));
  }
  /* The mark hangs over the edge of the film: the first overlap on the page. */
  .hero__mark-plane { margin-left: calc(var(--gutter) * -1 - var(--film-w) * 0.2); }
  .hero__mark img { width: clamp(340px, 34vw, 600px); }
  .hero__sign { max-width: 36rem; }
  .listen--hero { display: flex; }
  .listen--hero .btn { width: auto; padding: 0 18px; font-size: 1.05rem; }

  /* Two columns: mark and copy on the film side, the current sleeve on the
     right, centered on the stack. The sleeve is 480px where the screen
     allows and gives way down to 340px on a 1366 or 1440 wide screen, so
     the copy column never drops below ~434px. */
  .hero {
    --cover-w: clamp(340px, calc(100vw - var(--film-w) - var(--gutter) * 2 - 482px), 480px);
    grid-template-columns: minmax(0, 1fr) var(--cover-w);
    column-gap: 48px;
  }
  .hero__now { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero__title { font-size: clamp(2.4rem, 1.2rem + 1.9vw, 3.2rem); }
  .hero__cover {
    display: block; position: relative;
    grid-column: 2; grid-row: 1 / 3; align-self: center;
    width: var(--cover-w); border-radius: 4px;
    /* Its own depth rate: lags the page a touch as the drive starts. */
    transform: translate3d(0, calc(var(--hp) * 7vh), 0);
  }
  /* Warm light on the film side of the sleeve, fading out to its right. */
  .hero__cover::before {
    content: ""; position: absolute; inset: -22% -6% -22% -38%; z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side at 38% 50%,
      rgb(var(--leak) / 0.42), rgb(var(--leak) / 0.16) 58%, rgb(var(--leak) / 0));
  }
  .hero__cover-img {
    display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 4px;
    box-shadow:
      0 2px 4px rgb(10 6 3 / 0.45),
      0 26px 60px -14px rgb(10 6 3 / 0.8),
      -20px 0 54px -16px rgb(var(--leak) / 0.5);
    transition: transform 180ms var(--sc-ease-out), filter 180ms var(--sc-ease-out);
  }
}
.hero__cover { display: none; }
@media (min-width: 900px) and (orientation: landscape) { .hero__cover { display: block; } }
@media (min-width: 900px) and (orientation: landscape) and (hover: hover) and (pointer: fine) {
  .hero__cover:hover .hero__cover-img { transform: translateY(-3px); filter: brightness(1.05); }
}

/* ================================================================ SIGNS == */
.stop { padding-top: var(--road); }
.sign {
  position: relative; isolation: isolate;
  width: min(100% - 24px, 60rem); margin-inline: auto;
  padding: clamp(22px, 4.2vw, 52px);
  border-radius: 10px;
  background-color: rgb(42 26 17 / 0.96);
  background-image:
    radial-gradient(55% 40% at 0% 0%, rgb(var(--leak) / 0.1), transparent 70%),
    url("assets/brand/paper.webp");
  background-size: auto, 600px 600px;
  background-blend-mode: normal, soft-light;
  box-shadow: var(--sc-e3), var(--sc-edge);
}
/* The stitched edge from the moodboard's leather patch. */
.sign--plate::after {
  content: ""; position: absolute; inset: 9px; border-radius: 6px; pointer-events: none;
  border: 1.5px dashed rgb(244 232 207 / 0.16);
}
.sign--paper { background-color: rgb(46 30 20 / 0.97); background-size: auto, 420px 420px; }

/* Signs come up the road toward you: a short rise with a little tilt. */
@media (prefers-reduced-motion: no-preference) {
  .sign[data-sc-in] {
    transform: perspective(1400px) translate3d(0, 22px, 0) rotateX(5deg) scale(0.985);
    transform-origin: 50% 100%;
    transition: opacity 700ms var(--sc-ease-out), transform 900ms var(--sc-ease-out);
  }
  .sign[data-sc-in].sc-in { transform: none; }
}

/* Desktop: signs hang one gutter off the film (the same line the hero copy
   starts on) and run wider, so there is no dead band beside the film. */
@media (min-width: 900px) and (orientation: landscape) {
  .sign {
    width: min(100% - var(--gutter) * 2, 68rem);
    margin-left: var(--gutter); margin-right: auto;
  }
}

/* ---- latest release ---- */
.release { display: grid; gap: 24px; }
.release__cover { width: 100%; border-radius: 4px; box-shadow: var(--sc-e2); }
.release__copy .meta { font-size: 0.95rem; }
.release__copy > h2 { margin-top: 14px; }
.release__copy .listen { padding-top: 6px; }
.snaps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.snap { margin: 0; }
.snap__frame {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 4px;
  background: var(--bg); box-shadow: var(--sc-e2);
}
.snap__frame img, .snap__frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.snap__frame video { opacity: 0; transition: opacity 400ms var(--sc-ease-out); }
.snap__frame video.is-on { opacity: 1; }
.snap figcaption {
  margin-top: 8px; font-family: var(--sc-font-display); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  line-height: 1.3;
}
@media (min-width: 700px) {
  .release { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 48px); align-items: center; }
  .release .snaps { grid-column: 1 / -1; margin-top: 8px; }
}

/* ---- coming up: the letter board ---- */
.board {
  background: #0F0805;
  background-image: repeating-linear-gradient(180deg, rgb(244 232 207 / 0.035) 0 1px, transparent 1px 34px);
  background-size: auto;
  border: 10px solid #3A2416;
  box-shadow: var(--sc-e3), inset 0 0 0 1px rgb(0 0 0 / 0.6), inset 0 18px 40px rgb(0 0 0 / 0.5);
}
.board::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(70% 50% at 50% -10%, rgb(var(--leak) / 0.14), transparent 70%);
}
.board__head {
  font-family: var(--sc-font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); letter-spacing: 0.3em; color: var(--accent);
  text-align: center; margin-bottom: clamp(18px, 3vw, 30px);
}
.board__rows { display: grid; }
.board__row {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "date kind" "title title";
  gap: 2px 16px; padding: 14px 0; border-top: 1px solid rgb(244 232 207 / 0.08);
  font-family: var(--sc-font-display); text-transform: uppercase;
}
.board__row:last-child { border-bottom: 1px solid rgb(244 232 207 / 0.08); }
.board__date { grid-area: date; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.14em; color: var(--accent); font-variant-numeric: tabular-nums; }
.board__kind { grid-area: kind; justify-self: end; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.24em; color: var(--muted); align-self: center; }
.board__title { grid-area: title; font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: 0.04em; line-height: 1.02; text-wrap: balance; }
.board__foot { margin-top: 20px; text-align: center; color: var(--muted); font-size: 0.98rem; }
@media (min-width: 700px) {
  .board__row { grid-template-columns: 7.5rem 1fr auto; grid-template-areas: "date title kind"; align-items: baseline; padding: 16px 0; }
  .board__date { font-size: 1.15rem; }
}

/* ---- music ---- */
.singles { display: grid; gap: 28px; }
.single { display: grid; grid-template-columns: 96px 1fr; gap: 16px 18px; align-items: start; }
.single__cover { width: 96px; border-radius: 4px; box-shadow: var(--sc-e2); }
.single__body { display: grid; gap: 6px; }
.single__title { font-family: var(--sc-font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 0.95; letter-spacing: 0.01em; }
.single__blurb { color: var(--muted); }
.single .snaps { grid-column: 1 / -1; }
.snaps--small figcaption { font-size: 0.76rem; }
@media (min-width: 700px) {
  .single { grid-template-columns: 132px 1fr; }
  .single__cover { width: 132px; }
  .single .snaps { grid-column: 2; max-width: 30rem; }
}

.album {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  display: grid; gap: 22px;
  padding: clamp(18px, 3vw, 32px); border-radius: 6px;
  background: rgb(21 13 8 / 0.55); box-shadow: inset 0 1px 0 rgb(244 232 207 / 0.06);
}
.album__cover { width: 100%; max-width: 420px; border-radius: 3px; box-shadow: var(--sc-e3); }
.album__copy { display: grid; gap: 10px; align-content: start; }
.tracks { margin-top: 10px; display: grid; }
.track { border-top: 1px solid rgb(244 232 207 / 0.08); }
.track__btn {
  width: 100%; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  min-height: 46px; padding: 8px 4px; text-align: left;
  background: none; border: 0; color: var(--text);
  font-size: 1rem; border-radius: 4px;
  transition: color 140ms var(--sc-ease-out);
}
.track__no { font-family: var(--sc-font-display); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; min-width: 1.6rem; }
.track__name { flex: 1 1 0; min-width: 0; }
.track__btn { flex-wrap: nowrap; }
.track .tag { flex: none; font-size: 0.64rem; padding: 2px 8px; }
@media (hover: hover) and (pointer: fine) { button.track__btn:hover { color: var(--accent); } }
/* Phones collapse the album to four tracks behind "Full tracklist";
   desktop always shows all thirteen and never shows the toggle. */
@media (max-width: 899px), (orientation: portrait) {
  .tracks.is-collapsed .track--more { display: none; }
}
@media (min-width: 900px) and (orientation: landscape) {
  .tracks__toggle { display: none !important; }
}
/* A dated, not-yet-released track: same pill as Out now, muted cream. */
.tag--soon { color: var(--muted); }
.tracks__toggle {
  justify-self: start; margin-top: 6px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid rgb(244 232 207 / 0.6); background: transparent; color: var(--text);
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.tracks__toggle[hidden] { display: none; }
.tracks__toggle::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 160ms var(--sc-ease-out);
}
.tracks__toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.tracks__toggle:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .tracks__toggle:hover { border-color: var(--accent); color: var(--accent); } }
@media (min-width: 900px) {
  .album { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: start; column-gap: 32px; }
  /* The sleeve stays in view while the full tracklist scrolls past it. */
  .album__art { position: sticky; top: 96px; align-self: start; }
}

.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.works__item { display: grid; gap: 6px; justify-items: start; }
.works__cover { width: 100%; max-width: 220px; border-radius: 3px; filter: saturate(0.75) brightness(0.8); box-shadow: var(--sc-e2); }
.works__title { font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; line-height: 1; letter-spacing: 0.02em; }
.works__teaser { color: var(--muted); font-size: 0.95rem; line-height: 1.45; max-width: 22rem; text-wrap: pretty; }

/* ---- watch ---- */
.watch__head { display: grid; gap: 10px; margin-bottom: 22px; }
.clips {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 62vw, 250px);
  gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: clamp(22px, 4.2vw, 52px);
  margin-inline: calc(clamp(22px, 4.2vw, 52px) * -1);
  padding: 4px clamp(22px, 4.2vw, 52px) 14px;
  scrollbar-width: thin;
}
.clip { scroll-snap-align: start; display: grid; gap: 4px; align-content: start; }
/* Desktop: all four fit the panel as a grid. Phones keep the swipe rail,
   where the next card peeks in from the right edge. */
@media (min-width: 900px) and (orientation: landscape) {
  .clips {
    grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 20px);
    overflow: visible; scroll-snap-type: none;
    margin-inline: 0; padding: 4px 0 0;
  }
}
.clip__frame { position: relative; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; background: var(--bg); box-shadow: var(--sc-e2); }
.clip__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 68px; height: 68px; border-radius: 50%; border: 0;
  display: grid; place-items: center;
  background: var(--accent); color: var(--bg);
  box-shadow: 0 8px 24px rgb(21 13 8 / 0.55);
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.clip__play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.clip__play:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .clip__play:hover { background: var(--text); } }
.clip.is-playing .clip__play { display: none; }
.clip__title { margin-top: 8px; font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.04em; line-height: 1.1; }
.watch__more { margin-top: 18px; color: var(--muted); }

/* ---- coldwater ridge ---- */
.ridge__top { display: grid; gap: 24px; }
.ridge__mark img { width: min(100%, 360px); }
.ridge__photo { margin: 0; }
.ridge__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 4px; box-shadow: var(--sc-e2); }
.ridge__town { display: grid; gap: 20px; align-content: start; }
.places { display: grid; gap: 12px; }
.places li { display: grid; gap: 2px; }
.places__name { font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase; font-size: 1.2rem; letter-spacing: 0.06em; color: var(--accent); line-height: 1.15; }
.places li > span:last-child { color: var(--muted); }
/* Cards sit at the top of their row and never stretch, so the name to line
   gap is the same on every card whatever its neighbor's length. */
.cast { display: grid; align-items: start; }
.cast li { display: grid; align-content: start; gap: 4px; padding: 14px 0; border-top: 1px solid rgb(244 232 207 / 0.08); }
.cast__name { font-family: var(--sc-font-display); font-weight: 800; text-transform: uppercase; font-size: 1.55rem; line-height: 1; letter-spacing: 0.02em; }
.cast__line { color: var(--muted); }
.danny {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); padding-top: 22px;
  border-top: 1px solid rgb(244 232 207 / 0.08);
  text-align: center; font-family: var(--sc-font-display); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
}
@media (min-width: 900px) {
  .ridge__top { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); grid-template-areas: "mark photo" "town photo"; column-gap: 36px; }
  .ridge__mark { grid-area: mark; }
  .ridge__photo { grid-area: photo; }
  .ridge__photo img { aspect-ratio: 9 / 14; }
  .ridge__town { grid-area: town; }
  .cast { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}

/* ---- story ---- */
.story { display: grid; gap: 24px; }
.story__clip { width: min(62%, 240px); }
.story__copy p:not(.aside) { max-width: 36rem; text-wrap: pretty; }
.story .aside {
  margin-top: 26px; padding-top: 16px; max-width: 36rem;
  border-top: 1px solid rgb(244 232 207 / 0.1);
  font-size: 0.92rem; color: var(--muted);
}
@media (min-width: 760px) {
  .story { grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 48px); align-items: start; }
  .story__clip { width: 100%; position: sticky; top: 96px; }
}

/* ---- lyrics ---- */
.lyric-list { margin-top: 22px; display: grid; }
.lyric-list li { border-top: 1px solid rgb(244 232 207 / 0.08); }
.lyric-link {
  width: 100%; display: grid; gap: 2px; padding: 14px 4px; text-align: left;
  background: none; border: 0; color: var(--text); border-radius: 4px;
  transition: color 140ms var(--sc-ease-out);
}
.lyric-link__title { font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; letter-spacing: 0.03em; line-height: 1.08; }
.lyric-link__from { font-size: 0.86rem; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .lyric-link:hover { color: var(--accent); } }
@media (min-width: 900px) { .lyric-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }

/* =========================================================== OPEN ROAD == */
.road { height: calc(var(--road) * 1.6); }
@media (min-width: 900px) and (orientation: landscape) { .road { height: 38vh; } }

/* ============================================================== THE BAR == */
.bar {
  position: relative; min-height: 100svh;
  display: grid; align-content: space-between; gap: 32px;
  padding: 76px 0 calc(12px + env(safe-area-inset-bottom));
}
@media (max-width: 899px), (orientation: portrait) {
  .bar { overflow-x: clip; gap: 20px; }   /* the light spill is wider than a phone */
  .bar__plate { gap: 18px; }
  .bar__line { font-size: 1.75rem; }
  .bar__sub, .credits { font-size: 0.9rem; }
  .bar__cols { gap: 16px; }
  .bar__cols .eyebrow { margin-bottom: 8px; }
  .socials { gap: 8px; }
  .social { padding: 0 12px; font-size: 0.92rem; gap: 6px; }
  .platforms { gap: 0 16px; }
  .platforms a { padding: 6px 0; }
}
.neon { position: relative; width: min(66vw, 460px); margin-inline: auto; }
.neon__tube {
  position: relative; z-index: 1; width: 100%;
  filter: brightness(0.32) saturate(0.55);
  opacity: 0.9;
}
.neon__spill {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 190%; height: 260%; translate: -50% -42%;
  background: radial-gradient(closest-side, rgb(192 40 30 / 0.5), rgb(192 40 30 / 0.16) 55%, transparent 100%);
  mix-blend-mode: screen; opacity: 0; pointer-events: none;
}
.neon.is-lit .neon__tube {
  filter: brightness(1.12) saturate(1.1)
          drop-shadow(0 0 1.5px #FFD2C8)
          drop-shadow(0 0 7px #E2382A)
          drop-shadow(0 0 24px rgb(192 40 30 / 0.85));
  opacity: 1;
}
.neon.is-lit .neon__spill { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .neon.is-lit .neon__tube, .neon.is-lit .neon__spill {
    animation: neon-catch 1.7s steps(1, end) both, neon-buzz 6.5s 1.7s infinite;
  }
}
/* Strike, sputter, catch. Stepped, because a neon tube does not ease. */
@keyframes neon-catch {
  0%   { opacity: 0.15; }
  6%   { opacity: 1; }
  10%  { opacity: 0.2; }
  22%  { opacity: 0.95; }
  26%  { opacity: 0.3; }
  31%  { opacity: 1; }
  48%  { opacity: 0.55; }
  52%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes neon-buzz {
  0%, 61%, 63.5%, 66%, 100% { opacity: 1; }
  62%   { opacity: 0.72; }
  64.5% { opacity: 0.86; }
}
.bar__plate { display: grid; gap: 26px; }
.bar__line {
  font-family: var(--sc-font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.8rem); line-height: 0.98; letter-spacing: 0.01em;
  text-wrap: balance; max-width: 22ch;
}
.bar__lines { display: grid; gap: 10px; }
.bar__sub { color: var(--muted); }
.bar__cols { display: grid; gap: 24px; }
.bar__cols .eyebrow { margin-bottom: 12px; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.social {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid rgb(244 232 207 / 0.5); color: var(--text); text-decoration: none;
  font-weight: 500;
  transition: border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.social svg { width: 18px; height: 18px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .social:hover { border-color: var(--accent); color: var(--accent); } }
.platforms { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.platforms a { display: inline-block; padding: 8px 0; color: var(--text); text-decoration: underline; text-decoration-color: rgb(244 232 207 / 0.3); text-underline-offset: 0.3em; }
@media (hover: hover) and (pointer: fine) { .platforms a:hover { color: var(--accent); text-decoration-color: currentColor; } }
.credits { color: var(--muted); font-size: 0.95rem; }
.credits strong { color: var(--text); font-weight: 500; }
.fine { color: var(--muted); font-size: 0.82rem; }
@media (min-width: 700px) { .bar__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) and (orientation: landscape) {
  .bar { padding-top: 120px; align-content: space-between; }
  /* The bookend to the hero: the lit sign hangs over the film's edge too. */
  .neon { width: clamp(340px, 32vw, 520px); margin-left: calc(var(--film-w) * -0.18); }
}

/* ======================================================== LYRICS SHEET == */
.lyrics-sheet {
  width: min(100% - 24px, 40rem); max-height: min(86svh, 56rem);
  padding: 0; border: 0; border-radius: 10px;
  background: var(--surface) url("assets/brand/paper.webp") 0 0 / 420px 420px;
  background-blend-mode: soft-light;
  color: var(--text); box-shadow: var(--sc-e3);
}
.lyrics-sheet::backdrop { background: rgb(12 7 4 / 0.82); }
.lyrics-sheet__inner { display: grid; grid-template-rows: auto 1fr; max-height: inherit; }
.lyrics-sheet__head {
  display: flex; align-items: start; justify-content: space-between; gap: 16px;
  padding: 24px 24px 16px; border-bottom: 1px solid var(--line);
}
.lyrics-sheet__head .meta { margin-bottom: 8px; }
.lyrics-sheet__close {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid rgb(244 232 207 / 0.6); background: transparent; color: var(--text);
  font-family: var(--sc-font-display); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.lyrics-sheet__body { overflow-y: auto; padding: 20px 24px 32px; font-size: 1.08rem; line-height: 1.7; }
.lyrics-sheet__body .stanza + .stanza { margin-top: 1.2em; }
.lyrics-sheet__body .soon { color: var(--muted); }

/* ======================================================= REDUCED MOTION == */
@media (prefers-reduced-motion: reduce) {
  .hero__mark-plane, .hero__atmos span, .hero__cover { transform: none !important; }
  .leg__poster { transform: none !important; }
}