/* ---- Design tokens ---- */
:root {
    /* Light theme: gray on white.
       Body text is #2e2e33 on #ffffff (~13.5:1) and muted text #5f5f6a
       (~6.5:1) — both clear WCAG AA, unlike the previous dark palette. */
    --color-bg: #ffffff;
    --color-bg-raised: #f6f6f7;
    --color-border: #e2e2e6;
    --color-text: #2e2e33;
    --color-text-muted: #5f5f6a;
    --color-accent: #c1121f;

    /* Header bar is dark gray against the light page. Its own text tokens,
       since the page-level ones are dark and would vanish against it. */
    --color-header-bg: #2b2b30;
    --color-header-text: #f2f2f4;
    --color-header-text-muted: #b4b4bd;
    --color-header-border: #3a3a41;

    --font-display: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --gh-font-heading: var(--font-display);
    --gh-font-body: var(--font-body);

    --wrap-width: 1080px;
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: 6rem;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0 0 var(--space-2); }
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

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

.wrap {
    max-width: var(--wrap-width);
    margin: 0 auto;
    padding: 0 var(--space-3);
}

/* ---- Header / nav ---- */
.site-header {
    border-bottom: 1px solid var(--color-header-border);
    position: sticky;
    top: 0;
    background: var(--color-header-bg);
    color: var(--color-header-text);
    z-index: 20;
}
.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}
.site-logo {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-header-text);
}
.site-nav ul {
    display: flex;
    gap: var(--space-4);
}
.site-nav a {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-header-text-muted);
    transition: color 0.15s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--color-header-text);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.nav-toggle-bar {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-header-text);
}

@media (max-width: 640px) {
    .nav-toggle { display: flex; }
    .site-nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--color-header-bg);
        border-bottom: 1px solid var(--color-header-border);
    }
    .site-nav.is-open { display: block; }
    .site-nav ul {
        flex-direction: column;
        gap: 0;
    }
    .site-nav a {
        display: block;
        padding: var(--space-2) var(--space-3);
        border-top: 1px solid var(--color-header-border);
    }
}

/* ---- Footer ---- */
.site-footer {
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-6);
}
.site-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
.site-footer-links {
    display: flex;
    gap: var(--space-3);
}
.site-footer-links a:hover { color: var(--color-text); }

/* ---- Shared page elements ---- */
.page-header {
    padding: var(--space-5) 0 var(--space-4);
    text-align: center;
}
.page-header h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
}
.page-content {
    padding-bottom: var(--space-5);
}
.button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    border-radius: 2px;
    transition: opacity 0.15s ease;
}
.button:hover { opacity: 0.85; }
.button--ghost {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

/* ---- Hero ---- */
.hero {
    padding: var(--space-6) 0;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(193, 18, 31, 0.07), transparent 60%);
}

/* ---- Aurora video hero (homepage only) ----
   See wrest-video-hero-plan.md. Night sky above, daylight site below — the
   light theme resumes immediately after this section.

   Everything is scoped to .hero--video so the plain .hero above is untouched
   and any other page using it is unaffected. */

.hero--video {
    --hero-fallback: #0a1428;   /* deep blue — the floor of the fallback chain */
    --hero-ink: #f4f7ff;

    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 85vh;
    /* The nav is a 64px sticky bar rendered before this section. Pull the
       hero up underneath it so the video runs behind the nav rather than
       starting below it, and pad the content back down so nothing hides
       under the bar. */
    margin-top: -64px;
    padding: calc(var(--space-6) + 64px) 0 var(--space-6);
    /* Full-bleed: break out of any container without touching the markup. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* The visible state until video or poster loads. Never looks broken. */
    background: var(--hero-fallback);
    overflow: hidden;
}

/* Poster is applied to the section (not an <img>) so the fallback chain is
   one property: JS sets background-image only once the file is confirmed. */
.hero--video.has-poster {
    background-image: var(--hero-poster-url);
    background-size: cover;
    background-position: center 35%;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* This footage is 16:9 and the hero is wider than it is tall, so cover
       crops the SIDES, not the top and bottom — object-position has almost
       no vertical travel here. Framing is therefore handled by shifting the
       hero text up (see .hero--video .hero-inner) rather than by moving the
       video, which barely responds. */
    object-position: center center;
    z-index: -2;
    /* Fades in only once playback actually starts, so a stalled load shows
       the poster or the deep blue rather than a black rectangle. */
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hero--video.is-playing .hero-video { opacity: 1; }

/* No video attached: keep it out of the layout entirely. */
.hero--video:not(.has-video) .hero-video { display: none; }

/* Scrim: darker top (nav legibility) and bottom (handoff into the light
   section), lighter through the middle where the title sits. Tune these
   against the real footage once it exists. */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Tuned to this footage. The plan's 0.75 bottom stop was for a bay whose
       lower third was empty water; here the cottage sits low in frame, so a
       heavy bottom band would black out the one lit thing on screen. Eased
       to 0.45, which still carries the handoff into the light section. */
    background: linear-gradient(
        180deg,
        rgba(5, 10, 25, 0.55) 0%,
        rgba(5, 10, 25, 0.22) 42%,
        rgba(5, 10, 25, 0.45) 100%);
}

