/* ═══════════════════════════════════════════════════════════
   Archivo (variable: wght 400-900, wdth 62-125%)
   Self-hosted - no third-party requests, works offline.
   Copyright 2020 The Archivo Project Authors.
   SIL Open Font License 1.1 - see fonts/OFL.txt
   ═══════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-v25-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-v25-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══════════════════════════════════════════════════════════
   UNFØRGIVEN — Weston-super-Mare
   Voice: a photocopied gig flyer, salt-corroded, acid-printed.
   Palette pulled straight off the Blistered Earth sleeve:
   the band's own logo pack: near-black, bone, and the official red.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* surface — near-black, faintly warmed toward the brand hue */
  --void:      oklch(0.145 0.010 25);
  --void-lift: oklch(0.205 0.012 25);

  /* ink */
  --bone:      oklch(0.955 0.008 60);
  --bone-dim:  oklch(0.745 0.010 40);

  /* signal — the band's official red, #be1622, plus an accessible
     sibling at the same hue for anything small enough to need 4.5:1 */
  --brand:      oklch(0.512 0.197 25.5);   /* 3.1:1 on --void: fills + large text only */
  --brand-lift: oklch(0.655 0.190 25.5);   /* 5.6:1 on --void: safe for small text */
  --brand-deep: oklch(0.185 0.055 25.5);

  --rule: color-mix(in oklab, var(--bone) 16%, transparent);

  /* type */
  --face: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
  --step-3: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --step-4: clamp(2.6rem, 1.6rem + 4vw, 5rem);
  --step-5: clamp(3.2rem, 1.6rem + 6vw, 6rem);

  /* space */
  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --band-y: clamp(4.5rem, 11vh, 10rem);

  /* motion */
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* depth */
  --z-media: 1;
  --z-overlay: 2;
  --z-content: 3;
  --z-masthead: 40;
  --z-grain: 60;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--face);
  font-variation-settings: "wdth" 100;
  font-size: var(--step-0);
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
section[id] { scroll-margin-top: 4.5rem; }
h1, h2, h3, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; }
:focus-visible {
  outline: 3px solid var(--brand-lift);
  outline-offset: 3px;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 999;
  transform: translateY(-160%);
  background: var(--brand); color: var(--void);
  padding: 0.6rem 1rem; font-weight: 700; text-decoration: none;
}
.skip:focus, .skip:focus-visible { transform: none; }

/* ── grain: cheap-print texture over the whole page ───────── */
.grain {
  position: fixed; inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ═══════════════ MASTHEAD ═══════════════ */
.masthead {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-masthead);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--gut);
  border-bottom: 1px solid transparent;
  transition: background 0.45s var(--quart), border-color 0.45s var(--quart);
}
.masthead::before {
  content: ""; position: absolute; inset: -0.5rem 0 -2.5rem;
  z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--void) 78%, transparent), transparent);
}
.masthead.is-stuck {
  background: color-mix(in oklab, var(--void) 92%, transparent);
  border-bottom-color: var(--rule);
}

.masthead__name {
  display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none;
  line-height: 1;
}
.masthead__roundel {
  width: clamp(2rem, 4vw, 2.5rem); height: auto; flex: none;
  transition: transform 0.4s var(--expo);
}
.masthead__name:hover .masthead__roundel { transform: rotate(-8deg) scale(1.06); }

.masthead__nav {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.masthead__nav a {
  text-decoration: none;
  color: var(--bone-dim);
  padding-block: 0.2rem;
  border-bottom: 2px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.masthead__nav a:hover { color: var(--bone); border-bottom-color: var(--brand-lift); }
@media (max-width: 32rem) {
  .masthead__nav { font-size: 0.6875rem; gap: 0.6rem; letter-spacing: 0.07em; }
}

/* ═══════════════ WORDMARK (the band's own logo) ═══════════════ */
.wordmark { display: block; }
.wordmark img { width: 100%; height: auto; }

/* ═══════════════ HERO ═══════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  padding: clamp(6rem, 16vh, 11rem) var(--gut) clamp(3rem, 8vh, 5rem);
  isolation: isolate;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: var(--z-media); overflow: hidden; }
.hero__media img {
  width: 100%; height: 112%;
  object-fit: cover;
  object-position: 50% 35%;
  filter: grayscale(1) contrast(1.2) brightness(0.76);
  will-change: transform;
}
/* dark plate + a wash of sodium light off the promenade */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: var(--z-overlay);
  background:
    radial-gradient(110% 80% at 82% 8%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 60%),
    linear-gradient(to top, var(--void) 3%, color-mix(in oklab, var(--void) 62%, transparent) 44%, color-mix(in oklab, var(--void) 22%, transparent) 100%);
}
.hero__scan {
  position: absolute; inset: 0; z-index: var(--z-overlay);
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.34) 0 1px, transparent 1px 4px);
  opacity: 0.5;
}

