/* ============================================================
   DJ WIZ HOFFA — EVENTS page layout
   css/pages/events.css?v=7 — loads AFTER tokens.css + site.css.
   Owns events.html layout ONLY. Never restyles the shell, never
   overrides tokens, never declares :root. All classes are page
   local (ev- prefix, plus .spec / .stamp / .next-slot family).

   Palette law: flyer art (gold, purple) lives INSIDE the frame as
   photographed content; every frame, rule and label stays black /
   ivory / crimson. Contrast law: crimson is surface + accent only,
   never body text.

   Transform ownership (motion.js contract) — one owner per node:
     .ev-artifact        GSAP  (data-reveal)
     .ev-artifact-tilt   CSS   (static tilt + hover lift)
     .flyer-card         GSAP  (data-tilt, fine pointers only)
     .ev-ghost           GSAP  (data-parallax)
   Nothing in this file transforms a node GSAP drives.

   TOC:
   01 Hero            05 Flyer carousel + lightbox
   02 Ticker band     06 Next dates (empty state)
   03 Shared pieces   07 Venue band
   04 Residency       08 Small-screen floor
   ============================================================ */

/* ---------- 01 Hero ---------- */
.ev-hero {
  padding-top: clamp(0.5rem, 3vw, 2.75rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.ev-hero .eyebrow { margin-bottom: clamp(1.75rem, 5vw, 3rem); }

/* "On the Bill." — demoted from H1 to a hero overline (CONTENT.md §6.9).
   Bebas so it reads as a bill/marquee card, not a second headline. */
.ev-kicker {
  font-family: var(--font-logo);
  font-size: clamp(1.5rem, 4.6vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ivory-60);
  margin-bottom: clamp(0.5rem, 1.6vw, 0.9rem);
}

.ev-hero-title {
  font-size: clamp(2.6rem, 10.5vw, 7.5rem);
  line-height: 0.95;
  /* Anton is a heavy condensed grotesque; at hero scale positive tracking
     opens ~1px gaps between caps that read webby. Optical negative tracking
     sets the title flush as editorial mass (A24 / Criterion title card).
     Conservative so no glyphs collide at the 390px min size. */
  letter-spacing: -0.012em;
  text-wrap: initial;              /* the <br> owns the break, not the browser */
  max-width: 16ch;
}

/* Terminal period — the one crimson mark in the type. Decorative only. */
.dot { color: var(--crimson); }

.ev-hero .lead {
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  max-width: 46ch;
}

/* Editorial contents rail */
.ev-index { margin-top: clamp(2.75rem, 8vw, 5rem); }

.ev-index a {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 56px;                 /* comfortable tap target */
  padding: 0.55rem 0.15rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory-80);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-2) var(--ease);
}

.ev-index a:last-child { border-bottom: 1px solid var(--line); }

.ev-index-num {
  font-family: var(--font-logo);
  /* More scale + one step up in value so the numeral carries quiet TOC
     presence over the labels; min-width:2ch still holds the column and
     hover already promotes it to --ivory-80. */
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ivory-60);
  min-width: 2ch;
  flex: none;
  transition: color var(--dur-1) var(--ease);
}

.ev-index-label { min-width: 0; }

.ev-index-arrow {
  margin-left: auto;
  flex: none;
  color: var(--smoke);
  transition: color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}

.ev-index a:hover { color: var(--ivory); border-top-color: var(--line-strong); }
.ev-index a:hover .ev-index-num { color: var(--ivory-80); }
.ev-index a:hover .ev-index-arrow { color: var(--crimson-hot); transform: translateX(7px); }

/* ---------- 02 Ticker band (full-bleed) ---------- */
.ev-ticker-band {
  border-block: 1px solid var(--line);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--crimson) 10%, transparent), transparent 70%),
    var(--bg-2);
  padding-block: clamp(1.1rem, 2.6vw, 1.6rem);
}

.ev-ticker { padding-inline: var(--gutter); }

/* No-JS floor: a centered, wrapping wall of facts. motion.js may swap
   .ev-ticker-track to a nowrap loop track (.mq-on / .mq-track). */
.ev-ticker-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: clamp(1rem, 2.4vw, 2.1rem);
  row-gap: var(--sp-2);
}

