/* ==========================================================================
   MAGIC HOUR — the motion layer.
   Loads AFTER site.css. Uses its tokens, adds nothing to the palette.
   Everything here is transform + opacity + clip-path. Nothing animates
   layout, nothing animates colour, nothing repaints on scroll.
   ========================================================================== */

:root {
  --mh-ease:      cubic-bezier(0.22, 1, 0.36, 1);      /* out-expo-ish     */
  --mh-ease-io:   cubic-bezier(0.76, 0, 0.24, 1);      /* in-out           */
  --mh-slow:      1100ms;
  --mh-med:        620ms;
  --mh-fast:       280ms;
  /* the hero begins BELOW a 60px sticky nav; a full 100svh here puts its
     foot, and the CTA row, 60px past the fold */
  --mh-hero-h:    calc(100svh - 60px);
}

/* --------------------------------------------------------------------------
   0 · SCROLLBAR — gold, thin, part of the object
   -------------------------------------------------------------------------- */
@supports (scrollbar-color: gold black) {
  html { scrollbar-color: var(--c-gold-deep) var(--c-field); scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0E0906; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-gold) 0%, var(--c-gold-deep) 100%);
  border-radius: 99px; border: 3px solid #0E0906;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-gold); }

/* --------------------------------------------------------------------------
   1 · CURSOR — a grain of light, and the ring it falls through.
   Pointer-fine only. Never on touch, never under reduced-motion.
   -------------------------------------------------------------------------- */
.cur { display: none; }

@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }

  .cur {
    display: block; position: fixed; top: 0; left: 0; z-index: 9999;
    pointer-events: none; will-change: transform;
  }
  .cur__dot {
    width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
    background: var(--c-gold);
    box-shadow: 0 0 12px 2px rgba(233,178,76,.55);
    transition: opacity var(--mh-fast) linear;
  }
  .cur__ring {
    width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
    border: 1px solid rgba(233,178,76,.55);
    transition: width var(--mh-med) var(--mh-ease),
                height var(--mh-med) var(--mh-ease),
                margin var(--mh-med) var(--mh-ease),
                border-color var(--mh-med) var(--mh-ease),
                opacity var(--mh-fast) linear;
  }
  html[data-cur="link"] .cur__ring {
    width: 74px; height: 74px; margin: -37px 0 0 -37px;
    border-color: var(--c-gold);
  }
  html[data-cur="link"] .cur__dot { opacity: 0; }
  html[data-cur="hidden"] .cur { opacity: 0; }
}

/* --------------------------------------------------------------------------
   2 · THE STAR — the compass mark from inside the O of HOUR on the cover.
   Traced from the artwork. It is the only ornament on this page.
   -------------------------------------------------------------------------- */
.star { display: block; width: 1em; height: 1em; fill: currentColor; }

