/* HoosOnAux global stylesheet.
   Gig-poster look: cream paper, charcoal ink, black outlines, hard offset
   shadows, orange accents, stars, and halftone texture.
   Type: Anton (display), Space Mono (labels/meta), Hanken Grotesk (body),
   loaded via assets/js/include.js. */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {

  /* Brand palette: six colors, by role. Change the colors here. */
  --cream:    #F5F1EA; /* primary page/body background: light, warm, neutral   */
  --charcoal: #2A2724; /* default text, headings, nav, dark UI (softer than #000)*/
  --black:    #171717; /* strong outlines, borders, dividers: max contrast only */
  --orange:   #DB773D; /* primary brand accent: CTAs, links/hover, highlights   */
  --taupe:    #D8CFC4; /* secondary surface: cards, section bands, hover wash   */
  --gray:     #6C6863; /* muted/secondary text: captions, metadata, placeholders*/

  /* Legacy role aliases → mapped onto the brand palette so existing references
     keep working. Prefer the six brand tokens above for any new styles. */
  --paper:        var(--cream);    /* page background                          */
  --paper-tint:   var(--taupe);    /* alternating section bands → taupe surface */
  --sand:         var(--taupe);    /* soft fills / hover wash → taupe surface   */
  --terracotta:   var(--orange);   /* primary accent → brand orange            */
  --clay:         var(--orange);   /* secondary accent collapses to brand orange*/
  --maroon:       var(--charcoal); /* decorative dark / textures → charcoal     */
  --espresso:     var(--charcoal); /* display ink / headings → charcoal         */
  --ink:          var(--charcoal); /* body / nav text → charcoal               */
  --ink-soft:     var(--gray);     /* captions / metadata → gray               */
  --hairline:     var(--black);    /* every rule/border → bold black outline    */
  --ember:        var(--orange);   /* brand pop → orange                       */

  /* Typography roles. Anton carries display headlines; Space Mono handles
     labels/meta/buttons; Hanken Grotesk is the body face. */
  --font-sans:    "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Anton", "Arial Narrow", var(--font-sans);  /* poster headlines */
  --font-script:  var(--font-sans);  /* small kickers / taglines */
  --font-stamp:   "Space Mono", ui-monospace, Menlo, "Helvetica Neue", monospace;  /* labels, meta, buttons */
  --font-serif:   var(--font-sans);  /* body copy */

  /* Weight ramp for the system-sans elements (labels, meta, card text).
     Anton is single-weight by design. */
  --weight-label:   700;  /* uppercase tracked labels (eyebrows, meta, buttons) */
  --weight-heading: 800;  /* section + card titles                              */
  --weight-display: 900;  /* poster-weight showpiece / page-hero titles         */

  /* Spacing scale */
  --space-1: 0.5rem;  --space-2: 1rem;    --space-3: 1.5rem;
  --space-4: 2.5rem;  --space-5: 4rem;    --space-6: 4rem;

  /* Radii + borders: sharp, sticker-flat edges. Thick black outlines and hard
     offset shadows, not soft rounding. */
  --radius-img:    2px;   /* images: barely-there corner               */
  --radius-panel:  3px;   /* cards / framed panels                      */
  --radius-pill:   999px; /* round chips: arrows, swatches             */
  --radius-swatch: 3px;
  --border-hair:   1px solid var(--hairline);
  --border-bold:   2.5px solid var(--black);  /* the default poster outline */

  /* Hard offset shadows: no blur, pure black, down-right. Bigger = more lift. */
  --shadow-pop-sm: 3px 3px 0 var(--black);
  --shadow-pop:    5px 5px 0 var(--black);
  --shadow-pop-lg: 8px 8px 0 var(--black);
  --shadow-pop-orange: 5px 5px 0 var(--orange);  /* accent variant */

  /* Container */
  --container:     1200px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

/* Ensure the HTML `hidden` attribute always wins over element-level display rules. */
[hidden] { display: none !important; }

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

body {
  position: relative;
  min-height: 100vh;
  font-family: var(--font-serif);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Halftone wash over the whole page: two offset charcoal dot grids. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    radial-gradient(var(--charcoal) 1px, transparent 1.4px),
    radial-gradient(var(--charcoal) 1px, transparent 1.4px);
  background-size: 9px 9px, 9px 9px;
  background-position: 0 0, 4.5px 4.5px;
}

/* Fine paper grain over the cream. Sits behind content, multiplies in faintly. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.045'/%3E%3C/svg%3E");
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }

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

a { color: inherit; text-decoration: none; }

/* Text selection highlight. */
::selection { background: var(--orange); color: var(--cream); }

/* Orange focus ring for keyboard users. */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Decorative primitives: CSS stars.
   -------------------------------------------------------------------------- */

/* A 5-point CSS star drawn with clip-path. Size it with font-size / width.
   Used standalone as <span class="star"> and as the ::before/::after burst
   on eyebrows and the wordmark. */
.star,
.star-burst::before,
.star-burst::after {
  --star-size: 0.85em;
  content: "";
  display: inline-block;
  width: var(--star-size);
  height: var(--star-size);
  background: var(--orange);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                     50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   .container and .section__inner are equivalent: center + cap width + gutters.
   -------------------------------------------------------------------------- */
.container,
.section__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section {
  padding-block: var(--space-6);
}

/* Section bands. Class names predate the palette, so check the rendered color,
   not the name: .section--white is the cream band (transparent, showing the
   body halftone through); .section--cream is the taupe band. */
.section--cream {
  position: relative;
  background-color: var(--paper-tint);
  border-block: var(--border-bold);
  background-image:
    radial-gradient(rgba(42, 39, 36, 0.08) 1px, transparent 1.4px),
    radial-gradient(rgba(42, 39, 36, 0.08) 1px, transparent 1.4px);
  background-size: 9px 9px, 9px 9px;
  background-position: 0 0, 4.5px 4.5px;
  background-attachment: fixed;
}
.section--cream > * { position: relative; }

/* On a tan band, cards/panels take the tan fill (flat, no dots) so they read as
   the same surface, set apart by their bold frame + shadow, not a color shift.
   (The dotted band vs. flat card is what creates the contrast.) */
.section--cream .card,
.section--cream .merch-tile,
.section--cream .merch-details { background: var(--taupe); }

/* Small caps label that opens a section. */
.section-eyebrow,
.section__intro-label {
  display: inline-block;
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--orange);
  border: var(--border-bold);
  border-radius: 3px;
  box-shadow: var(--shadow-pop-sm);
  padding: 0.3rem 0.7rem;
  transform: rotate(-2deg);
}

.section__title,
.section-heading {
  margin-block: 0.7rem 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--charcoal);
}

.section__intro {
  max-width: 60ch;
  margin-bottom: var(--space-4);
  font-size: 1.2rem;
  color: var(--ink-soft);
}

.section__subtitle {
  font-family: var(--font-stamp);
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 0;
  margin-bottom: 1.1rem;
}

/* Bold divider bar. */
.rule { border: 0; border-top: var(--border-bold); }

/* --------------------------------------------------------------------------
   4. Site header / primary navigation
   Sits directly on the paper: no bar fill, just an ultra-faint hairline.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--paper); /* fallback for browsers without color-mix */
  background-color: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: var(--border-bold);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 0.85rem;
}

/* Brand: circular stamp logo + clean wordmark. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.brand__mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: var(--border-bold);
  box-shadow: var(--shadow-pop-sm);
}
.brand__word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--charcoal);
  white-space: nowrap;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.6rem;
  list-style: none;
  padding: 0;
}

.site-nav__list a {
  position: relative;
  display: inline-block;
  padding: 0.25rem 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--charcoal);
  transition: color 180ms var(--ease);
}

/* Orange underline that animates in on hover. */
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 4px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms var(--ease);
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible { color: var(--terracotta); }
.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after { transform: scaleX(1); }

.site-nav__list a[aria-current="page"] {
  color: var(--terracotta);
}
.site-nav__list a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--terracotta);
}