/* Lift the text block off centre so the cottage on the horizon sits in clear
   space below the buttons instead of behind them. Paired with the extra
   bottom padding on .hero--video, this keeps the whole composition centred
   while the subject stays unobstructed. */
.hero--video .hero-inner {
    position: relative;
    transform: translateY(-9%);
}

.hero--video .hero-title,
.hero--video .hero-tagline {
    color: var(--hero-ink);
    text-shadow: 0 2px 24px rgba(3, 8, 20, 0.7);
}

/* Red on deep blue reads well — the filled button is unchanged by design.
   The ghost button flips to a white outline so it works on the dark ground. */
.hero--video .button--ghost {
    border-color: rgba(244, 247, 255, 0.65);
    color: var(--hero-ink);
}

.hero--video .button--ghost:hover,
.hero--video .button--ghost:focus-visible {
    border-color: var(--hero-ink);
    background: rgba(244, 247, 255, 0.12);
    opacity: 1;
}

/* ---- Nav over the hero ----
   Only on pages that opt in (body.has-video-hero, set by main.js). The nav
   partial is shared by every page, so this must not leak. If it ever proves
   awkward, deleting this block restores the solid charcoal bar — an
   explicitly acceptable outcome per the plan. */

body.has-video-hero .site-header {
    /* Not fully transparent: a top-down scrim so the links stay legible over
       whatever frame is behind them, while the video still reads through. */
    background: linear-gradient(
        180deg,
        rgba(5, 10, 25, 0.65) 0%,
        rgba(5, 10, 25, 0.25) 100%);
    border-bottom-color: transparent;
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Past the hero, the nav becomes its normal solid self again. */
body.has-video-hero .site-header.is-stuck {
    background: var(--color-header-bg);
    border-bottom-color: var(--color-header-border);
}

/* Over video the links need their own shadow to stay legible against
   whatever frame is behind them. */
body.has-video-hero .site-header:not(.is-stuck) .site-logo,
body.has-video-hero .site-header:not(.is-stuck) .site-nav a {
    text-shadow: 0 1px 12px rgba(3, 8, 20, 0.8);
}

body.has-video-hero .site-header:not(.is-stuck) .site-nav a { color: #e8ecf7; }

body.has-video-hero .site-header:not(.is-stuck) .site-nav a:hover,
body.has-video-hero .site-header:not(.is-stuck) .site-nav a:focus-visible {
    color: #fff;
}

/* The mobile dropdown needs a solid ground regardless of scroll position —
   transparent over video would make the menu unreadable. */
@media (max-width: 640px) {
    body.has-video-hero .site-nav.is-open {
        background: var(--color-header-bg);
    }
}

@media (max-width: 700px) {
    .hero--video { min-height: 72vh; }
}

/* The video is decorative ambience; reduced-motion users get the poster or
   the flat fallback. main.js also refuses to attach sources, so the file is
   never downloaded — this rule only covers a video already attached when
   the preference changes mid-session. */
@media (prefers-reduced-motion: reduce) {
    .hero-video { display: none; }
    .hero--video.is-playing .hero-video { opacity: 0; }
}
.hero-title {
    font-size: clamp(3rem, 10vw, 6rem);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}
.hero-tagline {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    max-width: 32rem;
    margin: 0 auto var(--space-4);
}
.hero-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Sections ---- */
.section {
    padding: var(--space-5) var(--space-3);
}
.section-title {
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-4);
    text-align: center;
}
.empty-state {
    color: var(--color-text-muted);
    text-align: center;
}

/* ---- Post grid / cards ---- */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
@media (max-width: 800px) {
    .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .post-grid { grid-template-columns: 1fr; }
}
.post-card {
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.post-card:hover { border-color: var(--color-accent); }
.post-card-link { display: block; }
.post-card-image { aspect-ratio: 16 / 9; overflow: hidden; }
.post-card-image img { width: 100%; height: 100%; object-fit: cover; }
.post-card-content { padding: var(--space-3); }
.post-card-tag {
    display: inline-block;
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-1);
}
.post-card-title { font-size: 1.15rem; margin-bottom: var(--space-1); }
.post-card-excerpt { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: var(--space-1); }
.post-card-date { color: var(--color-text-muted); font-size: 0.8rem; }

/* ---- Listen / platform links ---- */
.listen-section { text-align: center; }
.platform-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.platform-link {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.platform-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ---- Generic page / prose content ---- */
.page-feature-image {
    max-width: var(--wrap-width);
    margin: 0 auto var(--space-4);
    padding: 0 var(--space-3);
}
.page-feature-image img { border-radius: 4px; }

.page-content {
    max-width: 42rem;
}
.page-content h2 {
    font-size: 1.5rem;
    margin-top: var(--space-5);
}
.page-content h3 {
    font-size: 1.2rem;
    margin-top: var(--space-4);
}
.page-content p { color: var(--color-text); }
.page-content a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.page-content ul, .page-content ol {
    margin: 0 0 var(--space-2);
    padding-left: 1.25rem;
}
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content li { margin-bottom: 0.35rem; }
.page-content img { border-radius: 4px; margin: var(--space-3) 0; }
.page-content blockquote {
    border-left: 3px solid var(--color-accent);
    margin: var(--space-3) 0;
    padding-left: var(--space-2);
    color: var(--color-text-muted);
    font-style: italic;
}
.page-content hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-4) 0;
}

