/* =============================================================================
   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 */
  --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;
  --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(--cream);
  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);
  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);
  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: 1.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);
}

.site-footer__statement-wrap {
  padding: var(--space-2xl) var(--gutter) var(--space-xl);
}

.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);
}

/* 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; }

/* TEXTURE — the warm field from toolkit page 19: yellow, orange and red blended,
   with the grain on top. Black text only (it passes on all three colours). */
.texture {
  position: relative;
  isolation: isolate;
  background: radial-gradient(130% 120% at 12% 0%, var(--yellow) 0%, var(--orange) 45%, var(--red) 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); }

.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; }

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

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

.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;
}


/* 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) 0; }

.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 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--black);
}

@media (min-width: 720px) {
  .home-hero__media { aspect-ratio: 16 / 10; }
}

.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;
}

@media (min-width: 900px) {
  .rotator { aspect-ratio: 4 / 5; }
}

.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; }
.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); }
}

/* PANELS — the four half-width features, in sub-brand colours */
.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-l);
  overflow: hidden;
  border-radius: var(--radius);
}

@media (min-width: 1200px) {
  .panel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
}

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

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

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

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

.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);
}

.tile__logo {
  width: 64%;
  max-width: 210px;
  height: auto;
  margin-bottom: auto;
  transition: transform 0.6s var(--ease-out);
}

.tile__logo--wave { width: auto; height: 7rem; }

.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; hovering
   one brings in the outlet's logo and sets its ribbon moving. */
.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) var(--space-l) 0;
  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: 64px; }

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

.ribbon {
  display: block;
  align-self: stretch;
  margin: var(--space-s) calc(var(--space-l) * -1) 0;
  padding: 0.5rem 0;
  border-top: 1px solid var(--black);
}

.ribbon .marquee__group { justify-content: center; }

/* 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__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 {
  margin: var(--space-xl) var(--gutter) 0;
  padding: var(--space-2xl) 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--field .page-head__desc {
  max-width: 54ch;
  margin-top: var(--space-l);
  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; }
}

/* 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);
}


/* 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, bring in the outlet logo, start the ribbon */
  .story:hover { background: var(--orange); }
  .story:hover .story__byline { color: var(--black); }

  .story__reveal {
    opacity: 0;
    clip-path: inset(50% 0 50% 0);
    transition: clip-path 0.6s var(--ease-out), opacity 0.3s ease;
  }

  .story:hover .story__reveal,
  .story:focus-visible .story__reveal { opacity: 1; clip-path: inset(0); }

  .story:not(:hover):not(:focus-visible) .ribbon .marquee__track { animation-play-state: paused; }
}

/* THE NU WAVE CURSOR CHARACTER (made by motion.js). It trails the pointer and
   never replaces it. The eyes are two dots on the top of the arch. */
.cursor-buddy {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 36px;
  height: 49px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: transform;
}

.cursor-buddy.is-visible { opacity: 1; }
.cursor-buddy.is-visible.is-hidden { opacity: 0; }

.cursor-buddy__body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 85%;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cursor-buddy.is-hover .cursor-buddy__body { transform: scale(1.5) rotate(-10deg); }
.cursor-buddy.is-down .cursor-buddy__body  { transform: scale(1.3, 0.75); }

.cursor-buddy__figure {
  position: absolute;
  inset: 0;
  transform-origin: 50% 90%;
  animation: buddy-sway 2.6s ease-in-out infinite;
}

.cursor-buddy.is-hover .cursor-buddy__figure { animation: buddy-wiggle 0.45s ease-in-out infinite; }
.cursor-buddy.is-idle .cursor-buddy__figure  { animation: buddy-bounce 1.1s ease-in-out infinite; }

.cursor-buddy__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease;
}

.cursor-buddy__alt { opacity: 0; }
.cursor-buddy.is-on-orange .cursor-buddy__main { opacity: 0; }
.cursor-buddy.is-on-orange .cursor-buddy__alt  { opacity: 1; }

.cursor-buddy__eyes {
  position: absolute;
  z-index: 1;
  top: 1.5px;
  left: 5px;
  display: flex;
  justify-content: space-between;
  width: 14px;
  transform: translate(calc(var(--look-x, 0) * 1.5px), calc(var(--look-y, 0) * 1px));
}

.cursor-buddy__eye {
  width: 3.6px;
  height: 3.6px;
  border-radius: 50%;
  background: var(--black);
  animation: buddy-blink 4.2s infinite;
}

.cursor-buddy.is-on-orange .cursor-buddy__eye { background: var(--cream); }

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

@keyframes buddy-wiggle {
  0%, 100% { transform: rotate(-12deg) scaleY(1); }
  50%      { transform: rotate(12deg) scaleY(1.08); }
}

@keyframes buddy-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  40%      { transform: translateY(-6px) scale(0.95, 1.06); }
  70%      { transform: translateY(0) scale(1.08, 0.92); }
}

@keyframes buddy-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}


/* 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, sections don't fade and there's no cursor character. */

@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); }
.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; }

/* 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); }

/* 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) */
.listings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: var(--black);
  border: 1px solid var(--black);
}

.listing {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-height: 11rem;
  padding: var(--space-l);
  background: var(--cream);
}

.listing h3 { font-size: var(--size-lead); }
.listing .muted { font-size: var(--size-small); }

/* 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;
}

/* 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-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m) var(--space-m) var(--space-l);
  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: 8rem;
  margin-bottom: var(--space-xs);
  padding: var(--space-s) 0;
}

.partner__logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 6.5rem;
  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); }
}