/* Mobile nav toggle (hidden on desktop; shown via the responsive rules). */
.nav-toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  background: var(--cream);
  border: var(--border-bold);
  border-radius: 4px;
  box-shadow: var(--shadow-pop-sm);
  cursor: pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 1.5px;
  background: var(--espresso);
  transform: translateX(-50%);
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.nav-toggle__bar { top: 50%; margin-top: -0.75px; }
.nav-toggle__bar::before { content: ""; top: -6px; }
.nav-toggle__bar::after  { content: ""; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.button {
  display: inline-block;
  padding: 0.7rem 1.7rem;
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal);
  background-color: var(--cream);
  border: var(--border-bold);
  border-radius: 4px;
  box-shadow: var(--shadow-pop-sm);
  cursor: pointer;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease),
              background-color 160ms var(--ease), color 160ms var(--ease);
}
/* Press the button into its shadow on hover. */
.button:hover,
.button:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--black);
}
.button:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--black);
}

.button--primary {
  background-color: var(--orange);
  color: var(--cream);
}
.button--primary:hover,
.button--primary:focus-visible { background-color: var(--orange); }

.button--ghost {
  background-color: var(--cream);
  color: var(--charcoal);
}
.button--ghost:hover,
.button--ghost:focus-visible {
  background-color: var(--orange);
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   6. Home hero: stacked kicker / wordmark / sub-line showpiece
   -------------------------------------------------------------------------- */
.hero {
  padding-top: var(--space-5);
  padding-bottom: var(--space-4);
  text-align: center;
  overflow: hidden;            /* keep the oversized wordmark from adding scroll */
}

.hero__eyebrow {
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 1rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Stacked composition: kicker / wordmark / sub-line, all centred. */
.showpiece {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: var(--space-3) auto var(--space-2);
}

/* Wordmark: "Hoos" + connective "on" + "Aux", flanked by orange star bursts. */
.showpiece__main {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 0.3em;
  line-height: 0.85;
  text-transform: uppercase;
}
/* Stars flanking the wordmark: real flex siblings so they never fuse into the
   letterforms at any viewport width. align-self: center floats them mid-height
   between the words, overriding the parent's baseline alignment. */
.showpiece__star {
  --star-size: clamp(1.6rem, 3.5vw, 2.8rem);
  display: inline-block;
  flex-shrink: 0;
  align-self: center;
  width: var(--star-size);
  height: var(--star-size);
  background: var(--orange);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                     50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  margin-inline: 0.2em;
}
.showpiece__star:first-child { transform: rotate(-12deg); }
.showpiece__star:last-child  { transform: rotate(14deg); }

/* "HOOS": orange fill with a hard charcoal echo behind it for a dimensional outline. */
.word--script {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 14vw, 12rem);
  letter-spacing: 0.005em;
  color: var(--orange);
  text-shadow: 6px 6px 0 var(--charcoal);
}
.word--on {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  color: var(--gray);
}
/* "AUX": open lettering, cream fill, black stroke, orange echo. */
.word--stamp {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 11vw, 9.5rem);
  letter-spacing: 0.005em;
  color: var(--cream);
  -webkit-text-stroke: 3px var(--black);
  text-shadow: 7px 7px 0 var(--orange);
}

/* Uppercase tracked kicker lines framing the wordmark, top and bottom. */
.showpiece__top,
.showpiece__bottom {
  font-family: var(--font-script);
  font-weight: var(--weight-label);
  font-size: clamp(0.85rem, 1.8vw, 1.1rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clay);
  pointer-events: none;
}
.showpiece__top {
  color: var(--terracotta);
}