.hero__frame {
  position: relative; z-index: var(--z-content);
  grid-row: 2;
  display: grid;
  gap: clamp(1.25rem, 3vh, 2rem);
  max-width: 78rem;
  margin-inline: auto;
  width: 100%;
}

.hero__line {
  font-size: var(--step-2);
  line-height: 1.25;
  font-weight: 500;
  max-width: 26ch;
  text-wrap: balance;
  color: var(--bone);
}

.hero__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__cue {
  position: absolute; z-index: var(--z-content);
  right: var(--gut); bottom: clamp(3rem, 8vh, 5rem);
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--bone-dim);
  writing-mode: vertical-rl;
}
.hero__cue::after {
  content: ""; display: block;
  width: 1px; height: 3.5rem; margin: 0.75rem auto 0;
  background: linear-gradient(var(--brand), transparent);
  animation: drip 2.6s var(--quart) infinite;
  transform-origin: top;
}
@keyframes drip {
  0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
  45% { transform: scaleY(1); opacity: 1; }
}
@media (max-width: 48rem) { .hero__cue { display: none; } }

/* ═══════════════ BUTTONS ═══════════════ */
.btn {
  --btn-ink: var(--bone);
  display: inline-block;
  padding: 0.8rem 1.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-ink);
  border: 2px solid var(--btn-ink);
  background: transparent;
  transition: background 0.3s var(--quart), color 0.3s var(--quart), transform 0.3s var(--expo);
}
.btn:hover { background: var(--bone); color: var(--void); transform: translateY(-2px); }

.btn--loud {
  --btn-ink: var(--brand);
  background: var(--brand);
  color: var(--void);
}
.btn--loud:hover { background: var(--bone); border-color: var(--bone); color: var(--void); }

/* ═══════════════ SHARED HEADINGS ═══════════════ */
.h-display {
  font-size: var(--step-4);
  font-weight: 900;
  font-variation-settings: "wdth" 74;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ═══════════════ BAND ═══════════════ */
.band { padding: var(--band-y) var(--gut); }
.band__inner {
  max-width: 78rem; margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .band__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: start; }
  .band__body { padding-top: 0.6rem; }
}

.band__body { display: grid; gap: 1.5rem; max-width: 62ch; }
.band__body p { text-wrap: pretty; }
.lede { font-size: var(--step-1); line-height: 1.5; }
.band__body > p:not(.lede) { color: var(--bone-dim); }

.blurb {
  margin-top: 0.75rem;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--rule);
}
.blurb p {
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.45;
  color: var(--bone);
  text-indent: -0.4em;
}
.blurb p::before, .blurb p::after { content: "\201C"; color: var(--brand-lift); }
.blurb p::after { content: "\201D"; }
.blurb footer {
  margin-top: 0.9rem;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-lift);
}

/* ═══════════════ LINE-UP ═══════════════ */
.lineup {
  max-width: 78rem;
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.lineup__member {
  padding-top: 1rem;
  border-top: 2px solid var(--brand);
}
.lineup__name {
  font-size: var(--step-2);
  font-weight: 900;
  font-variation-settings: "wdth" 80;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.lineup__role {
  margin-top: 0.3rem;
  font-size: 0.875rem;
  color: var(--bone-dim);
  text-wrap: pretty;
}

/* ═══════════════ PLACE ═══════════════ */
.place { position: relative; isolation: isolate; }
.place__media {
  position: relative;
  height: clamp(24rem, 78svh, 46rem);
  overflow: hidden;
}
.place__media img {
  width: 100%; height: 118%;
  object-fit: cover; object-position: 50% 40%;
  filter: saturate(0.72) contrast(1.1) brightness(0.88);
  will-change: transform;
}
.place__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--void) 2%, color-mix(in oklab, var(--void) 55%, transparent) 40%, transparent 78%);
}

