/* ==========================================================================
   Days In Chains - daysinchains.com
   Direction taken from the Turncoat sleeve: every color below was sampled off
   the painted artwork, not picked. Sharp corners, hairline rules, no shadows.
   ========================================================================== */

/* --- Faces ---------------------------------------------------------------
   Self-hosted, not pulled from Google. font-display:optional only works if the
   file wins its race, and against a third-party CDN on a cold cache it loses,
   which is why the type was changing between page loads: fallback one load,
   the real face the next. Local files plus a preload make it win, and optional
   guarantees that if it ever does lose, the fallback is kept for the WHOLE
   load rather than swapped in underneath the reader.
   ------------------------------------------------------------------------ */
@font-face {
    font-family: "Big Shoulders Display";
    src: url("/assets/font/bigshoulders-700.woff2") format("woff2");
    font-weight: 700 800;
    font-style: normal;
    font-display: optional;
}
@font-face {
    font-family: "Barlow";
    src: url("/assets/font/barlow-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
    font-family: "Barlow";
    src: url("/assets/font/barlow-500.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: optional;
}
@font-face {
    font-family: "Barlow";
    src: url("/assets/font/barlow-600.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: optional;
}
@font-face {
    font-family: "Space Mono";
    src: url("/assets/font/spacemono-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
    font-family: "Space Mono";
    src: url("/assets/font/spacemono-700.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: optional;
}

/* Metric-matched fallbacks. Big Shoulders is extremely condensed, so an
   un-adjusted sans fallback is far wider and the headline reflows hard if the
   face ever does lose. These narrow the stand-in so the swap is survivable. */
@font-face {
    font-family: "Display Fallback";
    src: local("Arial Narrow"), local("Helvetica Neue Condensed"), local("Arial");
    size-adjust: 62%;
    ascent-override: 150%;
    descent-override: 38%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Text Fallback";
    src: local("Helvetica Neue"), local("Arial");
    size-adjust: 97%;
    ascent-override: 104%;
    descent-override: 26%;
    line-gap-override: 0%;
}

/* --- Tokens --------------------------------------------------------------
   One scale for each axis. Two grounds, two border weights, two radii, one
   elevation. Anything not in here is a drift and should be fixed here.
   ------------------------------------------------------------------------ */
:root {
    color-scheme: dark;

    /* Two grounds and no more: the black water of the sleeve, and the wet ash
       of the rocks around it. They alternate down the page, which is what makes
       the page read as bands rather than as one sheet with lines ruled across
       it. They are far enough apart in luminance to be a real change. */
    --ink:          #06060a;
    --ash:          #221f26;
    --raised:       #14141a;
    --raised-2:     #1d1d25;

    /* Two neutral text tiers, both of which clear 4.5:1 on BOTH grounds. The
       third level of hierarchy is hue, not lightness: accent copy goes ember.
       A dimmer gray would read fine on the ink band and fail on the ash. */
    --bone:         #ece5d9;
    --bone-dim:     #c6c0b6;

    /* The fire, sampled from the sky, the sun and the crown. --ember is for
       borders, fills and the waveform; --ember-text is the lifted version that
       stays readable as type on the ash band. */
    --blood:        #9d270f;
    --blood-deep:   #5d1608;
    --blood-flat:   #8a2210;
    --ember:        #f8843d;
    --ember-text:   #ffae7a;
    --ember-deep:   #c75a21;
    --cream:        #fdeebe;
    --rust:         #b08356;

    /* lines */
    --line:         #272028;
    --line-warm:    #43271c;
    --line-ember:   #7a3a18;

    /* one radius scale: this record has no soft corners */
    --r-0: 0;
    --r-1: 2px;

    /* two border weights, no third */
    --bw-1: 1px;
    --bw-2: 2px;

    /* one elevation, used only by the two overlays */
    --lift: 0 18px 50px -12px rgba(0, 0, 0, .85);

    /* type scale, eight steps */
    --t-xs:   0.75rem;
    --t-sm:   0.8125rem;
    --t-base: 0.9375rem;
    --t-md:   1.0625rem;
    --t-lg:   1.375rem;
    --t-xl:   2rem;
    --t-2xl:  3rem;
    --t-3xl:  clamp(2.75rem, 7vw, 5.25rem);

    /* spacing scale */
    --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
    --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4.5rem;

    /* the single width every band in the page answers to */
    --site-max: 82rem;
    --gutter: var(--s-5);

    --face-display: "Big Shoulders Display", "Display Fallback", "Arial Narrow", sans-serif;
    --face-text: "Barlow", "Text Fallback", system-ui, -apple-system, sans-serif;
    --face-mono: "Space Mono", ui-monospace, "Courier New", monospace;

    --ease: cubic-bezier(.2, .6, .25, 1);
}

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

html {
    background: var(--ink);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 7.5rem;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--bone);
    font-family: var(--face-text);
    font-size: var(--t-base);
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    /* no overflow-x:hidden here: it would mask a sideways scroll instead of
       fixing it, and defeat the measurement that catches one */
}

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

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--face-display);
    font-weight: 800;
    line-height: .96;
    letter-spacing: .005em;
    text-transform: uppercase;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
    color: inherit;
    text-decoration: none;
    transition: color .16s var(--ease), border-color .16s var(--ease);
}

button { font: inherit; color: inherit; background: transparent; }

/* Keyboard focus is a separate state from hover, on everything, including the
   wordmark, which has no hover state at all. */
:focus-visible {
    outline: var(--bw-2) solid var(--ember);
    outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* --- Grain and vignette ---------------------------------------------------
   The whole page sits under one sheet of film grain. It is its own fixed
   layer so that no `filter` lands on an ancestor and starts clipping the
   overlays.
   ------------------------------------------------------------------------ */
.grain,
.vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 60;
}

.grain {
    opacity: .055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    mix-blend-mode: overlay;
}

.vignette {
    z-index: 59;
    background: radial-gradient(130% 95% at 50% 32%, transparent 38%, rgba(0, 0, 0, .55) 100%);
}

/* --- Shell ---------------------------------------------------------------
   Every band on the page, the header and the footer included, resolves to the
   same width. There is no narrow wrapper anywhere in this stylesheet.
   ------------------------------------------------------------------------ */
.shell {
    width: 100%;
    max-width: var(--site-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.band {
    position: relative;
    border-top: var(--bw-1) solid var(--line);
}

.band--ink  { background: var(--ink); }
.band--ash  { background: var(--ash); }
.band__inner { padding-block: var(--s-8); }

/* Section eyebrow: a mono label and a rule running off to the side, the way a
   sleeve credits a side of a record. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ember-text);
    white-space: nowrap;
}

.eyebrow::after {
    content: "";
    flex: 1 1 auto;
    height: var(--bw-1);
    background: linear-gradient(90deg, var(--line-ember), transparent);
}

.section-title {
    font-size: var(--t-2xl);
    color: var(--bone);
}

.section-lead {
    margin-top: var(--s-4);
    max-width: none; /* a measure belongs to body prose, never to a band */
    color: var(--bone-dim);
    font-size: var(--t-md);
}

/* --- Icons ---------------------------------------------------------------- */
.i {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.i--lg { width: 1.25em; height: 1.25em; }

/* --- Buttons -------------------------------------------------------------
   Every action on this page is a real button with a resting border, an icon
   and a tooltip. The border changes color on hover; a tint alone is not a
   hover state.
   ------------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 2.875rem; /* 46px, clears the 44px tap target on a phone */
    padding: var(--s-3) var(--s-5);
    border: var(--bw-1) solid var(--line-ember);
    border-radius: var(--r-1);
    background: transparent;
    color: var(--bone);
    font-family: var(--face-display);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .16s var(--ease), background-color .16s var(--ease),
                color .16s var(--ease);
}

.btn:hover { border-color: var(--ember); background: rgba(248, 132, 61, .1); }

.btn--fire {
    border-color: var(--ember);
    background-color: var(--blood-flat);
    background-image: linear-gradient(180deg, var(--blood) 0%, var(--blood-deep) 100%);
    color: var(--cream);
}

.btn--fire:hover {
    border-color: var(--cream);
    background-color: var(--blood);
    background-image: linear-gradient(180deg, var(--ember-deep) 0%, var(--blood) 100%);
    color: #fff;
}

.btn--ghost { border-color: var(--line); color: var(--bone-dim); }
.btn--ghost:hover { border-color: var(--rust); color: var(--bone); }

.btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    border-color: var(--line);
    background: transparent;
}

/* Icon-only control: a bordered box, never a naked glyph. */
.iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: var(--bw-1) solid var(--line);
    border-radius: var(--r-1);
    background: var(--raised);
    color: var(--bone-dim);
    cursor: pointer;
    transition: border-color .16s var(--ease), color .16s var(--ease),
                background-color .16s var(--ease);
}

.iconbtn:hover {
    border-color: var(--ember);
    color: var(--bone);
    background: var(--raised-2);
}

.iconbtn--primary {
    width: 4rem;
    height: 4rem;
    border-color: var(--ember);
    background-color: var(--blood-flat);
    background-image: linear-gradient(180deg, var(--blood) 0%, var(--blood-deep) 100%);
    color: var(--cream);
}

.iconbtn--primary:hover {
    border-color: var(--cream);
    background-color: var(--blood);
    background-image: linear-gradient(180deg, var(--ember-deep) 0%, var(--blood) 100%);
    color: #fff;
}

.iconbtn--primary .i { width: 1.5rem; height: 1.5rem; }

/* --- Medallion -----------------------------------------------------------
   Floats left of its copy, always. A bottom margin on one of these means the
   card became a column and the rule is broken.
   ------------------------------------------------------------------------ */
.medallion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    border: var(--bw-1) solid var(--line-ember);
    border-radius: var(--r-1);
    background: rgba(157, 39, 15, .14);
    color: var(--ember);
}