/* ---- Lyrics page ---- */
.lyrics-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-4);
    align-items: start;
    max-width: var(--wrap-width);
}
@media (max-width: 720px) {
    .lyrics-layout { grid-template-columns: 1fr; }
}
.lyrics-index {
    position: sticky;
    top: 88px;
}
.lyrics-index-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}
.lyrics-index li { margin-bottom: 0.5rem; }
.lyrics-index a {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    transition: color 0.15s ease;
}
.lyrics-index a:hover,
.lyrics-index a.is-active {
    color: var(--color-accent);
}
@media (max-width: 720px) {
    .lyrics-index { position: static; }
    .lyrics-index ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }
}

.lyric-sheet {
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    scroll-margin-top: 88px;
}
.lyric-sheet:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.lyric-sheet-title { font-size: 1.75rem; margin-bottom: 0.25rem; }
.lyric-sheet-album {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-3);
}
.lyric-sheet-text {
    font-family: inherit;
    white-space: pre-wrap;
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--color-text);
    margin: 0;
}

/* ---- Gallery ---- */
.gallery-intro {
    margin-bottom: var(--space-3);
}
.gallery-intro p:last-child {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.photo-grid {
    max-width: var(--wrap-width);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}
@media (max-width: 720px) {
    .photo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .photo-grid { grid-template-columns: 1fr; }
}
.photo-grid-item {
    margin: 0;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    background: var(--color-bg-raised);
    display: flex;
    flex-direction: column;
}
.photo-grid-item img {
    display: block;
    width: 100%;
    /* height:auto would let the intrinsic height attribute win and blow the
       tile up to full portrait height; the fixed height plus cover crops the
       mixed portrait/landscape sources to a uniform square instead. */
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}
.photo-grid-item figcaption {
    padding: var(--space-1) calc(var(--space-1) * 1.5);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
}
.photo-grid-item figcaption a {
    color: inherit;
    text-decoration: underline;
}
.photo-grid-item figcaption a:hover { color: var(--color-accent); }

/* ---- Single post ---- */
.post-header {
    padding: var(--space-5) var(--space-3) var(--space-4);
    text-align: center;
}
.post-tag {
    display: inline-block;
    color: var(--color-accent);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}
.post-header h1 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}
.post-meta {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: var(--space-2) 0 0;
}
.post-feature-image {
    max-width: var(--wrap-width);
    margin-bottom: var(--space-4);
}
.post-feature-image img { border-radius: 4px; }
.post-content { margin: 0 auto; }
.post-footer {
    max-width: 42rem;
    padding-top: var(--space-3);
}

/* ---- Koenig editor card widths ---- */
.kg-width-wide {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    width: 100vw;
}
.kg-width-full {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    width: 100vw;
}

/* ---- Discography index (page-discography.hbs) ---- */
.discography { padding-bottom: var(--space-4); }

.disco-group { margin-bottom: var(--space-4); }

.disco-group-title {
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding-bottom: 0.75rem;
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.disco-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}

.disco-item { min-width: 0; }

.disco-cover {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-raised);
}

.disco-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

a.disco-cover:hover img,
a.disco-cover:focus-visible img { transform: scale(1.04); opacity: 0.88; }

.disco-meta { padding-top: 0.85rem; }

.disco-title {
    font-size: 1.02rem;
    line-height: 1.3;
    margin: 0 0 0.3rem;
}

.disco-title a { color: var(--color-text); text-decoration: none; }
.disco-title a:hover { color: var(--color-accent); }