.hero__lede {
  max-width: 72ch;
  margin: 0 auto var(--space-3);
  font-size: 1.25rem;
  color: var(--ink-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

/* Let the hero span the full viewport, breaking out of the shared 1200px cap. */
.hero .container {
  max-width: none;
  padding-inline: clamp(2rem, 8vw, 8rem);
}

/* --------------------------------------------------------------------------
   7a. Poster ticker: full-bleed scrolling marquee
   Two identical halves in the track; -50% scroll loops seamlessly.
   -------------------------------------------------------------------------- */
.marquee {
  margin-block: var(--space-5);
  background: var(--charcoal);
  border-block: var(--border-bold);
  overflow: hidden;
  padding-block: 0.6rem;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 45s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item,
.marquee__star {
  flex: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-inline: 1.1rem;
  color: var(--cream);
}
.marquee__star { color: var(--orange); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   7b. Home "This Week" spotlight feature
   Pulls the latest entry from the SPOTLIGHTS data (see script.js).
   -------------------------------------------------------------------------- */
.now { padding-bottom: var(--space-5); }
.now__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.now__media {
  position: relative;
  display: block;
}
.now__frame {
  display: block;
  aspect-ratio: 1 / 1;
  border: var(--border-bold);
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--black);
  box-shadow: var(--shadow-pop-lg);
  transform: rotate(-2deg);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.now__media:hover .now__frame,
.now__media:focus-visible .now__frame {
  transform: rotate(0deg) translate(-4px, -4px);
  box-shadow: var(--shadow-pop-orange);
}
.now__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.now__frame .media-placeholder { border: 0; height: 100%; }
.now__badge {
  position: absolute;
  top: -0.85rem;
  left: -0.85rem;
  z-index: 2;
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--orange);
  border: var(--border-bold);
  box-shadow: var(--shadow-pop-sm);
  padding: 0.35rem 0.75rem;
  transform: rotate(-4deg);
}
.now__title {
  margin-block: 0.6rem 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.now__meta {
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--orange);
  margin-bottom: 0.9rem;
}
.now__lede {
  max-width: 44ch;
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   7c. Home "Next Up" event feature (charcoal band)
   Mirror of .now (body left, poster right) pulling the soonest upcoming entry
   from the EVENTS data (see script.js). On a charcoal band to separate it from
   the spotlight feature above.
   -------------------------------------------------------------------------- */
.upnext__inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, 0.78fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.upnext__title {
  margin-block: 0.6rem 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.upnext__meta {
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--orange);
  margin-bottom: 0.9rem;
}
.upnext__lede {
  max-width: 46ch;
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
  /* Keep the teaser tight no matter how long the event blurb runs. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.upnext__lede a { color: var(--orange); border-bottom: 2px solid var(--orange); }
.upnext__media {
  position: relative;
  display: block;
  justify-self: center;
  width: 100%;
  max-width: 340px;
}
.upnext__frame {
  display: block;
  width: 100%;
  border: var(--border-bold);
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--black);            /* poster sits on its own dark mat */
  box-shadow: var(--shadow-pop-lg);
  transform: rotate(2deg);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.upnext__media:hover .upnext__frame,
.upnext__media:focus-visible .upnext__frame {
  transform: rotate(0deg) translate(-4px, -4px);
  box-shadow: var(--shadow-pop-orange);
}
.upnext__img { width: 100%; height: auto; display: block; }
.upnext__frame .media-placeholder { border: 0; aspect-ratio: 2 / 3; }
.upnext__badge {
  position: absolute;
  top: -0.85rem;
  right: -0.85rem;
  z-index: 2;
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--orange);
  border: var(--border-bold);
  box-shadow: var(--shadow-pop-sm);
  padding: 0.35rem 0.75rem;
  transform: rotate(4deg);
}

/* --------------------------------------------------------------------------
   7e. Home "Latest Read" article feature (taupe band)
   Same two-column layout as .now: image left, body right.
   -------------------------------------------------------------------------- */
.latest-read__inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.latest-read__media {
  position: relative;
  display: block;
  order: 2;
}
.latest-read__frame {
  display: block;
  aspect-ratio: 4 / 3;
  border: var(--border-bold);
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--taupe);
  box-shadow: var(--shadow-pop-lg);
  transform: rotate(-2deg);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.latest-read__media:hover .latest-read__frame,
.latest-read__media:focus-visible .latest-read__frame {
  transform: rotate(0deg) translate(-4px, -4px);
  box-shadow: var(--shadow-pop-orange);
}
.latest-read__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.latest-read__frame .media-placeholder { border: 0; height: 100%; }
.latest-read__badge {
  position: absolute;
  top: -0.85rem;
  left: -0.85rem;
  z-index: 2;
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--orange);
  border: var(--border-bold);
  box-shadow: var(--shadow-pop-sm);
  padding: 0.35rem 0.75rem;
  transform: rotate(-4deg);
}
.latest-read__title {
  margin-block: 0.6rem 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.latest-read__meta {
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--orange);
  margin-bottom: 0.9rem;
}
.latest-read__lede {
  max-width: 44ch;
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7f. Home "Club Playlist" section
   Body left, Spotify embed right. Closes the page before the footer.
   -------------------------------------------------------------------------- */
.club-playlist__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.club-playlist__title {
  margin-block: 0.6rem 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.club-playlist__lede {
  max-width: 40ch;
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   8. Color-block bands + tape
   Charcoal full-bleed section + washi tape. (Taupe/orange bands, the scrapbook
   index, and the monogram avatar live in parked.css, not currently used.)
   -------------------------------------------------------------------------- */
.section--charcoal {
  position: relative;
  background-color: var(--charcoal);
  color: var(--cream);
  border-block: var(--border-bold);
  background-image:
    radial-gradient(rgba(245, 241, 234, 0.08) 1px, transparent 1.4px),
    radial-gradient(rgba(245, 241, 234, 0.08) 1px, transparent 1.4px);
  background-size: 9px 9px, 9px 9px;
  background-position: 0 0, 4.5px 4.5px;
  background-attachment: fixed;
}
.section--charcoal > * { position: relative; }
.section--charcoal :is(.section-heading, .section__title) { color: var(--cream); }
.section--charcoal .section__intro { color: rgba(245, 241, 234, 0.72); }

/* Washi tape: translucent strip for pinning posters / cards (decorative). */
.tape {
  position: absolute;
  width: 86px;
  height: 26px;
  background: rgba(245, 241, 234, 0.5);
  border: 1px solid rgba(23, 23, 23, 0.16);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  z-index: 3;
}

/* --------------------------------------------------------------------------
   10. Card grid + card: Events, Spotlights, Articles, Content
   Flat on paper: hairline frame, rounded media, no shadow.
   -------------------------------------------------------------------------- */
.card-grid {
  --card-min: 280px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--space-3);
}
.card-grid--people {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* Mobile: keep two cards per row so card-driven pages stay scannable. */
@media (max-width: 600px) {
  .card-grid,
  .card-grid--people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  /* Scale card internals down so two-up cards stay legible, not crammed. */
  .card-grid .card__body { padding: 0.85rem 0.9rem 1rem; }
  .card-grid .card__title { font-size: 1.2rem; margin-bottom: 0.45rem; }
  .card-grid .card__meta {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.4rem;
    margin-bottom: 0.55rem;
  }
  .card-grid .card__text { font-size: 0.82rem; margin-bottom: 0.8rem; }
  .card-grid .card__link { font-size: 0.78rem; }
  .card-grid .card__readmore { font-size: 0.66rem; letter-spacing: 0.1em; }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: var(--border-bold);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.card:hover,
.card:focus-within {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-pop-lg);
}
.card .media-placeholder { border: 0; border-bottom: var(--border-bold); }

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem 1.35rem 1.4rem;
}
.card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.65rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 0.55rem;
}
/* Meta styled as a ticket stub. */
.card__meta {
  align-self: flex-start;
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--charcoal);
  border-radius: 2px;
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.7rem;
}
.card__text { color: var(--charcoal); margin-bottom: 1rem; }
.card__link {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
  border-bottom: 3px solid var(--orange);
  padding-bottom: 1px;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.card__link:hover,
.card__link:focus-visible { color: var(--cream); background: var(--orange); }

/* --------------------------------------------------------------------------
   11. People (exec) card: portrait + name + role + bio
   -------------------------------------------------------------------------- */
.card--person { text-align: center; }
.card--person .card__meta { margin-bottom: 0.5rem; }

/* Real-photo member card. As a <button>, it opens the bio modal; reset the
   native button chrome so it reads as a card, not a control. */
button.card--member {
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.card--member .card__photo {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--taupe);
  border-bottom: var(--border-bold);
}
.card--member .card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms var(--ease);
}
.card--member:hover .card__photo img,
.card--member:focus-visible .card__photo img { transform: scale(1.04); }
.card--member .card__body { align-items: center; }
.card__readmore {
  margin-top: 0.55rem;
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  transition: color 160ms var(--ease);
}
/* Committee cards have no bio yet: neutral cursor, no interactive cues. */
.card--member-static { cursor: default; }
.card--member-static:hover,
.card--member-static:focus-within { transform: none; box-shadow: var(--shadow-pop); }
.card--member-static:hover .card__photo img { transform: none; }

/* --------------------------------------------------------------------------
   11b. Member bio modal: bio + song rec (about.html)
   Reuses the poster modal language: charcoal sheet, orange top rule, hard
   frame. Left column is the portrait; right column is the liner notes.
   -------------------------------------------------------------------------- */
.team-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
}
.team-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 23, 0.88);
  opacity: 0;
  transition: opacity 320ms ease;
  cursor: pointer;
}
.team-modal.is-open .team-modal__overlay { opacity: 1; }

.team-modal__sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 96dvh;
  background: var(--cream);
  color: var(--charcoal);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  border-top: 5px solid var(--orange);
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1);
}
.team-modal.is-open .team-modal__sheet { transform: translateY(0); }


@media (min-width: 768px) {
  .team-modal { align-items: center; justify-content: center; padding: var(--space-4); }
  .team-modal__sheet {
    width: 100%;
    max-width: 880px;
    max-height: 88vh;
    border: var(--border-bold);
    border-top: 5px solid var(--orange);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-pop-lg);
    transform: translateY(28px);
    opacity: 0;
    transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), opacity 300ms ease;
  }
  .team-modal.is-open .team-modal__sheet { transform: translateY(0); opacity: 1; }
}

.team-modal__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-panel);
  background: var(--charcoal);
  border: var(--border-bold);
  box-shadow: var(--shadow-pop-sm);
  color: var(--cream);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.team-modal__close:hover,
.team-modal__close:focus-visible {
  background: var(--orange);
  color: var(--cream);
  transform: translate(1px, 1px);
}

.team-modal__body { display: grid; transition: opacity 240ms ease; }
@media (min-width: 768px) {
  .team-modal__body { grid-template-columns: 0.85fr 1fr; min-height: 480px; }
}

/* Loading gate: covers the sheet until the photo + Spotify embed are ready,
   so nothing flickers in. Mirrors the spotlights modal. */
.team-modal__loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background-color: var(--cream);
  background-image: radial-gradient(rgba(42, 39, 36, 0.07) 1px, transparent 1.4px);
  background-size: 9px 9px;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.team-modal__loader-label {
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: var(--cream);
  border: var(--border-bold);
  border-radius: 3px;
  box-shadow: var(--shadow-pop-sm);
  padding: 0.32rem 0.8rem;
  transform: rotate(-2deg);
}
.team-modal.is-loading .team-modal__body { opacity: 0; }
.team-modal.is-loading .team-modal__loader { opacity: 1; }
.team-modal.is-loading .team-modal__sheet { min-height: min(58vh, 520px); }

.team-modal__photo {
  background-color: var(--taupe);
  background-image: radial-gradient(rgba(42, 39, 36, 0.1) 1px, transparent 1.4px);
  background-size: 11px 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  min-height: 0;
}
.team-modal__photo img {
  width: auto;
  max-width: 100%;
  max-height: 44vh;
  height: auto;
  object-fit: contain;
  display: block;
  border: var(--border-bold);
  border-radius: var(--radius-img);
  box-shadow: var(--shadow-pop);
}
@media (min-width: 768px) {
  .team-modal__photo {
    background: var(--black);
    background-image: none;
    padding: 0;
    align-items: stretch;
    min-height: 280px;
  }
  .team-modal__photo img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center top;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Info side = liner notes. */
.team-modal__info {
  position: relative;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .team-modal__info { padding: var(--space-4) var(--space-3); overflow-y: auto; }
}

.team-modal__role {
  align-self: flex-start;
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--orange);
  border: var(--border-bold);
  border-radius: 3px;
  box-shadow: var(--shadow-pop-sm);
  padding: 0.3rem 0.7rem;
  transform: rotate(-2deg);
}
.team-modal__name {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--charcoal);
}