.medallion .i { width: 1.375rem; height: 1.375rem; }

/* --- Header --------------------------------------------------------------
   Two tiers: a slim utility strip, then the main navbar with a hairline under
   it. The navbar is a three-column grid, never a flex row, so the nav cannot
   drift off center when a label changes.
   ------------------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ink);
}

.utility {
    background: #040405;
    border-bottom: var(--bw-1) solid var(--line);
    font-size: var(--t-xs);
    color: var(--bone-dim);
}

.utility__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    min-height: 2.25rem;
}

.utility__note {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--face-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ember-text);
}

.utility__links {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

/* Header links, both tiers, gain a border on hover. The border is reserved
   transparent at rest so nothing moves when the pointer arrives. */
.ulink {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    border: var(--bw-1) solid transparent;
    border-radius: var(--r-1);
    white-space: nowrap;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: var(--face-mono);
    font-size: var(--t-xs);
}

.ulink:hover { border-color: var(--line-ember); color: var(--bone); }

.navbar {
    border-bottom: var(--bw-1) solid var(--line);
    background-color: #0b0b11;
    background-image: linear-gradient(180deg, #14141a 0%, var(--ink) 100%);
}

.navbar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s-4);
    min-height: 4.25rem;
}

/* The wordmark is the identity, not a control: it looks exactly the same
   hovered as it does at rest. It still takes a focus ring. */
.brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    border-radius: var(--r-0);
}

.brand img { width: 11.5rem; }

.nav { display: flex; align-items: center; gap: var(--s-1); }

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: var(--bw-1) solid transparent;
    border-radius: var(--r-1);
    font-family: var(--face-display);
    font-size: var(--t-base);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bone-dim);
    white-space: nowrap;
}

.nav__link:hover,
.nav__link[aria-expanded="true"] {
    border-color: var(--line-ember);
    color: var(--bone);
}

.nav__caret { transition: transform .16s var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.navbar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-2);
    justify-self: end;
}

.navbar__actions .btn { min-height: 2.5rem; padding: var(--s-2) var(--s-4); font-size: var(--t-base); }

/* --- Mega menu -----------------------------------------------------------
   A multi-column panel with a heading over every column, an icon and a line of
   description on every row, and a featured panel down one side. It is fixed to
   the viewport so nothing in the header can clip it, and it clamps rather than
   widening the page.
   ------------------------------------------------------------------------ */
.mega {
    position: fixed;
    z-index: 70;
    display: none;
    border: var(--bw-1) solid var(--line-ember);
    border-radius: var(--r-1);
    background: var(--raised);
    box-shadow: var(--lift);
}

.mega.is-open { display: block; }

.mega__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 17rem;
    gap: var(--s-6);
    padding: var(--s-6);
}

.mega__head {
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: var(--bw-1) solid var(--line);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ember-text);
    white-space: nowrap;
}

/* A row in a column of identical rows is ruled off from its neighbors on hover
   and when it is the current one. A fill alone would run into the rows above
   and below it. */
.mega__row {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-2);
    border-top: var(--bw-1) solid transparent;
    border-bottom: var(--bw-1) solid transparent;
    color: var(--bone-dim);
}

.mega__row:hover,
.mega__row[aria-current="true"] {
    border-top-color: var(--line-ember);
    border-bottom-color: var(--line-ember);
    background: rgba(157, 39, 15, .1);
    color: var(--bone);
}

.mega__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    margin-top: .1rem;
    border: var(--bw-1) solid var(--line-ember);
    border-radius: var(--r-1);
    background: rgba(157, 39, 15, .16);
    color: var(--ember);
}

.mega__chip .i { width: 1rem; height: 1rem; }

.mega__text { min-width: 0; }

.mega__label {
    display: block;
    font-family: var(--face-display);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bone);
    white-space: nowrap;
}

.mega__desc {
    display: block;
    font-size: var(--t-sm);
    line-height: 1.35;
    color: var(--bone-dim);
    white-space: nowrap;
}

.mega__row:hover .mega__desc { color: var(--bone-dim); }

.mega__feature {
    display: flex;
    flex-direction: column;
    padding: var(--s-4);
    border: var(--bw-1) solid var(--line-warm);
    border-radius: var(--r-1);
    background-color: #2a1410;
    background-image: linear-gradient(180deg, rgba(157, 39, 15, .2), rgba(7, 7, 10, .6));
}

.mega__feature img {
    width: 100%;
    border: var(--bw-1) solid var(--line-warm);
    border-radius: var(--r-1);
}

.mega__feature .btn { margin-top: auto; width: 100%; }

.mega__feature-title {
    margin: var(--s-3) 0 var(--s-1);
    font-size: var(--t-lg);
    color: var(--bone);
}

.mega__feature-sub {
    margin-bottom: var(--s-4);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ember-text);
    white-space: nowrap;
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(42rem, 82vh);
    border-bottom: var(--bw-1) solid var(--line-warm);
    background-color: #050507;
    background-image:
        linear-gradient(180deg, rgba(5, 5, 7, .86) 0%, rgba(5, 5, 7, .55) 42%, rgba(5, 5, 7, .95) 100%),
        var(--hero-art);
    background-size: cover, cover;
    background-position: center, center 38%;
}

.hero__inner {
    width: 100%;
    padding-block: var(--s-8);
    text-align: center;
}

.hero__wordmark {
    width: min(58rem, 100%);
    margin-inline: auto;
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-2) var(--s-4);
    margin-top: var(--s-5);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bone-dim);
}

.hero__meta b { color: var(--ember); font-weight: 700; }

.hero__dot { color: var(--rust); }

.hero__line {
    margin: var(--s-5) auto 0;
    font-size: var(--t-lg);
    line-height: 1.45;
    color: var(--bone-dim);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

/* --- The single ----------------------------------------------------------
   Two columns that stretch to the same floor, with the content in each one
   anchored to the bottom, so the slack lands between the blocks rather than
   leaving a void inside a border.
   ------------------------------------------------------------------------ */
.single {
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    align-items: stretch;
    gap: var(--s-7);
}

.sleeve {
    display: flex;
    flex-direction: column;
}

.sleeve__art {
    position: relative;
    display: block;
    border: var(--bw-1) solid var(--line-warm);
    border-radius: var(--r-1);
}

.sleeve__art img { width: 100%; border-radius: var(--r-1); }

.sleeve__spec {
    margin-top: var(--s-5);
    border-top: var(--bw-1) solid var(--line);
}

.sleeve__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-2) 0;
    border-bottom: var(--bw-1) solid var(--line);
}

.sleeve__row dt {
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bone-dim);
    white-space: nowrap;
}

