/* =============================================================================
   VINYL SOUK — styles.css

   One stylesheet for every page. Fix something here and every page gets it.

     1. Fonts ............ Chillax, from the fonts/ folder
     2. Brand settings ... colours, type sizes, spacing, rounding — change these first
     3. Page defaults .... background, text, links, keyboard focus
     4. Type ............. headings, paragraphs, small capital labels
     5. Page frame ....... top bar, drop-down menu, footer
     6. Building blocks .. buttons, pills, marquees, tabs, placeholders
     7. Home page
     8. Inner pages ...... page headers, releases, players
     9. Motion ........... reveals, hovers, the NU Wave cursor character
    10. Reduced motion
   ========================================================================== */


/* 1. FONTS -------------------------------------------------------------------
   Chillax by Indian Type Foundry (fontshare.com). Its free licence allows
   hosting the files on the site (fonts/Chillax-LICENSE.txt) but forbids
   editing or converting them. "swap" shows a fallback font instead of blank text. */

@font-face { font-family: "Chillax"; src: url("fonts/chillax-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Chillax"; src: url("fonts/chillax-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Chillax"; src: url("fonts/chillax-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Chillax"; src: url("fonts/chillax-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }


/* 2. BRAND SETTINGS ----------------------------------------------------------
   Everything below reads from these. Change a value here, not further down. */

:root {
  /* Brand colours — toolkit page 13. Don't add new ones. */
  --orange: #FC6100;  /* the main colour: buttons, hovers, big colour fields */
  --cream:  #F6F7EA;  /* page background */
  --page:       #FFFFFF;  /* the pages themselves; the top bar and footer keep the cream */
  --black:  #0A0A0A;  /* text, lines, dark fields */
  --red:    #FF1E00;  /* ONLY for things happening now: live, tickets on sale */
  --yellow: #FFCD02;  /* Mini Festival, and "coming soon" (always with the words). Never for text. */
  --white:  #FFFFFF;  /* cards sitting on cream */

  /* Quieter shades, for secondary text and placeholders */
  --ink-soft:   #4A4A45;             /* secondary text on cream (passes contrast) */
  --line:       rgba(10, 10, 10, 0.14);
  --line-dark:  rgba(246, 247, 234, 0.2);
  --cream-deep: #E8E9DA;             /* empty image boxes */

  /* Contrast, checked against WCAG AA:
       black on cream 18.3 ✓   black on orange 6.5 ✓   black on yellow 13.2 ✓   black on red 5.1 ✓
       white on orange 3.1 — only for text 24px and up (or 19px bold)
       orange text on cream 2.8 ✗ never     yellow text on cream 1.4 ✗ never */

  /* Type — toolkit pages 15–16 */
  --font: "Chillax", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --track-title: -0.062em;  /* "-62 units on the title". Chillax looks loose without it. */
  --track-body:  -0.03em;   /* "-30 units on the body copy" */
  --lead-title:  1.05;
  --lead-body:   1.55;

  --size-label: 0.8125rem;                                  /* 13px */
  --size-small: 0.9375rem;                                  /* 15px */
  --size-body:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);     /* 16 → 18px */
  --size-lead:  clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);  /* 19 → 24px */
  --size-h3:    clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);  /* 22 → 30px */
  --size-h2:    clamp(1.875rem, 1.45rem + 1.9vw, 3rem);     /* 30 → 48px */
  --size-h1:    clamp(2.625rem, 1.6rem + 4.6vw, 6rem);      /* 42 → 96px */

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   0.75rem;
  --space-m:   1rem;
  --space-l:   1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;

  --banner-h: clamp(27rem, 40vw, 29rem);  /* the one height every page banner uses */
  --gutter:      clamp(1rem, 0.5rem + 2.5vw, 2.5rem);  /* space at the page edges */
  --section-gap: clamp(3.5rem, 2rem + 6vw, 7.5rem);    /* space between sections */

  /* Rounding — 26px is the brand's corner (toolkit page 21). Buttons are pills. */
  --radius:       26px;
  --radius-small: 14px;
  --pill:         999px;

  /* Page frame */
  --bar-height: 48px;                               /* the top bar */
  --band-height: clamp(170px, 22vw, 320px);         /* the footer's moving band */

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Keyboard focus ring: black on light areas, orange on dark ones */
  --focus: var(--black);

  /* Grain texture — the real scan from toolkit page 19 (assets/texture/).
     Laid over colour fields; never behind text on plain cream. */
  --texture: image-set(url("assets/texture/grunge-1600.webp") type("image/webp"), url("assets/texture/grunge-1600.jpg") type("image/jpeg"));
}


/* 3. PAGE DEFAULTS ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* While the menu is open the page behind it doesn't scroll */
html.menu-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--page);
  color: var(--black);
  font-family: var(--font);
  font-size: var(--size-body);
  font-weight: 400;
  line-height: var(--lead-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-color: var(--orange); }

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

main:focus { outline: none; }

::selection { background: var(--orange); color: var(--black); }

/* Anything marked "hidden" stays hidden, even if a class says otherwise */
[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  z-index: 400;
  top: -100px;
  left: var(--space-m);
  padding: 0.6rem 1.1rem;
  border-radius: var(--pill);
  background: var(--black);
  color: var(--cream);
  font-weight: 500;
  text-decoration: none;
  --focus: var(--orange);
}

.skip-link:focus { top: var(--space-m); }

/* Hides text visually but keeps it for screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* 4. TYPE ------------------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: var(--lead-title);
  letter-spacing: var(--track-title);
  text-wrap: balance;
}

h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }

p { margin: 0; text-wrap: pretty; }

.lead { font-size: var(--size-lead); line-height: 1.4; }
.muted { color: var(--ink-soft); }

/* SMALL CAPITAL LABELS — the date stamp, "(Records - 10 Jul 2025)", marquees.
   Type them in normal case; the capitals are added here. Capitals get neutral
   letter-spacing, because the tight body setting makes them collide. */
.label {
  font-size: var(--size-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
}


/* 5. PAGE FRAME -------------------------------------------------------------
   nav.js writes the top bar, menu and footer into the empty "slots" on each
   page. The slots are sized in advance so nothing jumps when they fill. */

.shell__content {
  min-width: 0;
  overflow-x: clip;  /* stops wide things (marquees, sliders) causing sideways scroll */
}

/* TOP BAR — logo tab, date stamp | main links | Instagram, Menu */
.site-header-slot {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--bar-height);
  background: var(--cream);
}

.site-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-m);
  height: var(--bar-height);
  padding-right: var(--gutter);
  border-bottom: 1px solid var(--black);
  background: var(--cream);
}

.site-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-width: 0;
  height: 100%;
}

/* THE LOGO TAB — toolkit page 21: flush in the top-left corner, 200 × 126 in
   proportion, with a 26px round on its free corner. It hangs a little below
   the bar. The two percentages keep that exact corner at any size. */
.logo-tab {
  flex: none;
  align-self: flex-start;
  display: grid;
  place-items: center;
  height: calc(var(--bar-height) + 16px);
  aspect-ratio: 200 / 126;
  background: var(--orange);
  /* A hairline of cream along the free edges, so the tab stays crisp over
     photos and dark blocks scrolling beneath it. Top and left stay flush. */
  border: solid var(--cream);
  border-width: 0 1.5px 1.5px 0;
  border-radius: 0 0 13% 0 / 0 0 20.6% 0;
  text-decoration: none;
  transform-origin: top left;
  transition: transform 0.45s var(--ease-out);
}

.logo-tab:hover { transform: scale(1.08); }

.logo-mark { width: 62%; height: auto; }

.stamp { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 419px) {
  .stamp__place { display: none; }
}

.top-links {
  display: none;
  gap: var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .top-links { display: flex; }
}

/* Links in the bar get [brackets] on hover, like the reference site */
.top-link {
  position: relative;
  text-decoration: none;
}

.top-link::before,
.top-link::after {
  position: absolute;
  top: 0;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.3s var(--ease-out);
}

.top-link::before { content: "["; left: -0.65em; transform: translateX(5px); }
.top-link::after  { content: "]"; right: -0.65em; transform: translateX(-5px); }

.top-link:hover::before,
.top-link:hover::after,
.top-link[aria-current="page"]::before,
.top-link[aria-current="page"]::after {
  opacity: 1;
  transform: none;
}