.rule-star {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--c-gold);
  padding-block: var(--s-5);
}
.rule-star::before, .rule-star::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--c-line) 22%, var(--c-line) 78%, transparent);
  transform-origin: center;
  transition: transform var(--mh-slow) var(--mh-ease);
}
.rule-star .star {
  width: 22px; height: 22px; flex: 0 0 22px;
  transition: opacity var(--mh-med) var(--mh-ease) 180ms,
              transform var(--mh-slow) var(--mh-ease) 120ms;
}
.js-anim .rule-star::before, .js-anim .rule-star::after { transform: scaleX(0); }
.js-anim .rule-star .star { opacity: 0; transform: rotate(-90deg) scale(.4); }
.js-anim .rule-star.is-in::before, .js-anim .rule-star.is-in::after { transform: scaleX(1); }
.js-anim .rule-star.is-in .star { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   3 · REVEALS — a wipe, not a fade-up.
   Only section headings, tracklist rows and the two cover plates get one.
   Body copy is never withheld from the reader.
   -------------------------------------------------------------------------- */
/* The hidden state is applied ONLY when JS has confirmed it is running and
   can undo it. Without `js-anim` on <html> nothing is ever withheld, so a
   blocked script, a dead IntersectionObserver or a hostile extension can
   never leave a visitor staring at an empty page. */
.js-anim .rv {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transform: translateY(14px);
  transition: clip-path var(--mh-slow) var(--mh-ease),
              opacity var(--mh-med) linear,
              transform var(--mh-slow) var(--mh-ease);
}
.js-anim .rv.is-in { clip-path: inset(0 0 -12% 0); opacity: 1; transform: none; }
.rv-1 { transition-delay: 70ms; }
.rv-2 { transition-delay: 140ms; }
.rv-3 { transition-delay: 210ms; }

/* --------------------------------------------------------------------------
   4 · HERO — six real layers, each on its own parallax rate.
   Depth is written as --d (0 = furthest, 1 = closest); JS multiplies scroll
   by it. One rAF loop drives every layer.
   -------------------------------------------------------------------------- */
.mh-hero {
  position: relative;
  min-height: var(--mh-hero-h);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.mh-stage { position: absolute; inset: -8% -4%; z-index: 0; pointer-events: none; }

.mh-layer {
  position: absolute; inset: 0;
  will-change: transform;
  transform: translate3d(0, var(--y, 0px), 0) scale(var(--s, 1));
}
/* The <picture> wrapper must be stretched too. Left at its default the img's
   height:100% resolves against an auto-height box, the picture collapses to
   the file's own aspect ratio, and the plate stops short of the hero with a
   hard horizontal edge across the page. */
.mh-layer picture { display: block; width: 100%; height: 100%; }
.mh-layer img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* far — the panelled room, blurred, almost still */
.mh-layer--room { --d: 0.06; opacity: .55; }
/* the photograph itself */
.mh-layer--figure { --d: 0.16; }
.mh-layer--figure img { object-position: 62% 26%; }
/* the light that sits over her, so the type has a field */
.mh-layer--wash {
  --d: 0.10;
  background:
    radial-gradient(120% 90% at 78% 16%, rgba(255,196,110,.30) 0%, rgba(255,150,50,.10) 34%, transparent 62%),
    linear-gradient(100deg, rgba(11,7,5,.94) 0%, rgba(11,7,5,.80) 34%, rgba(11,7,5,.34) 62%, rgba(11,7,5,.55) 100%);
}
@media (max-width: 899px) {
  .mh-layer--wash {
    background:
      radial-gradient(120% 70% at 70% 12%, rgba(255,196,110,.26) 0%, transparent 58%),
      linear-gradient(178deg, rgba(11,7,5,.60) 0%, rgba(11,7,5,.82) 46%, rgba(11,7,5,.98) 100%);
  }
  .mh-layer--figure img { object-position: 50% 12%; }
}

/* Smoke plates — real smoke off the shoot.
   Two transforms are needed on each plate and one element can only carry one,
   so the wrapper takes the scroll parallax and the image inside takes the
   drift. Without the split the drift keyframes silently win and the plates
   sit still while everything else moves. */
.mh-smoke {
  position: absolute; opacity: 0; mix-blend-mode: screen;
  transform: translate3d(0, var(--y, 0px), 0);
  will-change: transform;
  transition: opacity 2.4s linear;
}
.mh-smoke img { width: 100%; height: auto; display: block; will-change: transform; }
/* Plates b and c are desktop-only: on a phone they add 140 KB and land
   mostly off-canvas. The <picture> serves a 1x1 transparent GIF under 900px
   so the real file is never fetched, rather than merely hidden. */
.mh-smoke--a { --d: 0.30; left: -14%; top: -18%; width: 62%; }
@media (max-width: 899px) { .mh-smoke--b, .mh-smoke--c { display: none; } }
.mh-smoke--b { --d: 0.46; right: -18%; top: -8%;  width: 54%; }
.mh-smoke--c { --d: 0.62; left: 22%;  bottom: -30%; width: 78%; }

.is-lit .mh-smoke--a { opacity: .42; }
.is-lit .mh-smoke--b { opacity: .32; }
.is-lit .mh-smoke--c { opacity: .24; }
.is-lit .mh-smoke--a img { animation: drift-a 34s ease-in-out infinite alternate; }
.is-lit .mh-smoke--b img { animation: drift-b 41s ease-in-out infinite alternate; }
.is-lit .mh-smoke--c img { animation: drift-c 29s ease-in-out infinite alternate; }

@keyframes drift-a { from { transform: translate3d(0,0,0) scale(1);      } to { transform: translate3d(5%, -3%, 0) scale(1.12); } }
@keyframes drift-b { from { transform: translate3d(0,0,0) scale(1.06);   } to { transform: translate3d(-6%, 4%, 0) scale(1);    } }
@keyframes drift-c { from { transform: translate3d(0,0,0) scale(1);      } to { transform: translate3d(4%, -5%, 0) scale(1.15); } }

/* motes — one canvas, ~44 grains of light */
.mh-motes { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 2s linear; }
.is-lit .mh-motes { opacity: 1; }

/* the relic — the hourglass, cut from the cover, floating free */
.mh-relic {
  position: absolute; z-index: 3;
  right: 6vw; top: 16vh; width: clamp(96px, 12vw, 190px);
  will-change: transform;
  transform: translate3d(0, var(--y, 0px), 0);
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.6));
}
.mh-relic img { width: 100%; animation: bob 9s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translate3d(0,-8px,0) rotate(-1.4deg); } to { transform: translate3d(0,10px,0) rotate(1.4deg); } }
@media (max-width: 899px) { .mh-relic { right: 4vw; top: 11vh; width: 84px; } }