.sleeve__row dd {
    margin: 0;
    font-family: var(--face-display);
    font-size: var(--t-base);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bone);
    white-space: nowrap;
}

.sleeve__caption {
    margin-top: auto;
    padding-top: var(--s-4);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    line-height: 1.7;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bone-dim);
}

.sleeve__caption b { color: var(--bone-dim); font-weight: 700; }

.single__body { display: flex; flex-direction: column; }

.single__title {
    font-size: var(--t-2xl);
    color: var(--bone);
}

.single__sub {
    margin-top: var(--s-3);
    font-size: var(--t-md);
    color: var(--bone-dim);
}

/* --- Player --------------------------------------------------------------- */
.player {
    margin-top: var(--s-5);
    border: var(--bw-1) solid var(--line-warm);
    border-radius: var(--r-1);
    background-color: #101016;
    background-image: linear-gradient(180deg, var(--raised) 0%, var(--ink) 100%);
}

.player__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-bottom: var(--bw-1) solid var(--line);
}

.player__label {
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ember-text);
    white-space: nowrap;
}

.player__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    border: var(--bw-1) solid var(--line-ember);
    border-radius: var(--r-1);
    background: rgba(157, 39, 15, .16);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cream);
    white-space: nowrap;
}

.player__dot {
    width: .4rem;
    height: .4rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ember);
}

.player__body { padding: var(--s-5); }

.player__transport {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.player__now { min-width: 0; flex: 1 1 auto; }

.player__track {
    font-family: var(--face-display);
    font-size: var(--t-lg);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bone);
    white-space: nowrap;
    overflow-wrap: anywhere;
}

.player__artist {
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bone-dim);
    white-space: nowrap;
}

.player__aux { display: flex; align-items: center; gap: var(--s-2); }

.player__scrub { margin-top: var(--s-2); }

.player__times {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .1em;
    color: var(--bone-dim);
}

/* The seek control is a real range input, so the keyboard and touch work with
   nothing hand-rolled. The native thumb and track are replaced; the fill is
   painted from a custom property the script keeps up to date. */
.seek {
    --seek-pos: 0%;
    display: block;
    width: 100%;
    height: 2.75rem;
    margin: 0;
    padding: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.seek::-webkit-slider-runnable-track {
    height: .375rem;
    border: var(--bw-1) solid var(--line);
    border-radius: var(--r-1);
    background:
        linear-gradient(90deg, var(--ember) 0%, var(--blood) var(--seek-pos), transparent var(--seek-pos));
    background-color: var(--raised-2);
}

.seek::-moz-range-track {
    height: .375rem;
    border: var(--bw-1) solid var(--line);
    border-radius: var(--r-1);
    background:
        linear-gradient(90deg, var(--ember) 0%, var(--blood) var(--seek-pos), transparent var(--seek-pos));
    background-color: var(--raised-2);
}

.seek::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: .75rem;
    height: 1.25rem;
    margin-top: -.4rem;
    border: var(--bw-1) solid var(--cream);
    border-radius: var(--r-1);
    background: var(--ember);
}

.seek::-moz-range-thumb {
    width: .75rem;
    height: 1.25rem;
    border: var(--bw-1) solid var(--cream);
    border-radius: var(--r-1);
    background: var(--ember);
}

.seek:hover::-webkit-slider-runnable-track { border-color: var(--line-ember); }
.seek:hover::-moz-range-track { border-color: var(--line-ember); }

/* The script draws the waveform here from the decoded file, so the bars are
   this recording and not a stock pattern. It degrades to an empty strip. */
.player__wave {
    display: block;
    width: 100%;
    height: 3.5rem;
    margin-top: var(--s-4);
    border: var(--bw-1) solid var(--line);
    border-radius: var(--r-1);
    background: var(--ink);
}

.player__note {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: var(--bw-1) solid var(--line);
    font-size: var(--t-sm);
    color: var(--bone-dim);
}

.single__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: auto;
    padding-top: var(--s-5);
}

/* The slot the Spotify embed drops into once the single is live everywhere.
   It carries no height until it holds an iframe. */
.embed-slot:empty { display: none; }

.embed-slot {
    margin-top: var(--s-5);
    border: var(--bw-1) solid var(--line-warm);
    border-radius: var(--r-1);
}

.embed-slot iframe { display: block; width: 100%; border: 0; border-radius: var(--r-1); }

/* A destination block rather than a button: the medallion says what it is, the
   second line says what is in there, and the whole row is the target. */
.blockcta {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    width: 100%;
    padding: var(--s-4) var(--s-5);
    border: var(--bw-1) solid var(--line-ember);
    border-radius: var(--r-1);
    background-color: #1a0f0c;
    background-image: linear-gradient(90deg, rgba(157, 39, 15, .3), rgba(6, 6, 10, .2));
    transition: border-color .16s var(--ease), background-color .16s var(--ease);
}

.blockcta:hover { border-color: var(--ember); background-color: #2a1410; }

.blockcta__text { flex: 1 1 auto; min-width: 0; }

.blockcta__title {
    display: block;
    font-family: var(--face-display);
    font-size: var(--t-lg);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bone);
    white-space: nowrap;
}

.blockcta__sub {
    display: block;
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ember-text);
    white-space: nowrap;
}

.blockcta__go { flex: 0 0 auto; color: var(--ember-text); transform: rotate(-90deg); }

/* --- The album ------------------------------------------------------------ */
.album {
    display: grid;
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    align-items: stretch;
    gap: var(--s-7);
}

.album__side { display: flex; flex-direction: column; }