.site-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-l);
}

.site-header__social { display: none; }

@media (min-width: 900px) {
  .site-header__social { display: block; }
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 40px;
  padding: 0 0.15rem;
  border: 0;
  background: none;
  color: var(--black);
  font-weight: 700;  /* bold so Menu stands out in the bar */
  cursor: pointer;
}

.menu-toggle__icon {
  position: relative;
  width: 0.8em;
  height: 0.8em;
  transition: transform 0.4s var(--ease-out);
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: currentColor;
}

.menu-toggle__icon::after { transform: rotate(90deg); }
.menu-toggle:hover .menu-toggle__icon { transform: rotate(90deg); }

/* THE MENU — a black panel that slides down from the top, with an orange strip
   along its bottom edge. The links rise into place one after another. */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
}

.site-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.4);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.site-menu__panel {
  position: relative;
  max-height: 100dvh;
  overflow-y: auto;
  background: var(--black);
  color: var(--cream);
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease-out);
  --focus: var(--orange);
}

.site-menu.is-open .site-menu__backdrop { opacity: 1; }
.site-menu.is-open .site-menu__panel { transform: none; }

.site-menu__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  padding: var(--space-xl) var(--gutter) var(--space-2xl);
}

@media (min-width: 900px) {
  .site-menu__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-2xl);
    align-items: start;
  }
}

.site-menu__mark {
  display: none;
  width: 46px;
  height: auto;
}

@media (min-width: 900px) {
  .site-menu__mark { display: block; }
}

.site-menu__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-2xl);
}

@media (min-width: 720px) {
  .site-menu__cols { grid-template-columns: repeat(2, max-content); }
}

.site-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--cream);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--track-title);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-menu__link:hover,
.site-menu__link[aria-current="page"] { color: var(--orange); }

/* Each link sits in a mask and slides up out of it */
.mask { display: block; overflow: hidden; padding-bottom: 0.08em; }

.mask > span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.7s var(--ease-out);
  transition-delay: calc(0.12s + var(--i, 0) * 0.045s);
}

.site-menu.is-open .mask > span { transform: none; }

.site-menu__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.1rem;
  margin: 0.1rem 0 0.5rem;
  padding: 0;
  list-style: none;
  opacity: 0;
  transition: opacity 0.5s ease calc(0.3s + var(--i, 0) * 0.045s);
}

.site-menu.is-open .site-menu__sub { opacity: 1; }

.site-menu__sub a {
  color: rgba(246, 247, 234, 0.8);
  text-decoration: none;
}

.site-menu__sub a:hover,
.site-menu__sub a[aria-current="page"] { color: var(--orange); }

.site-menu__tagline { color: rgba(246, 247, 234, 0.7); }

.site-menu__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.5rem;
  padding: 0.65rem var(--gutter);
  --focus: var(--black);
}

.site-menu__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
}

.site-menu__contact a { text-decoration: none; }
.site-menu__contact a:hover { text-decoration: underline; }

.site-menu__close {
  margin-left: auto;
  min-height: 36px;
  padding: 0 0.2rem;
  border: 0;
  background: none;
  color: var(--black);
  cursor: pointer;
}

.site-menu__close:hover { text-decoration: underline; }

/* Shown only if JavaScript is off */
.noscript-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  padding: var(--space-s) var(--gutter);
  border-bottom: 1px solid var(--black);
}

/* ANNOUNCEMENT SLOT — reserves the marquee's height before nav.js fills it */
.site-top-slot { min-height: 2.9rem; }

/* FOOTER */
.site-footer {
  margin-top: var(--section-gap);
  border-top: 1px solid var(--black);
  background: var(--cream);
}

.site-footer__statement-wrap {
  padding: var(--space-2xl) var(--gutter);  /* the same space above and below */
}

.site-footer__statement {
  max-width: 26ch;
  font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.75rem);
  font-weight: 600;
  line-height: var(--lead-title);
  letter-spacing: var(--track-title);
}

.site-footer__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
}

.site-footer__cell { padding: var(--space-l) var(--gutter); }
.site-footer__cell + .site-footer__cell { border-top: 1px solid var(--black); }

@media (min-width: 720px) {
  .site-footer__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__cell + .site-footer__cell { border-top: 0; }
  .site-footer__cell:nth-child(even) { border-left: 1px solid var(--black); }
  .site-footer__cell:nth-child(n + 3) { border-top: 1px solid var(--black); }
}

@media (min-width: 1100px) {
  .site-footer__row { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); }
  .site-footer__cell:nth-child(n + 3) { border-top: 0; }
  .site-footer__cell + .site-footer__cell { border-left: 1px solid var(--black); }
}

.site-footer__heading {
  margin-bottom: var(--space-s);
  color: var(--ink-soft);
}

.footer-list { margin: 0; padding: 0; list-style: none; }
.footer-list li + li { margin-top: 0.3rem; }
.footer-list a { text-decoration: none; }
.footer-list a:hover { text-decoration: underline; }

.social-circles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-circles a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--black);
  border-radius: 50%;
  color: var(--black);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.4s var(--ease-out);
}

.social-circles a:hover {
  background: var(--black);
  color: var(--orange);
  transform: rotate(-12deg);
}

.social-circles svg { width: 18px; height: 18px; }

.newsletter__row {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-s);
}

.input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0 1.15rem;
  border: 1px solid var(--black);
  border-radius: var(--pill);
  background: var(--white);
  color: var(--black);
}

.input::placeholder { color: var(--ink-soft); }

.submit-circle {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--black);
  color: var(--cream);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.4s var(--ease-out);
}

.submit-circle:hover {
  background: var(--orange);
  color: var(--black);
  transform: translateX(3px);
}

.form-status {
  min-height: 1.55em;
  margin-top: var(--space-xs);
  font-size: var(--size-small);
}

/* WhatsApp link under the newsletter (shown once a link is set in Site settings) */
.whatsapp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-top: var(--space-s);
}

.pill--icon { display: inline-flex; align-items: center; gap: 0.45em; }
.pill--icon svg { width: 1.15em; height: 1.15em; flex: none; }

.site-footer__base a { text-decoration: none; }
.site-footer__base a:hover { text-decoration: underline; }

/* The moving band of photos and logo blocks */
.footer-band { padding: var(--space-s) 0; }

.band-tile,
.band-photo {
  flex: none;
  height: var(--band-height);
  margin-right: var(--space-s);
  overflow: hidden;
  border-radius: var(--radius);
}

.band-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1.75;
}

.band-tile img { width: 72%; height: auto; }
.band-tile--wave { aspect-ratio: 0.8; }
.band-tile--wave img { width: auto; height: 68%; }

.band-tile--cream  { background: var(--cream-deep); }
.band-tile--black  { background: var(--black); }
.band-tile--orange { background: var(--orange); }

.band-photo { display: block; aspect-ratio: 0.8; background: var(--cream-deep); }
.band-photo img { width: 100%; height: 100%; object-fit: cover; }

.site-footer__base {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-s) var(--gutter) var(--space-l);
}

.site-footer__line {
  flex: 1;
  height: 1px;
  background: var(--black);
}


/* 6. BUILDING BLOCKS -------------------------------------------------------- */

/* COLOUR FIELDS — the brand's orange and black blocks. Add "grain" for texture. */
.field--orange { background: var(--orange); color: var(--black); }
.field--black  { background: var(--black); color: var(--cream); --focus: var(--orange); }

.grain { position: relative; isolation: isolate; }

/* The grain is a black scan with pale specks. "screen" lets only the specks
   show, so it roughens a colour without darkening it. */
.grain::after,
.texture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: url("assets/texture/grunge-1600.jpg");
  background-image: var(--texture);
  background-position: center;
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 0.4;
  pointer-events: none;
}

.field--black.grain::after,
.panel--black.grain::after,
.tile--black.grain::after { opacity: 0.75; }

/* On the bright warm field the grain needs more strength to be seen */
.texture::after { opacity: 0.7; }

/* Every page banner carries the grain, whatever colour it sits on. On a light
   field (yellow, white, orange) "screen" would be invisible, so it multiplies
   instead; the dark and warm fields keep the lighter screen. */