/* On the pre-save block the relic stands alone, centred, in normal flow.
   It carries NO scroll parallax: page-scroll offsets are absolute, so an
   in-flow element would be dragged straight across the copy below it.
   Its only movement is the bob, which is self-contained. */
.mh-relic--solo {
  position: relative; right: auto; top: auto;
  transform: none;
  width: clamp(88px, 11vw, 132px);
  margin: 0 auto var(--s-4);
}
@media (max-width: 899px) { .mh-relic--solo { width: 78px; right: auto; top: auto; } }

/* the copy sits above all of it */
.mh-hero__inner { position: relative; z-index: 4; width: 100%; padding-block: var(--s-5) var(--s-5); }

/* --------------------------------------------------------------------------
   5 · THE TITLE — set in a mask, rises once, out of focus into focus.
   -------------------------------------------------------------------------- */
.mh-title { margin-block: var(--s-2) var(--s-3); }
.mh-title .mask { display: block; overflow: hidden; padding-block: 0.02em; }
.js-anim .mh-title .mask > span {
  display: block;
  transform: translateY(112%);
  filter: blur(10px);
  opacity: 0;
  transition: transform 1250ms var(--mh-ease),
              filter 900ms var(--mh-ease),
              opacity 700ms linear;
}
.is-lit .mh-title .mask > span { transform: none; filter: none; opacity: 1; }
.is-lit .mh-title .mask:nth-child(2) > span { transition-delay: 110ms; }

.js-anim .mh-up {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--mh-med) linear, transform var(--mh-slow) var(--mh-ease);
}
.is-lit .mh-up { opacity: 1; transform: none; }
.is-lit .mh-up--1 { transition-delay: 280ms; }
.is-lit .mh-up--2 { transition-delay: 380ms; }
.is-lit .mh-up--3 { transition-delay: 480ms; }
.is-lit .mh-up--4 { transition-delay: 580ms; }

/* --------------------------------------------------------------------------
   6 · COUNTDOWN — digits roll when they change
   -------------------------------------------------------------------------- */