.album__title { font-size: var(--t-2xl); color: var(--bone); }

.album__sub {
    margin-top: var(--s-3);
    font-size: var(--t-md);
    color: var(--bone-dim);
}

/* --- Countdown ------------------------------------------------------------ */
.countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-2);
    margin-top: var(--s-5);
}

.countdown__cell {
    padding: var(--s-3) var(--s-2);
    border: var(--bw-1) solid var(--line-warm);
    border-radius: var(--r-1);
    background-color: #1a0f0c;
    background-image: linear-gradient(180deg, rgba(157, 39, 15, .16), rgba(7, 7, 10, .5));
    text-align: center;
}

.countdown__num {
    display: block;
    font-family: var(--face-mono);
    font-size: var(--t-xl);
    font-weight: 700;
    line-height: 1.05;
    color: var(--cream);
    font-variant-numeric: tabular-nums;
}

.countdown__unit {
    display: block;
    margin-top: var(--s-1);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bone-dim);
    white-space: nowrap;
}

.album__facts {
    margin-top: var(--s-5);
    border-top: var(--bw-1) solid var(--line);
}

.album__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) 0;
    border-bottom: var(--bw-1) solid var(--line);
}

.album__fact dt {
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bone-dim);
    white-space: nowrap;
}

.album__fact dd {
    margin: 0;
    font-family: var(--face-display);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bone);
    text-align: right;
    white-space: nowrap;
}

.album__side .btn { margin-top: auto; }
.album__cta { padding-top: var(--s-5); }

/* --- Track list ----------------------------------------------------------
   Twelve tracks over two columns of six, so the last row of each column is
   full and no cell is left standing empty.
   ------------------------------------------------------------------------ */
.tracks { display: flex; flex-direction: column; }

.tracks__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s-6);
    border-top: var(--bw-1) solid var(--line);
}

.track {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-3);
    border-top: var(--bw-1) solid transparent;
    border-bottom: var(--bw-1) solid var(--line);
    color: var(--bone-dim);
    transition: border-color .16s var(--ease), background-color .16s var(--ease),
                color .16s var(--ease);
}

.track:hover {
    border-top-color: var(--line-ember);
    border-bottom-color: var(--line-ember);
    background: rgba(157, 39, 15, .1);
    color: var(--bone);
}

.track__no {
    font-family: var(--face-mono);
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--bone-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.track__name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--face-display);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bone);
    white-space: nowrap;
    overflow-wrap: anywhere;
}

.track__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: .1rem var(--s-2);
    border: var(--bw-1) solid var(--line-ember);
    border-radius: var(--r-1);
    background: rgba(157, 39, 15, .2);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cream);
    white-space: nowrap;
}

/* The single is the one row that is already playable, so it is the current row
   in this list and carries the current-row treatment at rest. */
.track--single {
    border-top-color: var(--line-ember);
    border-bottom-color: var(--line-ember);
    background-color: #2b1310;
    background-image: linear-gradient(90deg, rgba(157, 39, 15, .26), rgba(157, 39, 15, .05));
    box-shadow: inset 3px 0 0 0 var(--ember);
    color: var(--bone);
}

.track--single .track__no { color: var(--ember); }
.track--single:hover { background-image: linear-gradient(90deg, rgba(157, 39, 15, .36), rgba(157, 39, 15, .1)); }

.track__play {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
}

.track__play .i { width: .875rem; height: .875rem; }

.tracks__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: auto;
    padding-top: var(--s-5);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bone-dim);
}

/* --- The band ------------------------------------------------------------- */
.pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
    margin-top: var(--s-6);
}

.pillar {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding: var(--s-5);
    border: var(--bw-1) solid var(--line);
    border-radius: var(--r-1);
    background: var(--raised);
    transition: border-color .16s var(--ease), background-color .16s var(--ease);
}

.pillar:hover { border-color: var(--line-ember); background: var(--raised-2); }

.pillar__text { min-width: 0; }

.pillar__title {
    font-size: var(--t-lg);
    color: var(--bone);
    white-space: nowrap;
}

.pillar__copy {
    margin-top: var(--s-2);
    font-size: var(--t-sm);
    color: var(--bone-dim);
}

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink); border-top: var(--bw-1) solid var(--line); }

.footer-cta {
    border-bottom: var(--bw-1) solid var(--line-warm);
    background-color: #1b0d0a;
    background-image: linear-gradient(180deg, rgba(157, 39, 15, .22), rgba(6, 6, 10, 0));
}

.footer-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding-block: var(--s-6);
}

.footer-cta__title { font-size: var(--t-xl); color: var(--bone); }

.footer-cta__sub {
    margin-top: var(--s-2);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ember-text);
}

.footer-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.footer-main {
    display: grid;
    grid-template-columns: 1.4fr 3fr;
    gap: var(--s-6);
    padding-block: var(--s-7);
}

.footer-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-6);
}

.footer-brand img { width: 12rem; }

.footer-brand p {
    margin-top: var(--s-4);
    font-size: var(--t-sm);
    color: var(--bone-dim);
}

.footer__head {
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: var(--bw-1) solid var(--line);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ember-text);
    white-space: nowrap;
}

/* Footer links are a list somebody reads, so they change color only. No box,
   no border, no plate. */
.footer__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.75rem;
    padding: var(--s-2) 0;
    font-size: var(--t-sm);
    color: var(--bone-dim);
    white-space: nowrap;
}

.footer__link:hover { color: var(--ember-text); }

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3) var(--s-5);
    padding-block: var(--s-4);
    border-top: var(--bw-1) solid var(--line);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bone-dim);
}

