/* ---------------------------------------------------------------- theme --
     Every colour on the site comes from these.

     Two ideas are worth knowing before changing them:

     1. The design is built on dark bands (hero, YouTube, merch and partners
        heroes, the catalogue table head) sitting against a pale page. That
        contrast carries the layout — keep the bands well below --surface or
        the sections stop reading as separate.
     2. --accent-solid and --accent-text hold the same green, but they are
        separate roles: solid is a button fill that always carries white text
        on it, text is the green used for labels and links. Retuning one for
        contrast should not drag the other with it.

     Ink and on-band are stored as space-separated RGB triplets because the
     stylesheet uses them at ~20 different alphas; rgb(var(--ink-rgb) / .62)
     covers them all without a token per opacity. The triplets must stay
     space-separated — commas break the slash-alpha form. */
  :root {
    /* the site is light only; this keeps scrollbars and form controls light
       on a reader whose OS is set to dark */
    color-scheme: light;

    --surface: #faf8f3;          /* the page */
    --surface-raised: #fff;      /* cards and wells on the page */
    --ink-rgb: 22 23 26;       /* text on --surface */

    --band: #0d0d0d;             /* the dark full-bleed bands */
    --band-soft: #1a1a1a;
    --on-band-rgb: 255 255 255;

    --accent-solid: #296e53;     /* button fill; always white text on it */
    --accent-solid-hover: #2f855f;
    --accent-solid-deep: #1f5540;
    --accent-text: #296e53;      /* green labels and section marks */
    --accent-mint: #4bc39a;      /* the accent as used on the dark bands */
    --accent-rgb: 41 110 83;     /* accent at low alpha: tints, soft borders */
    --accent-mint-rgb: 75 195 154;

    --link: #1bb0ce;
    --link-hover: #14879e;
    --shadow-rgb: 0 0 0;
  }

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

  /* Every font-size on the site is expressed in rem, so this one value sets
     the scale for all of them. 112% = a 16px browser default rendered at
     ~17.9px; raise or lower it to resize the whole site's type at once.
     A percentage rather than a px value so a reader who has changed their
     browser's default font size still gets their preference, scaled. */
  html { font-size: 112%; }

  body {
    margin: 0;
    background: var(--surface);
    font-family: 'Inter', sans-serif;
    color: rgb(var(--ink-rgb));
  }
  a { color: var(--link); }
  a:hover { color: var(--link-hover); }
  .disp { font-family: 'Space Grotesk', sans-serif; }

  .site-wrapper {
    background: var(--surface);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  /* keeps the footer pinned to the bottom so short pages don't leave a
     big empty gap above it */
  .site-footer {
    margin-top: auto;
  }

  /* Full-bleed chrome (utility bar, nav, hero mosaic, footer) spans the
     full viewport. Everything else shares this centered reading column
     so text and grids don't stretch edge-to-edge on wide desktop screens. */
  .about-section, .mission-section,
  .catalogue-section, .contact-section {
    width: 100%;            /* fill the column (flex items shrink otherwise) */
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }

  /* UTILITY BAR */
  .utility-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 40px;
    background: var(--band);
  }
  .utility-bar .company-name {
    color: rgb(var(--on-band-rgb));
    font-size: 0.78125rem;
    font-weight: 500;
    white-space: nowrap;
  }
  .utility-bar .social-links {
    display: flex;
    gap: 14px;
  }
  .utility-bar .social-links a {
    color: rgb(var(--on-band-rgb));
    font-size: 0.6875rem;
    font-weight: 700;
    text-decoration: none;
    opacity: .85;
    display: inline-flex;
    align-items: center;
  }
  .utility-bar .social-links a:hover { opacity: 1; }
  .utility-bar .social-links a svg { width: 15px; height: 15px; display: block; }
  .footer-social a svg { width: 15px; height: 15px; display: block; }
  .contact-social a svg { width: 16px; height: 16px; display: block; }

  /* NAV */
  .main-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 40px;
    background: var(--surface);
    border-bottom: 1px solid rgb(var(--ink-rgb) / .1);
  }
  .nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
  }
  .nav-brand img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
  }
  .nav-brand span {
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -.01em;
    /* matches the links' 6px padding + 2px underline, so the wordmark's text
       sits on the same line as Home/Catalogue/Contact rather than 4px lower */
    padding-bottom: 8px;
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    font-size: 1rem;
    font-weight: 600;
    margin-left: 52px;   /* sit just after the logo */
  }
  .main-nav .nav-cta {
    margin-left: auto;   /* push the CTA to the far right */
  }
  .nav-links a {
    cursor: pointer;
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
    color: rgb(var(--ink-rgb) / .6);
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
  }
  .nav-links a:hover {
    color: rgb(var(--ink-rgb));
  }
  .nav-links a.active {
    border-bottom-color: var(--accent-text);
    color: rgb(var(--ink-rgb));
    font-weight: 700;
  }
  .nav-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--accent-solid);
    color: rgb(var(--on-band-rgb));
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background .2s;
  }
  .nav-cta:hover {
    background: var(--accent-solid-deep);
    color: rgb(var(--on-band-rgb));
  }
  .nav-cta svg { flex-shrink: 0; }

  /* HERO GRID */
  .hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 180px);
    gap: 4px;
    padding: 4px 40px 0;
  }
  .hero-cell {
    position: relative;
    overflow: hidden;
  }
  .hero-cell.large {
    grid-column: span 2;
    grid-row: span 2;
  }
  .hero-cell img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease, transform 6s ease;
    transform: scale(1);
  }
  .hero-cell img.active {
    opacity: 1;
    transform: scale(1.04);
  }

  /* HOME HERO — headline + interactive record wall */
  .home-hero {
    position: relative;
    background: var(--band);
    color: rgb(var(--on-band-rgb));
    overflow: hidden;
  }
  .hero-inner {
    max-width: 1440px;
    margin: 0 auto;
    /* deliberately short of a full screen: the top of the About section should
       be visible on load so people know there's more below the fold */
    min-height: 440px;
    padding: 52px 40px;
    display: grid;
    /* Even split rather than the old 0.92/1.08: at the larger hero type
       "The sounds of East" needs ~615px and the narrower column gave it 600,
       breaking the title's intended three-line stack. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
  }
  .hero-overlay { position: relative; z-index: 2; }
  .hero-title {
    font-size: 3.875rem;
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -.02em;
    color: rgb(var(--on-band-rgb));
    margin: 0 0 22px;
  }
  .hero-title span { display: block; }
  .hero-lede {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.6;
    /* lifted from .62 with the weight bump: heavier strokes at the old opacity
       read as muddy rather than quiet against the dark hero */
    color: rgb(var(--on-band-rgb) / .72);
    margin: 0 0 30px;
    max-width: 480px;
  }
  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-btn, .hero-btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 13px 26px;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, border-color .2s, transform .2s, color .2s;
  }
  .hero-btn { background: var(--accent-solid); color: rgb(var(--on-band-rgb)); }
  .hero-btn:hover { background: var(--accent-solid-hover); color: rgb(var(--on-band-rgb)); transform: translateY(-1px); }
  .hero-btn-ghost { background: transparent; border: 1px solid rgb(var(--on-band-rgb) / .28); color: rgb(var(--on-band-rgb)); }
  .hero-btn-ghost:hover { border-color: rgb(var(--on-band-rgb) / .6); background: rgb(var(--on-band-rgb) / .06); color: rgb(var(--on-band-rgb)); }
  .hero-hint {
    margin: 26px 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgb(var(--on-band-rgb) / .48);
    transition: color .3s;
  }
  .hero-hint.is-playing { color: var(--accent-mint); }

  /* the record wall */
  .hero-wall {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .hero-tile {
    position: relative;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    aspect-ratio: 1;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s;
  }
  .hero-tile-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgb(var(--shadow-rgb) / .42);
    z-index: 2;
    opacity: 0;                 /* revealed by the load sequence */
  }
  .hero-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hero-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(.7);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgb(var(--accent-rgb) / .92);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .2s, transform .2s;
  }
  .hero-play svg { width: 16px; height: 16px; margin-left: 1px; }
  /* the vinyl: a sleeve that slides the disc out to the right, disc spins */
  .hero-vinyl {
    position: absolute;
    top: 6%; right: 4%;
    width: 88%; height: 88%;
    z-index: 1;
    opacity: 0;
    transform: translateX(0);
    transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s;
  }
  .hero-vinyl-disc {
    display: block;      /* it's a <span>; without this the 100%/100% is ignored */
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* A picture of a record, not chrome: these stay black in both themes. */
    background:
      radial-gradient(circle at 38% 32%, rgba(255,255,255,.16) 0 6%, rgba(255,255,255,0) 34%),
      radial-gradient(circle at center, #0b0b0b 0 2.6%, rgba(0,0,0,0) 2.9%),
      radial-gradient(circle at center, #4bc39a 0 15%, #0d0d0d 15% 17%, rgba(0,0,0,0) 17%),
      repeating-radial-gradient(circle at center, #151515 0 2px, #2b2b2b 2px 4px),
      #101010;
    box-shadow: 0 10px 26px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.6);
  }
  .hero-wall.has-hover .hero-tile:not(:hover):not(.is-playing) { opacity: .42; }
  .hero-tile:hover, .hero-tile.is-playing { transform: translateY(-6px) scale(1.04); z-index: 5; }
  .hero-tile:hover .hero-play, .hero-tile.is-playing .hero-play {
    opacity: 1; transform: translate(-50%,-50%) scale(1);
  }
  .hero-tile:hover .hero-vinyl, .hero-tile.is-playing .hero-vinyl {
    opacity: 1; transform: translateX(62%);
  }
  .hero-tile:hover .hero-vinyl-disc, .hero-tile.is-playing .hero-vinyl-disc {
    animation: hero-spin 2.6s linear infinite;
  }
  @keyframes hero-spin { to { transform: rotate(360deg); } }
  .hero-tile-cap {
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    padding: 0 10px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    color: rgb(var(--on-band-rgb));
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
    z-index: 3;
    text-shadow: 0 1px 8px rgb(var(--shadow-rgb) / .95);
  }
  .hero-tile-cap b { display: block; font-size: 0.8125rem; }
  .hero-tile:hover .hero-tile-cap, .hero-tile.is-playing .hero-tile-cap { opacity: 1; }

  /* LOAD SEQUENCE — hero elements rise/fade in on first paint */
  .hero-title span, .hero-lede, .hero-actions, .hero-hint { opacity: 0; }
  body.loaded .hero-title span { animation: hero-rise .7s cubic-bezier(.2,.7,.2,1) both; }
  body.loaded .hero-title span:nth-child(1) { animation-delay: .08s; }
  body.loaded .hero-title span:nth-child(2) { animation-delay: .2s; }
  body.loaded .hero-title span:nth-child(3) { animation-delay: .32s; }
  body.loaded .hero-lede { animation: hero-rise .7s cubic-bezier(.2,.7,.2,1) .42s both; }
  body.loaded .hero-actions { animation: hero-rise .7s cubic-bezier(.2,.7,.2,1) .54s both; }
  body.loaded .hero-hint { animation: hero-rise .7s ease .95s both; }
  body.loaded .hero-tile-inner {
    animation: hero-pop .6s cubic-bezier(.2,.7,.2,1) both;
    animation-delay: calc(var(--i) * 70ms + .35s);
  }
  @keyframes hero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  @keyframes hero-pop  { from { opacity: 0; transform: translateY(22px) scale(.94); } to { opacity: 1; transform: none; } }

  /* SCROLL REVEALS */
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  }
  [data-reveal].in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .hero-title span, .hero-lede, .hero-actions, .hero-hint,
    .hero-tile-inner, [data-reveal] {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
    }
    /* The turning record is the "now playing" cue, not decoration — killing it
       outright left these devices playing audio with a dead disc. Keep it
       turning, just slowly enough to respect the preference. */
    .hero-vinyl-disc { animation-duration: 9s !important; }
  }

  /* ABOUT */
  .about-section {
    padding: 60px 40px 12px;
  }
  .about-inner {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 64px;
    align-items: start;
  }
  .section-label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 14px;
  }
  .about-head h2 {
    font-size: 2.375rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
    margin: 0;
  }
  .about-head {
    position: sticky;
    top: 96px;
  }
  .about-body {
    max-width: 620px;
  }
  .about-lead {
    font-size: 1.4375rem;
    line-height: 1.5;
    font-weight: 600;
    color: rgb(var(--ink-rgb));
    margin: 0 0 24px;
    padding-left: 20px;
    border-left: 2px solid var(--accent-text);
  }
  .about-body p {
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.8;
    color: rgb(var(--ink-rgb) / .7);
    margin: 0 0 16px;
  }
  .about-body p:last-child { margin-bottom: 0; }
  .about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 52px;
    padding-top: 40px;
    border-top: 1px solid rgb(var(--ink-rgb) / .12);
  }
  .stat-num {
    font-size: 2.875rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    color: rgb(var(--ink-rgb));
  }
  .stat-label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-top: 12px;
  }

  /* MISSION */
  .mission-section {
    padding: 44px 40px 20px;
  }
  .mission-label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 10px;
  }
  .mission-section p {
    font-size: 1.6875rem;
    line-height: 1.45;
    font-weight: 600;
    margin: 0;
    max-width: 680px;
  }

  /* VALUES GRID */
  .values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    width: calc(100% - 80px);
    max-width: 1360px;
    margin: 48px auto;
    background: rgb(var(--ink-rgb) / .1);
    border: 1px solid rgb(var(--ink-rgb) / .1);
  }
  .value-card {
    background: var(--surface);
    padding: 28px 26px;
  }
  .value-card h3 {
    font-weight: 700;
    font-size: 1.0625rem;
    margin: 0 0 8px;
  }
  .value-card p {
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgb(var(--ink-rgb) / .72);
    line-height: 1.6;
    margin: 0;
  }

  /* YOUTUBE SECTION — dark band (mirrors the hero / jukebox) */
  .youtube-section {
    background: var(--band);
    color: rgb(var(--on-band-rgb));
    padding: 72px 40px;
    margin-top: 40px;
  }
  .youtube-inner {
    /* 1360 = the 1440 reading column minus this band's own 40px padding, so
       the heading lines up with About/Mission above it on screens >1440px */
    max-width: 1360px;
    margin: 0 auto;
  }
  .youtube-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 34px;
  }
  .yt-eyebrow {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-mint);
    margin-bottom: 12px;
  }
  .youtube-header h2 {
    font-size: 2.375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: rgb(var(--on-band-rgb));
    margin: 0;
  }
  .yt-more {
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--accent-mint);
    white-space: nowrap;
    transition: color .2s;
  }
  .yt-more:hover { color: rgb(var(--on-band-rgb)); }
  .youtube-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .youtube-thumb {
    text-decoration: none;
    display: block;
    color: rgb(var(--on-band-rgb));
  }
  .yt-thumb-img {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--band-soft);
    transition: transform .25s ease;
  }
  .youtube-thumb:hover .yt-thumb-img {
    transform: translateY(-4px);
  }
  /* while the embed is playing the tile stays put — a lift under a live
     iframe reads as a glitch, not a hover */
  .youtube-thumb.is-playing .yt-thumb-img { transform: none; }
  .yt-play {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
  }
  .youtube-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: var(--band-soft);
    display: block;
  }
  .yt-thumb-img iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    border: 0;
  }
  .youtube-thumb .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    background: rgb(var(--accent-rgb) / .92);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
  }
  .youtube-thumb:hover .play-overlay,
  .yt-play:focus-visible .play-overlay { opacity: 1; }
  .yt-play:focus-visible { outline: 2px solid var(--accent-mint); outline-offset: 3px; }
  .yt-caption {
    margin-top: 14px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(var(--on-band-rgb) / .8);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
  }
  .youtube-thumb:hover .yt-caption { color: rgb(var(--on-band-rgb)); }
  .yt-external {
    flex: none;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    color: rgb(var(--on-band-rgb) / .45);
    transition: color .2s;
  }
  .yt-external:hover,
  .yt-external:focus-visible { color: var(--accent-mint); }

  /* RECORD CRATE (jukebox selector) */
  .crate-band {
    background: var(--band);
    color: rgb(var(--on-band-rgb));
    padding: 44px 40px 8px;
    overflow: hidden;
  }
  .crate-intro {
    max-width: 1360px;
    margin: 0 auto 8px;
  }
  .crate-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-mint);
    margin-bottom: 10px;
  }
  .crate-title {
    font-size: 2.125rem;
    margin: 0 0 8px;
    letter-spacing: -.01em;
  }
  .crate-sub {
    font-size: 0.875rem;
    color: rgb(var(--on-band-rgb) / .55);
    margin: 0;
  }
  .crate {
    position: relative;
    height: 340px;
    max-width: 1360px;
    margin: 0 auto;
    touch-action: pan-y;
  }
  .crate-stage {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 44px;
    height: 240px;
  }
  .crate-card {
    position: absolute;
    top: 0;
    left: 50%;
    width: 168px;
    height: 168px;
    margin-left: -84px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--band-soft);
    box-shadow: 0 10px 30px rgb(var(--shadow-rgb) / .45);
    transform-origin: center bottom;
    will-change: transform;
    cursor: pointer;
    outline: 1px solid rgb(var(--on-band-rgb) / .06);
  }
  .crate-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
  }
  .crate-card .crate-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgb(var(--shadow-rgb) / .55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
  }
  .crate-card.is-active .crate-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .crate-nowplaying {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-size: 0.875rem;
    height: 38px;
  }
  .crate-nowplaying .np-album {
    font-weight: 700;
    color: rgb(var(--on-band-rgb));
  }
  .crate-nowplaying .np-artist {
    color: rgb(var(--on-band-rgb) / .55);
    margin-left: 8px;
  }

  /* CATALOGUE */
  .catalogue-section {
    padding: 44px 40px 60px;
  }
  .catalogue-section h2 {
    font-size: 2.375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 16px;
  }
  .catalogue-section > p {
    font-size: 1rem;
    font-weight: 500;
    color: rgb(var(--ink-rgb) / .72);
    margin: 0 0 10px;
    max-width: 680px;
    line-height: 1.7;
  }
  .catalogue-section > p:last-of-type {
    margin-bottom: 28px;
  }
  .cat-search-row {
    margin-bottom: 18px;
  }
  .cat-search-box {
    position: relative;
    max-width: 420px;
    display: flex;
    align-items: center;
  }
  .cat-search-box svg {
    position: absolute;
    left: 14px;
    color: rgb(var(--ink-rgb) / .4);
    pointer-events: none;
  }
  .cat-search-box input {
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    padding: 11px 38px 11px 38px;
    border-radius: 999px;
    border: 1px solid rgb(var(--ink-rgb) / .18);
    background: var(--surface-raised);
    color: rgb(var(--ink-rgb));
    outline: none;
    transition: border-color .15s;
  }
  .cat-search-box input:focus {
    border-color: var(--accent-text);
  }
  .cat-search-clear {
    position: absolute;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgb(var(--ink-rgb) / .08);
    color: rgb(var(--ink-rgb));
    font-size: 0.9375rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cat-search-clear:hover {
    background: rgb(var(--ink-rgb) / .16);
  }
  .filter-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .filter-chip {
    border: none;
    padding: 9px 18px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    background: rgb(var(--ink-rgb) / .06);
    color: rgb(var(--ink-rgb));
    transition: all .2s;
  }
  .filter-chip.active {
    background: var(--accent-solid);
    color: rgb(var(--on-band-rgb));
  }
  .cat-result-row {
    font-size: 0.78125rem;
    color: rgb(var(--ink-rgb) / .5);
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
  }
  .catalogue-table {
    border: 1px solid rgb(var(--ink-rgb) / .15);
    border-radius: 6px;
    overflow: hidden;
  }
  .catalogue-header {
    display: grid;
    grid-template-columns: 48px 1.7fr 1.7fr 2.4fr 1.2fr 52px;
    background: var(--band);
    padding: 12px 20px;
  }
  .catalogue-header div {
    color: rgb(var(--on-band-rgb));
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .catalogue-row {
    display: grid;
    grid-template-columns: 48px 1.7fr 1.7fr 2.4fr 1.2fr 52px;
    padding: 12px 20px;
    border-top: 1px solid rgb(var(--ink-rgb) / .1);
    transition: background .15s;
    align-items: center;
  }
  .cat-cover, .cat-cover-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
  }
  .cat-cover {
    object-fit: cover;
    display: block;
  }
  .cat-cover-placeholder {
    background: rgb(var(--accent-rgb) / .08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--accent-rgb) / .35);
  }
  .catalogue-row:hover {
    background: rgb(var(--ink-rgb) / .02);
  }
  .cat-play-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgb(var(--accent-rgb) / .3);
    background: var(--surface-raised);
    color: var(--accent-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    padding: 0;
    transition: background .15s, color .15s, border-color .15s;
  }
  .cat-play-btn:hover {
    background: var(--accent-solid);
    color: rgb(var(--on-band-rgb));
    border-color: var(--accent-solid);
  }
  .cat-play-btn.is-playing {
    background: var(--accent-solid);
    color: rgb(var(--on-band-rgb));
    border-color: var(--accent-solid);
  }
  .cat-play-btn .cpb-icon { display: none; }
  .cat-play-btn .cpb-play { display: block; }
  .cat-play-btn.is-playing .cpb-play { display: none; }
  .cat-play-btn.is-playing .cpb-pause { display: block; }
  .cat-play-btn.is-loading .cpb-play,
  .cat-play-btn.is-loading .cpb-pause { display: none; }
  .cat-play-btn.is-loading .cpb-spin {
    display: block;
    animation: cpb-spin 0.7s linear infinite;
  }
  @keyframes cpb-spin { to { transform: rotate(360deg); } }
  .catalogue-row .cat-artist {
    font-size: 0.9375rem;
    font-weight: 700;
  }
  .catalogue-row .cat-album {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(var(--ink-rgb) / .78);
  }
  /* song titles in italic, the way a sleeve or a discography sets them —
     it also tells the track apart from the album at a glance */
  .catalogue-row .cat-track {
    font-size: 0.875rem;
    font-style: italic;
    font-weight: 500;
    color: rgb(var(--ink-rgb) / .68);
  }
  .catalogue-row .cat-category {
    font-size: 0.8125rem;
    color: var(--accent-text);
    font-weight: 700;
  }
  .cat-empty {
    padding: 40px 20px;
    text-align: center;
    font-size: 0.84375rem;
    color: rgb(var(--ink-rgb) / .45);
  }
  .cat-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    flex-wrap: wrap;
  }
  .cat-page-btn {
    border: 1px solid rgb(var(--ink-rgb) / .15);
    background: var(--surface-raised);
    color: rgb(var(--ink-rgb));
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 7px 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
    font-variant-numeric: tabular-nums;
  }
  .cat-page-btn:hover:not(:disabled) {
    border-color: var(--accent-text);
    color: var(--accent-text);
  }
  .cat-page-btn.active {
    background: var(--accent-solid);
    border-color: var(--accent-solid);
    color: rgb(var(--on-band-rgb));
  }
  .cat-page-btn:disabled {
    opacity: .35;
    cursor: default;
  }
  .cat-page-ellipsis {
    padding: 0 4px;
    color: rgb(var(--ink-rgb) / .4);
    font-size: 0.8125rem;
  }
  .catalogue-footnote {
    font-size: 0.75rem;
    color: rgb(var(--ink-rgb) / .45);
    margin-top: 14px;
  }

  /* CONTACT */
  .contact-section {
    padding: 64px 40px 72px;
    /* no longer grows to fill the viewport: the archive gallery sits below it,
       so the page is never short enough to need the centring it used to do */
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
  }
  .contact-section h2 {
    font-size: 2.5rem;
    /* sits at the top of the left column; the negative top margin pulls its
       cap-height up level with the archive eyebrow opposite, which the h2's
       leading would otherwise push down */
    margin: -.12em 0 26px;
  }
  /* text column then photo column: the details and the archive grid share the
     first screen rather than the photos sitting in a band below them. The
     photos get the larger share because they need the width more than the
     address does. */
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) 1.28fr;
    gap: 56px;
    align-items: start;
  }
  .contact-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent-text);
    margin-bottom: 8px;
  }
  .contact-info p {
    font-size: 0.875rem;
    color: rgb(var(--ink-rgb) / .7);
    line-height: 1.7;
    margin: 0 0 24px;
  }
  .contact-social {
    display: flex;
    gap: 10px;
  }
  .contact-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgb(var(--ink-rgb) / .2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    text-decoration: none;
    color: rgb(var(--ink-rgb));
    transition: all .2s;
  }
  .contact-social a:hover {
    background: var(--accent-solid);
    color: rgb(var(--on-band-rgb));
    border-color: var(--accent-solid);
  }
  /* heads the archive column, above the photo grid */
  .archive-blurb {
    margin-bottom: 24px;
  }
  /* green rather than ink: it carries the accent the eyebrow above it used to,
     now that the two have collapsed into one heading */
  .archive-heading {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--accent-text);
    margin: 0 0 12px;
  }
  .archive-lede {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.7;
    color: rgb(var(--ink-rgb) / .66);
    margin: 0;
    /* the column is wide enough that the full width would be a tiring line */
    max-width: 640px;
  }

  /* MERCH */
  .merch-hero {
    background: var(--band);
    color: rgb(var(--on-band-rgb));
    padding: 66px 40px 72px;
  }
  .merch-hero-inner {
    max-width: 1360px;
    margin: 0 auto;
  }
  .merch-eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-mint);
    margin-bottom: 14px;
  }
  .merch-hero h1 {
    font-size: 3.25rem;
    line-height: 1.04;
    letter-spacing: -.02em;
    margin: 0 0 20px;
  }
  .merch-lede,
  .merch-order-line {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgb(var(--on-band-rgb) / .72);
    margin: 0;
    max-width: 760px;
  }
  .merch-order-line { margin-top: 14px; }
  /* the site's default link blue is close to unreadable on the black band */
  .merch-lede a,
  .merch-order-line a {
    color: var(--accent-mint);
    text-decoration-color: rgb(var(--accent-mint-rgb) / .45);
    text-underline-offset: 3px;
    white-space: nowrap;
  }
  .merch-lede a:hover, .merch-order-line a:hover,
  .merch-lede a:focus-visible, .merch-order-line a:focus-visible {
    color: rgb(var(--on-band-rgb));
    text-decoration-color: rgb(var(--on-band-rgb) / .6);
  }

  .merch-section {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 56px 40px 64px;
  }
  .merch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .merch-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    border: 1px solid rgb(var(--ink-rgb) / .1);
    border-radius: 12px;
    padding: 28px 26px 24px;
    transition: border-color .25s, box-shadow .25s, transform .25s ease;
    animation: merch-in .55s cubic-bezier(.2,.7,.2,1) both;
    animation-delay: calc(var(--i) * 70ms);
  }
  .merch-card:hover {
    transform: translateY(-4px);
    border-color: rgb(var(--ink-rgb) / .18);
    box-shadow: 0 14px 30px rgb(var(--ink-rgb) / .09);
  }
  @keyframes merch-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

  /* --- the tote photo (background already removed to transparent) --- */
  .tote {
    margin-bottom: 20px;
  }
  .tote-photo {
    display: block;
    width: 100%;
    /* every processed photo shares this portrait ratio, so pinning it keeps
       all six cards exactly the same height */
    aspect-ratio: 9 / 16;
    object-fit: contain;
    /* a soft ground shadow so the cut-out bag doesn't sit flat on the card */
    filter: drop-shadow(0 10px 14px rgb(var(--ink-rgb) / .14));
  }

  /* --- card text --- */
  .merch-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .merch-title {
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 4px;
  }
  .merch-artist {
    font-size: 0.84375rem;
    color: rgb(var(--ink-rgb) / .58);
    margin: 0 0 18px;
  }
  .merch-buy {
    margin-top: auto;             /* pins the price row level across the row */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .merch-price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
  }
  .merch-order {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--accent-solid);
    color: rgb(var(--on-band-rgb));
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s;
  }
  .merch-order:hover,
  .merch-order:focus-visible { background: var(--accent-solid-deep); color: rgb(var(--on-band-rgb)); }

  /* --- the three facts under the grid --- */
  .merch-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 56px;
    background: rgb(var(--ink-rgb) / .1);
    border: 1px solid rgb(var(--ink-rgb) / .1);
  }
  .merch-fact {
    background: var(--surface);
    padding: 26px 24px;
  }
  .merch-fact h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px;
  }
  .merch-fact p {
    font-size: 0.84375rem;
    line-height: 1.55;
    color: rgb(var(--ink-rgb) / .62);
    margin: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .merch-card { animation: none; }
    .merch-card:hover { transform: none; }
  }

  /* PARTNERS */
  .partners-hero {
    background: var(--band);
    color: rgb(var(--on-band-rgb));
    padding: 66px 40px 72px;
  }
  .partners-hero-inner {
    max-width: 1360px;
    margin: 0 auto;
  }
  .partners-eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-mint);
    margin-bottom: 14px;
  }
  .partners-hero h1 {
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.02em;
    margin: 0 0 20px;
  }
  .partners-lede {
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.6;
    color: rgb(var(--on-band-rgb) / .72);
    margin: 0;
    max-width: 680px;
  }

  .partners-section {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 56px 40px 64px;
  }
  .partner-group + .partner-group { margin-top: 64px; }
  .partner-group-head { margin-bottom: 28px; }
  .partner-group-head h2 {
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
    margin: 0;
  }
  .partner-list {
    border-top: 1px solid rgb(var(--ink-rgb) / .12);
  }
  .partner-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 36px;
    align-items: start;
    padding: 30px 0;
    border-bottom: 1px solid rgb(var(--ink-rgb) / .12);
  }
  /* White plate behind the logos: they were drawn for a white page and several
     are flattened JPEGs with baked-in white, so they need one to sit on rather
     than the page colour, which is cream. Deliberately a literal #fff rather
     than a token. */
  .partner-logo {
    background: #fff;
    border: 1px solid rgb(var(--ink-rgb) / .1);
    border-radius: 10px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 104px;
  }
  .partner-logo img {
    max-width: 100%;
    max-height: 76px;
    width: auto;
    height: auto;
    display: block;
  }
  .partner-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .partner-name {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
  }
  .partner-role {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-text);
    background: rgb(var(--accent-rgb) / .1);
    border-radius: 999px;
    padding: 4px 11px;
  }
  .partner-body p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.7;
    color: rgb(var(--ink-rgb) / .7);
    margin: 0;
    max-width: 820px;
  }

  /* ARCHIVE GALLERY (contact page, second column of .contact-grid)
     A mosaic rather than a uniform grid: two 2x2 feature tiles carry the
     photographs worth dwelling on (the 1980 award, the Nairobi Matata sleeve)
     and the shelf textures fill in around them. With 14 photos and two
     features the blocks tile exactly into five rows of four. */
  .archive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    /* backfills any hole a feature tile leaves, so the mosaic stays solid
       even if photos are added or removed */
    grid-auto-flow: dense;
  }
  .archive-item {
    position: relative;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    display: block;
    overflow: hidden;
    border-radius: 7px;
    /* square out of mixed portrait and landscape originals so the mosaic
       reads as one block; the lightbox never crops */
    aspect-ratio: 1;
    background: rgb(var(--ink-rgb) / .06);
    transform: translateZ(0);   /* keeps the zoom from shimmering on webkit */
    transition: box-shadow .3s ease, transform .3s ease;
  }
  .archive-item.is-feature {
    grid-column: span 2;
    grid-row: span 2;
    /* keeps aspect-ratio: 1 from the rule above — two columns plus the gutter
       is exactly two rows plus the gutter, so a 2x2 block is square. Letting
       it size from its content instead makes a portrait photo stretch the
       block and knock the whole mosaic out of alignment. */
  }
  .archive-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* settles slightly desaturated so the wall of orange tape boxes doesn't
       shout, then comes up to full colour under the cursor */
    filter: saturate(.82);
    transform: scale(1);
    transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  }
  .archive-item:hover,
  .archive-item:focus-visible {
    box-shadow: 0 12px 28px rgb(var(--shadow-rgb) / .3);
    transform: translateY(-2px);
    z-index: 2;
  }
  .archive-item:hover img,
  .archive-item:focus-visible img {
    transform: scale(1.07);
    filter: saturate(1.05);
  }
  .archive-item:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

  /* caption rides up from the bottom edge on hover; it is supplementary —
     the same text is the image's alt and shows in the lightbox */
  .archive-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 11px 9px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    color: rgb(var(--on-band-rgb) / .95);
    background: linear-gradient(to top, rgb(var(--shadow-rgb) / .88), rgb(var(--shadow-rgb) / 0));
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
  }
  .archive-item:hover .archive-cap,
  .archive-item:focus-visible .archive-cap {
    opacity: 1;
    transform: none;
  }
  /* the small tiles are too short for a full sentence; the feature tiles and
     the lightbox carry the wording instead */
  .archive-item:not(.is-feature) .archive-cap {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Tiles fade in, staggered across the mosaic. Opacity only, deliberately:
     an animation with a fill mode keeps its final value applied, so animating
     transform here would outrank the cascade and kill the hover lift. */
  .archive-item {
    animation: archive-in .55s ease both;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
  @keyframes archive-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .archive-item { animation: none; }
    .archive-item, .archive-item img { transition: none; }
    .archive-item:hover { transform: none; }
    .archive-item:hover img { transform: none; }
  }

  /* LIGHTBOX */
  .lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgb(var(--shadow-rgb) / .94);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px;
  }
  /* the display:flex above would otherwise defeat the hidden attribute */
  .lightbox[hidden] { display: none; }
  body.lightbox-open { overflow: hidden; }
  .lightbox-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: min(1100px, 100%);
  }
  .lightbox-figure img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 6px;
    display: block;
  }
  .lightbox-figure figcaption {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
    color: rgb(var(--on-band-rgb) / .78);
    text-align: center;
    max-width: 640px;
  }
  .lightbox-close,
  .lightbox-nav {
    border: 1px solid rgb(var(--on-band-rgb) / .25);
    background: rgb(var(--on-band-rgb) / .06);
    color: rgb(var(--on-band-rgb));
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: background .2s, border-color .2s;
    line-height: 1;
  }
  .lightbox-close:hover, .lightbox-nav:hover,
  .lightbox-close:focus-visible, .lightbox-nav:focus-visible {
    background: rgb(var(--on-band-rgb) / .16);
    border-color: rgb(var(--on-band-rgb) / .55);
  }
  .lightbox-nav {
    width: 48px;
    height: 48px;
    font-size: 2rem;
    padding-bottom: 4px;
  }
  .lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    padding-bottom: 3px;
  }

  /* FOOTER */
  .site-footer {
    border-top: 1px solid rgb(var(--ink-rgb) / .1);
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }
  .footer-text {
    font-size: 0.78125rem;
    color: rgb(var(--ink-rgb) / .55);
  }
  .footer-social {
    display: flex;
    gap: 10px;
  }
  .footer-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgb(var(--ink-rgb) / .2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65625rem;
    font-weight: 700;
    text-decoration: none;
    color: rgb(var(--ink-rgb));
    transition: all .2s;
  }
  .footer-social a:hover {
    background: var(--accent-solid);
    color: rgb(var(--on-band-rgb));
    border-color: var(--accent-solid);
  }

  /* RESPONSIVE */
  @media (max-width: 768px) {
    .utility-bar, .main-nav, .about-section, .mission-section,
    .youtube-section, .catalogue-section, .contact-section,
    .merch-hero, .merch-section, .site-footer {
      padding-left: 20px;
      padding-right: 20px;
    }
    .merch-hero h1 { font-size: 2.125rem; }
    .merch-lede { font-size: 0.9375rem; }
    /* two across on tablets, one on phones — a 3-up grid of bags gets too
       narrow to read the cover art */
    .merch-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
    .merch-facts { grid-template-columns: 1fr; margin-top: 40px; }
    .hero-grid { padding: 4px 20px 0; }
    .values-grid { width: calc(100% - 40px); }

    .hero-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 200px 120px 120px;
    }
    .hero-inner {
      grid-template-columns: 1fr;
      gap: 24px;
      min-height: auto;
      padding: 34px 20px 38px;
    }
    .about-section { padding-top: 44px; }
    .hero-title { font-size: 2.5rem; }
    .hero-lede { font-size: 1.0625rem; }
    .hero-wall { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .about-inner {
      grid-template-columns: 1fr;
      gap: 22px;
    }
    .about-head {
      position: static;
    }
    .about-head h2 { font-size: 1.9375rem; }
    .about-lead { font-size: 1.25rem; }
    .about-stats {
      grid-template-columns: 1fr 1fr;
      gap: 28px 20px;
    }
    .stat-num { font-size: 2.375rem; }
    .youtube-header h2 { font-size: 1.8125rem; }
    .values-grid {
      grid-template-columns: 1fr;
    }
    .youtube-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .contact-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .partners-hero { padding: 44px 20px 48px; }
    .partners-hero h1 { font-size: 2.25rem; }
    .partners-lede { font-size: 1rem; }
    .partners-section { padding: 40px 20px 48px; }
    .partner-group-head h2 { font-size: 1.75rem; }
    .partner-card {
      grid-template-columns: 1fr;
      gap: 18px;
    }
    .partner-logo {
      /* left-aligned and capped so the plate doesn't span the whole phone */
      max-width: 220px;
      min-height: 88px;
    }
    /* stacked at this width, so the blurb needs a rule off the contact details
       above it that the two-column layout got from the gutter */
    .archive-blurb {
      margin-top: 30px;
      padding-top: 24px;
      border-top: 1px solid rgb(var(--ink-rgb) / .12);
    }
    .archive-heading { font-size: 1.3125rem; }
    .archive-grid { gap: 8px; }
    .lightbox { padding: 16px 8px; gap: 4px; }
    .lightbox-nav { width: 38px; height: 38px; font-size: 1.5rem; }
    .lightbox-figure img { max-height: 68vh; }
    .catalogue-row {
      grid-template-columns: 40px 1fr auto;
      gap: 4px 10px;
    }
    /* Rows stack into cards here, so the column header no longer lines up with
       anything — and its 4 labels would wrap awkwardly into the 3 columns. */
    .catalogue-header { display: none; }
    .catalogue-row .cat-cover, .catalogue-row .cat-cover-placeholder {
      grid-row: 1;
      grid-column: 1;
      width: 36px;
      height: 36px;
    }
    .catalogue-row .cat-artist { grid-row: 1; grid-column: 2; align-self: center; }
    /* .cat-play-empty is the spacer rendered for tracks with no audio — it
       takes the same slot so those rows align with the playable ones. */
    .catalogue-row .cat-play-btn,
    .catalogue-row .cat-play-empty { grid-row: 1; grid-column: 3; align-self: center; }
    .catalogue-row .cat-album,
    .catalogue-row .cat-track,
    .catalogue-row .cat-category { grid-column: 1 / -1; }
    /* Tablets keep the single-row header — there's room for it. */
    .main-nav { flex-wrap: wrap; gap: 12px; }
    .nav-brand img { width: 48px; height: 48px; }
    .nav-links { gap: 22px; margin-left: 24px; margin-right: 0; }
  }

  /* Phone header: brand + CTA share the top row, the three links sit on a
     second full-width row under a hairline. Below this width the single row
     ran out of space and the logo, links and CTA each claimed their own row —
     ~230px of chrome before any content. Tablets are unaffected. */
  @media (max-width: 600px) {
    .main-nav {
      flex-wrap: wrap;
      gap: 0;
      padding-top: 10px;
      padding-bottom: 0;
    }
    .nav-brand { gap: 10px; }
    .nav-brand img { width: 42px; height: 42px; }
    .nav-brand span { font-size: 1.0625rem; padding-bottom: 0; }
    .main-nav .nav-cta {
      margin-left: auto;
      padding: 8px 14px;
      font-size: 0.75rem;
    }
    .nav-links {
      order: 3;
      width: 100%;
      margin: 10px 0 0;
      gap: 26px;
      font-size: 0.9375rem;
      border-top: 1px solid rgb(var(--ink-rgb) / .08);
      padding-top: 9px;
    }
    .nav-links a { padding-bottom: 8px; }

    .merch-grid { grid-template-columns: 1fr; gap: 20px; }
    .merch-hero { padding-top: 40px; padding-bottom: 46px; }
    .merch-section { padding-top: 36px; }

    /* "Hover over a record to hear it play" is meaningless without a pointer, and
       dropping it brings the About band up to the fold. Tapping still works. */
    .hero-hint { display: none; }
    .hero-title { font-size: 2.1875rem; }

    /* four across leaves ~80px tiles on a phone; three keeps them legible */
    .archive-grid { grid-template-columns: repeat(3, 1fr); }
  }

  /* The record crate becomes a swipeable snapping strip (see
     initCrateScroller). Keyed on `hover: none` rather than a width, because the
     dock magnifier needs a hovering pointer — which no touchscreen has at any
     size, iPads included. The width clause is a separate safety net for narrow
     desktop windows, where the 1288px-wide fan can't fit either.
     Keep this list in sync with crateScrollerMQ in catalogue.js. */
  @media (hover: none), (max-width: 1024px) {
    .crate { height: auto; touch-action: pan-x pan-y; }
    .crate-stage {
      /* grows from a phone's 150px to 210px on a tablet */
      --crate-card: clamp(150px, 38vw, 210px);
      position: static;
      height: auto;
      display: flex;
      gap: 14px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      /* the side padding is what lets the first and last record reach centre */
      padding: 24px calc(50% - var(--crate-card) / 2) 26px;
    }
    .crate-stage::-webkit-scrollbar { display: none; }
    .crate-card {
      position: relative;
      top: auto;
      left: auto;
      margin-left: 0;
      flex: 0 0 var(--crate-card);
      width: var(--crate-card);
      height: auto;
      aspect-ratio: 1;
      scroll-snap-align: center;
      transform: none;
      opacity: .5;
      will-change: auto;
      transition: transform .25s ease, opacity .25s ease;
    }
    .crate-card.is-active { opacity: 1; transform: scale(1.07); }
    .crate-nowplaying { position: static; height: auto; margin-top: 2px; }
  }

  /* The utility bar's company name and the social icons collide below ~420px;
     the logo and wordmark sit right underneath it anyway. */
  @media (max-width: 420px) {
    .utility-bar .company-name { display: none; }
    .utility-bar { justify-content: flex-end; }
  }