.countdown__n { position: relative; overflow: hidden; display: inline-block; min-width: 2ch; }
.countdown__n.is-roll { animation: roll 460ms var(--mh-ease); }
@keyframes roll {
  0%   { transform: translateY(0);     opacity: 1; }
  42%  { transform: translateY(-46%);  opacity: 0; }
  43%  { transform: translateY(46%);   opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}
.countdown__unit { position: relative; padding-right: var(--s-2); }
.countdown__unit + .countdown__unit::before {
  content: ""; position: absolute; left: calc(var(--s-3) * -0.62); top: .18em;
  width: 1px; height: 1.1em; background: var(--c-line);
}

/* --------------------------------------------------------------------------
   7 · BUTTONS — the light crosses them
   -------------------------------------------------------------------------- */
.btn { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,.55) 50%, transparent 64%);
  transform: translateX(-120%);
  transition: transform 900ms var(--mh-ease);
}
.btn--primary:hover::after, .btn--primary:focus-visible::after { transform: translateX(120%); }

.btn--ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c-gold);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--mh-med) var(--mh-ease);
}
.btn--ghost:hover { color: #1A1005; border-color: var(--c-gold); }
.btn--ghost:hover::before { transform: scaleY(1); }
.btn--ghost { z-index: 0; }

/* --------------------------------------------------------------------------
   8 · MENU OVERLAY — opens as a circle from the button
   -------------------------------------------------------------------------- */
.mh-menu {
  position: fixed; inset: 0; z-index: 80;
  background: #0A0604;
  clip-path: circle(0% at calc(100% - 46px) 30px);
  transition: clip-path 820ms var(--mh-ease-io), visibility 820ms;
  visibility: hidden;
  display: flex; flex-direction: column; justify-content: center;
  overflow-y: auto;
}
.mh-menu[data-open="true"] { clip-path: circle(150% at calc(100% - 46px) 30px); visibility: visible; }

.mh-menu__list { list-style: none; padding: 0; margin: 0; }
.mh-menu__list li { overflow: hidden; }
.mh-menu__link {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.3rem, 8vw, 5.2rem);
  line-height: 1.06; letter-spacing: .01em; text-transform: uppercase;
  text-decoration: none; color: var(--c-ink);
  padding-block: .18em;
  transform: translateY(110%);
  transition: transform 760ms var(--mh-ease), color var(--mh-fast) linear;
}
.mh-menu[data-open="true"] .mh-menu__link { transform: none; }
.mh-menu[data-open="true"] li:nth-child(1) .mh-menu__link { transition-delay: 140ms; }
.mh-menu[data-open="true"] li:nth-child(2) .mh-menu__link { transition-delay: 210ms; }
.mh-menu[data-open="true"] li:nth-child(3) .mh-menu__link { transition-delay: 280ms; }
.mh-menu[data-open="true"] li:nth-child(4) .mh-menu__link { transition-delay: 350ms; }
.mh-menu__link:hover, .mh-menu__link:focus-visible { color: var(--c-gold); }
.mh-menu__num {
  font-family: var(--f-body); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .2em; color: var(--c-ink-3);
}
.mh-menu__foot { margin-top: var(--s-6); }

/* The toggle lives inside .nav, so its own z-index is trapped in that
   stacking context and the overlay covers it. Lift the whole bar above the
   overlay while it is open, and strip the bar's chrome so only the mark and
   the close control read. Without this the menu can only be closed with Esc. */
body[data-menu-open] .nav {
  z-index: 90;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body[data-menu-open] .nav__cta { opacity: 0; pointer-events: none; }
.nav__cta { transition: opacity var(--mh-fast) linear; }
@media (min-width: 860px) { .nav__toggle { display: inline-flex; } .nav__links { display: none; } }

/* --------------------------------------------------------------------------
   9 · TRACKLIST — the light crosses each row
   -------------------------------------------------------------------------- */
.track { position: relative; overflow: hidden; }
.track::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(233,178,76,.14) 0%, rgba(233,178,76,.03) 42%, transparent 72%);
  transform: translateX(-100%);
  transition: transform 720ms var(--mh-ease);
}
.track:not(.track--locked):hover::before { transform: none; }
.track { z-index: 0; }
.track__n { transition: color var(--mh-med) var(--mh-ease), transform var(--mh-med) var(--mh-ease); }
.track:not(.track--locked):hover .track__n { color: var(--c-gold); transform: translateX(4px); }
.track__name { transition: transform var(--mh-med) var(--mh-ease); }
.track:not(.track--locked):hover .track__name { transform: translateX(8px); }
.play { transition: transform var(--mh-med) var(--mh-ease), background-color .2s, border-color .2s, color .2s; }
.track:hover .play { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   10 · ARTWORK — the covers tilt to the pointer
   -------------------------------------------------------------------------- */
.tilt { perspective: 1100px; }
.tilt__in {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 520ms var(--mh-ease);
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt:hover .tilt__in { transition-duration: 90ms; }
.tilt__in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--ga, 120deg), rgba(255,235,190,.20), transparent 46%);
  opacity: 0; transition: opacity 420ms linear;
}
.tilt:hover .tilt__in::after { opacity: 1; }
.cover figure { position: relative; }