.page-head--field::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--texture);
  background-position: center;
  background-size: cover;
  mix-blend-mode: multiply;
  opacity: 0.1;
  pointer-events: none;
}

.page-head--field.field--black::after { mix-blend-mode: screen; opacity: 0.75; }
.page-head--field.texture::after { mix-blend-mode: screen; opacity: 0.7; }

/* TEXTURE — the warm field from toolkit page 19: amber into orange into a deeper
   orange, kept close in tone (softer than pure yellow to red), with the grain
   showing through. Black text only (it passes on all three colours). */
.texture {
  position: relative;
  isolation: isolate;
  background: radial-gradient(130% 120% at 12% 0%, #FFA41F 0%, var(--orange) 55%, #EE4A16 100%);
  color: var(--black);
  --focus: var(--black);
}

/* BUTTONS — full pills. Labels say what happens: "Order a copy", not "Shop now".
   .btn           black, turns orange on hover
   .btn--orange   orange with black text (white on orange fails contrast)
   .btn--outline  outlined, for second choices */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.6em 1.3em;
  border: 2px solid var(--black);
  border-radius: var(--pill);
  background: var(--black);
  color: var(--cream);
  font-size: var(--size-small);
  font-weight: 500;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:hover { border-color: var(--orange); background: var(--orange); color: var(--black); }
.btn--orange { border-color: var(--orange); background: var(--orange); color: var(--black); }
.btn--orange:hover { border-color: var(--black); background: var(--black); color: var(--cream); }
.btn--outline { background: transparent; color: var(--black); }

/* PILLS — the small outlined buttons, "Order a copy ›". They take the colour of
   whatever they sit on, and fill in on hover. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 28px;
  padding: 0.3em 0.9em;
  border: 1.5px solid currentColor;
  border-radius: var(--pill);
  font-size: var(--size-label);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pill > span[aria-hidden] { transition: transform 0.3s var(--ease-out); }
.pill:hover > span[aria-hidden] { transform: translateX(3px); }

.pill:hover { border-color: var(--black); background: var(--black); color: var(--cream); }

.field--black .pill:hover,
.panel--black .pill:hover,
.tile--black .pill:hover { border-color: var(--orange); background: var(--orange); color: var(--black); }

.field--orange .pill:hover,
.panel--orange .pill:hover { border-color: var(--black); background: var(--black); color: var(--orange); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* ROUND ARROW BUTTONS — ‹ › on sliders */
.circle-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--black);
  border-radius: 50%;
  background: transparent;
  color: var(--black);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.circle-btn:hover:not(:disabled) { border-color: var(--orange); background: var(--orange); }
.circle-btn:disabled { opacity: 0.3; cursor: default; }

/* TAB — toolkit page 21. Flush in the top-left corner of a card, holding the logo. */
.tab {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(84px, 30%, 200px);
  aspect-ratio: 200 / 126;
  border-radius: 0 0 13% 0 / 0 0 20.6% 0;
  background: var(--orange);
}

/* STATUS CHIPS — shown, never hidden.
   .status--now red: only happening now / on sale now · .status--soon yellow:
   coming soon (always write the words) · .status--sold sold out or unavailable */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.75em;
  border-radius: var(--pill);
  font-size: var(--size-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.status--now  { background: var(--red); color: var(--black); }
.status--soon { background: var(--yellow); color: var(--black); }
.status--sold { border: 1.5px solid currentColor; }

/* PLACEHOLDER BOXES — stand in for images. Set the shape with style="--ratio: 4 / 5". */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 16 / 9);
  padding: var(--space-m);
  overflow: hidden;
  border-radius: var(--radius-small);
  background: var(--cream-deep);
  color: var(--ink-soft);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.ph--dark,
.panel__media.ph--dark { background: #1E1E1C; color: rgba(246, 247, 234, 0.72); }

/* TODO BLOCKS — yellow boxes mark copy or images still to come from Vinyl Souk.
   Delete each one when the real thing goes in. None should be left at launch. */
.todo {
  padding: 0.85em 1.1em;
  border-radius: var(--radius-small);
  background: var(--yellow);
  color: var(--black);
  outline: 2px dashed var(--black);
  outline-offset: -6px;
  font-size: var(--size-small);
  font-weight: 400;
  letter-spacing: var(--track-body);
  text-align: left;
  text-transform: none;
}

.todo::before { content: "TODO — "; font-weight: 600; }

/* MARQUEES — lines that repeat and move.
   HTML: .marquee > .marquee__track > two .marquee__group (the second is a copy).
   Without motion.js, or with "reduce motion" on, they sit still and wrap.
   motion.js adds .is-moving, which starts the slide. */
/* Marquees are sometimes built from <span>s, which can't clip until they're blocks */
.marquee { display: block; overflow: hidden; }
.marquee__track { display: block; }

.marquee__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marquee__group[aria-hidden="true"] { display: none; }
.marquee__sep { display: none; }

.marquee__unit {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.marquee.is-moving .marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
}

.marquee.is-moving .marquee__group {
  flex: none;
  flex-wrap: nowrap;
  gap: 0;
}

.marquee.is-moving .marquee__group[aria-hidden="true"] { display: flex; }

.marquee.is-moving .marquee__sep {
  display: inline-flex;
  align-items: center;
  padding: 0 1.1rem;
}

.marquee.is-moving .marquee__item,
.marquee.is-moving .marquee__unit { white-space: nowrap; }

/* Hover or keyboard focus pauses a marquee; so does scrolling it off screen */
.marquee.is-moving:hover .marquee__track,
.marquee.is-moving:focus-within .marquee__track,
.marquee.is-offscreen .marquee__track { animation-play-state: paused; }

.marquee[data-direction="reverse"] .marquee__track { animation-direction: reverse; }

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* The orange announcement strip */
.announce { border-bottom: 1px solid var(--black); }

.announce .marquee { padding: 0.55rem var(--gutter); }
.announce .marquee.is-moving { padding-left: 0; padding-right: 0; }

.announce .marquee__item {
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* Without motion, the footer band scrolls sideways instead of wrapping */
.marquee--band:not(.is-moving) .marquee__group {
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
}

/* SECTIONS — a title on the left, controls on the right, a thin line under both */
.section {
  margin-top: var(--section-gap);
  padding: 0 var(--gutter);
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--black);
}

.section__head p {
  max-width: 48ch;
  margin-top: var(--space-xs);
}

.section__head + .todo,
.section > .todo { margin-top: var(--space-m); }

/* PRESS LIST — the rest of the coverage, under the cards on About */
.press-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl) var(--gutter);
  margin-top: var(--space-xl);
}

@media (min-width: 900px) {
  .press-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.press-list__group { display: grid; align-content: start; gap: var(--space-s); }
.press-list ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--black); }
.press-list li { border-bottom: 1px solid var(--black); }

.press-list a,
.press-list li > span {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: 0.15rem var(--space-m);
  padding: var(--space-s) 0;
  color: inherit;
  text-decoration: none;
}

/* A box that scrolls on its own, so a long list doesn't stretch the page */
.scroll-box {
  max-height: 32rem;
  margin-top: var(--space-s);
  padding: 0 var(--space-l);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  border: 1px solid var(--black);
  border-radius: var(--radius);
}

.scroll-box > .press-list { margin-top: var(--space-l); padding-bottom: var(--space-l); }

.press-scroll__note { margin-top: var(--space-xl); }

.press-list__outlet { color: var(--ink-soft); font-size: var(--size-small); }
.press-list__title { font-weight: 500; line-height: 1.35; }

@media (max-width: 520px) {
  .press-list a,
  .press-list li > span { grid-template-columns: minmax(0, 1fr); }
}

@media (hover: hover) and (pointer: fine) {
  .press-list a:hover .press-list__title { text-decoration: underline; text-underline-offset: 0.15em; }
}

/* A heading without its underline, where the content below draws its own line (the About timeline) */
.section__head--plain { padding-bottom: 0; border-bottom: 0; }

/* A video shown straight away at 16:9 (the Souk Sessions highlight) */
.video-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #1E1E1C; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.slider-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* SIDEWAYS SLIDER — swipe on phones; ‹ › buttons or scroll on desktop */
.scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 72%);
  gap: var(--space-m);
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter) var(--space-s);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
  list-style: none;
}

.scroller::-webkit-scrollbar { display: none; }