.team-modal__meta {
  display: grid;
  gap: 0.4rem;
  margin: 0.3rem 0;
  padding: var(--space-2) 0;
  border-top: 1px solid rgba(42, 39, 36, 0.16);
  border-bottom: 1px solid rgba(42, 39, 36, 0.16);
}
.team-modal__meta-row { display: flex; gap: 0.75rem; align-items: baseline; }
.team-modal__meta-row dt {
  flex-shrink: 0;
  width: 5.5rem;
  font-family: var(--font-stamp);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
.team-modal__meta-row dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--charcoal);
}

.team-modal__about p {
  color: var(--charcoal);
  line-height: 1.55;
}
.team-modal__about p + p { margin-top: 0.7rem; }

.team-modal__song {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  background: var(--taupe);
  border: var(--border-bold);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-pop-sm);
}
.team-modal__song .vinyl-icon { width: 28px; height: 28px; }
.team-modal__song-text { display: flex; flex-direction: column; line-height: 1.2; }
.team-modal__song-label {
  font-family: var(--font-stamp);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}
.team-modal__song-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  color: var(--charcoal);
}
.team-modal__song-artist {
  font-size: 0.85rem;
  color: var(--orange);
}

/* Listen block sits at the bottom of the liner notes: Spotify embed when we
   have a link, the designed song card (above) as the fallback. */
.team-modal__listen { margin-top: auto; }
.team-modal__song { margin-top: 0; }
.team-modal__embed-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.team-modal__embed-label {
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
}
.team-modal__embed-wrap iframe { border-radius: var(--radius-panel); display: block; }

/* --------------------------------------------------------------------------
   12. Media placeholder: where a photo / graphic / embed lands later
   -------------------------------------------------------------------------- */
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  padding: 1rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, var(--cream) 0 16px, var(--taupe) 16px 32px);
  color: var(--charcoal);
  border: 2.5px dashed var(--black);
  border-radius: var(--radius-img);
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   13. About page
   Mission intro → "What We Do" setlist → Founders letter (charcoal) →
   Meet the Team → join CTA (orange).
   -------------------------------------------------------------------------- */

/* --- 13a. Opening block: mission statement + "What We Do" setlist, one
   charcoal band. Heading column + body column up top, setlist below a rule. --- */
.about-intro { overflow: hidden; }
.about-intro__inner { position: relative; }

/* --- Oversized full-bleed poster title --- */
.about-intro__head { position: relative; }
.about-intro__eyebrow { position: relative; z-index: 2; }
.about-intro__star {
  --star-size: clamp(1.6rem, 4vw, 2.9rem);
  position: absolute;
  top: -0.35rem;
  left: clamp(8.5rem, 22vw, 15rem);
  transform: rotate(-14deg);
  z-index: 1;
}
/* Headline: three Anton words at two scales (MUSIC / LISTENING large, a gray
   "beyond just" pivot smaller). Wraps to stack on narrow screens. */
.about-intro__title {
  margin: clamp(0.9rem, 2vw, 1.4rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(0.45rem, 1.3vw, 1.1rem);
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 7.5vw, 4.6rem);
  letter-spacing: 0.004em;
  line-height: 0.84;
  text-transform: uppercase;
  color: var(--charcoal);
}
.about-intro__conn { white-space: nowrap; }

/* --- Mission statement: orange accent rail + label, copy flows unframed.
   Lead paragraph anchors in charcoal; the rest drops to muted gray. --- */
.about-intro__ticket {
  position: relative;
  margin-top: clamp(1.5rem, 3.5vw, 2.75rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.1rem, 3vw, 2.5rem);
  align-items: start;
  max-width: 64ch;
}
/* Vertical accent rail: star over a full-height orange bar */
.about-intro__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
}
.about-intro__rail-star {
  --star-size: 1.6rem;
  flex: none;
  transform: rotate(-12deg);
}
.about-intro__rail-bar {
  flex: 1;
  width: 5px;
  min-height: 5rem;
  background: var(--orange);
  border-radius: 3px;
}
.about-intro__stub {
  display: inline-block;
  margin-bottom: 1.3rem;
  padding: 0.45rem 0.85rem;
  background: var(--orange);
  color: var(--cream);
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-bold);
  border-radius: 3px;
  box-shadow: var(--shadow-pop-sm);
  transform: rotate(-2deg);
}
.about-intro__lead {
  margin-bottom: 1.1rem;
  font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.45;
  color: var(--charcoal);
}
.about-intro__word { color: var(--orange); font-weight: 700; }
.about-intro__copy > p:not(.about-intro__lead) {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.7;
  color: var(--ink-soft);
}
/* Mobile: rail lies flat above the copy as a horizontal accent */
@media (max-width: 600px) {
  .about-intro__ticket { grid-template-columns: 1fr; gap: 1.1rem; }
  .about-intro__rail { flex-direction: row; }
  .about-intro__rail-bar { flex: 1; width: auto; height: 5px; min-height: 0; }
}

/* --- 13b. "What We Do" setlist sub-block within the opening section --- */
.what-we-do {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-bold);
}
.what-we-do__title {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--charcoal);
}

/* setlist items: cream poster cards that press on hover */
.setlist {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  counter-reset: none;
}
@media (min-width: 600px) {
  .setlist { grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
}
.setlist__item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--cream);
  border: var(--border-bold);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-pop-sm);
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease),
              background-color 160ms var(--ease);
}
.setlist__item:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-pop);
  background: var(--paper);
}
.setlist__num {
  flex-shrink: 0;
  min-width: 2.2ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--orange);
  -webkit-text-stroke: 0.6px var(--black);
  paint-order: stroke fill;
}
.setlist__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.setlist__item--more {
  background: var(--orange);
  border-color: var(--black);
}
.setlist__item--more .setlist__name { color: var(--cream); }
.setlist__item--more .setlist__num { color: var(--cream); }
.setlist__item--more:hover { background: var(--orange); }

/* --- 13c. Founders letter (charcoal band) --- */
.founders__inner {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 880px) {
  .founders__inner {
    grid-template-columns: 1fr 1.8fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}
.founders__photo {
  position: relative;
  margin: 0;
  align-self: center;
}
@media (min-width: 880px) {
  .founders__body p {
    max-width: none;
  }
}
.founders__photo img {
  width: 100%;
  border: var(--border-bold);
  border-radius: var(--radius-img);
  box-shadow: var(--shadow-pop-lg);
}
.founders__cap {
  margin-top: 0.9rem;
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
}
.founders__tape { width: 96px; height: 28px; }
.founders__tape--a { top: -12px; left: 18px; transform: rotate(-7deg); }
.founders__tape--b { top: -12px; right: 18px; transform: rotate(6deg); }

.founders__letter p {
  margin-bottom: 1rem;
  max-width: 64ch;
}
.founders__hi {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--orange) !important;
}
.founders__sign {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-bold);
}
.founders__sign-names {
  font-family: var(--font-stamp);
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black);
}
.founders__sign-class {
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

/* --------------------------------------------------------------------------
   14. Get Involved: join steps, contact, merch
   -------------------------------------------------------------------------- */
/* Dial the page title back from the full poster-headline size; this page
   leads with content, not a giant wordmark. */
.gi-join__title { font-size: clamp(2.1rem, 4.5vw, 3rem); }

/* Shared smaller section sub-headers (Anton, but quieter than .section__title) */
.gi-subhead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin: 0 0 1.1rem;
}

/* One unified poster panel: the numbered steps and the "hit us up" channels
   live inside a single bold frame, split by a divider, so they read as one
   integrated module instead of two floating cards. */
.gi-join__grid {
  display: grid;
  gap: var(--space-3);
  align-items: stretch;
  background: var(--cream);
  border: var(--border-bold);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-pop);
  padding: var(--space-3);
}
@media (min-width: 860px) {
  .gi-join__grid { grid-template-columns: 1.55fr 1fr; gap: var(--space-4); padding: var(--space-4); }
}