/* --------------------------------------------------------------------------
   11 · LOADER — the star turns while the sand runs
   -------------------------------------------------------------------------- */
.loader__star {
  position: absolute; width: 118px; height: 118px; color: rgba(233,178,76,.20);
  animation: spin 9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader__bar {
  position: absolute; bottom: 30%; width: 132px; height: 1px;
  background: rgba(233,178,76,.18); overflow: hidden;
}
.loader__bar i { display: block; height: 100%; width: 100%; background: var(--c-gold);
  transform: scaleX(0); transform-origin: left; animation: fill 1150ms var(--mh-ease-io) forwards; }
@keyframes fill { to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   12 · PLAYER — the bar rises with the sand
   -------------------------------------------------------------------------- */
.player { box-shadow: 0 -24px 60px rgba(0,0,0,.55); }
.play[aria-pressed="true"] { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(233,178,76,.42); }
  60%     { box-shadow: 0 0 0 12px rgba(233,178,76,0); }
}

/* --------------------------------------------------------------------------
   13 · SECTION HEADS
   -------------------------------------------------------------------------- */
.mh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.mh-head__n {
  font-family: var(--f-body); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .24em; color: var(--c-ink-3);
}

/* --------------------------------------------------------------------------
   14 · REDUCED MOTION — the page holds absolutely still.
   Everything above resolves to its finished state. No exceptions.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cur { display: none !important; }
  html.has-cursor, html.has-cursor * { cursor: auto !important; }
  .mh-layer, .mh-relic { transform: none !important; }
  .mh-smoke { opacity: .26 !important; }
  .mh-smoke img { animation: none !important; }
  .mh-relic img { animation: none !important; }
  .mh-motes { display: none; }
  .mh-title .mask > span,
  .mh-up { transform: none !important; filter: none !important; opacity: 1 !important; transition: none !important; }
  .rv { clip-path: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  .rule-star::before, .rule-star::after { transform: scaleX(1) !important; transition: none !important; }
  .rule-star .star { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mh-menu { transition: none; }
  .mh-menu__link { transform: none !important; transition: none !important; }
  .loader__star, .loader__bar i { animation: none !important; }
  .btn--primary::after, .btn--ghost::before, .track::before { transition: none !important; }
  .tilt__in { transform: none !important; transition: none !important; }
  .countdown__n.is-roll { animation: none !important; }
  .play[aria-pressed="true"] { animation: none !important; }
}

/* ==========================================================================
   15 · RUSTED METAL — v2 extension
   Desert and worked brass. Every value measured against the field before use.
   ========================================================================== */
:root {
  --c-sand:    #D9BE8E;   /* 11.18:1 — the warm "white". Replaces plain ink   */
  --c-brass:   #C9A05C;   /*  8.28:1 — metal mid-tone, safe as text           */
  --c-patina:  #8C5A22;   /*  3.44:1 — LARGE text or non-text only            */
  --c-rust:    #7A3B14;   /*  2.35:1 — SURFACE ONLY. Never type. Ever.        */
  --c-plate:   #1A1109;   /* struck-metal plate                               */
  --c-plate-2: #241309;   /* rusted plate                                     */

  --chamfer: 9px;

  /* worked brass. Darkest stop is #A87437 = 4.98:1, so even the shadow of
     the gradient clears AA when this is clipped to text. */
  --metal: linear-gradient(166deg,
    #F3E3C4 0%, #D9BE8E 22%, #C9A05C 46%, #A87437 66%, #C9A05C 84%, #EBD9B6 100%);

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/></filter><rect width='120' height='120' filter='url(%23g)' opacity='0.32'/></svg>");
}

/* The eight-sided plate. One shape, used by every metal object on the page. */
.chamfer {
  clip-path: polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0,
    100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer));
}