.disco-sub {
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.disco-note {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* Singles: plain list, no artwork */
.disco-single-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: var(--space-3);
}

.disco-single-list li {
    break-inside: avoid;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.disco-single-title { color: var(--color-text); }

.disco-single-from {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.disco-source {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* ---- Album detail (page-album.hbs) ---- */
.album-breadcrumb {
    max-width: 52rem;
    margin: 0 auto;
    padding: var(--space-3) var(--space-3) var(--space-2);
    font-size: 0.82rem;
}

.album-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.album-breadcrumb a:hover { color: var(--color-accent); }

.album-header {
    max-width: 52rem;
    margin: 0 auto var(--space-4);
    padding: 0 var(--space-3);
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-3);
    align-items: center;
}

.album-cover {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-raised);
}

.album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.album-headline h1 { margin: 0 0 0.5rem; }

.album-sub {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

/* Album body shares the header's measure and centres within the wrap.
   The base .page-content rule sets max-width without auto margins, which
   left-aligns it inside the 1080px wrap — override both here. */
.album-content {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 var(--space-3) var(--space-4);
}

.album-content h2 {
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 0;
    margin-bottom: var(--space-2);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

/* Track lists render as an ordered list from Ghost page content */
.album-content ol {
    list-style: none;
    counter-reset: track;
    padding: 0;
    margin: 0;
    max-width: none;
}

.album-content ol li {
    counter-increment: track;
    display: flex;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-border);
}

/* Track links (to lyric pages) sit inside Ghost-authored content, so the
   generic .page-content a accent+underline applies. Quieter here: a 10-item
   list of underlined red reads as noise. */
.album-content ol li a {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.album-content ol li a:hover,
.album-content ol li a:focus-visible {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.album-content ol li::before {
    content: counter(track, decimal-leading-zero);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    flex: none;
    min-width: 1.75rem;
}

@media (max-width: 700px) {
    .album-header {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .album-cover { max-width: 260px; }
    .disco-single-list { columns: 1; }
    .disco-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---- Song page (custom-song.hbs) ---- */
.song-breadcrumb {
    max-width: 44rem;
    margin: 0 auto;
    padding: var(--space-3) var(--space-3) var(--space-2);
    font-size: 0.82rem;
}

.song-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.song-breadcrumb a:hover { color: var(--color-accent); }

.song-header {
    max-width: 44rem;
    margin: 0 auto var(--space-3);
    padding: 0 var(--space-3);
}

.song-header h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 0.4rem;
}

.song-sub {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.song-content {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 var(--space-3) var(--space-4);
}

/* Lyric stanzas: preserve the author's line breaks */
.song-content .lyric-block {
    white-space: pre-wrap;
    font-size: 1.05rem;
    line-height: 1.85;
}

.song-content blockquote {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-raised);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 4px 4px 0;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.song-content blockquote p:last-child { margin-bottom: 0; }

/* ---- Lyrics index (page-lyrics.hbs) ---- */
.lyrics-index-content { padding-bottom: var(--space-3); }

.lyrics-albums { padding-bottom: var(--space-4); }

.lyrics-album-group { margin-bottom: var(--space-4); }

/* Two columns that read DOWN each column (01-05 left, 06-10 right) rather
   than across — grid's row-major flow would interleave the track numbers.
   grid-auto-flow: column with an explicit row count gives column-major
   ordering; each album has 10 tracks, so 5 rows fills two even columns. */
.lyrics-song-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    column-gap: var(--space-4);
    counter-reset: lyric-track;
}

.lyrics-song {
    counter-increment: lyric-track;
    border-bottom: 1px solid var(--color-border);
}

.lyrics-song a {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.8rem 0.25rem;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.lyrics-song a::before {
    content: counter(lyric-track, decimal-leading-zero);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    flex: none;
    min-width: 1.75rem;
}

.lyrics-song a:hover,
.lyrics-song a:focus-visible { color: var(--color-accent); }

.lyrics-song-title { font-weight: 600; }

/* Track/album detail is redundant next to the album heading — keep it for
   screen readers and small viewports, hide it visually on wide grids. */
.lyrics-song-meta { display: none; }

@media (max-width: 700px) {
    .lyrics-song-list {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}

/* ==========================================================================
   THE EVOLUTION OF WREST  —  page-evolution.hbs

   A deliberate self-contained "poster" section. It owns a festival palette
   rather than the site's gray-on-white, so every token below is redefined
   on .evo (NOT on :root) and every selector is namespaced. Nothing here
   can leak into the rest of the site.
   ========================================================================== */

.evo {
    /* Adopts the site palette rather than the festival one it shipped with.
       The warm cream band read as an embedded widget sitting on the page
       instead of part of it — most obviously where it ended in a hard rule
       above the white footer strip. Ground and ink now match the rest of the
       site; the accent carries the structure instead of colour blocking. */
    --evo-bg: var(--color-bg);
    --evo-bg-deep: var(--color-bg-raised);
    --evo-ink: var(--color-text);
    --evo-ink-soft: var(--color-text-muted);
    --evo-yellow: #d8a43a;
    --evo-coral: var(--color-accent);
    --evo-sky: #4a7fa8;
    --evo-leaf: #5a7a5f;
    --evo-leaf-deep: #3f5c46;
    --evo-bark: #6b6b74;

    --evo-node-w: 190px;
    /* The timeline axis splits each node. Releases with art occupy the space
       above it; singles hang below. */
    --evo-above: 290px;
    --evo-below: 190px;

    position: relative;
    background: var(--evo-bg);
    color: var(--evo-ink);
    padding: var(--space-5) 0 var(--space-3);
    margin-bottom: var(--space-5);

    /* Break out of the page container so it reads as a full-bleed poster
       band rather than a broken-looking box. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* No heavy rules top and bottom — those were what framed this as a
       separate panel. It now flows out of the page header and into the
       footer like every other page. */
    overflow: hidden;
}

/* The paper-grain overlay went with the festival-poster treatment; on the
   site's clean white it just read as noise. */

.evo > * { position: relative; }

/* ---- Header ---- */

.evo-header { text-align: center; margin-bottom: var(--space-4); }

.evo-title {
    font-size: clamp(2.1rem, 6vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-1);
    text-transform: uppercase;
}

.evo-title-band {
    /* Was coral with a chunky yellow offset shadow — poster lettering. The
       accent alone now carries it, matching every other page title. */
    color: var(--evo-coral);
}

.evo-subhead {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--evo-ink-soft);
    max-width: 34em;
    margin: 0 auto var(--space-2);
}

.evo-hint {
    font-size: 0.85rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--evo-ink-soft);
    margin: 0;
}

.evo-hint-arrows {
    display: inline-block;
    color: var(--evo-coral);
    animation: evo-nudge 1.6s ease-in-out infinite;
}

@keyframes evo-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(5px); }
}

/* ---- The scroller ---- */

.evo-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--evo-coral) transparent;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}

.evo-scroller.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.evo-scroller.is-dragging * { pointer-events: none; }

.evo-scroller:focus-visible {
    outline: 3px solid var(--evo-coral);
    outline-offset: -3px;
}

.evo-scroller::-webkit-scrollbar { height: 10px; }
.evo-scroller::-webkit-scrollbar-track { background: transparent; }
.evo-scroller::-webkit-scrollbar-thumb {
    background: var(--evo-coral);
    border-radius: 5px;
}

.evo-strip {
    position: relative;
    display: block;
    /* Both paddings are load-bearing. Top leaves room for the milestone
       flags, which stand taller than the artwork. Bottom matters because
       the scroller clips overflow-y, so it has to be deep enough to hold
       an open card below the lower register or cards get cut off. */
    padding: var(--space-6) var(--space-4) 230px;
    min-width: min-content;
}

/* ---- Era bands ---- */

.evo-eras {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--space-4);
    display: grid;
    /* 4 + 8 + 4 = the 16 nodes. Each era is named for the album that closes
       it, so the boundary falls immediately AFTER that album:
         1  Adventurers → Coward of Us All          (3 singles + album)
         2  Live at St Mary's → End All The Days    (live, 2 singles, EP, 3 singles, album)
         3  Bedtime Rhymes → Hogmanay Special '25   (album, ENFA, 2 live)
       Must stay in sync with the era divs in page-evolution.hbs. */
    grid-template-columns:
        calc(var(--evo-node-w) * 4)
        calc(var(--evo-node-w) * 8)
        calc(var(--evo-node-w) * 4);
}

.evo-era {
    padding-top: var(--space-2);
    text-align: center;
    border-left: 2px dashed rgba(51, 41, 28, 0.16);
}

.evo-era:last-child { border-right: 2px dashed rgba(51, 41, 28, 0.16); }

.evo-era span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--evo-ink-soft);
}