.ev-ticker-track li {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: clamp(0.9rem, 1.9vw, 1.15rem);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory-60);
  white-space: nowrap;
}

.ev-ticker-track li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  margin-right: clamp(1rem, 2.4vw, 2.1rem);
  background: var(--crimson);
  transform: rotate(45deg);
}

/* ---------- 03 Shared page pieces ---------- */
/* Optical tightening for the big chapter titles — matches .ev-hero-title's
   editorial mass at the up-to-6.25rem display scale without collision. */
.ev-display { font-size: var(--fs-display); text-wrap: initial; letter-spacing: -0.006em; }

.ev-head { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }

.ev-head .sect-lead { max-width: 46ch; }

/* Framed flyer artifact — 3 nested nodes so GSAP and CSS never fight
   over the same transform (see the ownership note at the top). */
.ev-artifact { display: block; }

.ev-artifact-tilt {
  --tilt: -1.1deg;
  transform: rotate(var(--tilt));
  transition: transform var(--dur-2) var(--ease);
}

.ev-artifact:hover .ev-artifact-tilt { transform: rotate(0deg) translateY(-6px); }

/* Fact spec sheet — hairline label / value ledger */
.spec { border-top: 1px solid var(--line); }

.spec-row {
  display: grid;
  grid-template-columns: minmax(6rem, 8.5rem) 1fr;
  gap: var(--sp-3) var(--sp-4);
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.spec--tight .spec-row { padding-block: 0.62rem; }

.spec dt {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--smoke);
  padding-top: 0.28em;
}

.spec dd {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ivory-80);
}

/* Crimson chip — solid surface, ivory text (passes AA) */
.ev-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.95rem;
  background: var(--crimson);
  color: var(--ivory);
  border-radius: var(--r-xs);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}

/* Archive stamp */
.stamp {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--smoke);
  transform: rotate(-1.5deg);
}

/* Honesty / provenance microcopy */
.ev-note {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--smoke);
  max-width: 48ch;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--line-crimson);
}

.ev-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.ev-cta-row--center { justify-content: center; }

/* ---------- 04 Featured residency (Kuddy Lounge) ---------- */
.ev-residency {
  position: relative;
  overflow: clip;                   /* clip NOT hidden — house law */
  /* The band's own lighter 2.8% wash, layered OVER the inherited --bg-2 band
     ground. The shorthand would otherwise reset .sect--band's background-color
     to transparent and the depth band would vanish (site.css .sect--band note);
     re-adding var(--bg-2) keeps it in step with .ev-venue's same pattern. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ivory) 2.8%, transparent), transparent 45%),
    var(--bg-2);
}

/* Chapter ghost numeral — decorative, parallax-driven, never read.
   Sits fully inside the section so it never reads as a clipped shape;
   phone hides it to keep the small screen clean. */
.ev-ghost { display: none; }

@media (min-width: 768px) {
  .ev-ghost {
    display: block;
    position: absolute;
    top: clamp(1.5rem, 4vw, 3.5rem);
    right: var(--gutter);
    z-index: var(--z-bg);
    font-family: var(--font-logo);
    font-size: clamp(9rem, 17vw, 15rem);
    line-height: 0.8;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, var(--ivory) 3.8%, transparent);
    pointer-events: none;
    user-select: none;
  }
}