/* ═══════════════ SINGLE — art-directed off the sleeve ═════ */
.single {
  background:
    radial-gradient(80% 60% at 8% -10%, color-mix(in oklab, var(--brand) 13%, transparent), transparent 62%),
    var(--brand-deep);
  border-block: 1px solid color-mix(in oklab, var(--brand) 50%, transparent);
  padding: var(--band-y) var(--gut);
}
.single__inner {
  max-width: 78rem; margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .single__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.sleeve { position: relative; max-width: 30rem; }
.sleeve::before {
  content: ""; position: absolute;
  inset: 0.9rem -0.9rem -0.9rem 0.9rem;
  border: 2px solid var(--brand);
  transition: inset 0.5s var(--expo);
}
.sleeve__link { display: block; position: relative; }
.sleeve__play {
  position: absolute;
  right: 0.9rem; bottom: 0.9rem;
  display: grid; place-content: center;
  width: 3.25rem; height: 3.25rem;
  background: var(--brand);
  color: #fff;
  font-size: 1.1rem;
  padding-left: 0.15em;   /* optical centring of the triangle */
  transition: transform 0.35s var(--expo), background 0.25s;
}
.sleeve__link:hover .sleeve__play { transform: scale(1.12); background: var(--brand-lift); }
.sleeve img {
  position: relative;
  width: 100%; height: auto;
  aspect-ratio: 1;
  box-shadow: 0 2rem 4rem rgba(0,0,0,0.5);
}
.sleeve:hover::before { inset: -0.5rem -0.5rem -0.5rem -0.5rem; }

.single__text { display: grid; gap: 1.1rem; max-width: 46ch; }
.single__kind {
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brand-lift);
}
.single__title {
  font-weight: 900;
  font-variation-settings: "wdth" 74;
  font-size: var(--step-5);
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-wrap: balance;
}
.single__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.6rem; }
.single__text p:not(.single__kind) { color: color-mix(in oklab, var(--bone) 84%, var(--brand)); text-wrap: pretty; }

/* stacked: let the sleeve be the section's image, not a thumbnail
   marooned in half a field of violet */
@media (max-width: 55.99rem) {
  .sleeve { max-width: min(100%, 38rem); }
  .single__text { max-width: 56ch; }
}

/* ═══════════════ LIVE ═══════════════ */
.live { padding: var(--band-y) var(--gut); }
/* an empty gig listing, laid out like a real one */
.live__inner {
  max-width: 78rem; margin-inline: auto;
  display: grid; gap: clamp(1.5rem, 3vw, 2.25rem);
}

.live__state {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px dashed color-mix(in oklab, var(--bone) 26%, transparent);
}
@media (min-width: 56rem) {
  .live__state { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.live__none {
  font-size: var(--step-3);
  font-weight: 900;
  font-variation-settings: "wdth" 76;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 0.92;
  color: var(--brand);
}
.live__note { display: grid; gap: 1.1rem; max-width: 54ch; }
.live__cols { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 60rem) {
  .live__cols { grid-template-columns: minmax(0, 1fr) auto; }
}
.live__note p:not(.live__ask) { color: var(--bone-dim); text-wrap: pretty; }
.live__ask { font-weight: 600; }

/* ═══════════════ GIGS ═══════════════ */
.gigs { display: grid; gap: 0; }
.gig {
  display: grid;
  gap: 0.35rem 1.5rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) 0;
  border-bottom: 1px dashed color-mix(in oklab, var(--bone) 20%, transparent);
}
.gig:first-child { border-top: 1px dashed color-mix(in oklab, var(--bone) 20%, transparent); }
@media (min-width: 44rem) {
  .gig {
    grid-template-columns: minmax(9rem, auto) minmax(0, 1fr) auto;
    align-items: baseline;
  }
}

.gig__when {
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-lift);
  font-variant-numeric: tabular-nums;
}
.gig__where {
  font-size: var(--step-2);
  font-weight: 900;
  font-variation-settings: "wdth" 78;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.gig__tbc {
  display: block;
  margin-top: 0.15rem;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--bone-dim);
  text-transform: none;
}
.gig__meta { color: var(--bone-dim); font-size: 0.9375rem; }
.gig__meta > span + span::before { content: " · "; opacity: 0.6; }

/* a live gig announces itself; a played one steps back */
.gig__flag {
  justify-self: start;
  align-self: center;
  padding: 0.3rem 0.7rem;
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
}
.gig__flag:not(.is-shown) { display: none; }
.gig.is-tonight .gig__flag { animation: pulse 2.4s var(--quart) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.62; } }
.gig.is-past { opacity: 0.5; }
.gig.is-past .gig__flag { background: transparent; color: var(--bone-dim); border: 1px solid color-mix(in oklab, var(--bone) 28%, transparent); }