@media (min-width: 720px)  { .scroller { grid-auto-columns: minmax(15rem, 40%); } }
@media (min-width: 1200px) { .scroller { grid-auto-columns: minmax(15rem, 24%); } }

.scroller > * { scroll-snap-align: start; }

/* A slider with its own ‹ › buttons above it: flyers, banners, edition photos */
.slider-box { min-width: 0; margin-top: var(--space-l); }

.slider-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  margin-bottom: var(--space-s);
}

/* Inside a box the slider keeps the page's gutter, so it can't bleed sideways
   (the full-bleed margins above are for a slider sitting straight in a section) */
.slider-box .scroller {
  margin: 0;
  padding: 0 0 var(--space-s);
  scroll-padding: 0;
}

.banner-card { margin: 0; }
.banner-card figcaption { display: grid; gap: var(--space-xs); justify-items: start; }

.event-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.event-card__title { font-size: var(--size-h3); }

/* Tags say which strand an event belongs to (Souk Sessions, Mini Festival …) */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.tag {
  border: 1px solid var(--black);
  border-radius: 999px;
  padding: 0.1em 0.6em;
}

.event-card__place {
  color: var(--ink-soft);
  font-size: var(--size-small);
}

/* POSTER FRAME — every poster gets the same 4:5 box and is shown whole */
.poster {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  margin-bottom: var(--space-xs);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream-deep);
}

.poster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A poster that isn't 4:5 sits whole on a blurred copy of itself (scripts/build.mjs),
   so every frame looks full and the same size, and no poster text is cropped. */
.poster--backdrop { position: relative; isolation: isolate; background: var(--black); }
.poster--backdrop > picture { display: block; width: 100%; height: 100%; }

.poster__bg {
  position: absolute;
  inset: -12%;
  z-index: -1;
  background-position: center;
  background-size: cover;
  filter: blur(22px) brightness(0.7);
}


/* 7. HOME PAGE -------------------------------------------------------------- */

/* HERO — the one-line wordmark across the page with the NU Wave at its end,
   then the big photo (the video, later) beside a column of rotating photos */
.home-hero { padding: var(--space-m) var(--gutter) clamp(1rem, 2vw, 1.75rem); }  /* breathing room above the moving line */

.home-hero__title {
  display: flex;
  align-items: flex-end;
  gap: clamp(0.75rem, 2.4vw, 2.5rem);  /* keeps the logo's clear space */
  margin: 0;
}

.home-hero__wordmark { flex: 1 1 auto; min-width: 0; width: 100%; height: auto; }

.home-hero__wave {
  flex: none;
  width: clamp(32px, 6.2vw, 100px);
  height: auto;
  transform-origin: 50% 100%;
  animation: wave-rock 4.5s ease-in-out infinite;
}

.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
  margin-top: clamp(0.75rem, 1.6vw, 1.5rem);
}

@media (min-width: 900px) {
  .home-hero__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: start; }
}

.home-hero__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--black);
}

/* The hero fits the screen, so the orange moving line under it shows on landing.
   The 6.5rem left over is the top bar plus the moving line. */
@media (min-width: 900px) {
  .home-hero {
    display: flex;
    flex-direction: column;
    height: clamp(32rem, calc(100vh - 6.5rem), 60rem);
    height: clamp(32rem, calc(100svh - 6.5rem), 60rem);
  }
  .home-hero__grid { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .home-hero__media { height: 100%; aspect-ratio: auto; }
  .home-hero__side { min-height: 0; overflow: hidden; }
}

.home-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;  /* moves the crop: keeps the people browsing in view */
}

.home-hero__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}

/* ROTATING PHOTOS — each new photo wipes in over the last (motion.js) */
.rotator {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: #1E1E1C;
}

/* Phones and tablets: one photo only, so the hero stays short */
@media (max-width: 899px) {
  .rotator { display: none; }
}

/* Desktop: the rotating photos take whatever height the text leaves */
@media (min-width: 900px) {
  .rotator { flex: 1 1 auto; min-height: 8rem; aspect-ratio: auto; }
}

.rotator__slide { position: absolute; inset: 0; margin: 0; opacity: 0; }
.rotator__slide.is-active { z-index: 2; opacity: 1; }
.rotator__slide.is-prev { z-index: 1; opacity: 1; }
.rotator__slide.is-entering { animation: wipe-in 1s var(--ease-out) both; }

.rotator__slide img { width: 100%; height: 100%; object-fit: cover; }

.rotator__count,
.rotator__toggle {
  position: absolute;
  z-index: 3;
  bottom: 0.7rem;
  background: rgba(10, 10, 10, 0.65);
  color: var(--cream);
}

.rotator__count {
  left: 0.7rem;
  margin: 0;
  padding: 0.3em 0.7em;
  border-radius: var(--pill);
  font-variant-numeric: tabular-nums;
}

.rotator__toggle {
  right: 0.7rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  --focus: var(--orange);
}

.rotator__toggle svg { width: 14px; height: 14px; }

/* The Home film's pause button, like the rotating photos' */
.home-hero__toggle {
  position: absolute;
  z-index: 3;
  right: 0.9rem;
  bottom: 0.9rem;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.65);
  color: var(--cream);
  cursor: pointer;
  --focus: var(--orange);
}

.home-hero__toggle svg { width: 14px; height: 14px; }
.home-hero__toggle .icon-play { display: none; }
.home-hero__toggle.is-paused .icon-play { display: block; }
.home-hero__toggle.is-paused .icon-pause { display: none; }
.rotator__toggle .icon-play { display: none; }
.rotator__toggle.is-paused .icon-play { display: block; }
.rotator__toggle.is-paused .icon-pause { display: none; }

@keyframes wipe-in {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ARCHIVE YEARS — each year opens and closes */
.year-group { border-top: 1px solid var(--black); }
.year-group:last-of-type { border-bottom: 1px solid var(--black); }

.year-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) 0;
  cursor: pointer;
  list-style: none;
}

.year-group__head::-webkit-details-marker { display: none; }
.year-group__head .year { margin: 0; }
.year-group__count { color: var(--ink-soft); }

.year-group__head::after {
  content: "+";
  margin-left: auto;
  font-size: var(--size-h3);
  line-height: 1;
}

.year-group[open] > .year-group__head::after { content: "–"; }
.year-group__body { padding-bottom: var(--space-xl); }
.year-group__head:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* PANELS — the four half-width features, in sub-brand colours. Every panel is
   built the same: a square image (1200 × 1200) top left, the text beside it,
   both aligned to the top, so the four line up whatever the text length. */
.panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-s);
  margin-top: var(--space-s);
  padding: 0 var(--gutter);
}

.panels--first { margin-top: var(--section-gap); }

@media (min-width: 900px) {
  .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  align-content: start;
  padding: var(--space-xl);
  overflow: hidden;
  border-radius: var(--radius);
}

/* The picture runs the full width of the card, like a banner, with the words under it */

/* Two panels in a row get more room than four */
@media (min-width: 900px) {
  .panels--two .panel__media { aspect-ratio: 2 / 1; }
}

/* The SoundCloud player keeps its own shape */
.panel__media.player-box { aspect-ratio: 16 / 10; }

.panel__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: var(--cream-deep);
}

.panel__media img { width: 100%; height: 100%; object-fit: cover; }

/* A poster or sleeve in the wide panel frame: shown whole on a blurred copy of
   itself (scripts/build.mjs), so nothing is cropped off the bottom */
.panel__media--fit { position: relative; isolation: isolate; background: var(--black); }
.panel__media--fit > picture { display: block; width: 100%; height: 100%; }
.panel__media--fit img { object-fit: contain; }

.panel__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}

.panel__title { font-size: var(--size-h2); }

.panel--card   { background: var(--cream); }  /* the spotlight panels on Home: one background for all of them */
.panel--black  { background: var(--black); color: var(--cream); --focus: var(--orange); }
.panel--white  { background: var(--white); border: 1px solid var(--black); }
.panel--line   { border: 1px solid var(--black); }
.panel--orange { background: var(--orange); color: var(--black); }

/* SUB-BRAND TILES — Records black, Lab white, Mini Festival yellow, Sessions orange */
.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px)  { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  min-height: 24rem;
  padding: var(--space-l);
  overflow: hidden;
  border-radius: var(--radius);
  transition: transform 0.5s var(--ease-out);
}