.footer-legal__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }

.footer-legal a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.75rem;
    color: var(--bone-dim);
    white-space: nowrap;
}
.footer-legal a:hover { color: var(--ember-text); }

/* --- Tooltip -------------------------------------------------------------
   One engine, appended to <body>, position fixed. Nothing on the page can clip
   it because it is not inside anything.
   ------------------------------------------------------------------------ */
.tip {
    position: fixed;
    z-index: 90;
    max-width: 18rem;
    padding: var(--s-2) var(--s-3);
    border: var(--bw-1) solid var(--line-ember);
    border-radius: var(--r-1);
    background: #0b0b0e;
    color: var(--bone);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .06em;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    box-shadow: var(--lift);
    transition: opacity .12s var(--ease);
}

.tip.is-on { opacity: 1; }

/* --- Modal confirm -------------------------------------------------------
   Downloading the track before it is out everywhere is a deliberate act, so it
   confirms, and it confirms in the page rather than through a native dialog.
   ------------------------------------------------------------------------ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
    background: rgba(3, 3, 5, .82);
}

.modal.is-open { display: flex; }

.modal__panel {
    width: min(34rem, 100%);
    border: var(--bw-1) solid var(--line-ember);
    border-radius: var(--r-1);
    background: var(--raised);
    box-shadow: var(--lift);
}

.modal__head { padding: var(--s-5); border-bottom: var(--bw-1) solid var(--line); }

.modal__title { font-size: var(--t-lg); color: var(--bone); }

.modal__sub {
    margin-top: var(--s-2);
    font-size: var(--t-base);
    color: var(--bone-dim);
}

.modal__body {
    padding: var(--s-5);
    overflow-y: auto;
    overflow-x: hidden; /* or one long word turns the panel into a sideways scroller */
    max-height: 50vh;
    font-size: var(--t-base);
    color: var(--bone-dim);
    overflow-wrap: anywhere;
}

.modal__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-3);
    padding: var(--s-5);
    border-top: var(--bw-1) solid var(--line);
}

/* --- Reduced chrome on a phone -------------------------------------------
   Nothing here hides a control that the page exists to offer. The nav and the
   mega menu collapse into one sheet, the two-column bands become one, and the
   track ledger runs as a single list.
   ------------------------------------------------------------------------ */
.nav-toggle { display: none; }

@media (max-width: 1100px) {
    .mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Four link columns, so two or four across. Three would leave the last row
       one short and the hole reads as a missing column. */
    .footer-main { grid-template-columns: minmax(0, 1fr); }
    .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    :root { --gutter: var(--s-4); }

    .nav-toggle { display: inline-flex; }

    .nav {
        position: fixed;
        z-index: 65;
        top: 6.5rem;
        right: var(--s-4);
        left: var(--s-4);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--s-2);
        border: var(--bw-1) solid var(--line-ember);
        border-radius: var(--r-1);
        background: var(--raised);
        box-shadow: var(--lift);
    }

    .nav.is-open { display: flex; }

    .nav__link {
        justify-content: flex-start;
        padding: var(--s-3);
        border-left: 0;
        border-right: 0;
        border-radius: var(--r-0);
    }

    .navbar__inner { grid-template-columns: 1fr auto; }
    .navbar__actions { gap: var(--s-2); }
    .navbar__actions .btn--fire { display: none; }

    .single, .album { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
    .sleeve__art { max-width: 22rem; }
    .pillars { grid-template-columns: minmax(0, 1fr); }
    .mega__grid { grid-template-columns: minmax(0, 1fr); }
    .mega__feature { display: none; }
    .band__inner { padding-block: var(--s-7); }
}

@media (max-width: 720px) {
    .ulink { min-height: 2.75rem; }
    .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tracks__grid { grid-template-columns: minmax(0, 1fr); }
    .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .utility__note { display: none; }
    .utility__links { width: 100%; justify-content: space-between; }
    .hero { min-height: auto; }
    .hero__inner { padding-block: var(--s-7); }
}

@media (max-width: 520px) {
    .blockcta { padding: var(--s-4); }
    .blockcta__title { font-size: var(--t-md); }
    .blockcta__go { display: none; }
    .footer-cols { grid-template-columns: minmax(0, 1fr); }
    .countdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .player__transport { flex-wrap: wrap; }
    .player__now { order: -1; width: 100%; flex: 1 0 100%; }
    .single__actions .btn, .hero__actions .btn { width: 100%; }
}

/* ==========================================================================
   Multipage additions
   ========================================================================== */

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Interior page header ------------------------------------------------
   One component, one height, on every page. The band does not grow to fit the
   copy; the copy sits inside the band.
   ------------------------------------------------------------------------ */
.page-header {
    display: flex;
    align-items: center;
    min-height: 21rem;
    border-bottom: var(--bw-1) solid var(--line-warm);
    background-color: var(--ink);
    background-image:
        linear-gradient(180deg, rgba(157, 39, 15, .22) 0%, rgba(6, 6, 10, .95) 72%),
        radial-gradient(90% 120% at 82% 0%, rgba(248, 132, 61, .16), transparent 60%);
}

.page-header__inner { width: 100%; padding-block: var(--s-7); }

.page-header__title {
    font-size: var(--t-2xl);
    color: var(--bone);
}

.page-header__lead {
    margin-top: var(--s-4);
    font-size: var(--t-md);
    color: var(--bone-dim);
}

.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-5);
}