/* the gig poster */
.poster { margin: 0; max-width: 26rem; }
.poster img {
  width: 100%; height: auto;
  aspect-ratio: 1116 / 1571;
  border: 1px solid color-mix(in oklab, var(--bone) 18%, transparent);
}
.poster figcaption {
  margin-top: 0.7rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* ═══════════════ MERCH ═══════════════
   Same offset red frame as the sleeve, so the two shop-ish blocks on the
   page read as a pair. */
.merch {
  padding: var(--band-y) var(--gut);
  border-top: 1px solid var(--rule);
}
.merch__inner {
  max-width: 78rem; margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .merch__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.garment { position: relative; max-width: 38rem; }
.garment::before {
  content: ""; position: absolute;
  inset: 0.9rem -0.9rem -0.9rem 0.9rem;
  border: 2px solid var(--brand);
  transition: inset 0.5s var(--expo);
}
.garment:hover::before { inset: -0.5rem -0.5rem -0.5rem -0.5rem; }
.garment__link { display: block; position: relative; }
.garment img {
  position: relative;
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
}

.merch__text { display: grid; gap: 1.1rem; max-width: 46ch; }
.merch__kind {
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brand-lift);
}
.merch__title {
  font-weight: 900;
  font-variation-settings: "wdth" 74;
  font-size: var(--step-4);
  line-height: 0.86;
  letter-spacing: -0.025em;
  /* the display face condensed to wdth 74 narrows the word space to almost
     nothing; "Wear it." runs together without this. */
  word-spacing: 0.14em;
  text-transform: uppercase;
  text-wrap: balance;
}
.merch__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.6rem; }
.merch__text p:not(.merch__kind) { color: var(--bone-dim); text-wrap: pretty; }

@media (max-width: 55.99rem) {
  .garment { max-width: min(100%, 38rem); }
  .merch__text { max-width: 56ch; }
}

/* ═══════════════ FOLLOW ═══════════════ */
.follow { padding-bottom: var(--band-y); }

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--rule);
  background: var(--void-lift);
  padding-block: clamp(0.75rem, 2vw, 1.25rem);
  -webkit-user-select: none; user-select: none;
}
.marquee__track {
  display: flex; align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: max-content;
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  font-weight: 900;
  font-variation-settings: "wdth" 70;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  animation: slide 34s linear infinite;
}
.marquee__track > span:nth-child(4n+1) { color: var(--bone); }
.marquee__track > span:nth-child(4n+3) { color: var(--brand-lift); }
.marquee__dot { color: var(--brand-lift); font-size: 0.5em; }
@keyframes slide { to { transform: translateX(-33.333%); } }

.follow__inner {
  max-width: 44rem; margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gut) 0;
  display: grid; gap: 1.75rem;
  justify-items: center;
  text-align: center;
}
/* A picture off Instagram, as a thumbnail that links back to its post.
   Sized off the source: 900x1200 covers this comfortably at 2x. */
.latest {
  display: grid; gap: 0.7rem; justify-items: center;
  width: min(22rem, 78vw);
  text-decoration: none;
}
.latest__frame {
  position: relative; display: block;
  border: 2px solid var(--brand);
  transition: transform 0.35s var(--expo), border-color 0.25s;
}
.latest img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; }
.latest:hover .latest__frame { transform: translateY(-0.35rem); border-color: var(--brand-lift); }
.latest__cap {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-align: center;
}

.follow__lead { font-size: var(--step-1); max-width: 34ch; text-wrap: pretty; }

.follow__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.tags li {
  padding: 0.7rem 1.35rem;
  border: 1px dashed color-mix(in oklab, var(--brand-lift) 55%, transparent);
  color: var(--brand-lift);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* ═══════════════ FOOT ═══════════════ */
.foot {
  padding: clamp(2rem, 6vw, 4rem) var(--gut) clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid var(--rule);
  display: grid; gap: 1.5rem;
}
.foot__mark {
  display: block; width: 100%; max-width: 78rem; height: auto;
  margin-inline: auto;
  opacity: 0.16;   /* a watermark, not a second logo */
}
.foot__meta {
  max-width: 78rem; margin-inline: auto; width: 100%;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem;
  font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bone-dim);
}