/* Faint neutral banding — enough to read three eras at a glance without the
   yellow/green/pink blocks, which fought the rest of the site. */
.evo-era-1 { background: rgba(46, 46, 51, 0.032); }
.evo-era-2 { background: transparent; }
.evo-era-3 { background: rgba(46, 46, 51, 0.032); }

/* ---- The march ---- */

.evo-march {
    position: relative;
    display: flex;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Every node is the same height and centred on the timeline axis. Releases
   with artwork (albums, EP, live) grow UPWARD from the line; singles hang
   BELOW it. The split is not decorative — it maps exactly onto which
   releases have cover art, so the two registers read as two kinds of thing. */
.evo-node {
    position: relative;
    flex: 0 0 var(--evo-node-w);
    width: var(--evo-node-w);
    height: calc(var(--evo-above) + var(--evo-below));
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Above the line: figure sits at the bottom of the upper half, so it stands
   on the axis and grows up. */
.evo-node.evo-album,
.evo-node.evo-ep,
.evo-node.evo-live {
    justify-content: flex-start;
    padding-top: var(--evo-above);
}

.evo-album .evo-fig,
.evo-ep .evo-fig,
.evo-live .evo-fig {
    /* Pull the figure up out of the padding so its base meets the axis. */
    margin-top: calc(-1 * var(--evo-above));
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: var(--evo-above);
}

/* Below the line: singles hang from the axis on a short tether. The sprout
   itself stays upright — flipping it would read as a dead plant — so it
   hangs the way a luggage tag does, growing DOWN into its own half. */
.evo-node.evo-single {
    justify-content: flex-start;
    padding-top: var(--evo-above);
}

.evo-single .evo-fig {
    transform-origin: 50% 0;
    order: 2;
}

/* ---- Figures ---- */

.evo-fig {
    display: block;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    /* Entrance: grow out of the axis. Origin is overridden per register
       below so figures above grow up and singles below grow down. */
    transform-origin: 50% 100%;
    transform: scaleY(0.04);
    opacity: 0;
    transition: transform 0.62s cubic-bezier(0.22, 1.4, 0.36, 1),
                opacity 0.4s ease;
    transition-delay: calc(var(--evo-i) * 55ms);
}

/* Singles hang, so they unfurl downward from the line. */
.evo-single .evo-fig { transform-origin: 50% 0; }

.evo-node.is-in .evo-fig { transform: scaleY(1); opacity: 1; }

.evo-fig:focus-visible {
    outline: 3px solid var(--evo-coral);
    outline-offset: 6px;
    border-radius: 6px;
}

.evo-svg { display: block; overflow: visible; }

/* Size hierarchy — this is the whole metaphor. Single < EP < album. */
.evo-single .evo-svg { width: 96px;  height: 118px; }
.evo-ep     .evo-svg { width: 104px; height: 130px; }
.evo-album  .evo-svg { width: 132px; height: 190px; }
/* Live sits outside the hierarchy — see evo-figure-live.hbs. */
.evo-live   .evo-svg { width: 110px; height: 150px; }

/* Shadow pools on the axis beneath figures that STAND on it. Singles hang
   below the line, so they cast none — nothing is under them. */
.evo-album .evo-fig,
.evo-ep .evo-fig,
.evo-live .evo-fig { position: relative; }

.evo-album .evo-fig::after,
.evo-ep .evo-fig::after,
.evo-live .evo-fig::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    height: 11px;
    transform: translateX(-50%);
    background: rgba(51, 41, 28, 0.17);
    border-radius: 50%;
    filter: blur(3px);
}

.evo-ep     .evo-fig::after { width: 78px; }
.evo-album  .evo-fig::after { width: 96px; height: 13px; }
.evo-live   .evo-fig::after { width: 72px; background: rgba(51, 41, 28, 0.09); }

/* ---- Cover-art figures ----
   The 8 releases with artwork. Sized by the same tier classes as the SVG
   figures so single < EP < album still reads at a glance; a stalk below the
   sleeve keeps them standing on the ground line like the plants do. */

.evo-cover-fig {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.evo-cover-sleeve {
    display: block;
    position: relative;
    border: 3px solid var(--evo-ink);
    border-radius: 3px;
    background: #fff;
    /* Chunky offset shadow, matching the cards and the poster lettering. */
    box-shadow: 0 4px 14px rgba(46, 46, 51, 0.18);
    overflow: hidden;
}

.evo-cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.evo-cover-stalk {
    display: block;
    width: 6px;
    background: var(--evo-bark);
    border-radius: 0 0 2px 2px;
}

/* Tier sizing — the metaphor. Every figure is a square now, so size is the
   only thing carrying weight: single < EP < album. */
.evo-album .evo-cover-sleeve { width: 126px; height: 126px; }
.evo-album .evo-cover-stalk  { height: 58px; }

.evo-ep .evo-cover-sleeve { width: 92px; height: 92px; }
.evo-ep .evo-cover-stalk  { height: 40px; width: 5px; }

/* Singles hang below the axis, so the tether goes ABOVE the sleeve and the
   offset shadow flips to match the light coming from the line. */
.evo-single .evo-cover-fig { justify-content: flex-start; }

.evo-single .evo-cover-sleeve {
    width: 68px;
    height: 68px;
    border-width: 2px;
    box-shadow: 0 3px 10px rgba(46, 46, 51, 0.16);
    order: 2;
}

.evo-single .evo-cover-stalk {
    height: 34px;
    width: 4px;
    order: 1;
    border-radius: 2px 2px 0 0;
}

/* Live sits outside the hierarchy: desaturated, dashed stalk, sound rings
   behind it — the same "echo, not a step forward" treatment the SVG live
   figure uses. */
.evo-live .evo-cover-sleeve {
    width: 84px;
    height: 84px;
    border-color: var(--evo-ink-soft);
    border-style: dashed;
    box-shadow: 0 3px 10px rgba(46, 46, 51, 0.10);
}

.evo-live .evo-cover-img { opacity: 0.82; }

.evo-live .evo-cover-stalk {
    height: 44px;
    width: 4px;
    background: repeating-linear-gradient(
        var(--evo-ink-soft) 0 6px,
        transparent 6px 12px);
}

/* ---- SVG figure parts ---- */

.evo-stem {
    stroke: var(--evo-bark);
    stroke-width: 6;
    stroke-linecap: round;
    fill: none;
}

.evo-stem-thick { stroke-width: 9; }
.evo-stem-thin  { stroke-width: 4; }

.evo-leaf  { fill: var(--evo-leaf); }
.evo-bud   { fill: var(--evo-coral); }
.evo-bud-sm { fill: var(--evo-yellow); }

.evo-bloom     { fill: var(--evo-yellow); }
.evo-bloom-alt { fill: var(--evo-sky); }

/* Alternate leaf tone down the march so no two figures read identically. */
.evo-node:nth-child(even) .evo-leaf { fill: var(--evo-leaf-deep); }
.evo-node:nth-child(3n)   .evo-bud  { fill: var(--evo-sky); }

/* Live figures: hollow outline echo of the album silhouette. */
.evo-stem-ghost {
    stroke: var(--evo-ink-soft);
    stroke-dasharray: 7 6;
    opacity: 0.75;
}

.evo-leaf-ghost {
    fill: none;
    stroke: var(--evo-leaf-deep);
    stroke-width: 3;
    opacity: 0.8;
}

.evo-bud-ghost {
    fill: none;
    stroke: var(--evo-coral);
    stroke-width: 4;
}

.evo-ring {
    fill: none;
    stroke: var(--evo-sky);
    stroke-width: 2.5;
    opacity: 0.5;
}

.evo-ring-2 { opacity: 0.75; }

/* ---- Idle sway ---- */

.evo-sway {
    transform-origin: 50% 100%;
    animation: evo-sway 4.6s ease-in-out infinite;
    /* Stagger so the march breathes rather than pulsing in unison. */
    animation-delay: calc(var(--evo-i) * -420ms);
}

@keyframes evo-sway {
    0%, 100% { transform: rotate(-1.5deg); }
    50%      { transform: rotate(1.5deg); }
}

.evo-fig:hover .evo-sway { animation: evo-bounce 0.55s ease; }

@keyframes evo-bounce {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-11px) scale(1.05); }
    65%  { transform: translateY(2px) scale(0.98); }
    100% { transform: translateY(0) scale(1); }
}