/* --------------------------------------------------------------------------
   16 · METALLIC TYPE — brass with the grain of the artwork in it
   The solid colour is set FIRST and only replaced where background-clip:text
   is supported, so the type can never vanish.
   -------------------------------------------------------------------------- */
.metal { color: var(--c-sand); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .metal {
    background-image: var(--grain), var(--metal);
    background-size: 340px 340px, 100% 100%;
    background-blend-mode: soft-light, normal;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* the wordmark */
.nav__brand.metal {
  font-size: 1rem;
  letter-spacing: .2em;
}

/* --------------------------------------------------------------------------
   17 · BUTTONS — struck plates, not rectangles
   -------------------------------------------------------------------------- */
.btn--primary, .btn--ghost { border: 0; border-radius: 0; }

.btn--primary,
.btn--ghost {
  position: relative;
  clip-path: polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0,
    100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer));
  letter-spacing: .12em;
}

/* the bevel: light caught on the top edge, shadow pooled at the bottom.
   Drawn as a layer because clip-path would cut a real border at the corners. */
/* Bevel only. The grain rides separately at a tenth of the strength, because
   at full weight the two layers together read as sandpaper, not as metal. */
.btn--primary::before,
.btn--ghost::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,240,206,.46) 0, rgba(255,240,206,0) 16%,
    rgba(0,0,0,0) 80%, rgba(0,0,0,.42) 100%);
}
.btn--primary, .btn--ghost { background-blend-mode: overlay, normal; }
.btn--primary { background-image: var(--grain), linear-gradient(168deg, #F6D79A 0%, #EFC57A 26%, #D5A346 58%, #C9902F 100%); background-size: 190px 190px, 100% 100%; }
.btn--ghost   { background-image: var(--grain), linear-gradient(168deg, #33200F 0%, #281508 52%, #190D05 100%); background-size: 190px 190px, 100% 100%; }

/* primary — polished brass. Ink measures 11.55:1 at the light stop,
   6.71:1 at the darkest. */
.btn--primary { color: #1A1005; transform: none; }
.btn--primary:hover { background-image: var(--grain), linear-gradient(168deg, #FFE7B4 0%, #F6CE86 26%, #E0B052 58%, #D89C36 100%); }

/* secondary — rusted iron with brass type at 9.3:1 */
.btn--ghost { color: var(--c-gold); z-index: 0; }
.btn--ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(168deg, #4A2712 0%, #33190A 100%);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--mh-med) var(--mh-ease);
}
.btn--ghost:hover { color: var(--c-sand); }
.btn--ghost:hover::before { transform: scaleY(1); }

/* --------------------------------------------------------------------------
   18 · COUNTDOWN — four struck plates
   -------------------------------------------------------------------------- */
.countdown { gap: var(--s-2); }
.countdown__unit {
  position: relative;
  min-width: 4.6rem;
  padding: .7rem .6rem .55rem;
  text-align: center;
  background-image: linear-gradient(168deg, #241811 0%, #1A1109 54%, #120B06 100%);
  border: 1px solid rgba(140,90,34,.42);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px),
                     calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.countdown__unit::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(233,178,76,.22) 0, transparent 12%,
                                      transparent 88%, rgba(0,0,0,.5) 100%);
}
.countdown__unit + .countdown__unit::before { display: none; }
.countdown__n { color: var(--c-sand); }       /* 16.29:1 on the plate */
.countdown__l { color: var(--c-ink-2); }      /*  7.75:1 on the plate */
@media (min-width: 700px) { .countdown__unit { min-width: 5.4rem; padding-inline: var(--s-2); } }

/* --------------------------------------------------------------------------
   19 · LOADER — the hourglass, made unmissable, over faint dunes
   -------------------------------------------------------------------------- */
.loader__dunes {
  position: absolute; inset: 0;
  background: url("/assets/img/mh-dunes-1920.webp") center/cover no-repeat;
  opacity: .16;                     /* only just there, as asked */
  pointer-events: none;
}
.loader__dunes::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 46%, transparent 0, rgba(11,7,5,.72) 78%);
}
.loader > * { position: relative; z-index: 1; }

/* the glass is now twice the size and the sand actually reads */
.glass { width: 104px; height: 158px; }
.glass__top, .glass__bot { width: 78px; height: 68px; margin-left: -39px; }
.glass__top { top: 10px; }
.glass__bot { bottom: 10px; }
.glass__top::before, .glass__bot::before {
  border-left-width: 39px; border-right-width: 39px;
}
.glass__top::before { border-top-width: 68px; }
.glass__bot::before { border-bottom-width: 68px; }
.glass__frame span { height: 3px; }
.glass__stream { top: 76px; height: 16px; width: 3px; margin-left: -1.5px; }

/* the whole vessel turns over once the sand has run */
.glass { animation: flip 2100ms var(--mh-ease-io) forwards; transform-origin: 50% 50%; }
@keyframes flip {
  0%, 62% { transform: rotate(0deg); }
  78%     { transform: rotate(184deg); }
  86%     { transform: rotate(176deg); }
  100%    { transform: rotate(180deg); }
}
.sand--top { animation-duration: 1300ms; }
.sand--bot { animation-duration: 1300ms; }
.glass__stream { animation-duration: 1300ms; }
.loader__bar i { animation-duration: 2000ms; }
.loader__star { width: 210px; height: 210px; color: rgba(233,178,76,.13); }

/* falling grains, so there is something to watch the whole way down */
.glass__grain { position: absolute; left: 50%; top: 74px; width: 3px; height: 3px;
  margin-left: -1.5px; border-radius: 50%; background: var(--c-gold); opacity: 0; }
.glass__grain:nth-child(1) { animation: fall 620ms linear 120ms infinite; }
.glass__grain:nth-child(2) { animation: fall 620ms linear 340ms infinite; }
.glass__grain:nth-child(3) { animation: fall 620ms linear 560ms infinite; }
@keyframes fall {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  18%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(46px) scale(.4); }
}

/* --------------------------------------------------------------------------
   20 · SECTION PARALLAX — images that move against their own section
   -------------------------------------------------------------------------- */
.par-img { overflow: hidden; position: relative; }
.par-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.16);
  will-change: transform;
}

.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.story-grid .par-img { aspect-ratio: 1; }
@media (min-width: 900px) {
  .story-grid { gap: var(--s-2); align-content: start; }
}

/* the mid-page band */
.mh-band { position: relative; overflow: hidden; height: 46svh; min-height: 300px; }
.mh-band .par-img { position: absolute; inset: 0; }
.mh-band__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,7,5,.86) 0, rgba(11,7,5,.35) 42%, rgba(11,7,5,.92) 100%);
}
.mh-band__quote {
  position: relative; z-index: 2; height: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center;
}