/* --- Mega menu: the rows fill the column ---------------------------------
   Three rows left 177px of dead ground under the last one. A fourth row plus
   rows that flex means the column floor is reached by content.
   ------------------------------------------------------------------------ */
.mega__col { display: flex; flex-direction: column; }
.mega__col .mega__row { flex: 1 1 0; align-items: center; }
/* The sleeve shows whole. It is the artwork, so cropping it to save height is
   the wrong trade; the link columns flex to match whatever height it needs. */
.mega__feature img { width: 100%; height: auto; aspect-ratio: 1 / 1; }

/* --- Two column split, both columns reaching the same floor -------------- */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: var(--s-7);
}

.split__side { display: flex; flex-direction: column; }
.split__cta { margin-top: auto; padding-top: var(--s-5); display: grid; gap: var(--s-3); }

/* --- Spec list ------------------------------------------------------------ */
.speclist {
    display: flex;
    flex-direction: column;
    margin: 0;
    border-top: var(--bw-1) solid var(--line);
}

.speclist__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    flex: 1 1 auto;
    padding: var(--s-3) 0;
    border-bottom: var(--bw-1) solid var(--line);
}

.speclist__row dt {
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bone-dim);
    white-space: nowrap;
}

.speclist__row dd {
    margin: 0;
    font-family: var(--face-display);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bone);
    text-align: right;
    white-space: nowrap;
}

/* --- Action grid ---------------------------------------------------------- */
.actiongrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
    width: 100%;
}

.actiongrid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s-6); }

/* --- Mini member list on the home page ----------------------------------- */
.minilist { display: flex; flex-direction: column; border-top: var(--bw-1) solid var(--line); }

.minilist__row {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex: 1 1 auto;
    padding: var(--s-3) var(--s-2);
    border-bottom: var(--bw-1) solid var(--line);
    border-top: var(--bw-1) solid transparent;
    transition: border-color .16s var(--ease), background-color .16s var(--ease);
}

.minilist__row:hover {
    border-top-color: var(--line-ember);
    border-bottom-color: var(--line-ember);
    background: rgba(157, 39, 15, .1);
}

.minilist__text { min-width: 0; }

.minilist__name {
    display: block;
    font-family: var(--face-display);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bone);
    white-space: nowrap;
}

.minilist__role {
    display: block;
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ember-text);
    white-space: nowrap;
}

/* --- Lyrics index --------------------------------------------------------
   Twelve cards over three columns: four full rows, no empty cell anywhere.
   ------------------------------------------------------------------------ */
.lyricgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
}

.lyriccard {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4);
    border: var(--bw-1) solid var(--line);
    border-radius: var(--r-1);
    background: var(--raised);
    transition: border-color .16s var(--ease), background-color .16s var(--ease);
}

.lyriccard:hover { border-color: var(--ember); background: var(--raised-2); }

.lyriccard--single {
    border-color: var(--line-ember);
    background-color: #2b1310;
    background-image: linear-gradient(90deg, rgba(157, 39, 15, .34), rgba(6, 6, 10, .2));
}

.lyriccard__no {
    font-family: var(--face-mono);
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--ember-text);
    font-variant-numeric: tabular-nums;
}

.lyriccard__text { flex: 1 1 auto; min-width: 0; }

.lyriccard__title {
    display: block;
    font-family: var(--face-display);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bone);
    white-space: nowrap;
}

.lyriccard__meta {
    display: block;
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bone-dim);
    white-space: nowrap;
}

.lyriccard__go { flex: 0 0 auto; color: var(--ember-text); transform: rotate(-90deg); }

/* --- Song page ------------------------------------------------------------ */
.songpage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    align-items: stretch;
    gap: var(--s-7);
}

.songpage__main { min-width: 0; }
.songpage__side { display: flex; flex-direction: column; }
.songpage__cta { margin-top: auto; padding-top: var(--s-5); display: grid; gap: var(--s-3); }

/* --- Tabs ----------------------------------------------------------------- */
.tabs__bar {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1);
    border: var(--bw-1) solid var(--line);
    border-radius: var(--r-1);
    background: var(--raised);
}

.tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.75rem;
    padding: var(--s-2) var(--s-4);
    border: var(--bw-1) solid transparent;
    border-radius: var(--r-1);
    background: transparent;
    font-family: var(--face-display);
    font-size: var(--t-base);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bone-dim);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}

.tabs__tab:hover { border-color: var(--line-ember); color: var(--bone); }

.tabs__tab[aria-selected="true"] {
    border-color: var(--ember);
    background: rgba(157, 39, 15, .28);
    color: var(--bone);
}

.tabs__panel { margin-top: var(--s-5); }

.tabs__note {
    margin-bottom: var(--s-4);
    font-size: var(--t-sm);
    color: var(--bone-dim);
}

/* A tab stave cannot wrap and must not make the PAGE pan, so it scrolls inside
   its own box. This is the one sanctioned escape, declared on the element. */
.tabblock {
    margin: 0;
    padding: var(--s-5);
    overflow-x: auto;
    overflow-y: hidden;
    border: var(--bw-1) solid var(--line);
    border-radius: var(--r-1);
    background: var(--ink);
    color: var(--bone-dim);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    line-height: 1.5;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
}

/* --- Lyrics --------------------------------------------------------------- */
.lyric {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5) var(--s-7);
}

.lyric__block {
    padding: var(--s-4) var(--s-5);
    border: var(--bw-1) solid var(--line);
    border-left: var(--bw-2) solid var(--line-ember);
    border-radius: var(--r-1);
    background: var(--raised);
}