.ev-feature {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 980px) {
  .ev-feature { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
}

/* Detail variant — no flyer column (the carousel owns the artwork now);
   body ledger on the left, hairline spec sheet on the right. */
.ev-feature--detail { align-items: start; }
.ev-feature--detail .ev-resi-spec { align-self: start; }

/* The ledger gets the same framed-artifact material as the flyer cards so
   the two-column residency reads balanced, not lopsided. On the bg-2 band
   the lighter --flyer-ground reads as a subtly raised spec card and rhymes
   with the flyer frames. Token-safe, page-local. */
.ev-resi-spec {
  background: var(--flyer-ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-1);
}

.ev-feature-body > * + * { margin-top: clamp(1.25rem, 3vw, 1.9rem); }

.ev-feature-lead {
  font-size: var(--fs-lead);
  color: var(--ivory-80);
  max-width: 44ch;
}

.ev-feature-body .ev-cta-row { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* ---------- 05 Flyer carousel + lightbox (the centerpiece) ----------
   Base state (no class) is a NATIVE horizontal-scroll row: it works with
   zero JS AND is the reduced-motion floor (static, scrollable, tappable).
   events-carousel.js adds .is-live to switch to the rAF conveyor (drag +
   flick + tap-to-enlarge). The flyer buttons carry .flyer-card for the
   shared frame chrome but NOT [data-tilt], so motion.js never grabs them —
   the track transform is owned solely by events-carousel.js. */

.ev-carousel {
  position: relative;
  margin-top: clamp(1.75rem, 4vw, 3rem);
  --fh: clamp(300px, 40vh, 440px);          /* flyer frame height — equal across cards */
}

/* Edge fades as pointer-events:none overlays rather than a mask on the
   scroll container — a CSS mask on the transformed conveyor triggers a
   Chrome compositing bug where only the first card paints. */
.ev-carousel::before,
.ev-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(1.5rem, 4vw, 3.25rem);
  z-index: 2;
  pointer-events: none;
}
.ev-carousel::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.ev-carousel::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

.ev-carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  /* overflow-y can't be visible on a scroll container, so give the cards
     real vertical breathing room — the --shadow-2 glow (~30px up / ~58px
     down) plus the -6px hover lift clear before the viewport edge clips,
     so the flyers float as archival objects instead of cut-out stickers. */
  padding-block: clamp(1.75rem, 3.2vw, 3rem);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--crimson) transparent;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.ev-carousel-viewport::-webkit-scrollbar { height: 6px; }
.ev-carousel-viewport::-webkit-scrollbar-thumb { background: var(--crimson); border-radius: var(--r-pill); }
.ev-carousel-viewport:focus-visible { outline: 2px solid var(--crimson-hot); outline-offset: -4px; }

/* Live conveyor: JS drives translateX, so kill native scroll + snap. */
.ev-carousel.is-live .ev-carousel-viewport {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;             /* JS owns horizontal; page keeps vertical */
  cursor: grab;
}
.ev-carousel.is-live .ev-carousel-viewport.is-grab { cursor: grabbing; }

.ev-carousel-track {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 2.4vw, 2rem);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* NOTE: no `will-change: transform` here — on this masked/transformed
   conveyor it promotes a GPU layer that makes Chrome drop the paint of
   every flyer except the clipping-boundary one. translate3d in the JS
   already gives the track its own layer for smooth animation. */

.ev-slide {
  flex: 0 0 auto;
  display: flex;
  scroll-snap-align: center;
}

/* Flyer artifact button — whole card opens the lightbox. */
.ev-flyer {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-4);
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  background: var(--flyer-ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}

/* Card width is derived from the fixed frame height x the flyer's aspect,
   so every card is the same height with the whole flyer visible (no crop). */
.ev-flyer--land { width: calc(var(--fh) * 1.4144 + 2 * var(--sp-4)); }
.ev-flyer--port { width: calc(var(--fh) * 0.6667 + 2 * var(--sp-4)); }
.ev-flyer--sq   { width: calc(var(--fh) * 1 + 2 * var(--sp-4)); }

.ev-flyer--featured { box-shadow: var(--shadow-2), var(--glow-crimson-soft); }

.ev-flyer:hover,
.ev-flyer:focus-visible {
  transform: translateY(-6px);
  border-color: var(--line-crimson);
  /* Deeper cast on the lift so the elevation reads — the -6px rise now
     throws a longer shadow instead of floating weightless. Raw rgba matches
     the tokens.css shadow-1/-2 convention (a page-local shadow-3). */
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.6);
}
/* Featured card keeps its crimson bloom while gaining the deeper cast. */
.ev-flyer--featured:hover,
.ev-flyer--featured:focus-visible {
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.6), var(--glow-crimson-soft);
}
.ev-flyer:focus-visible { outline: 2px solid var(--crimson-hot); outline-offset: 3px; }
.ev-carousel-viewport.is-grab .ev-flyer:hover { transform: none; }   /* no lift mid-drag */

.ev-flyer-frame {
  position: relative;
  display: block;
  height: var(--fh);
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: var(--bg);
}
.ev-flyer--land .ev-flyer-frame { aspect-ratio: 2000 / 1414; }
.ev-flyer--port .ev-flyer-frame { aspect-ratio: 1024 / 1536; }
.ev-flyer--sq   .ev-flyer-frame { aspect-ratio: 1 / 1; }