/* ---- Labels ---- */

/* Labels sit just clear of the axis, on the same side as their figure. */
.evo-label {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 var(--space-1);
    text-align: center;
    transition: transform 0.2s ease;
}

/* Above-line releases: label sits above its artwork, clear of the sleeve
   and its stalk rather than straddling either. */
.evo-album .evo-label { bottom: calc(var(--evo-below) + 196px); }
.evo-ep    .evo-label { bottom: calc(var(--evo-below) + 144px); }
.evo-live  .evo-label { bottom: calc(var(--evo-below) + 140px); }

/* Singles hang below, so their label goes underneath the sleeve. */
.evo-single .evo-label {
    top: calc(var(--evo-above) + 112px);
}

.evo-fig:hover + .evo-label { transform: translateY(-4px); }
.evo-single .evo-fig:hover + .evo-label { transform: translateY(4px); }

.evo-year {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--evo-coral);
    font-variant-numeric: tabular-nums;
}

.evo-name {
    display: block;
    font-size: 0.86rem;
    line-height: 1.3;
    color: var(--evo-ink);
    text-wrap: balance;
}

.evo-album .evo-name { font-weight: 700; }
.evo-live  .evo-name { color: var(--evo-ink-soft); font-style: italic; }

/* ---- Cards ---- */