/* Every sub-brand logo is the same height, in the same place (top left) */
.tile__logo {
  width: auto;
  max-width: 100%;
  height: 7rem;
  margin-bottom: auto;
  object-fit: contain;
  object-position: left center;
  transform-origin: left center;
  transition: transform 0.6s var(--ease-out);
}

/* A wide lockup (Mini Festival) sits at the same width as the stacked logos, not the same height */
.tile__logo--wide { width: min(100% - 2.5rem, 16rem); height: auto; }  /* clear of the arrow top right */

.tile__title { font-size: var(--size-h3); }

.tile__link { text-decoration: none; }
.tile__link::after { content: ""; position: absolute; inset: 0; }  /* the whole tile is the link */
.tile__link:focus-visible { outline: none; }
.tile:focus-within { outline: 3px solid var(--black); outline-offset: 3px; }

.tile p { font-size: var(--size-small); }

.tile__arrow {
  position: absolute;
  top: var(--space-l);
  right: var(--space-l);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.4s var(--ease-out);
}

.tile--black  { background: var(--black); color: var(--cream); }
.tile--white  { background: var(--white); border: 1px solid var(--black); }
.tile--yellow { background: var(--yellow); color: var(--black); }
.tile--orange { background: var(--orange); color: var(--black); }

/* STORY COLUMNS — press coverage. Three columns split by thin lines, each with
   the outlet's logo always showing; hovering one turns it orange. */
.stories {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
}

.story-col + .story-col { border-top: 1px solid var(--black); }

@media (min-width: 900px) {
  .stories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-col + .story-col { border-top: 0; border-left: 1px solid var(--black); }
}

.story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  height: 100%;
  min-height: clamp(22rem, 34vw, 30rem);
  padding: var(--space-l);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.35s ease;
}

.story__title { max-width: 22ch; font-size: var(--size-h3); }

.story__reveal {
  display: grid;
  flex: 1;
  place-items: center;
  width: 100%;
  padding: var(--space-l) 0;
}

.story__reveal img { width: auto; max-width: 70%; max-height: 72px; }

.story__byline { color: var(--ink-soft); font-size: var(--size-small); }

/* PARTNERS — a big moving line of names */
.partners { margin-top: var(--section-gap); }

.partners .section__head { margin: 0 var(--gutter); }

.marquee--big { padding: var(--space-m) 0; border-bottom: 1px solid var(--black); }
.marquee--big:not(.is-moving) { padding-left: var(--gutter); padding-right: var(--gutter); }

.marquee--big .marquee__item {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--track-title);
}

.marquee--big .marquee__sep img { width: auto; height: 0.75em; }
.marquee--big.is-moving .marquee__sep { font-size: clamp(2rem, 1.2rem + 3.6vw, 4.75rem); padding: 0 0.4em; }


/* 8. INNER PAGES ------------------------------------------------------------ */

.page-head { padding: var(--space-xl) var(--gutter) 0; }
.page-head .btn-row { position: relative; margin-top: var(--space-m); }
.page-head__title { max-width: 14ch; }

.page-head__desc {
  max-width: 36ch;
  margin-top: var(--space-m);
  font-size: var(--size-lead);
  line-height: 1.4;
}

/* SUB-BRAND PAGE HEADER — a black field with the sub-brand logo and the NU Wave */
.page-head--field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--banner-h);  /* every page's banner is the same height */
  margin: var(--space-xl) var(--gutter) 0;
  padding: var(--space-xl) var(--gutter);
  overflow: hidden;
  border-radius: var(--radius);
}

.page-head__logo { margin: 0; }
.page-head__logo img { width: clamp(170px, 26vw, 300px); height: auto; }
.page-head__logo--wide img { width: clamp(260px, 52vw, 620px); }

/* Mini Festival: an edition's photos under its tab */
.edition-photos { display: grid; gap: var(--space-s); margin-top: var(--space-xl); }

/* A filled pill, for the one link that should stand out in a row */
.pill--solid { background: var(--black); color: var(--cream); }

.page-head--field .page-head__desc {
  max-width: 66ch;  /* wide enough that even the longest intro keeps to a few lines */
  margin-top: var(--space-m);
  font-size: var(--size-body);
  line-height: var(--lead-body);
}

.page-head__wave {
  position: absolute;
  z-index: -1;
  top: -12%;
  right: -3%;
  width: auto;
  height: 124%;
  pointer-events: none;
}

@media (max-width: 719px) {
  .page-head__wave { display: none; }
  :root { --banner-h: 17rem; }  /* on a phone the banner only needs to hold its own words */
}

/* RELEASES — cover on one side, details on the other (stacked on phones) */
.release {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl) var(--gutter);
  align-items: start;
}

@media (min-width: 900px) {
  .release { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.release + .release {
  margin-top: var(--section-gap);
  padding-top: var(--section-gap);
  border-top: 1px solid var(--black);
}

.release__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream-deep);
}

.release__media img { width: 100%; height: auto; }

.release__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}

.release__title { font-size: var(--size-h2); }
.release__text { max-width: 52ch; }

/* CREDITS — "Curated by", "Artwork by" and so on */
.credits {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.4rem 1.25rem;
  width: 100%;
  margin: var(--space-xs) 0 0;
  padding-top: var(--space-s);
  border-top: 1px solid var(--black);
  font-size: var(--size-small);
}

.credits dt { color: var(--ink-soft); }
.credits dd { margin: 0; }

@media (max-width: 519px) {
  .credits { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .credits dd + dt { margin-top: var(--space-s); }
}

/* PLAYERS — the slot stays empty until someone presses play (nav.js) */
.embed-slot { width: 100%; max-width: 350px; }
.embed-slot:focus { outline: none; }

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

/* A video plays in place of its still, at the still's full width */
.embed-slot--video { max-width: none; }
.embed-slot--video iframe { border-radius: var(--radius); background: #1E1E1C; }

.video-link picture { display: block; width: 100%; height: 100%; }

/* A music player in a panel's square picture area: the play button fills the square,
   then the player takes its place at the same size */
.player-box { position: relative; background: #1E1E1C; }
.player-box__frame { display: block; width: 100%; height: 100%; border: 0; }  /* a player shown straight away */
.player-box .video-link { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.player-box .embed-slot iframe { border-radius: 0; }


/* 9. MOTION ------------------------------------------------------------------
   Hovers are plain CSS, and only on devices with a mouse. motion.js adds the
   rest: marquees, rotating photos, scroll reveals and the cursor character. */

/* Sections ease up as they come into view (motion.js adds .reveal, then .is-in) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-in { opacity: 1; transform: none; }

@keyframes wave-rock {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

.site-menu__mark { transform-origin: 50% 100%; animation: wave-rock 3.5s ease-in-out infinite; }

@media (hover: hover) and (pointer: fine) {
  /* Pictures lean in slightly */
  .zoom img { transition: transform 0.6s var(--ease-out); }
  .zoom:hover img,
  .event-card:hover .zoom img { transform: scale(1.03); }

  /* Tiles lift, their logo tips, the arrow heads off */
  .tile:hover { transform: translateY(-6px); }
  .tile:hover .tile__logo { transform: rotate(-4deg) scale(1.04); }
  .tile:hover .tile__arrow { transform: translateX(6px); }

  /* Story columns turn orange, and the outlet logo leans in */
  .story:hover { background: var(--orange); }
  .story:hover .story__byline { color: var(--black); }
  .story__reveal img { transition: transform 0.6s var(--ease-out); }
  .story:hover .story__reveal img { transform: scale(1.06); }
}



/* 10. REDUCED MOTION ---------------------------------------------------------
   For anyone who has asked their device to reduce motion: nothing moves.
   motion.js doesn't run at all, so marquees sit still and wrap, photos don't
   rotate and sections don't fade. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .marquee__track,
  .rotator__slide,
  .home-hero__wave,
  .site-menu__mark { animation: none !important; }
}


/* 11. MORE PAGE BLOCKS — About, Souk Sessions, Events and the other inner pages */

.page-head--field h1 { position: relative; max-width: 16ch; font-size: var(--size-h1); }

/* A long title (About) is set a size down and kept narrow, so it stays clear of the NU Wave */
.page-head--long h1 { max-width: 17ch; font-size: clamp(2.25rem, 1.3rem + 3.3vw, 4.5rem); }
.page-head--field .label { position: relative; margin-bottom: var(--space-s); }

/* LINED COLUMNS — text split by thin black lines, in any number of columns */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--black);
  border: 1px solid var(--black);
}

@media (min-width: 900px) {
  .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cols__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l);
  background: var(--cream);
  transition: background-color 0.35s ease;
}