.ev-flyer-frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;             /* aspect matches the frame exactly → no crop */
  border: 0;
  border-radius: var(--r-xs);
  pointer-events: none;
}

.ev-flyer-expand {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, #000 55%, transparent);
  border: 1px solid var(--line-strong);
  color: var(--ivory);
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  pointer-events: none;
}
.ev-flyer:hover .ev-flyer-expand,
.ev-flyer:focus-visible .ev-flyer-expand { opacity: 1; transform: scale(1); }
@media (hover: none) { .ev-flyer-expand { opacity: 1; } }

/* Meta ledger below the frame (reuses .flyer-meta / .flyer-tag from site.css) */
.ev-flyer-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.3rem 0.62rem;
  background: var(--crimson);
  color: var(--ivory);
  border-radius: var(--r-xs);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}
.ev-flyer-badge--archive { background: transparent; color: var(--ivory-60); border: 1px solid var(--line-strong); }
/* Crimson identity carried by the --line-crimson border; label lifts to
   --ivory-60 because --crimson-text on the lighter flyer-ground computes
   ~4.4:1, under the AA-normal floor for this 13px label. */
.ev-flyer-badge--bill    { background: transparent; color: var(--ivory-60); border: 1px solid var(--line-crimson); }

.ev-flyer-sub { font-size: var(--fs-small); color: var(--smoke); }

/* Prev / next controls */
.ev-carousel-nav {
  position: relative;
  z-index: 3;                        /* above the edge-fade overlays */
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  padding: var(--sp-4) var(--gutter) 0;
}
.ev-car-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ivory);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease);
}
.ev-car-btn:hover { border-color: var(--crimson); background: var(--panel-2); }
.ev-car-btn:focus-visible { outline: 2px solid var(--crimson-hot); outline-offset: 2px; }
/* Match the house .btn press so the controls feel live, not inert. */
.ev-car-btn:active { transform: translateY(1px); }
/* .ev-car-btn sets display:flex, which would override the UA [hidden] rule —
   restore it so the JS-revealed pause/play control stays hidden until live. */
.ev-car-btn[hidden] { display: none; }

.ev-flyers-note {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--smoke);
  max-width: 62ch;
}

/* ---------- 05b Lightbox ---------- */
.ev-lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;                    /* above the 800 header */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}
.ev-lightbox[hidden] { display: none; }

body.lb-open { overflow: hidden; }

.ev-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 6, 0.86);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.ev-lightbox.is-open .ev-lightbox-backdrop { opacity: 1; }

.ev-lightbox-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  width: min(100%, 960px);
  max-height: calc(100vh - 2 * clamp(1rem, 4vw, 2.5rem));
  overflow-y: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.ev-lightbox.is-open .ev-lightbox-panel { opacity: 1; transform: none; }

@media (min-width: 760px) {
  .ev-lightbox-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.ev-lightbox-fig { margin: 0; }
.ev-lightbox-fig img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);          /* letterbox bars — darkest frame token */
}

.ev-lightbox-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, #000 45%, var(--panel));
  color: var(--ivory);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.ev-lightbox-close:hover { border-color: var(--crimson); }
.ev-lightbox-close:focus-visible { outline: 2px solid var(--crimson-hot); outline-offset: 2px; }

.ev-lightbox-body > * + * { margin-top: clamp(1rem, 2.5vw, 1.5rem); }

.ev-lb-badge {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  /* --ivory-60, not --crimson-text: this 13px label sits on the lighter
     --panel lightbox ground where --crimson-text computes ~4.4:1, under AA. */
  color: var(--ivory-60);
}
.ev-lb-badge--archive,
.ev-lb-badge--bill { color: var(--smoke); }

.ev-lb-title { font-size: var(--fs-h3); margin-top: var(--sp-2); }

.ev-lb-venue { font-size: var(--fs-small); color: var(--smoke); margin-top: var(--sp-2); }

.ev-lb-copy { color: var(--ivory-80); font-size: var(--fs-small); }

.ev-lb-note {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--smoke);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--line-crimson);
}