/* --- How to join: numbered poster steps --- */
.join-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.join-steps li {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--cream);
  border: var(--border-bold);
  border-radius: var(--radius-panel);
  padding: 1.1rem 1.25rem;
}
.join-steps__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--cream);
  background: var(--charcoal);
  border: var(--border-bold);
  border-radius: var(--radius-panel);
}
.join-steps li:nth-child(2) .join-steps__num { background: var(--orange); }
.join-steps__body { min-width: 0; }
.join-steps__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin: 0.1rem 0 0.4rem;
}
.join-steps__body p { color: var(--ink-soft); margin: 0; }
.join-steps__body .button { margin-top: 0.85rem; }
.join-steps__body a:not(.button) {
  font-weight: 700;
  color: var(--orange);
}
.join-steps__body a:not(.button):hover,
.join-steps__body a:not(.button):focus-visible { color: var(--charcoal); }

/* --- Contact: "hit us up" panel, framed channel cards that rhyme with the
   numbered join steps: a colored icon chip + label, press-into-shadow hover. --- */
.reach {
  background: transparent;
  color: var(--charcoal);
  padding: 0;
}
/* Divider between the steps and the contact channels, with breathing room on
   the content so the rule never crowds the text. (Declared after the base
   .reach rule above so its `padding: 0` shorthand can't reset these.) */
@media (max-width: 859px) {
  .reach { border-top: var(--border-bold); padding-top: var(--space-3); margin-top: 0.4rem; }
}
@media (min-width: 860px) {
  .reach { border-left: var(--border-bold); padding-left: var(--space-4); display: flex; flex-direction: column; }
  /* Anchor the email row to the bottom so the channels fill the taller column
     (the steps column outruns it) instead of leaving dead space below. */
  .reach__list { margin-top: auto; }
}
.reach__head { color: var(--charcoal); margin-bottom: 0.8rem; }
.reach__copy { color: var(--ink-soft); margin: 0 0 1.3rem; }
.reach__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }

.reach__link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 0.95rem;
  background: var(--cream);
  border: var(--border-bold);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-pop);
  color: var(--charcoal);
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease);
}
.reach__link:hover,
.reach__link:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: none;
}
.reach__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--cream);
  background: var(--orange);
  border: var(--border-bold);
  border-radius: var(--radius-panel);
}
.reach__link--email .reach__icon { background: var(--charcoal); }
.reach__icon svg { width: 20px; height: 20px; }
.reach__text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.reach__label {
  font-family: var(--font-stamp);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
.reach__handle {
  font-family: var(--font-stamp);
  font-size: 0.96rem;
  color: var(--charcoal);
  overflow-wrap: anywhere;
}
.reach__arrow {
  flex: none;
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: var(--gray);
}

/* Featured Instagram tile: enlarged cream card, sits above the email row */
.reach__ig {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.2rem 1.15rem;
  background: var(--cream);
  border: var(--border-bold);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-pop);
  color: var(--charcoal);
  margin-bottom: 0.9rem;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease);
}
.reach__ig:hover,
.reach__ig:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: none;
}
.reach__ig-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--orange);
  margin-bottom: 0.25rem;
}
.reach__ig-handle {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.2rem);
  font-weight: 400;
  line-height: 1;
  color: var(--charcoal);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.reach__ig-sub {
  font-family: var(--font-stamp);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 0.1rem;
}
.reach__ig-cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0.75rem;
  font-family: var(--font-stamp);
  font-size: 0.75rem;
  font-weight: var(--weight-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--orange);
  border: var(--border-bold);
  border-radius: var(--radius-panel);
  padding: 0.3rem 0.75rem;
  box-shadow: var(--shadow-pop-sm);
}

/* --- Merch --- */
.merch__grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 860px) {
  .merch__grid { grid-template-columns: 1.4fr 1fr; }
}

.merch__shirts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.merch-tile {
  margin: 0;
  background: var(--cream);
  border: var(--border-bold);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease);
}
.merch-tile:hover {
  transform: translate(3px, 3px);
  box-shadow: var(--shadow-pop-sm);
}
.merch-tile__img { display: block; width: 100%; height: auto; }
.merch-tile__cap {
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-align: center;
  padding: 0.55rem;
  border-top: var(--border-bold);
}

.merch-details {
  background: var(--cream);
  color: var(--charcoal);
  border: var(--border-bold);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-pop);
  padding: 1.6rem 1.5rem;
}
.merch-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  line-height: 1;
}
.merch-price__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 3.6rem);
  color: var(--orange);
}
.merch-price__unit {
  font-family: var(--font-stamp);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}
.merch-pay {
  font-family: var(--font-stamp);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--gray);
  margin: 0.4rem 0 1.2rem;
}
.merch-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  border-top: 2px solid rgba(23, 23, 23, 0.18);
}
.merch-specs li {
  display: flex;
  gap: 0.9rem;
  padding: 0.6rem 0;
  border-bottom: 2px solid rgba(23, 23, 23, 0.18);
  color: var(--charcoal);
}
.merch-specs__k {
  flex: none;
  width: 5rem;
  font-family: var(--font-stamp);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  padding-top: 0.15rem;
}
.merch-order__head {
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin: 0 0 0.4rem;
}
.merch-order p { color: var(--ink-soft); margin: 0 0 0.9rem; }

/* --------------------------------------------------------------------------
   15. Palette swatches: brand signature row (footer + Home)
   -------------------------------------------------------------------------- */
.palette {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.swatch {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-swatch);
  transition: transform 200ms var(--ease);
}
.swatch:hover { transform: translateY(-3px); }
.swatch--cream     { background: var(--cream);    border: 1px solid var(--black); }
.swatch--charcoal  { background: var(--charcoal); }
.swatch--orange    { background: var(--orange); }
.swatch--taupe     { background: var(--taupe);    border: 1px solid var(--black); }
.swatch--gray      { background: var(--gray); }
.swatch--black     { background: var(--black); }

/* --------------------------------------------------------------------------
   16. Footer: quiet close on the same paper
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: var(--border-bold);
  padding-block: var(--space-5);
  text-align: center;
}
.site-footer__brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.site-footer__tagline {
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin-bottom: var(--space-3);
  list-style: none;
  padding: 0;
}
.site-footer__social a {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
  padding-bottom: 1px;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.site-footer__legal {
  margin-top: var(--space-3);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   17. Page-load reveal: one orchestrated fade-up on the Home hero
   -------------------------------------------------------------------------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.reveal { opacity: 0; animation: fade-up 650ms var(--ease) forwards; }
.reveal--1 { animation-delay: 0.05s; }
.reveal--2 { animation-delay: 0.18s; }
.reveal--3 { animation-delay: 0.31s; }
.reveal--4 { animation-delay: 0.44s; }
.reveal--5 { animation-delay: 0.57s; }

/* --------------------------------------------------------------------------
   18. Music Spotlights: archive rows + spotlight modal
   -------------------------------------------------------------------------- */

/* Featured "This Week" pick: cover + live Spotify embed */
.feature-pick {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
  margin-top: var(--space-3);
}
.feature-pick__loading {
  color: var(--ink-soft);
  font-style: italic;
}
.feature-pick__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.feature-pick__frame {
  display: block;
  aspect-ratio: 1 / 1;
  border: var(--border-bold);
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--taupe);
  box-shadow: var(--shadow-pop-lg);
  transform: rotate(-2deg);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.feature-pick__media:hover .feature-pick__frame,