.cols__item h3 { font-size: var(--size-h3); }

.cols__big {
  font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--track-title);
}

@media (hover: hover) and (pointer: fine) {
  .cols__item:hover { background: var(--white); }
}

/* WIDE PHOTO — one photograph across the page, with a label under it */
.wide-photo { margin-top: var(--section-gap); padding: 0 var(--gutter); }

.wide-photo picture {
  display: block;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream-deep);
}

@media (max-width: 719px) {
  .wide-photo picture { aspect-ratio: 4 / 3; }
}

.wide-photo img { width: 100%; height: 100%; object-fit: cover; }
.wide-photo .label { margin-top: var(--space-s); }

/* FEATURE ROWS — a picture or video beside its text; every other row swaps sides */
.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l) var(--gutter);
  align-items: center;
  padding: var(--space-l) 0;
  border-bottom: 1px solid var(--black);
}

@media (min-width: 900px) {
  .feature-row { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .feature-row:nth-child(even) > :first-child { order: 2; }
}

.feature-row__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}

.feature-row__body h3 { font-size: var(--size-h2); }
.feature-row__body p:not(.label) { max-width: 52ch; }

/* RECAP FILMS — portrait videos played on the site (Mini Festival) */
.recap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 20rem));
  gap: var(--space-l) var(--gutter);
}

.recap { margin: 0; display: grid; gap: var(--space-s); align-content: start; }

.recap__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius);
  background: #1E1E1C;
}

.recap__caption p { margin: 0; }
.recap__caption p + p { margin-top: 0.2rem; }

/* VIDEO LINK — a still with a play button that opens the video. It stays a
   plain link until the videos are hosted on the site. */
.video-link {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: #1E1E1C;
  color: var(--cream);
  text-decoration: none;
}

.video-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.6s var(--ease-out);
}

.video-link__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--black);
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease-out);
}

.video-link__play svg { width: 26px; height: 26px; margin-left: 4px; }

.video-link__title {
  position: absolute;
  left: var(--space-m);
  right: var(--space-m);
  bottom: var(--space-m);
  text-shadow: 0 1px 12px rgba(10, 10, 10, 0.8);
}

@media (hover: hover) and (pointer: fine) {
  .video-link:hover img { opacity: 1; transform: scale(1.03); }
  .video-link:hover .video-link__play { transform: translate(-50%, -50%) scale(1.12); }
}

/* POSTER GRID — events with a poster, newest first */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-xl) var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* EVENT LIST — plain rows for events without a poster */
.event-list {
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--black);
}

.event-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem var(--space-l);
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--black);
}

@media (min-width: 720px) {
  .event-list li { grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 0.9fr); align-items: baseline; }
}

.event-list h4 { margin: 0; font-size: var(--size-lead); }

/* YEAR HEADINGS in the archive */
.year {
  margin: var(--section-gap) 0 var(--space-l);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--black);
  font-size: var(--size-h1);
}

/* EMPTY STATE — "nothing lined up right now" */
.empty-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-l);
  border: 1px dashed var(--black);
  border-radius: var(--radius);
}

/* Photos in a poster grid fill their frame instead of sitting whole inside it */
.poster--photo img { object-fit: cover; }


/* 12. SWITCHER, FORMS, SHOP, LISTINGS, ARTICLES, GALLERY ------------------- */

/* TABS — the Mini Festival edition switcher (nav.js). Without JavaScript the
   buttons stay hidden and every edition shows. */
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0 0 var(--space-xl);
}

.tabs__tab {
  min-height: 44px;
  padding: 0.5em 1.2em;
  border: 1.5px solid var(--black);
  border-radius: var(--pill);
  background: transparent;
  color: var(--black);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tabs__tab:hover { background: var(--yellow); }
.tabs__tab[aria-selected="true"] { background: var(--black); color: var(--cream); }
.tabs__panel:focus-visible { outline-offset: 8px; }
.tabs__panel + .tabs__panel { margin-top: var(--section-gap); }

/* Once nav.js is running, every edition sits in the same grid cell and only the
   chosen one is laid out, so the switcher is exactly as tall as what you're
   looking at. The hidden ones can't be tabbed into (nav.js makes them inert). */
.tabs--ready { display: grid; grid-template-columns: minmax(0, 1fr); }  /* a slider inside a panel mustn't widen the grid */
.tabs--ready > .tabs__list { grid-row: 1; }

.tabs--ready > .tabs__panel {
  grid-row: 2;
  grid-column: 1;
  align-self: start;
  margin-top: 0;
  display: none;
}

.tabs--ready > .tabs__panel.is-current { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .tabs--ready > .tabs__panel.is-current { animation: tab-in 0.35s ease both; }
}

@keyframes tab-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* FORMS — contact and submissions */
.form {
  display: grid;
  gap: var(--space-l);
  max-width: 46rem;
}

.form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
}

@media (min-width: 720px) {
  .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field > label,
.field > legend {
  padding: 0;
  font-size: var(--size-small);
  font-weight: 500;
}

.field__hint { color: var(--ink-soft); font-size: var(--size-label); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--black);
  border-radius: var(--radius-small);
  background: var(--white);
  color: var(--black);
}

.field textarea { min-height: 10rem; resize: vertical; }

/* Pill-shaped choices (radio buttons and checkboxes) */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: 0.2rem;
}

.choice { position: relative; }

.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4em 1em;
  border: 1.5px solid var(--black);
  border-radius: var(--pill);
  font-size: var(--size-small);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.choice input:checked + span { background: var(--black); color: var(--cream); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.form__note { color: var(--ink-soft); font-size: var(--size-small); }

/* SHOP — the reference site's product grid. Sold-out items stay visible. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-xl) var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.product__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-bottom: var(--space-xs);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
}

.product__media img { width: 100%; height: 100%; object-fit: cover; }
.product__status { position: absolute; z-index: 1; top: 0.75rem; left: 0.75rem; background: var(--cream); }
.product__name { font-size: var(--size-body); font-weight: 500; letter-spacing: var(--track-body); line-height: 1.3; }
.product__meta { color: var(--ink-soft); font-size: var(--size-small); }
.product__link { text-decoration: none; }
.product__link::after { content: ""; position: absolute; inset: 0; }
.product__link:focus-visible { outline: none; }
.product:focus-within { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius); }
.product.is-sold .product__media img { opacity: 0.55; filter: grayscale(1); }

/* LISTINGS — classified-style boxes split by thin lines (Community) */
/* CLASSIFIEDS — short entries between hairlines, in newspaper columns */
.listings { columns: 1; column-gap: var(--space-xl); }

@media (min-width: 700px)  { .listings { columns: 2; } }
@media (min-width: 1100px) { .listings { columns: 3; } }

.listing {
  break-inside: avoid;
  padding: var(--space-s) 0 var(--space-m);
  border-top: 1px solid var(--black);
  font-size: var(--size-small);
  line-height: 1.45;
}

.listing__kicker { color: var(--ink-soft); }
.listing__title { margin-top: 0.15rem; font-size: 1.0625rem; line-height: 1.25; }
.listing__text { margin-top: 0.3rem; }
.listing__facts { margin-top: 0.3rem; color: var(--ink-soft); }
.listing__more { margin-top: 0.3rem; }
.listing__more a { text-decoration: underline; }

/* ARTICLE TEXT — blog posts */
.prose { max-width: 42rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.8em; font-size: var(--size-h3); }
.prose a { text-decoration: underline; }

.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--space-l);
  border-left: 4px solid var(--orange);
  font-size: var(--size-lead);
  line-height: 1.4;
}

/* SCENE BUILDERS ARTICLE — the headline, a wide picture, the text beside a note on the
   series, then the article's lists in blocks of their own */
.article { padding-inline: var(--gutter); }

.article__head {
  padding-block: var(--space-xl) var(--space-l);
}