/* ═══════════════ 404 ═══════════════ */
.lost {
  min-height: 100svh;
  display: grid; place-content: center;
  gap: 1.5rem;
  padding: var(--gut);
  text-align: center;
}
.lost__code {
  font-size: clamp(4rem, 20vw, 10rem);
  font-weight: 900;
  font-variation-settings: "wdth" 70;
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--brand);
}
.lost h1 {
  font-size: var(--step-3);
  font-weight: 900;
  font-variation-settings: "wdth" 76;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lost p:not(.lost__code) { color: var(--bone-dim); max-width: 34ch; margin-inline: auto; }

/* ── mobile hero: photo above, type below ─────────────────────────────
   A 3:4 photo cannot cover a ~0.46-ratio phone screen without losing about
   45% of its width, which cropped Eden off the left edge and forced the
   wordmark across everyone's faces. So stop overlaying at phone widths:
   give the photo a box close to its own aspect ratio (no side cropping at
   all) and set the type underneath it. */
@media (max-width: 44rem) {
  .hero {
    min-height: 0;
    display: block;
    padding: 0 0 clamp(2.25rem, 8vw, 3.5rem);
  }
  .hero::before { display: none; }   /* that scrim covered the whole hero */

  .hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    /* Phones get Unforgiven1-tall.jpeg: the original cropped to 900x1600, which
       trims 150px of hedge from each side and keeps all four of them. 177.8vw
       is that crop's own height at full width, so the cap only ever crops
       vertically (foliage), never horizontally (people).
       Explicit height, not aspect-ratio + max-height - that combination let
       the box shrink in BOTH axes and left a strip down the right edge. */
    height: min(177.8vw, 62svh);
  }
  .hero__media img { object-position: 50% 30%; }
  .hero__media::after {
    content: "";
    position: absolute; inset: 0;
    z-index: var(--z-overlay);
    background:
      radial-gradient(120% 70% at 80% 0%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 62%),
      linear-gradient(to top, var(--void) 1%, transparent 44%);
  }

  .hero__frame {
    grid-row: auto;
    padding-inline: var(--gut);
    margin-top: clamp(0.75rem, 3vw, 1.5rem);
    gap: clamp(1rem, 3.5vw, 1.5rem);
  }

  /* the pier shot had the same problem in reverse: a 4:3 landscape photo in a
     tall box lost ~55% of its width, cropping three of the four out of a
     picture that is entirely about the four of them looking at the pier. */
  /* 75vw is exactly this photo's own 4:3 height at full width, so nothing is
     cropped at all - the whole frame, all four of them, and the pier. */
  .place__media { height: 75vw; max-height: 46svh; }
  .place__media::after {
    background: linear-gradient(to top, var(--void) 1%, transparent 30%);
  }
}

/* ═══════════════ REVEALS ═══════════════
   Content is visible by default; the pre-reveal state only
   exists once JS confirms it can turn it back on. */
.armed .reveal {
  opacity: 0;
  transform: translateY(1.4rem);
}
.armed .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--quart), transform 0.9s var(--expo);
}
.armed .reveal.is-in:nth-child(2) { transition-delay: 0.08s; }
.armed .reveal.is-in:nth-child(3) { transition-delay: 0.16s; }
.armed .reveal.is-in:nth-child(4) { transition-delay: 0.24s; }

/* hero page-load choreography — CSS only, so it cannot strand
   the headline if the script fails to load */
.js .hero__frame > * { animation: rise 1s var(--expo) both; }
.js .hero__line { animation-delay: 0.22s; }
.js .hero__acts { animation-delay: 0.36s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(1.75rem); }
  to { opacity: 1; transform: none; }
}
.js .wordmark svg { animation: plate 1.1s var(--expo) both; }
@keyframes plate {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 -10% 0); }
}

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  .armed .reveal { opacity: 1; transform: none; }
  .js .hero__frame > *, .js .wordmark svg { animation: none; }
  .armed .reveal.is-in { transition: opacity 0.2s linear; }
  .marquee__track { animation: none; }
  .gig.is-tonight .gig__flag { animation: none; }
  .masthead__name:hover .masthead__roundel { transform: none; }
  .hero__cue::after { animation: none; transform: scaleY(1); opacity: 0.7; }
  .btn:hover { transform: none; }
  .sleeve::before, .masthead { transition: none; }
  .latest:hover .latest__frame { transform: none; }
}