.lyric__section {
    margin-bottom: var(--s-3);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ember-text);
    white-space: nowrap;
}

.lyric__lines { display: flex; flex-direction: column; }

.lyric__line {
    display: block;
    font-size: var(--t-md);
    line-height: 1.6;
    color: var(--bone);
    overflow-wrap: anywhere;
}

/* --- Prev / next ---------------------------------------------------------- */
.songnav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: var(--s-3);
    margin-bottom: var(--s-6);
}

.songnav__side {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: var(--bw-1) solid var(--line);
    border-radius: var(--r-1);
    background: var(--raised);
    color: var(--bone-dim);
    transition: border-color .16s var(--ease), background-color .16s var(--ease);
}

.songnav__side:hover { border-color: var(--ember); background: var(--raised-2); }
.songnav__side--next { justify-content: flex-end; text-align: right; }
.songnav__side--prev { grid-column: 1; }
.songnav__side--next { grid-column: 3; }
.songnav__text { min-width: 0; }

.songnav__dir {
    display: block;
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ember-text);
    white-space: nowrap;
}

.songnav__name {
    display: block;
    font-family: var(--face-display);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bone);
    white-space: nowrap;
}

.songnav__all {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border: var(--bw-1) solid var(--line);
    border-radius: var(--r-1);
    background: var(--raised);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bone-dim);
    white-space: nowrap;
    transition: border-color .16s var(--ease), color .16s var(--ease);
}

.songnav__all:hover { border-color: var(--ember); color: var(--bone); }

/* --- The lineup ----------------------------------------------------------
   A list, not a grid. Five members cannot fill a two, three or four column
   row, and a part-filled last row is exactly the defect being avoided.
   ------------------------------------------------------------------------ */
.memberlist { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }

.member {
    display: flex;
    align-items: flex-start;
    gap: var(--s-5);
    padding: var(--s-5);
    border: var(--bw-1) solid var(--line);
    border-radius: var(--r-1);
    background: var(--raised);
    transition: border-color .16s var(--ease), background-color .16s var(--ease);
}

.member:hover { border-color: var(--line-ember); background: var(--raised-2); }

.medallion--lg { width: 4rem; height: 4rem; }
.medallion--lg .i { width: 1.75rem; height: 1.75rem; }

.member__text { min-width: 0; }

.member__name { font-size: var(--t-lg); color: var(--bone); }

.member__role {
    margin-top: var(--s-1);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ember-text);
}

.member__bio { margin-top: var(--s-3); font-size: var(--t-base); color: var(--bone-dim); }

/* --- Form ----------------------------------------------------------------
   Header, body, footer. The commit point lands in the same place every time.
   ------------------------------------------------------------------------ */
.formpanel {
    display: flex;
    flex-direction: column;
    border: var(--bw-1) solid var(--line-warm);
    border-radius: var(--r-1);
    background: var(--raised);
}

.formpanel__head { padding: var(--s-5); border-bottom: var(--bw-1) solid var(--line); }
.formpanel__title { font-size: var(--t-lg); color: var(--bone); }
.formpanel__sub { margin-top: var(--s-2); font-size: var(--t-base); color: var(--bone-dim); }
.formpanel__body { display: grid; gap: var(--s-4); padding: var(--s-5); }

.formpanel__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-3);
    margin-top: auto;
    padding: var(--s-5);
    border-top: var(--bw-1) solid var(--line);
}

.field { display: grid; gap: var(--s-2); min-width: 0; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; }

.field__label {
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bone-dim);
    white-space: nowrap;
}

.field__input {
    width: 100%;
    min-width: 0;
    min-height: 2.875rem;
    padding: var(--s-3) var(--s-4);
    border: var(--bw-1) solid var(--line);
    border-radius: var(--r-1);
    background: var(--ink);
    color: var(--bone);
    font-family: var(--face-text);
    font-size: var(--t-base);
    transition: border-color .16s var(--ease);
}

.field__input::placeholder { color: #7f7971; }
.field__input:hover { border-color: var(--rust); }
.field__input:focus { border-color: var(--ember); outline: none; }
.field__area { resize: vertical; line-height: 1.6; }

/* Never a bare select: the native arrow is welded to the right edge and
   ignores padding, so the chevron is ours and the room is reserved. */
.selectwrap { position: relative; }

.field__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.75rem;
}

.selectwrap__caret {
    position: absolute;
    right: var(--s-4);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--ember-text);
}

.field__error {
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    letter-spacing: .06em;
    color: var(--ember-text);
}

@media (max-width: 1100px) {
    .lyricgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .page-header { min-height: 17rem; }
    .split, .songpage { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
    .lyric { grid-template-columns: minmax(0, 1fr); }
    .songnav { grid-template-columns: minmax(0, 1fr); }
    .songnav__side--prev, .songnav__side--next { grid-column: 1; }
    .songnav__side--next { justify-content: flex-start; text-align: left; }
    .songnav__all { justify-content: center; }
    .actiongrid--three { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .lyricgrid { grid-template-columns: minmax(0, 1fr); }
    .actiongrid { grid-template-columns: minmax(0, 1fr); }
    .member { flex-direction: column; gap: var(--s-4); }
    .formpanel__foot { flex-direction: column-reverse; align-items: stretch; }
    .formpanel__foot .btn { width: 100%; }
}

/* The playing note off the arrangement sheet: a direction about how to play it,
   so it sits with the specs rather than standing in as the page lead. */
.songpage__feel {
    padding: var(--s-4) 0;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--bone-dim);
}

.speclist--tight { border-top: var(--bw-1) solid var(--line); }