.evo-card {
    position: absolute;
    /* Just below the lower register's artwork and label, so an open card is
       close to the figure it belongs to rather than stranded at the bottom
       of the strip. */
    top: calc(var(--evo-above) + 175px);
    left: 50%;
    z-index: 20;
    width: 280px;
    transform: translateX(-50%);
    background: #fff;
    border: 3px solid var(--evo-ink);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(46, 46, 51, 0.20);
    padding: var(--space-2);
    text-align: left;
}

.evo-card[hidden] { display: none; }

.evo-card::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 50%;
    width: 16px;
    height: 16px;
    transform: translateX(-50%) rotate(45deg);
    background: #fff;
    border-left: 3px solid var(--evo-ink);
    border-top: 3px solid var(--evo-ink);
}

.evo-card-kind {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--evo-ink-soft);
    margin-bottom: 2px;
}

.evo-card-title { font-size: 1.12rem; margin-bottom: var(--space-1); }

.evo-card p { font-size: 0.9rem; line-height: 1.5; margin-bottom: var(--space-1); }

.evo-card-link {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--evo-ink);
    border-bottom: 2px solid var(--evo-coral);
}

.evo-card-link:hover,
.evo-card-link:focus-visible { color: var(--evo-coral); }

/* ---- Ground line ---- */

/* The axis. Sits where the two registers meet: strip top padding + the
   height of the above-line half. */