.article__title {
  max-width: 22ch;
  margin-top: var(--space-m);
  font-size: clamp(2.3rem, 1.2rem + 4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.article__byline { margin-top: var(--space-m); font-size: var(--size-lead); }
.article__head .label a { text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .article__head .label a:hover { text-decoration: underline; }
}

.article__hero { margin: 0; }
.article__hero picture { display: block; }

.article__hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--cream-deep);
}

@media (min-width: 1000px) {
  .article__hero img { aspect-ratio: 2 / 1; }
}

.article__hero figcaption {
  margin-top: var(--space-xs);
  color: var(--ink-soft);
  font-size: var(--size-small);
}

.article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l) var(--gutter);
  padding-block: var(--space-xl);
}

@media (min-width: 1000px) {
  .article__layout { grid-template-columns: minmax(0, 15rem) minmax(0, 42rem); justify-content: space-between; }
  .article__aside { position: sticky; top: 6rem; align-self: start; }
}

@media (min-width: 1300px) {
  .article__layout { grid-template-columns: minmax(0, 15rem) minmax(0, 42rem) minmax(0, 15rem); }
}

.article__aside {
  display: grid;
  gap: var(--space-s);
  align-content: start;
  padding-top: var(--space-m);
  border-top: 1px solid var(--black);
  color: var(--ink-soft);
  font-size: var(--size-small);
}

.article__mark { display: block; width: 6.5rem; }
.article__mark img { display: block; width: 100%; height: auto; }

.article__body { font-size: 1.125rem; line-height: 1.7; }

.article__body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-small);
}

.article__body figure { margin-inline: 0; }

/* A picture between two paragraphs, with its caption */
.article__figure { margin-block: var(--space-l); }
.article__body figcaption { margin-top: var(--space-xs); color: var(--ink-soft); font-size: var(--size-small); }

.article-extras {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  padding-bottom: var(--space-xl);
}

@media (min-width: 900px) {
  .article-extras { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}

/* The lists after an article: yellow cards, black text (Vinyl Souk, Sep 2026) */
.article-extras__block {
  padding: var(--space-m) var(--space-l) var(--space-l);
  border-radius: var(--radius);
  background: var(--yellow);
  color: var(--black);
}

.article-extras__title { font-size: 1.25rem; line-height: 1.15; }

.article-extras ul {
  margin: var(--space-m) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid currentColor;
}

.article-extras li {
  padding: 0.45rem 0;
  border-bottom: 1px solid currentColor;
  font-size: var(--size-body);
  font-weight: 500;
}

@media (min-width: 600px) {
  .article-extras__block--long ul { columns: 2; column-gap: var(--space-l); border-top: 0; }
  .article-extras__block--long li { break-inside: avoid; }
}

.article-extras__name { display: block; }
.article-extras__note { display: block; font-size: var(--size-small); font-weight: 400; }

.article__foot { display: grid; gap: var(--space-l); padding-bottom: var(--space-xl); }
.article__foot .press-list { margin-top: 0; }

.press-list--single { grid-template-columns: minmax(0, 1fr) !important; }

/* GALLERY ALBUMS — links to each album, then one section per event */
.album-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.album-nav__year { opacity: 0.6; }
.album, .films-section { scroll-margin-top: 5rem; }

/* Recap films in the gallery: landscape two to a row, portrait in narrower columns */
.films { display: grid; gap: var(--space-l) var(--gutter); align-items: start; }
.films + .films { margin-top: var(--space-xl); }
.films--wide { grid-template-columns: minmax(0, 1fr); }
.films--tall { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }

@media (min-width: 800px) {
  .films--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.film { display: grid; gap: var(--space-s); margin: 0; }

.film__video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: #1E1E1C;
}

.film__caption p { margin: 0; }
.film__title { font-size: var(--size-lead); font-weight: 600; line-height: 1.2; }
.film__caption .label + .film__title { margin-top: 0.2rem; }
.album .section__head .muted { margin-top: 0.3rem; }

/* One long list flowing over two columns (Mini Festival coverage) */
@media (min-width: 900px) {
  .press-list--columns ul { columns: 2; column-gap: var(--gutter); border-top: 0; }
  .press-list--columns li { break-inside: avoid; border-top: 1px solid var(--black); border-bottom: 0; }
}

/* Scene Builders on Souk Lab and Home */
.scene-lead h3 a { color: inherit; text-decoration: none; }
.scene-lead__media { display: block; overflow: hidden; border-radius: var(--radius); }
.scene-lead__media img { display: block; width: 100%; height: auto; }
.scene-lead__byline { font-weight: 500; }
.panel__title--long { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.08; }
.panel__title a { color: inherit; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .scene-lead h3 a:hover,
  .panel__title a:hover { text-decoration: underline; text-underline-offset: 0.12em; }
}

/* MASONRY GALLERY — photos and posters of different shapes, packed in columns */
.masonry { column-gap: var(--space-m); columns: 1; }

@media (min-width: 600px)  { .masonry { columns: 2; } }
@media (min-width: 1000px) { .masonry { columns: 3; } }
@media (min-width: 1400px) { .masonry { columns: 4; } }

.masonry > figure {
  margin: 0 0 var(--space-m);
  break-inside: avoid;
}

.masonry picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: var(--cream-deep);
}

.masonry img { width: 100%; height: auto; }
.masonry figcaption { margin-top: 0.45rem; }

/* Yellow and white header fields — Mini Festival and Souk Lab */
.field--yellow { background: var(--yellow); color: var(--black); }
.field--white  { background: var(--white); color: var(--black); border: 1px solid var(--black); }

/* Line-ups inside lined columns */
.cols__item ul { margin: 0; padding-left: 1.1em; }
.cols__item li + li { margin-top: 0.2rem; }

/* Page headers with the NU Wave ornament need their own positioned box to hold it
   (without this, the wave escapes to the next positioned thing up the page) */
.page-head--field { position: relative; isolation: isolate; }

/* Story columns wrap onto more rows once there are more than three */
@media (min-width: 900px) {
  .story-col:nth-child(3n + 1) { border-left: 0; }
  .story-col:nth-child(n + 4) { border-top: 1px solid var(--black); }
  .story-col:nth-child(3n + 1) .story { padding-left: 0; }
}

/* PARTNERS — a still grid: the logo straight on the tile (no panel), the name, and one short line.
   Logos need a transparent background. Filled in from content/partners.json ("Partners" in the editor). */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1100px) {
  .partner-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.partner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-s) var(--space-s) var(--space-m);
  border: 1px solid var(--black);
  border-radius: var(--radius);
  background: var(--cream);
  transition: background-color 0.35s ease;
}

.partner__logo {
  display: grid;
  place-items: center;
  height: 7.5rem;
  padding: var(--space-s) 0;
}

/* The width is set per logo by scripts/build.mjs, so every logo carries the same weight */
.partner__logo img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.5s var(--ease-out);
}

/* Shown instead of a logo until one is added */
.partner__wordmark {
  font-size: var(--size-lead);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-title);
  text-align: center;
}

.partner__name { margin-top: var(--space-2xs); }
.partner__link { text-decoration: none; }
.partner__link::after { content: ""; position: absolute; inset: 0; }  /* the whole tile is the link */
.partner__link:focus-visible { outline: none; }
.partner:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }

.partner__text {
  color: var(--ink-soft);
  font-size: var(--size-small);
  line-height: 1.45;
}

@media (hover: hover) and (pointer: fine) {
  .partner:hover { background: var(--white); }
  .partner:hover .partner__logo img { transform: scale(1.04); }
}


/* 13. ABOUT (THE BRAND PITCH), EVENTS CALLOUT -------------------------------- */

/* IN NUMBERS — big figures in a lined grid, the first on orange */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--black);
  border: 1px solid var(--black);
}

@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

.stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-l);
  min-height: clamp(10rem, 18vw, 15rem);
  padding: var(--space-l);
  background: var(--cream);
}

.stat:first-child { background: var(--orange); }

.stat__number {
  font-size: clamp(2.25rem, 1.2rem + 4.2vw, 5.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-title);
  font-variant-numeric: tabular-nums;
}

.stats__note { margin-top: var(--space-s); font-size: var(--size-small); }