/* --------------------------------------------------------------------------
   21 · THE WRITE-UP — sets itself down a line at a time
   -------------------------------------------------------------------------- */
.js-anim .writ .ln { display: block; overflow: hidden; }
.js-anim .writ .ln > i {
  display: block; font-style: inherit;
  transform: translateY(105%);
  transition: transform 900ms var(--mh-ease);
}
.js-anim .writ.is-in .ln > i { transform: none; }

/* --------------------------------------------------------------------------
   22 · MENU v2 — the links never sit under the header
   -------------------------------------------------------------------------- */
.mh-menu {
  justify-content: flex-start;
  padding-top: calc(var(--nav-h) + var(--s-6));
  padding-bottom: var(--s-6);
  background: #0A0604;
}
.mh-menu__bg {
  position: absolute; inset: 0;
  background: url("/assets/img/mh-dunes-1920.webp") center/cover no-repeat;
  opacity: .12; pointer-events: none;
}
.mh-menu__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,6,4,.95) 0, rgba(10,6,4,.55) 60%, rgba(10,6,4,.9) 100%);
}
.mh-menu > .wrap { position: relative; z-index: 1; width: 100%; }
.mh-menu__grid { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) { .mh-menu__grid { grid-template-columns: 1.15fr .85fr; gap: var(--s-7); } }
.mh-menu__portrait { display: none; }
@media (min-width: 900px) {
  .mh-menu__portrait { display: block; aspect-ratio: 4/5; }
  .mh-menu__portrait img {
    width: 100%; height: 100%; object-fit: cover;
    -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 48%, #000 46%, transparent 88%);
            mask-image: radial-gradient(ellipse 78% 82% at 50% 48%, #000 46%, transparent 88%);
  }
}
.mh-menu__link { gap: var(--s-2); }
.mh-menu__foot { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   23 · THE END PLATE — this page has no footer, only a mark
   -------------------------------------------------------------------------- */
.endplate {
  border-top: 1px solid var(--c-line);
  padding-block: var(--s-5);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3);
}
.endplate__line {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--t-small); letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-ink-2);
}