.ev-lightbox-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Reduced motion: the base native-scroll row IS the experience (JS never
   adds .is-live), plus a hard belt-and-suspenders reset. */
@media (prefers-reduced-motion: reduce) {
  .ev-carousel-track { transform: none !important; }
  .ev-flyer-expand { opacity: 1; }
}

/* ---------- 06 Next dates — designed empty state ---------- */
/* Cindy §02: section 03 had no background treatment at all, so it read as
   a dead hole between the archive band and the venue band. A soft ivory
   swell inside the house's established 3-5% vocabulary (music.css uses
   3.5%, press.css 4.5%) — the dark brand identity holds. */
.ev-next-sect {
  /* position + clip so §03 can carry the same parallax ghost numeral as
     §02 — the chaptering device becomes a system, not a one-off. */
  position: relative;
  overflow: clip;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--ivory) 3.5%, transparent) 58%,
    transparent);
}

.ev-next {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 980px) {
  .ev-next { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.ev-next-body > * + * { margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }

.ev-next-body .lead { max-width: 42ch; }

.ev-next-body .ev-cta-row { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

.ev-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
  max-width: 42ch;
}

.ev-steps li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ivory-80);
}

.ev-steps-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid var(--line-crimson);
  border-radius: 50%;
  font-family: var(--font-logo);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--ivory-60);
}

/* The reserved frame — artifact language, waiting for its flyer */
.ev-artifact--slot {
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
}

.ev-artifact--slot .ev-artifact-tilt { --tilt: -1.5deg; }

.next-slot {
  padding: var(--sp-4);
  /* Reserved slot reads as identical material to the real flyer frames:
     the shared --flyer-ground token (tokens.css) drives both. */
  background: var(--flyer-ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  /* A whisper of the live-flyer's --glow-crimson-soft so the reserved slot
     reads as held-open and charged, not a dead dashed frame. Single accent. */
  box-shadow: var(--shadow-2), var(--glow-crimson-soft);
}

.next-slot-inner {
  aspect-ratio: 3 / 4;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  text-align: center;
}

.next-slot-bar {
  width: 28px;
  height: 2px;
  background: var(--crimson);
}

.next-slot-word {
  font-family: var(--font-logo);
  font-size: clamp(3rem, 8vw, 4.5rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ivory);
}

.next-slot-label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--smoke);
}

/* ---------- 07 Venue band — conversion close ----------
   Page-local crimson haze: site.css `.haze::before` paints at z-index -1,
   which a `.sect--band` background would cover. Layer it as a background
   on the band itself instead — same wash, no stacking-context trap. */
/* Cindy §02: the closing band got crimson but zero lift of light and then
   handed straight to a --bg-2 footer at the same value. The ivory lift is
   stacked UNDER the crimson haze so the accent still reads on top, and it
   settles back to --bg-2 by 64% so the footer handoff stays seamless.
   Background only — .sect--band's bottom hairline is preserved. */
.ev-venue {
  background:
    radial-gradient(72% 62% at 50% 0%, var(--haze), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ivory) 5%, transparent),
      color-mix(in srgb, var(--ivory) 1.5%, transparent) 64%,
      transparent),
    var(--bg-2);
}

.ev-venue .sect-head { margin-bottom: clamp(2rem, 4vw, 2.75rem); }

.ev-venue .sect-lead { max-width: 52ch; }

.ev-venue-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-7) clamp(3rem, 8vw, 6rem);
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--line);
}

.ev-venue-stats .stat {
  text-align: left;
  align-items: flex-start;
  max-width: 15rem;
}

.ev-venue-sign {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: clamp(1rem, 2vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ivory-60);
}

/* ---------- 08 Small-screen floor (360) ---------- */
@media (max-width: 559.98px) {
  .ev-venue-stats { flex-direction: column; align-items: center; gap: var(--sp-6); }
  .ev-venue-stats .stat { text-align: center; align-items: center; max-width: 22rem; }
}

@media (max-width: 420px) {
  .spec-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .spec dt { padding-top: 0; }
  .ev-index a { gap: var(--sp-4); }
  .ev-steps li { font-size: 0.94rem; letter-spacing: 0.06em; }
  .ev-note { padding-left: var(--sp-3); }
}