.feature-pick__media:focus-visible .feature-pick__frame {
  transform: rotate(0deg) translate(-4px, -4px);
  box-shadow: var(--shadow-pop-orange);
}
.feature-pick__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature-pick__badge {
  position: absolute;
  top: -0.85rem;
  left: -0.85rem;
  z-index: 2;
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--orange);
  border: var(--border-bold);
  box-shadow: var(--shadow-pop-sm);
  padding: 0.35rem 0.75rem;
  transform: rotate(-4deg);
}
.feature-pick__body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.feature-pick__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.feature-pick__meta {
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--orange);
}
.feature-pick__embed { margin-block: 0.3rem; }
.feature-pick__embed iframe { display: block; border-radius: var(--radius-panel); }
.feature-pick .button { align-self: flex-start; }
@media (max-width: 640px) {
  .feature-pick { grid-template-columns: 1fr; }
  .feature-pick__media { max-width: 320px; }
  .feature-pick__frame { transform: rotate(-1.5deg); }
}

/* Archive list: clickable rows */
.archive-list {
  border: var(--border-bold);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-pop);
  background: var(--cream);
  overflow: hidden;
}

.archive-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  padding: 1rem 1.35rem;
  background: none;
  border: none;
  border-bottom: var(--border-bold);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.archive-row:last-child { border-bottom: none; }
.archive-row:hover,
.archive-row:focus-visible { background-color: var(--orange); }
/* On the orange wash, everything flips to cream for contrast. */
.archive-row:hover :is(.archive-entry__date, .archive-entry__title, .archive-entry__type),
.archive-row:focus-visible :is(.archive-entry__date, .archive-entry__title, .archive-entry__type) {
  color: var(--cream);
}

.archive-entry__thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: var(--border-bold);
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--taupe);
}
.archive-entry__thumb img { width: 100%; height: 100%; object-fit: cover; }

.archive-entry__date {
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 7rem;
}
.archive-entry__title {
  flex: 1;
  font-weight: var(--weight-heading);
  font-size: 1.05rem;
  color: var(--espresso);
  line-height: 1.3;
}
.archive-entry__type {
  font-family: var(--font-stamp);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  flex-shrink: 0;
}
.archive-row__arrow {
  width: 1rem;
  height: 1rem;
  color: var(--clay);
  flex-shrink: 0;
  transition: transform 180ms var(--ease);
}
.archive-row:hover .archive-row__arrow,
.archive-row:focus-visible .archive-row__arrow { transform: translateX(3px); }

/* Spotlight modal */
.spotlight-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
}
.spotlight-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 23, 0.88);
  opacity: 0;
  transition: opacity 320ms ease;
  cursor: pointer;
}
.spotlight-modal.is-open .spotlight-modal__overlay { opacity: 1; }

.spotlight-modal__sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 96dvh;
  background: var(--cream);
  color: var(--charcoal);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  border-top: 5px solid var(--orange);
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1);
}
.spotlight-modal.is-open .spotlight-modal__sheet { transform: translateY(0); }

@media (min-width: 768px) {
  .spotlight-modal { align-items: center; justify-content: center; padding: var(--space-4); }
  .spotlight-modal__sheet {
    width: 100%;
    max-width: 860px;
    max-height: 88vh;
    border: var(--border-bold);
    border-top: 5px solid var(--orange);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-pop-lg);
    transform: translateY(28px);
    opacity: 0;
    transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), opacity 300ms ease;
  }
  .spotlight-modal.is-open .spotlight-modal__sheet { transform: translateY(0); opacity: 1; }
}

.spotlight-modal__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-panel);
  background: var(--charcoal);
  border: var(--border-bold);
  box-shadow: var(--shadow-pop-sm);
  color: var(--cream);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.spotlight-modal__close:hover,
.spotlight-modal__close:focus-visible {
  background: var(--orange);
  color: var(--cream);
  transform: translate(1px, 1px);
}

.spotlight-modal__body {
  display: grid;
  transition: opacity 240ms ease;
}
@media (min-width: 768px) {
  .spotlight-modal__body { grid-template-columns: 1.05fr 1fr; min-height: 480px; }
}

/* Loading gate: covers the sheet until images + embed are ready, so nothing
   flickers in. Sits below the close button (z-index 2) so it stays dismissable. */
.spotlight-modal__loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background-color: var(--cream);
  background-image: radial-gradient(rgba(42, 39, 36, 0.07) 1px, transparent 1.4px);
  background-size: 9px 9px;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.spotlight-modal__loader-label {
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: var(--cream);
  border: var(--border-bold);
  border-radius: 3px;
  box-shadow: var(--shadow-pop-sm);
  padding: 0.32rem 0.8rem;
  transform: rotate(-2deg);
}
.spotlight-modal.is-loading .spotlight-modal__body { opacity: 0; }
.spotlight-modal.is-loading .spotlight-modal__loader { opacity: 1; }
.spotlight-modal.is-loading .spotlight-modal__sheet { min-height: min(58vh, 520px); }

/* Equalizer bars shown while assets load. */
.loader-eq {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 64px;
}
.loader-eq span {
  width: 13px;
  height: 30%;
  border: var(--border-bold);
  border-radius: 1px;
  background: var(--orange);
  animation: loader-eq 900ms ease-in-out infinite;
}
.loader-eq span:nth-child(2) { background: var(--charcoal); animation-delay: 180ms; }
.loader-eq span:nth-child(3) { background: var(--orange);   animation-delay: 360ms; }
.loader-eq span:nth-child(4) { background: var(--charcoal); animation-delay: 120ms; }
.loader-eq span:nth-child(5) { background: var(--orange);   animation-delay: 300ms; }
@keyframes loader-eq {
  0%, 100% { height: 26%; }
  50%      { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-eq span { animation: none; height: 64%; }
}

/* Image side: poster on a halftone-screened panel. */
.spotlight-modal__images {
  position: relative;
  background-color: var(--taupe);
  background-image: radial-gradient(rgba(42, 39, 36, 0.1) 1px, transparent 1.4px);
  background-size: 11px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3) var(--space-3);
}
@media (min-width: 768px) {
  .spotlight-modal__images {
    border-right: var(--border-bold);
    padding: var(--space-4) var(--space-3);
  }
}

/* "Now Playing" ticket stamp, pinned to the top. */
.spotlight-modal__now-playing {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: rgba(42, 39, 36, 0.06);
  border: 1px solid rgba(42, 39, 36, 0.2);
  border-radius: var(--radius-pill);
  padding: 0.32rem 0.75rem 0.32rem 0.5rem;
}

/* Wraps the visible poster so the frame fits the image. */
.spotlight-modal__stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}
/* Grid stack: every image shares one cell, so they can slide over each other
   without reflow. Hidden images drop out of the grid, so the cell sizes to the
   visible poster. overflow is toggled to hidden by JS only while sliding. */
#modal-frame {
  display: grid;
  justify-items: center;
  align-items: center;
}
.spotlight-modal__img {
  grid-area: 1 / 1;
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 50vh;
  object-fit: contain;
  border: var(--border-bold);
  border-radius: var(--radius-img);
  box-shadow: var(--shadow-pop);
  transform: translateX(0);
  transition: transform 440ms cubic-bezier(0.22, 0.61, 0.18, 1);
  will-change: transform;
}
@media (min-width: 768px) {
  .spotlight-modal__img { max-height: 60vh; }
}

.spotlight-modal__img-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.spotlight-modal__arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--cream);
  border: var(--border-bold);
  box-shadow: var(--shadow-pop-sm);
  color: var(--charcoal);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.spotlight-modal__arrow svg { width: 16px; height: 16px; }
.spotlight-modal__arrow:hover,
.spotlight-modal__arrow:focus-visible {
  background: var(--orange);
  color: var(--cream);
  transform: translate(1px, 1px);
}
.spotlight-modal__img-count {
  font-family: var(--font-stamp);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  min-width: 2.8rem;
  text-align: center;
}

/* Info side = liner notes, vertically centered against the poster. */
.spotlight-modal__info {
  position: relative;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .spotlight-modal__info { overflow-y: auto; }
}

/* Rotated orange sticker badge: "{Type} of the Week". */
.spotlight-modal__badge {
  align-self: flex-start;
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--orange);
  border: var(--border-bold);
  border-radius: 3px;
  box-shadow: var(--shadow-pop-sm);
  padding: 0.3rem 0.7rem;
  transform: rotate(-2deg);
}