/* Parental advisory, redrawn in the brand rather than the stock black bar */
.pa {
  display: inline-flex; align-items: stretch; gap: 0;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px),
                     calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  background-image: linear-gradient(168deg, #241811 0%, #16100A 100%);
}
.pa__mark {
  display: grid; place-items: center; padding: .42rem .5rem;
  background-image: linear-gradient(168deg, #EFC57A 0%, #C9902F 100%);
  color: #1A1005;
}
.pa__mark svg { width: 15px; height: 15px; }
.pa__txt { padding: .34rem .62rem; display: grid; align-content: center; }
.pa__a {
  font-family: var(--f-display); font-weight: 700;
  font-size: .58rem; letter-spacing: .18em; color: var(--c-sand); line-height: 1.15;
}
.pa__b {
  font-size: .48rem; letter-spacing: .26em; color: var(--c-ink-2);
  text-transform: uppercase; line-height: 1.3;
}

/* --------------------------------------------------------------------------
   24 · REDUCED MOTION — the v2 additions, held still
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .glass { animation: none !important; }
  .glass__grain { display: none; }
  .par-img img { transform: none !important; }
  .js-anim .writ .ln > i { transform: none !important; transition: none !important; }
  .btn--ghost::before { transition: none !important; }
}

/* The nav lost its centre column when the links moved into the overlay, so
   space-between was spreading brand | cta | toggle across the full width and
   parking the button in the middle of the header. */
.nav__cta { margin-left: auto; }
.nav__inner > .nav__toggle { margin-left: var(--s-2); }

/* ── Back to the main site ─────────────────────────────────────────────────
   This page carries its own system and reads as a separate site, so the route
   home has to be a labelled control rather than a wordmark you have to guess
   is a link. It sits first in the bar, before the brand. */
.nav__back {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem .45rem .6rem; margin-right: auto;
  font-family: var(--f-ui, inherit); font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
  transition: color .22s ease, border-color .22s ease, background-color .22s ease;
}
.nav__back svg { width: 15px; height: 15px; transition: transform .28s cubic-bezier(.22,1,.36,1); }
.nav__back:hover { color: var(--c-gold); border-color: var(--c-gold); }
.nav__back:hover svg { transform: translateX(-3px); }
/* below 560 the label goes and the arrow carries it, so the bar keeps its
   brand and its call to action */
@media (max-width: 559px) {
  .nav__back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav__back { padding: .45rem .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__back, .nav__back svg { transition: none; }
  .nav__back:hover svg { transform: none; }
}

/* ── Section menu ──────────────────────────────────────────────────────────
   The overlay menu now indexes THIS page, so every target has to clear the
   sticky bar; without this an anchor parks the heading underneath it. */
#top, #tracklist, #artwork, #about-ep, #presave { scroll-margin-top: calc(var(--nav-h) + var(--s-3)); }