.evo-ground {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--space-6) + var(--evo-above) - 2px);
    height: 4px;
    background: var(--evo-ink);
}

/* ---- Milestones ---- */

.evo-milestones {
    position: absolute;
    left: var(--space-4);
    /* Flags plant on the axis and rise above it, same as .evo-ground. */
    top: calc(var(--space-6) + var(--evo-above));
    margin: 0;
    padding: 0;
    list-style: none;
}

.evo-milestone {
    position: absolute;
    /* Container sits ON the axis, so the flag rises out of it upward. */
    bottom: 0;
    /* --evo-at is a fractional node index, so the flag plants itself in the
       gap between two figures rather than on top of one. */
    left: calc(var(--evo-node-w) * var(--evo-at));
    width: 150px;
    transform: translateX(-50%);
    text-align: center;
}

.evo-flag {
    display: block;
    /* Must clear the artwork AND the release label above it, or the flag
       text lands on top of a title. Tallest above-line stack is the album:
       126px sleeve + 58px stalk + label ≈ 230px. */
    width: 3px;
    height: 262px;
    margin: 0 auto;
    background: var(--evo-ink);
    position: relative;
}

.evo-flag::after {
    content: "";
    position: absolute;
    top: 0;
    left: 3px;
    width: 34px;
    height: 22px;
    background: var(--evo-coral);
    clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%);
}

.evo-milestone-text {
    /* Sits at the top of the pole, above the figures. */
    position: absolute;
    bottom: 266px;
    left: 50%;
    width: 150px;
    transform: translateX(-50%);
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--evo-ink-soft);
    text-wrap: balance;
}

.evo-milestone-text strong { color: var(--evo-ink); display: block; }

/* ---- Progress bar ---- */

.evo-progress {
    height: 6px;
    margin: var(--space-2) var(--space-4) 0;
    background: rgba(51, 41, 28, 0.12);
    border-radius: 3px;
    overflow: hidden;
}

.evo-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--evo-coral);
    border-radius: 3px;
}

/* ---- Footer ---- */

.evo-footer { margin-top: var(--space-3); text-align: center; }

.evo-footer-note {
    font-size: 0.85rem;
    color: var(--evo-ink-soft);
    max-width: 46em;
    margin: 0 auto var(--space-1);
}

.evo-footer-meta { font-size: 0.78rem; }

.evo-footer-note a { border-bottom: 1px solid var(--evo-coral); }

/* Any prose written in the Ghost page body renders below the poster, back
   in the site's own palette. */
.evo-page-content { margin-bottom: var(--space-5); }

/* ---- Responsive ---- */

@media (max-width: 700px) {
    .evo {
        --evo-node-w: 140px;
        --evo-above: 232px;
        --evo-below: 150px;
        padding-top: var(--space-4);
    }

    .evo-single .evo-svg { width: 58px;  height: 72px; }
    .evo-ep     .evo-svg { width: 80px;  height: 100px; }
    .evo-album  .evo-svg { width: 100px; height: 144px; }
    .evo-live   .evo-svg { width: 84px;  height: 114px; }

    .evo-card { width: 230px; }
    .evo-name { font-size: 0.78rem; }
    .evo-strip { padding-left: var(--space-2); padding-right: var(--space-2); }
    .evo-eras { left: var(--space-2); }
    .evo-milestones { left: var(--space-2); }

    .evo-album  .evo-cover-sleeve { width: 98px; height: 98px; }
    .evo-album  .evo-cover-stalk  { height: 44px; }
    .evo-ep     .evo-cover-sleeve { width: 72px; height: 72px; }
    .evo-ep     .evo-cover-stalk  { height: 32px; }
    .evo-live   .evo-cover-sleeve { width: 66px; height: 66px; }
    .evo-live   .evo-cover-stalk  { height: 34px; }
    .evo-single .evo-cover-sleeve { width: 54px; height: 54px; }
    .evo-single .evo-cover-stalk  { height: 26px; }

    .evo-album  .evo-label { bottom: calc(var(--evo-below) + 152px); }
    .evo-ep     .evo-label { bottom: calc(var(--evo-below) + 114px); }
    .evo-live   .evo-label { bottom: calc(var(--evo-below) + 110px); }
    .evo-single .evo-label { top: calc(var(--evo-above) + 90px); }

    /* Figures are shorter here, so the flags don't need to be as tall. */
    .evo-flag { height: 208px; }
    .evo-milestone,
    .evo-milestone-text { width: 120px; }
    .evo-milestone-text { bottom: 212px; }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .evo-hint-arrows,
    .evo-sway,
    .evo-fig:hover .evo-sway {
        animation: none;
    }

    .evo-fig {
        transform: none;
        opacity: 1;
        transition: none;
        transition-delay: 0s;
    }

    .evo-scroller { scroll-behavior: auto; }
}