/* CSS vinyl record: concentric rings, spinning. */
.vinyl-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle,
    var(--black) 0 14%,
    var(--orange) 14% 28%,
    var(--black) 28% 44%,
    var(--charcoal) 44% 60%,
    var(--black) 60% 78%,
    var(--orange) 78% 88%,
    var(--black) 88%
  );
  animation: vinyl-spin 3s linear infinite;
}
@keyframes vinyl-spin { to { transform: rotate(360deg); } }

.spotlight-modal__title {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  line-height: 0.96;
  letter-spacing: 0.01em;
  color: var(--charcoal);
}

.spotlight-modal__meta {
  display: grid;
  gap: 0.45rem;
  margin: 0.5rem 0 0;
  padding: var(--space-2) 0;
  border-top: 1px solid rgba(42, 39, 36, 0.16);
  border-bottom: 1px solid rgba(42, 39, 36, 0.16);
}
.spotlight-modal__meta-row { display: flex; gap: 0.75rem; align-items: baseline; }
.spotlight-modal__meta-row dt {
  flex-shrink: 0;
  width: 7rem;
  font-family: var(--font-stamp);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
.spotlight-modal__meta-row dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--charcoal);
}

.spotlight-modal__embed-wrap {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.spotlight-modal__embed-label {
  font-family: var(--font-stamp);
  font-weight: var(--weight-label);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
}
.spotlight-modal__embed-wrap iframe { border-radius: var(--radius-panel); display: block; }

/* Fallback shown when there's no Spotify embed. */
.spotlight-modal__no-embed {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  background: var(--taupe);
  border: var(--border-bold);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-pop-sm);
}
.spotlight-modal__no-embed .vinyl-icon { width: 26px; height: 26px; }
.spotlight-modal__no-embed-text { display: flex; flex-direction: column; line-height: 1.25; }
.spotlight-modal__no-embed-label {
  font-family: var(--font-stamp);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}
.spotlight-modal__no-embed-title {
  font-family: var(--font-stamp);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--charcoal);
}

/* --------------------------------------------------------------------------
   19. Event cards: portrait poster + meta (detail lives on event.html)
   -------------------------------------------------------------------------- */

/* Event cards link to the detail page; poster scales on hover. */
.card--event {
  cursor: pointer;
  user-select: none;
}
.card--event:hover,
.card--event:focus-within {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-pop-orange);
}

/* Portrait poster wrap. */
.card__cover {
  flex-shrink: 0;
  overflow: hidden;
  border-bottom: var(--border-bold);
  background: var(--charcoal);
}
.card__cover .media-placeholder {
  aspect-ratio: 2 / 3;
  border: 0;
}
.card__poster {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 350ms var(--ease);
}
.card--event:hover .card__poster {
  transform: scale(1.04);
}

/* Upcoming events: full-bleed horizontal feature card */
.card--event-upcoming {
  flex-direction: row;
  grid-column: 1 / -1;
  max-width: 900px;
  align-self: flex-start;
}

.card--event-upcoming .card__cover {
  flex: 0 0 300px;
  width: 300px;
  border-bottom: 0;
  border-right: var(--border-bold);
  overflow: hidden;
  background: var(--charcoal);
}

.card--event-upcoming .card__poster {
  display: block;
  width: 100%;
  height: auto;
}

.card--event-upcoming .card__info {
  flex: 1;
  padding: var(--space-4) clamp(var(--space-3), 4vw, var(--space-5));
  justify-content: center;
  min-height: 360px;
}

.card--event-upcoming .card__title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  margin-bottom: 0.5rem;
}

.card--event-upcoming .card__text {
  margin-top: var(--space-2);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 54ch;
  color: var(--charcoal);
}

/* Info panel below the poster. */
.card__info {
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Semester group heading in the past-events archive. */
.events-group__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--charcoal);
  margin: var(--space-4) 0 var(--space-3);
  padding-bottom: 0.4rem;
  border-bottom: var(--border-bold);
}
.events-group__title:first-child { margin-top: 0; }

/* Friendly empty state when nothing is on the calendar. */
.events-empty {
  grid-column: 1 / -1;
  font-family: var(--font-stamp);
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  padding: var(--space-2) 0;
}
.events-empty a { color: var(--orange); border-bottom: 2px solid var(--orange); padding-bottom: 1px; }

/* Poster-only event (no recap): not clickable, no expand affordance. */
.card--event-static { cursor: default; }
.card--event-static:hover,
.card--event-static:focus-within {
  transform: none;
  box-shadow: var(--shadow-pop);
}

/* Stack the upcoming feature card vertically on small screens. */
@media (max-width: 640px) {
  .card--event-upcoming {
    flex-direction: column;
    max-width: 100%;
  }
  .card--event-upcoming .card__cover {
    flex: 0 0 auto;
    width: 100%;
    border-right: 0;
    border-bottom: var(--border-bold);
    max-height: 340px;
  }
  .card--event-upcoming .card__info {
    min-height: auto;
  }
}

/* --------------------------------------------------------------------------
   20. Article viewer: Markdown body + single-article page
   -------------------------------------------------------------------------- */
.card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-bottom: var(--border-bold);
}

/* Article page shell: plain white, no section bands */
.article-page {
  background: #fff;
  padding-block: var(--space-5) var(--space-6);
  min-height: 60vh;
}

.article-wrapper {
  max-width: 860px;
  margin-inline: auto;
}

/* Masthead: sits above the body, max-width narrower than the float column */
.article-header {
  max-width: 640px;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--taupe);
}

.article-kicker {
  font-family: var(--font-stamp);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--orange);
  margin-bottom: 0.5em;
}

.article-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--charcoal);
  margin-bottom: 0.3em;
}

.article-meta {
  font-family: var(--font-stamp);
  font-size: 0.8rem;
  color: var(--gray);
  letter-spacing: 0.04em;
}

/* Back link footer */
.article-back {
  background: #fff;
  padding-block: var(--space-3);
  border-top: 1px solid var(--taupe);
}

.article-body {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  line-height: 1.78;
  color: var(--charcoal);
}
.article-body p { margin-block: 0 1.25em; }
.article-body h1,
.article-body h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.3;
  color: var(--charcoal);
  margin-block: 2.5em 0.7em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid var(--taupe);
  clear: both;
}
.article-body h3 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  margin-block: 1.5em 0.4em;
}
.article-body strong { font-weight: 700; }
.article-body em { font-style: italic; }
/* Q&A: question stacks above the answer with a subtle divider. */
.article-body .qa > strong:first-child {
  display: block;
  margin-bottom: 0.6em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--taupe);
}
.article-body blockquote {
  border-left: 4px solid var(--orange);
  margin-inline: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--taupe);
  font-size: 1.2rem;
  font-style: italic;
  margin-block: var(--space-3);
  border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
}
.article-body figure {
  margin-block: var(--space-3);
}
.article-body figure.figure--float-right {
  float: right !important;
  margin-left: var(--space-3) !important;
  margin-right: 0 !important;
}
.article-body img {
  width: 100%;
  border: 1px solid var(--taupe);
  border-radius: var(--radius-img);
  display: block;
  margin: 0;
}
.article-body figcaption {
  font-family: var(--font-stamp);
  font-size: 0.72rem;
  color: var(--gray);
  letter-spacing: 0.04em;
  padding: 0.35rem 0.1rem 0;
}
.article-body ul,
.article-body ol {
  padding-left: 1.5em;
  margin-block: 0 1.25em;
}
.article-body li { margin-block: 0.25em; }
.article-body a { color: var(--orange); text-decoration-color: var(--orange); }
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-3);
  font-size: 0.95rem;
}
.article-body th,
.article-body td {
  border: 1px solid var(--taupe);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.article-body th {
  background: var(--charcoal);
  color: var(--cream);
  font-family: var(--font-stamp);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.article-iframe {
  width: 100%;
  height: 460px;
  overflow: hidden;
  border: var(--border-bold);
  box-shadow: var(--shadow-pop);
  border-radius: var(--radius-panel);
  margin-block: var(--space-3);
  display: block;
}

.article-body details {
  border: var(--border-bold);
  box-shadow: var(--shadow-pop-sm);
  border-radius: var(--radius-panel);
  margin-block: var(--space-3);
  overflow: hidden;
}

.article-body details summary {
  cursor: pointer;
  padding: 0.6em 1em;
  font-family: var(--font-stamp);
  font-size: 0.8rem;
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--taupe);
  user-select: none;
  list-style: none;
}

.article-body details summary::before {
  content: '▶ ';
  color: var(--orange);
  font-size: 0.7em;
}

.article-body details[open] summary::before {
  content: '▼ ';
}

.article-body details figure {
  margin: 0;
  border: none;
  box-shadow: none;
}

.article-status {
  text-align: center;
  padding: var(--space-6);
  font-family: var(--font-display);
  font-size: 2rem;
  text-transform: uppercase;
  color: var(--gray);
  letter-spacing: 0.04em;
}
.article-status--error { font-size: 1.1rem; font-family: var(--font-sans); text-transform: none; letter-spacing: 0; }

/* Float article photos; alternate sides and clear so short text between
   images can't pinch two floats into a side-by-side canyon. */
.article-body > figure {
  width: 42%;
  margin-bottom: var(--space-2);
  margin-top: 0.2em;
  clear: both;
}
.article-body > figure:nth-of-type(odd) {
  float: right;
  margin-left: var(--space-3);
  margin-right: 0;
}
.article-body > figure:nth-of-type(even) {
  float: left;
  margin-right: var(--space-3);
  margin-left: 0;
}

/* Clear floats at <hr> section breaks (between artist spotlights) */
.article-body hr {
  clear: both;
  border: none;
  border-top: 1px solid var(--taupe);
  margin-block: var(--space-4);
}

/* Clearfix on the article body */
.article-body::after {
  content: '';
  display: table;
  clear: both;
}

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .container, .section__inner { padding-inline: 1.25rem; }
  .site-nav__list { gap: 0.4rem 1.1rem; }
}