/* THE JOURNEY — years along a line with a dot for each (down the side on phones) */
.timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .timeline { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}

.timeline__year {
  position: relative;
  padding: var(--space-l) var(--space-l) var(--space-l) 0;
  border-top: 1px solid var(--black);
}

.timeline__year::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid var(--black);
  border-radius: 50%;
  background: var(--orange);
}

.timeline__label { margin-bottom: var(--space-s); font-size: var(--size-h1); }

.timeline__year ul {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__year li,
.tick-list li { position: relative; padding-left: 1.3em; }

.timeline__year li::before,
.tick-list li::before {
  content: "✦";
  position: absolute;
  top: 0.35em;
  left: 0;
  font-size: 0.7em;
  line-height: 1;
}

@media (max-width: 899px) {
  .timeline { margin-left: 7px; border-left: 1px solid var(--black); }
  .timeline__year { padding: 0 0 var(--space-xl) var(--space-l); border-top: 0; }
  .timeline__year::before { top: 0.55em; left: -8px; }
}

/* WORK WITH US — the pitch beside the enquiry form */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl) var(--gutter);
  align-items: start;
}

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.split__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}

.split__text .label { margin-top: var(--space-s); }

.tick-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* CALLOUT — one big link to a related page (Events → Souk Sessions) */
.callout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m) var(--space-l);
  align-items: center;
  padding: var(--space-l);
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--black);
  text-decoration: none;
}

@media (min-width: 720px) {
  .callout { grid-template-columns: auto minmax(0, 1fr) auto; }
}

.callout__logo { width: auto; height: 5rem; }

.callout__body { display: flex; flex-direction: column; gap: var(--space-xs); }

.callout__title {
  max-width: 30ch;
  font-size: var(--size-h3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--track-title);
}

.callout__arrow { font-size: 2rem; line-height: 1; transition: transform 0.4s var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .callout:hover .callout__arrow { transform: translateX(8px); }
}


/* 14. RECORDS SPREADS, DISCOVER SERIES ---------------------------------------- */

/* RECORDS — each release is a spread: the cover large, the record beside it.
   The newest leads on black (.record--lead); older ones sit on cream with the
   cover on the right (.record--flip). Credits follow in a lined grid. */
.record {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--radius);
}

.record--lead { background: var(--black); color: var(--cream); --focus: var(--orange); }
.record--flip { border: 1px solid var(--black); background: var(--cream); }

/* Two releases side by side, each a compact card with the cover above the words,
   so one record never fills the screen. One under the other on a phone. */
.records-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--section-gap) var(--gutter);
}

.records-grid__item { min-width: 0; }

@media (min-width: 900px) {
  .records-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Each release takes two shared rows, the card and its credits, so the two
     cards side by side are always the same height, whatever the text length */
  .records-grid__item {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .records-grid .record-credits { align-self: start; }
  .records-grid .record { grid-template-rows: auto 1fr; }
  .records-grid .record__body { justify-content: flex-start; }
  /* The sleeve sits smaller and centred, so the card stays short */
  .records-grid .record__cover {
    width: 100%;
    max-width: 22rem;
    margin: var(--space-l) auto 0;
    border-radius: var(--radius-small);
    overflow: hidden;
  }
  /* Credits in half the width: two columns, never four */
  .records-grid .record-credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .records-grid .record-credits__wide { grid-column: 1 / -1; }
}

.record__cover { display: block; align-self: start; aspect-ratio: 1; background: var(--cream-deep); }
.record__cover img { width: 100%; height: 100%; object-fit: cover; }

.record__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-s);
  padding: var(--space-xl) var(--gutter);
}

@media (min-width: 900px) {
  .record__body { padding: var(--space-l); }
}

.record__title {
  font-size: clamp(1.75rem, 1.1rem + 1.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: var(--track-title);
}

.record__text { max-width: 48ch; font-size: var(--size-small); }

.record__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.record__facts li {
  padding: 0.3em 0.85em;
  border: 1.5px solid currentColor;
  border-radius: var(--pill);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.record__facts .is-sold { border-color: var(--black); background: var(--black); color: var(--cream); }

/* On black, the outline button turns cream */
.record--lead .btn--outline { border-color: var(--cream); color: var(--cream); }
.record--lead .btn--outline:hover { border-color: var(--orange); background: var(--orange); color: var(--black); }

/* The tracklist player takes the full width of the text column */
.embed-slot--wide { max-width: none; margin-top: var(--space-xs); }

.record-credits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: var(--space-s) 0 0;
  overflow: hidden;
  border: 1px solid var(--black);
  border-radius: var(--radius);
  background: var(--black);
}

@media (min-width: 720px) {
  .record-credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-credits__wide { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .record-credits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .record-credits__wide { grid-column: span 2; }
}

.record-credits > div {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--space-m) var(--space-l);
  background: var(--cream);
}

.record-credits dt { color: var(--ink-soft); }
.record-credits dd { margin: 0; }

.record-credits + .record { margin-top: var(--section-gap); }

@media (hover: hover) and (pointer: fine) {
  .record__cover img { transition: transform 0.8s var(--ease-out); }
  .record:hover .record__cover img { transform: scale(1.02); }
}

/* DISCOVER SERIES — a magazine layout after dazeddigital.com: the first artist
   leads, large, with a black caption panel; the next three are listed beside it
   between thin lines; any more follow in rows of three. Built by scripts/build.mjs. */
.discover {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l) var(--gutter);
}

@media (min-width: 900px) {
  .discover { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

.discover-card { position: relative; display: flex; flex-direction: column; }
.discover-card:focus-within { outline: 3px solid var(--focus); outline-offset: 4px; }

.discover-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #1E1E1C; }
.discover-card__media picture { display: block; width: 100%; height: 100%; }
.discover-card__media img { width: 100%; height: 100%; object-fit: cover; }

.discover-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.discover-card__title { font-size: var(--size-h3); line-height: 1.05; }
.discover-card__link { text-decoration: none; }
.discover-card__link::after { content: ""; position: absolute; inset: 0; }  /* the whole card is the link */
.discover-card__link:focus-visible { outline: none; }
.discover-card__work { font-weight: 500; }
.discover-card__text { max-width: 52ch; color: var(--ink-soft); font-size: var(--size-small); }
.discover-card__cta { margin-top: var(--space-2xs); }

/* No picture yet: the artist's name on a block of brand colour */
.discover-card__type {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding: var(--space-m);
}

.discover-card__type span {
  font-size: clamp(1.5rem, 0.9rem + 2vw, 2.75rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--track-title);
}

/* The lead: a big picture over a black caption panel */
.discover-card--lead { overflow: hidden; border-radius: var(--radius); background: var(--black); color: var(--cream); --focus: var(--orange); }
.discover-card--lead .discover-card__media { aspect-ratio: 4 / 3; }
.discover-card--lead .discover-card__body { padding: var(--space-l); }
.discover-card--lead .discover-card__title { font-size: var(--size-h2); }
.discover-card--lead .discover-card__text { color: rgba(246, 247, 234, 0.78); font-size: var(--size-body); }
.discover-card--lead .discover-card__type span { font-size: clamp(2.5rem, 1.2rem + 5vw, 6rem); }

/* Beside the lead: a picture and its words side by side, between thin lines */
.discover__side { border-top: 1px solid var(--black); }

.discover__side .discover-card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-m);
  align-items: start;
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--black);
}

.discover__side .discover-card__media { aspect-ratio: 1; border-radius: var(--radius-small); }
.discover__side .discover-card__text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }

/* The column beside the lead scrolls inside itself once it's taller. On a wide screen
   it takes exactly the lead card's height (the scroller is laid over the column); on a
   phone, where the column sits under the lead, it stops at about three cards. */
.discover__scroll {
  max-height: 40rem;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}

.discover__scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

@media (min-width: 900px) {
  .discover { align-items: stretch; }
  .discover__side { position: relative; }
  .discover__scroll { position: absolute; inset: 0; max-height: none; padding-right: var(--space-s); }
}

@media (hover: hover) and (pointer: fine) {
  .discover-card__media img { transition: transform 0.6s var(--ease-out); }
  .discover-card:hover .discover-card__media img { transform: scale(1.04); }
  .discover-card:hover .discover-card__title { text-decoration: underline; text-underline-offset: 0.12em; }
}