@media (max-width: 820px) {
  .section { padding-block: var(--space-5); }

  /* Collapse the primary nav behind the toggle. */
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: var(--border-bold);
    box-shadow: var(--shadow-pop);
    max-height: 0;
    overflow: hidden;
    transition: max-height 280ms var(--ease);
  }
  .site-nav.is-open { max-height: 80vh; }
  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-2) var(--space-3);
  }
  .site-nav__list li { width: 100%; }
  .site-nav__list a {
    display: block;
    width: 100%;
    padding: 0.7rem 0;
    font-size: 1.3rem;
    border-bottom: var(--border-hair);
  }
  .site-nav__list a::after { display: none; }

  .now__inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .now__frame { max-width: 420px; margin-inline: auto; transform: rotate(-1.5deg); }
  .now__body { text-align: center; }
  .now__lede { margin-inline: auto; }

  .upnext__inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .upnext__media { order: -1; }   /* poster leads above the copy on mobile */
  .upnext__frame { transform: rotate(1.5deg); }
  .upnext__body { text-align: center; }
  .upnext__lede { margin-inline: auto; }

  .latest-read__inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .latest-read__media { order: -1; }
  .latest-read__frame { max-width: 420px; margin-inline: auto; transform: rotate(-1.5deg); }
  .latest-read__body { text-align: center; }
  .latest-read__lede { margin-inline: auto; }

  .club-playlist__inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .club-playlist__body { text-align: center; }
  .club-playlist__lede { margin-inline: auto; }

  .marquee__item, .marquee__star { font-size: 1.15rem; }
}

@media (max-width: 560px) {
  .swatch { width: 22px; height: 22px; }

  .archive-row { gap: 0.65rem; padding: 0.85rem 1rem; }
  .archive-entry__type { display: none; }
  .archive-entry__date { min-width: 0; }

  /* Stack floated article images on narrow screens */
  .article-body > figure {
    float: none;
    width: 100%;
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   22. Event detail page  (event.html)
   -------------------------------------------------------------------------- */

/* "View Recap →" hint on event cards */
.card__view-recap {
  display: inline-block;
  margin-top: auto;
  padding-top: var(--space-2);
  font-family: var(--font-stamp);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--orange);
}

/* Hero: charcoal band with poster + info side by side */
.event-detail__hero {
  padding-block: var(--space-5);
}

.event-detail__hero-inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-5);
  align-items: start;
}

.event-detail__poster-wrap {
  border: var(--border-bold);
  box-shadow: var(--shadow-pop-lg);
  overflow: hidden;
  background: var(--black);
  flex-shrink: 0;
}

.event-detail__poster {
  display: block;
  width: 100%;
  height: auto;
}

.event-detail__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-1);
}

.event-detail__eyebrow {
  font-family: var(--font-stamp);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--orange);
}

.event-detail__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 4.8rem);
  text-transform: uppercase;
  line-height: 0.92;
  color: var(--cream);
  text-shadow: 4px 4px 0 var(--black);
}

.event-detail__desc {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(245, 241, 234, 0.8);
  max-width: 52ch;
}

.event-detail__back {
  align-self: flex-start;
}

/* Photo gallery grid */
/* Bold black rule under the "Photos" title, sized to the image grid width
   (the section inner) rather than spanning the full band. */
.event-detail__gallery-rule {
  border: none;
  border-top: var(--border-bold);
  margin: var(--space-3) 0 0;
}

.event-detail__gallery {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.event-detail__gallery-btn {
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.event-detail__gallery-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: var(--border-bold);
  box-shadow: var(--shadow-pop-sm);
  background: var(--charcoal);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}

.event-detail__gallery-btn:hover .event-detail__gallery-img,
.event-detail__gallery-btn:focus-visible .event-detail__gallery-img {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-pop);
}

@media (max-width: 760px) {
  .event-detail__hero-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .event-detail__poster-wrap {
    max-width: 240px;
  }
  .event-detail__info {
    align-items: center;
  }
  .event-detail__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .event-detail__gallery {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   23. Photo lightbox: event-detail full-screen image viewer
   -------------------------------------------------------------------------- */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 23, 0.94);
  opacity: 0;
  transition: opacity 260ms var(--ease);
}

.photo-lightbox.is-open .photo-lightbox__overlay { opacity: 1; }

.photo-lightbox__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3) 60px;
  max-width: 100%;
  width: 100%;
}

.photo-lightbox__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.photo-lightbox__img {
  display: block;
  max-width: min(900px, calc(100vw - 32px));
  max-height: 80vh;
  width: auto;
  height: auto;
  border: var(--border-bold);
  box-shadow: var(--shadow-pop-lg);
  background: var(--charcoal);
  opacity: 0;
  transition: opacity 220ms var(--ease);
}

.photo-lightbox__counter {
  font-family: var(--font-stamp);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--charcoal);
  border: var(--border-bold);
  padding: 4px 12px;
  box-shadow: var(--shadow-pop-sm);
}

.photo-lightbox__close {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  width: 42px;
  height: 42px;
  background: var(--cream);
  border: var(--border-bold);
  box-shadow: var(--shadow-pop-sm);
  color: var(--charcoal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), background 120ms var(--ease);
}

.photo-lightbox__close:hover,
.photo-lightbox__close:focus-visible {
  background: var(--orange);
  color: var(--cream);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-pop);
}

.photo-lightbox__close svg { width: 18px; height: 18px; }

.photo-lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: var(--cream);
  border: var(--border-bold);
  box-shadow: var(--shadow-pop-sm);
  color: var(--charcoal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), background 120ms var(--ease);
  z-index: 3;
}

.photo-lightbox__arrow--prev { left: 8px; }
.photo-lightbox__arrow--next { right: 8px; }

.photo-lightbox__arrow:hover,
.photo-lightbox__arrow:focus-visible {
  background: var(--orange);
  color: var(--cream);
  transform: translateY(calc(-50% - 2px)) translateX(-2px);
  box-shadow: var(--shadow-pop);
}

.photo-lightbox__arrow svg { width: 16px; height: 16px; }

@media (max-width: 480px) {
  .photo-lightbox__img { max-height: 75vh; }
}

/* --------------------------------------------------------------------------
   24. Reduced motion: honour the user's OS preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; }
}