/*
 Theme Name:   Arcade Comedy Theater
 Theme URI:    https://arcadecomedytheater.com
 Description:  Arcade Comedy Theater child theme for Divi
 Author:       Ryan / DEADFRAME
 Author URI:   https://deadframe.xyz
 Template:     Divi
 Version:      2.0.0
 License:      Private
 Text Domain:  arcade-child
*/

/* ============================================================
   ARCADE COMEDY THEATER — MASTER CSS v2.0
   Child theme: arcade-child / style.css

   v2.0 (2026-09-04) adopts the arcade-platform mockup's look
   site-wide — "black & gold with the volume up". Type and palette
   live in §00; the component sections below were rewritten to
   the same language: cream cards with 3px ink borders and hard
   offset shadows, two-colour riso offsets on posters and feature
   cards, marker-face eyebrows, ink page heroes under a gold rule,
   gold / hot pink / volt / teal accents. Sections marked (legacy)
   match markup the site no longer renders and are kept only so
   nothing referencing them breaks.

   TABLE OF CONTENTS
   00  Design tokens (:root)              — the look lives here
   01  Google Fonts (loaded from functions.php)
   02  Reset & base (dot-grid paper)
   03  Typography scale
   04  Utility classes
   05  Buttons (pill, 3px border, hard shadow)
   06  Pills, chips & stickers
   07  Navigation & topbar (legacy .arcade-nav — see §46)
   08  Alert bar
   09  Hero — split panel (legacy)
   10  Hero — show rotator (legacy)
   11  Show ticker (legacy — see §46 .topbar)
   12  Section scaffold (bands: paper / cream / dark / gold / pink)
   13  Section header pattern
   14  Interior page hero
   15  Ticket stub cards
   16  Poster cards
   17  Academy / color-block feature (legacy — see §40)
   18  Class cards — full (legacy roster; redesign in ACM front.css)
   19  Class cards — compact (legacy)
   20  Video section
   21  Image treatments
   22  People — instructor grid (pointer to §49)
   23  People — staff grid
   24  People — board grid
   25  People — staff bio modal
   26  Calendar & list widget
   27  Events archive (TEC Pro photo view — legacy)
   28  Single event page (legacy card — the template is inc/event-page.php)
   29  Footer (legacy .arcade-footer — see §43)
   30  Divi global resets (all !important flags live here)
   31  Responsive — tablet
   32  Responsive — mobile
   33  Reduced motion
   34  Homepage — full-width suppression
   35  v7.1 homepage Code module support (legacy)
   36  Nav — live status pill
   37  Hero — photo pin-frame
   38  Tear divider
   39  "Next up" — featured rotator + list
   40  Feature-color block (Academy + donate)
   41  Spotlight postcards
   42  Video — play button
   43  Footer (footer.php)
   44  Confetti
   45  Responsive — v12.1 sections
   46  Sitewide topbar + nav (header.php)
   47  Homepage — hero
   49  Events — list view
   50  Events — month view
   51  Events — search + view-switcher bar
   52  Events — wrapper background
   53  Events — grid pagination nav
   54  Events — hide "Featured" badge
   55  Events — posters/grid card overrides
   56  Events — month view chips
   57  Events — grid date-range + sort filter
   58  Single event page — retheme of the Divi template (legacy)
   48  Academy classes — Content Manager banner (legacy roster)
   49  Instructors — header, people grid, past chips, bio modal
   46  About / Plan a Visit / Info pages
   59  Contact form
   60  Workshops
   61  Responsive — minimum readable type on phones
   62  Under-calendar show list
   63  Upcoming shows list below the month grid
   61  Mobile touch ergonomics
   64  Legacy Customizer CSS — font remap (generated)
   65  Rivers divider + week rail (from the mockup)
   66  Phones — the language at small sizes
   67  In the News ([arcade_press])
   68  Poster wall ([arcade_poster_wall] — "Posters, n'at")
   69  Keyboard focus (site-wide :focus-visible)
   ============================================================ */


/* ============================================================
   00  DESIGN TOKENS
   v1.1: Updated to match v7.1 design system
   v1.2: Aligned with the v12.1 "riso-fun" mockup
   v2.0 (2026-09-04): THE ARCADE-PLATFORM LOOK. Type and palette
   now come straight from the arcade-platform mockup (appdata/
   arcade-platform/app/static/css/site.css) — "black & gold with
   the volume up": Bricolage Grotesque display, Permanent Marker
   eyebrows, DM Sans body; ink / cream paper / gold / hot pink /
   volt / teal. Hard offset shadows and 3px ink borders replace
   the old soft drop shadows. Every component below reads these
   tokens, so this block is where the look of the site lives.

   Legacy token names (--bulb, --pink-hot, --shadow-md, the
   --shadow-riso-* set, --script) are kept as aliases so the
   plugins' stylesheets and older sections keep resolving.
   ============================================================ */
:root {
  /* Ink & paper */
  --ink:          #130c1c;
  --ink-2:        #1e1428;
  --ink-3:        #2a1d38;
  --ink-80:       rgba(19, 12, 28, 0.80);
  --ink-40:       rgba(19, 12, 28, 0.40);
  --ink-12:       rgba(19, 12, 28, 0.12);
  --line:         rgba(19, 12, 28, 0.12);
  --paper:        #fff6e3;
  --paper-2:      #fdeccb;
  --cream:        #fffdf7;
  --surface:      #fffdf7;
  --muted:        #6d6379;
  --muted-light:  #a89fb0;

  /* Brand colours */
  --gold:         #ffb81c;
  --gold-deep:    #e09a00;
  --bulb:         #ffb81c;   /* alias: older rules say --bulb for gold */
  --pink:         #ff3d8b;
  --pink-hot:     #ff5fa1;   /* hover lift on pink */
  --pink-deep:    #c91f66;
  --volt:         #e9ff3a;
  --volt-deep:    #c9dd12;
  --teal:         #1fd6c4;
  --purple:       #7c5cff;
  --purple-soft:  #8d70ff;   /* purple with ink text on it: 5.4:1 (the base purple is 4.4 either way — contrast pass 2026-09-05) */
  --purple-deep:  #4b33c4;
  --blue:         #2b7fff;
  /* Text on the saturated fills is INK, not white: white on pink is 3.3:1, on
     orange 2.6:1, on blue 3.8:1 — all under AA for chip-sized type. Ink clears
     4.5 on every fill (pink 5.7, orange 7.3, blue 5.1, purple-soft 5.4). */
  --orange:       #ff7a1a;

  /* Polaroid frame (rotator feature card) */
  --polaroid:      #fffdf7;
  --polaroid-line: var(--ink);

  /* Level system — 1 pink · 2 blue · 3 orange · 4 purple, same as the
     mockup's ladder rungs. The -bg/-ink pairs are the soft tint + deep
     text used by pills and card washes. */
  --l1:     #ff3d8b;
  --l1-bg:  #ffe0ec;
  --l1-ink: #7a1140;
  --l2:     #2b7fff;
  --l2-bg:  #dfeaff;
  --l2-ink: #123f8a;
  --l3:     #ff7a1a;
  --l3-bg:  #ffe6d6;
  --l3-ink: #7a3508;
  --l4:     #7c5cff;
  --l4-bg:  #e9e4ff;
  --l4-ink: #3a2a8f;

  /* Typography */
  --display: 'Bricolage Grotesque', Impact, 'Arial Narrow', sans-serif;
  --marker:  'Permanent Marker', 'Kaushan Script', cursive;
  --script:  var(--marker);   /* alias: the old script-accent face */
  --body:    'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radii */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r:    14px;

  /* Shadows — hard offsets, no blur. --hard is the workhorse; --riso is
     the two-colour misregistration used on posters and feature cards. */
  --hard:     6px 6px 0 var(--ink);
  --hard-sm:  4px 4px 0 var(--ink);
  --hard-lg:  8px 8px 0 var(--ink);
  --riso:     6px 6px 0 var(--pink), 12px 12px 0 var(--gold);

  /* Legacy shadow names, remapped onto the hard set so every older rule
     that asked for a soft drop shadow gets the new language for free. */
  --shadow-sm:   3px 3px 0 var(--ink);
  --shadow-md:   var(--hard);
  --shadow-lift: var(--hard-lg);
  --shadow-dark: var(--riso);
  --shadow-riso-neutral: var(--riso);
  --shadow-riso-pink:    6px 6px 0 var(--gold),  12px 12px 0 var(--teal);
  --shadow-riso-purple:  6px 6px 0 var(--pink),  12px 12px 0 var(--volt);
  --shadow-riso-orange:  6px 6px 0 var(--ink),   12px 12px 0 var(--pink);

  /* The paper's dot grid (mockup: radial-gradient dots every 18px). */
  --dots:      radial-gradient(rgba(19, 12, 28, 0.08) 1px, transparent 1.2px);
  --dots-size: 18px 18px;
  --dots-dark: radial-gradient(rgba(255, 184, 28, 0.16) 1px, transparent 1.4px);
  --dots-gold: radial-gradient(rgba(19, 12, 28, 0.14) 1px, transparent 1.2px);

  /* Spacing */
  --pad-section:    clamp(56px, 8vw, 96px);
  --pad-section-sm: clamp(36px, 5vw, 56px);
  --wrap: 1200px;
}


/* ============================================================
   01  GOOGLE FONTS
   Loaded via wp_enqueue_style('arcade-google-fonts', ...) in
   functions.php, not @import — avoids a second render-blocking
   request for the same families. Kept as a numbered section so
   the fonts a page depends on are still documented here.
   ============================================================ */


/* ============================================================
   02  RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  font-family: var(--body);
  background: var(--paper);
  /* The mockup's paper: a faint ink dot grid, every 18px. */
  background-image: var(--dots);
  background-size: var(--dots-size);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.18s;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.arcade-wrap         { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); position: relative; z-index: 1; }
.arcade-wrap--narrow { max-width: 840px; }
.arcade-wrap--wide   { max-width: 1400px; }


/* ============================================================
   03  TYPOGRAPHY SCALE
   Bricolage Grotesque is a wide grotesk, not a condensed face
   like the Oswald it replaced — so display type sits at 800,
   tight (-0.02em) and short (line-height ~0.95), never tracked
   out. The marker face carries the eyebrows and the odd hand-
   written accent; it is a single weight and reads badly in
   caps, so anything set in it is sentence case.
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--marker);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pink);
  margin-bottom: 0.4rem;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}
.doodle-star { width: 13px; height: 13px; flex-shrink: 0; }

.script {
  font-family: var(--marker);
  font-weight: 400;
  text-transform: none;
  color: var(--pink);
  letter-spacing: 0;
  line-height: 1;
}

.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.98;
  color: var(--ink);
}

.et_pb_text p,
.et_pb_text li {
  font-family: var(--body);
  color: var(--ink);
  line-height: 1.6;
}


/* ============================================================
   04  UTILITY CLASSES
   ============================================================ */
.u-pink    { color: var(--pink); }
.u-purple  { color: var(--purple); }
.u-volt    { color: var(--volt); }
.u-muted   { color: var(--muted); }
.u-white   { color: #ffffff; }
.u-ink     { color: var(--ink); }
.u-bg-paper   { background: var(--paper); }
.u-bg-paper2  { background: var(--paper-2); }
.u-bg-surface { background: var(--surface); }
.u-bg-ink     { background: var(--ink); }
.u-bg-pink    { background: var(--pink); }
.u-center { text-align: center; }
.u-mt-8  { margin-top: 8px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-32 { margin-top: 32px; }
.u-mb-8  { margin-bottom: 8px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-24 { margin-bottom: 24px; }
.u-mb-32 { margin-bottom: 32px; }

.section-rule {
  width: 44px;
  height: 4px;
  background: var(--pink);
  border-radius: 2px;
  margin-top: 10px;
}

.grad-rule {
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--pink),
    var(--blue),
    rgba(107, 75, 196, 0.15)
  );
  border-radius: 2px;
  margin-bottom: 20px;
  flex-shrink: 0;
}


/* ============================================================
   05  BUTTONS
   The mockup's pill button: display face, 3px ink border, hard
   offset shadow, and a lift on hover that grows the shadow.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 3px solid var(--ink);
  cursor: pointer;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  padding: 0.8em 1.35em;
  color: var(--ink);
  background: var(--gold);
  box-shadow: var(--hard);
  transition: transform 0.12s, box-shadow 0.12s, background 0.18s, color 0.18s;
}
.btn:hover  { transform: translate(-2px, -2px); box-shadow: var(--hard-lg); }
.btn:active { transform: translate(3px, 3px);   box-shadow: 2px 2px 0 var(--ink); }

.btn-pink  { background: var(--pink); color: var(--ink); }
.btn-pink:hover { background: var(--pink); color: var(--ink); }
.btn-gold  { background: var(--gold); color: var(--ink); }
.btn-volt  { background: var(--volt); color: var(--ink); }
.btn-white { background: var(--cream); color: var(--ink); }

/* Ghost buttons borrow the text colour for their border and shadow, so
   they work on paper and on ink without a second class. */
.btn-ghost,
.btn-ghost-light {
  background: transparent; color: inherit;
  border-color: currentColor;
  box-shadow: 6px 6px 0 currentColor;
}
.btn-ghost:hover,
.btn-ghost-light:hover { box-shadow: 8px 8px 0 currentColor; color: inherit; border-color: currentColor; }
.btn-ghost-light { color: var(--paper); }

.btn--sm   { font-size: 0.82rem; padding: 0.6em 1em; box-shadow: var(--hard-sm); }
.btn--sm:hover { box-shadow: var(--hard); }
.btn--lg   { font-size: 1.1rem; padding: 0.95em 1.7em; }
.btn--full { display: flex; width: 100%; }


/* ============================================================
   06  PILLS & TAGS
   Chips: display face, 2px ink border, solid colour fills.
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}

.pill-time  { background: var(--pink);  color: var(--ink); }
.pill-cost  { background: var(--gold);  color: var(--ink); }
.pill-flag  { background: var(--volt);  color: var(--ink); }
.pill-alert { background: var(--pink);  color: var(--ink); }
.pill-sold  { background: var(--ink);   color: var(--paper); }
.pill-few   { background: var(--orange); color: var(--ink); }
.pill-teal  { background: var(--teal);  color: var(--ink); }
.pill-l1 { background: var(--l1); color: #fff; }
.pill-l2 { background: var(--l2); color: #fff; }
.pill-l3 { background: var(--l3); color: #fff; }
.pill-l4 { background: var(--l4); color: #fff; }

/* Sticker: the marker-face label that sits tilted on a corner. */
.sticker {
  display: inline-block;
  font-family: var(--marker);
  font-size: 1rem;
  background: var(--volt);
  color: var(--ink);
  padding: 0.3em 0.8em;
  border: 3px solid var(--ink);
  border-radius: 8px;
  transform: rotate(-4deg);
  box-shadow: 3px 3px 0 var(--ink);
  line-height: 1.2;
}
.sticker--pink { background: var(--pink); color: var(--ink); }
.sticker--gold { background: var(--gold); }
.sticker--teal { background: var(--teal); }


/* ============================================================
   07  NAVIGATION & TOPBAR
   ============================================================ */
.arcade-topbar {
  background: var(--pink);
  position: relative;
  z-index: 100;
}
.arcade-topbar .arcade-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 7px;
  padding-bottom: 7px;
  gap: 22px;
}
.arcade-topbar a {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  transition: color 0.18s;
}
.arcade-topbar a:hover { color: var(--volt); }

.arcade-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(244, 236, 221, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-12);
}
.arcade-nav .arcade-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 24px;
}

.arcade-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.arcade-brand__mark {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--purple);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 18px;
  box-shadow: 0 0 0 4px rgba(107,75,196,0.15);
}
.arcade-brand__name {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  color: var(--ink);
}
.arcade-brand__sub {
  font-family: var(--display); font-size: 9px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--muted); display: block; margin-top: 3px;
}


/* ============================================================
   08  ALERT BAR
   ============================================================ */
.arcade-alert {
  background: var(--volt); color: var(--ink);
  font-family: var(--display); font-size: 0.9rem; font-weight: 800;
  letter-spacing: 0.02em; text-transform: uppercase;
  text-align: center; padding: 10px 20px;
  border-bottom: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}
.arcade-alert a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pink); }


/* ============================================================
   09  HERO — SPLIT PANEL
   ============================================================ */
.arcade-hero { padding: 36px 0 28px; }

.hero-panel {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-dark);
  position: relative;
}

.hero-left {
  background: var(--paper-2);
  padding: 48px 44px;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-left__headline {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 0.92; text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--ink); margin: 0 0 18px;
}
.hero-left__headline .script { display: inline-block; font-size: 0.87em; transform: rotate(-4deg); margin: 0 0.04em; }
.hero-left__sub { font-size: 15px; color: var(--muted); max-width: 360px; line-height: 1.65; margin-bottom: 26px; }
.hero-left__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.hero-right {
  background: var(--ink);
  position: relative; overflow: hidden; min-height: 380px;
}
.hero-right::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--purple) 0%, var(--purple-deep) 100%);
  pointer-events: none;
}
.hero-right::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 7px 7px; mix-blend-mode: overlay; pointer-events: none;
}


/* ============================================================
   10  HERO — SHOW ROTATOR (right panel)
   ============================================================ */
.hero-rotator { position: absolute; inset: 0; z-index: 1; }

.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s; pointer-events: none; }
.hero-slide.is-active { opacity: 1; pointer-events: auto; }

.hero-slide__art {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top;
  background-color: var(--purple-deep);
}
.hero-slide__art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(107,75,196,0.40), rgba(63,44,126,0.25));
  mix-blend-mode: color;
}

.hero-slide__scrim {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 26px 22px;
  background: linear-gradient(to top, rgba(29,22,38,0.94), transparent);
  z-index: 2;
}
.hero-slide__flag {
  display: inline-block; background: var(--volt); color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 20px; margin-bottom: 10px;
}
.hero-slide__title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 0.96; text-transform: uppercase; color: #fff; margin-bottom: 4px;
}
.hero-slide__meta {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,200,210,0.65); margin-bottom: 14px;
}

.hero-rotator__dots { position: absolute; bottom: 14px; right: 18px; display: flex; gap: 6px; z-index: 6; }
.hero-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.45); background: transparent;
  cursor: pointer; padding: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.hero-dot.is-active { background: var(--volt); border-color: var(--volt); transform: scale(1.3); }


/* ============================================================
   11  SHOW TICKER
   ============================================================ */
.arcade-ticker {
  background: var(--ink); overflow: hidden;
  border-top: 3px solid var(--volt);
  border-bottom: 3px solid var(--volt);
  position: relative; z-index: 1;
}
.arcade-ticker__track {
  display: inline-block; white-space: nowrap; padding: 11px 0;
  animation: ticker-slide 30s linear infinite;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.20em; text-transform: uppercase; color: #fff;
}
.arcade-ticker__track .dot { color: var(--volt); margin: 0 16px; }
@keyframes ticker-slide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ============================================================
   12  SECTION SCAFFOLD
   Bands. The paper band shows the body's dot grid through it;
   the coloured bands carry their own.
   ============================================================ */
.arcade-section { padding: var(--pad-section) 0; background: transparent; position: relative; z-index: 1; }
.arcade-section--light  { background: var(--cream); }
.arcade-section--white  { background: var(--cream); }
.arcade-section--dark   { background: var(--ink); color: var(--paper); }
.arcade-section--gold   { background: var(--gold); color: var(--ink); background-image: var(--dots-gold); background-size: 14px 14px; }
.arcade-section--pink   { background: var(--pink); color: var(--paper); }
.arcade-section--dark .eyebrow { color: var(--volt); }
.arcade-section--gold .eyebrow { color: var(--ink); }
.arcade-section--pink .eyebrow { color: var(--volt); }
.arcade-section--dark h1,
.arcade-section--dark h2,
.arcade-section--dark h3 { color: var(--paper); }
.arcade-section--dark p   { color: rgba(255, 246, 227, 0.75); }
.arcade-section--compact  { padding: var(--pad-section-sm) 0; }


/* ============================================================
   13  SECTION HEADER PATTERN
   ============================================================ */
.section-head { margin-bottom: clamp(24px, 4vw, 40px); }
.section-head h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95;
  color: var(--ink); margin: 0;
}
.section-head h2 span { color: var(--pink); }
.arcade-section--dark .section-head h2 span { color: var(--gold); }
.section-head--center { text-align: center; }
.section-head--center .eyebrow { transform-origin: center; }
.section-head--center .section-rule { margin-left: auto; margin-right: auto; }


/* ============================================================
   14  INTERIOR PAGE HERO
   Ink band with a gold rule under it — the mockup's .page-hero.
   Used by About, Plan a Visit, every [arcade_info] page and the
   Contact page; the team/performer/class/event templates carry
   their own copy of the same shape in their own stylesheets.
   ============================================================ */
.page-hero {
  background: var(--ink); color: var(--paper);
  padding: clamp(40px, 6vw, 80px) 0;
  position: relative; overflow: hidden;
  border-bottom: 4px solid var(--gold);
  background-image: var(--dots-dark);
  background-size: 22px 22px;
}
.page-hero::before {
  content: ''; position: absolute; inset: auto -20% -40% -20%; height: 70%;
  background: radial-gradient(ellipse at center, rgba(255, 61, 139, 0.30), transparent 60%);
  pointer-events: none;
}
.page-hero .eyebrow { color: var(--volt); position: relative; z-index: 1; }
.page-hero h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.92; color: var(--paper);
  margin: 0; position: relative; z-index: 1;
}
.page-hero h1 span, .page-hero h1 em { color: var(--gold); font-style: normal; }
.page-hero p {
  color: rgba(255, 246, 227, 0.82); font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 60ch;
  margin: 1rem 0 0; line-height: 1.5; position: relative; z-index: 1;
}
.page-hero .btn { position: relative; z-index: 1; }


/* ============================================================
   15  TICKET STUB CARDS
   A stub: cream card, 3px ink border, hard shadow, and the two
   punched notches on its sides. The notch colour follows the
   band it sits on (--stub-hole), so it reads as a hole on paper
   and on ink alike.
   ============================================================ */
.stub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.stub {
  --stub-hole: var(--paper);
  display: flex; background: var(--cream);
  border: 3px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--hard);
  text-decoration: none; color: var(--ink); position: relative;
  transition: transform 0.12s;
}
.stub:hover { transform: translate(-2px, -2px) rotate(-0.4deg); }
.stub::before, .stub::after {
  content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: var(--stub-hole); top: 50%; transform: translateY(-50%); z-index: 2;
}
.stub::before { left: -14px; }
.stub::after  { right: -14px; }
.arcade-section--dark .stub, .hero .stub { --stub-hole: var(--ink); }
.arcade-section--light .stub, .arcade-section--white .stub { --stub-hole: var(--cream); }
.arcade-section--gold .stub { --stub-hole: var(--gold); }

.stub__date {
  flex-shrink: 0; width: 78px; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px 0; position: relative;
  border-right: 2px dashed var(--ink-12);
}
.stub__mo { font-family: var(--display); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.stub__day { font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1; margin-top: 3px; }

.stub__body { flex: 1; padding: 14px 18px 14px 20px; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.stub__name { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.05; color: var(--ink); }
.stub__venue { font-size: 0.82rem; color: var(--muted); }
.stub__badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }


/* ============================================================
   16  POSTER CARDS
   The mockup's poster: the art in a square frame with a 3px ink
   border and the two-colour riso offset; the title and meta sit
   under it on the band itself, not on a card. Hover lifts and
   tilts the whole thing a degree. Same class names as before, so
   Ghostlight's grid and [arcade_shows_grid] pick this up as-is
   (its own shows-grid.css loads first; this wins).
   ============================================================ */
.poster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 22px; }

.poster {
  display: flex; flex-direction: column; background: transparent;
  border-radius: 0; overflow: visible; box-shadow: none;
  text-decoration: none; color: var(--ink); position: relative;
  transition: transform 0.15s;
}
.poster:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: none; }
.poster__link { border-radius: 0; overflow: visible; }

/* Square frame. `contain` shows the whole poster: the square ones (nearly all
   of them) fill it exactly, and taller art letterboxes against the blurred
   stand-in instead of losing its ends. Keep in step with the copy in
   ghostlight/assets/css/shows-grid.css. */
.poster__img {
  position: relative; aspect-ratio: 1 / 1;
  background-color: var(--ink-2);
  border: 3px solid var(--ink); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--riso);
  display: flex; align-items: flex-end; padding: 14px;
  /* Safari does not clip absolutely positioned children to a rounded
     overflow:hidden box, so the blurred, darkened stand-in below (inset -8%)
     poked out at the four corners as dark squares on iPhone (Ryan's
     screenshot, 2026-09-05). clip-path clips everything, border included,
     to the same rounded rect; isolation forces the compositing layer that
     makes Safari honour it. */
  clip-path: inset(0 round var(--r-lg));
  isolation: isolate;
}
.poster__img-fill {
  position: absolute; inset: -8%; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(22px) brightness(0.62) saturate(1.15);
}
.poster__img-art {
  position: absolute; inset: 0; z-index: 1;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
/* As a real <img> (poster wall, Ghostlight grid since 2026-09-05): same box, lazy-loaded, srcset-sized. */
img.poster__img-art { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.poster__img::before { content: none; }
.poster__img::after  { content: none; }
.poster__img-title {
  position: relative; z-index: 4;
  font-family: var(--display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--gold); line-height: 0.95;
  text-shadow: 2px 2px 0 var(--ink);
}
.poster__body {
  padding: 18px 6px 0 !important; text-align: left; position: relative; background: transparent;
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.poster__body::before { content: none; }
.poster__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.poster__name { font-family: var(--display); font-weight: 800; font-size: 1.25rem; text-transform: none; letter-spacing: -0.01em; color: var(--ink); line-height: 1.05; }
.poster__cta { padding: 14px 6px 0; }
.poster__cta .btn { width: 100%; }
.arcade-section--dark .poster__name { color: var(--paper); }
.arcade-section--dark .poster__meta { color: rgba(255, 246, 227, 0.65); }


/* ============================================================
   17  ACADEMY / COLOR-BLOCK FEATURE
   ============================================================ */
.feature-block {
  background: var(--pink); border-radius: var(--r-xl);
  overflow: hidden; position: relative; box-shadow: var(--shadow-dark);
}
.feature-block::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 8px 8px; pointer-events: none;
}
.feature-block::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--volt), #fff, var(--volt));
}
.feature-block__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.1fr; }
.feature-block__left { padding: 52px 44px; display: flex; flex-direction: column; justify-content: center; }
.feature-block__left .eyebrow { color: var(--volt); }
.feature-block__left h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 3.2vw, 38px);
  text-transform: uppercase; color: #fff; line-height: 1.02; margin: 10px 0 14px;
}
.feature-block__left p { color: rgba(255,255,255,0.82); font-size: 15px; max-width: 320px; margin-bottom: 24px; line-height: 1.68; }
.feature-block__right { padding: 34px 36px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }

.level-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.13);
  transition: transform 0.18s, background 0.18s; cursor: default;
}
.level-row:hover { transform: translateX(5px); background: rgba(255,255,255,0.22); }
.level-row__badge {
  width: 38px; height: 38px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.lv1 .level-row__badge { color: var(--l1); }
.lv2 .level-row__badge { color: var(--l2); }
.lv3 .level-row__badge { color: var(--l3); }
.lv4 .level-row__badge { color: var(--l4); }
.level-row__text { font-family: var(--display); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; }

.feature-block--purple { background: var(--purple-deep); }
.feature-block--purple::after { background: linear-gradient(90deg, var(--pink), var(--volt)); }
.feature-block--dark { background: var(--ink); }
.feature-block--dark::after { background: linear-gradient(90deg, var(--pink), var(--blue), var(--purple), var(--volt)); }


/* ============================================================
   18  CLASS CARDS — FULL (legacy roster markup)
   The pre-redesign .arcade-class-card / .acc-* card. Still
   rendered wherever the classes redesign is off; the redesign's
   .arc-klass cards live in arcade-content-manager/assets/front.css.
   Retokenized: cream card, 3px ink border, hard shadow, header
   band in the level colour.
   ============================================================ */
.arcade-class-card { background: var(--cream); border: 3px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 20px; box-shadow: var(--hard); position: relative; }
.arcade-class-card .acc-header { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 3px solid var(--ink); }
.arcade-class-card .acc-level { background: var(--ink); color: var(--paper); font-family: var(--display); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.35em 0.7em; border-radius: 999px; flex-shrink: 0; }
.arcade-class-card .acc-title { color: #fff; font-family: var(--display); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.arcade-class-card .acc-body { display: flex; gap: 16px; padding: 16px; align-items: flex-start; }
.arcade-class-card .acc-instructor { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; }
.arcade-class-card .acc-avatar { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.1rem; background-size: cover; background-position: center top; flex-shrink: 0; background-color: var(--gold); color: var(--ink); }
.arcade-class-card .acc-instructor-name { font-size: 0.72rem; color: var(--muted); text-align: center; font-weight: 600; line-height: 1.3; }
.arcade-class-card .acc-content { flex: 1; min-width: 0; }
.arcade-class-card .acc-info-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.arcade-class-card .acc-info-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.85rem; line-height: 1.4; }
.arcade-class-card .acc-info-label { font-family: var(--display); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); min-width: 80px; flex-shrink: 0; }
.arcade-class-card .acc-tag { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 2px solid var(--ink); }
.arcade-class-card .acc-price-regular { font-family: var(--display); font-size: 1rem; font-weight: 800; color: var(--ink); }
.arcade-class-card .acc-price-earlybird { display: inline-block; font-size: 0.78rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; border: 2px solid var(--ink); background: var(--volt); color: var(--ink); }
.arcade-class-card .acc-description { font-size: 0.92rem; color: var(--ink-80); line-height: 1.6; margin: 0 0 12px; }
.arcade-class-card .acc-button { display: inline-block; font-family: var(--display); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; padding: 0.7em 1.3em; border-radius: 999px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); color: #fff; transition: transform 0.12s, box-shadow 0.12s; }
.arcade-class-card .acc-button:hover { opacity: 1; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
/* Center the Register button. The legacy blob sets .acc-button{display:inline-block!important},
   so this needs !important + the body-prefix specificity to win. */
body.wp-child-theme-arcade-child .arcade-class-card .acc-button { display: block !important; width: -moz-fit-content !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; margin-top: 14px !important; }

.class-level-1 .acc-header { background: var(--l1); }
.class-level-1 .acc-avatar { background-color: var(--l1-bg); color: var(--l1-ink); }
.class-level-1 .acc-tag    { background: var(--l1-bg); color: var(--l1-ink); }
.class-level-1 .acc-button { background: var(--l1); }

.class-level-2 .acc-header { background: var(--l2); }
.class-level-2 .acc-avatar { background-color: var(--l2-bg); color: var(--l2-ink); }
.class-level-2 .acc-tag    { background: var(--l2-bg); color: var(--l2-ink); }
.class-level-2 .acc-button { background: var(--l2); }

.class-level-3 .acc-header { background: var(--l3); }
.class-level-3 .acc-avatar { background-color: var(--l3-bg); color: var(--l3-ink); }
.class-level-3 .acc-tag    { background: var(--l3-bg); color: var(--l3-ink); }
.class-level-3 .acc-button { background: var(--l3); }

.class-level-4 .acc-header { background: var(--l4); }
.class-level-4 .acc-avatar { background-color: var(--l4-bg); color: var(--l4-ink); }
.class-level-4 .acc-tag    { background: var(--l4-bg); color: var(--l4-ink); }
.class-level-4 .acc-button { background: var(--l4); }

/* A "Featured" corner ribbon + highlight ring, an enrollment-status pill in
   the header, and status-aware buttons. The card is overflow:hidden, so the
   rotated ribbon is clipped into a clean corner banner. */
.arcade-class-card.is-featured { box-shadow: 0 0 0 3px var(--volt), var(--hard); }
.arcade-class-card .acc-ribbon {
  position: absolute; top: 12px; right: -38px; z-index: 3;
  background: var(--volt); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 0.68rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 44px; transform: rotate(45deg);
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.arcade-class-card .acc-status {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--display); font-weight: 800; font-size: 0.68rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.35em 0.7em; border-radius: 999px; border: 2px solid var(--ink);
}
.arcade-class-card .acc-status--soldout  { background: var(--ink); color: var(--volt); }
.arcade-class-card .acc-status--waitlist { background: var(--gold); color: var(--ink); }
body.wp-child-theme-arcade-child .arcade-class-card .acc-button--soldout {
  background: var(--ink) !important; color: var(--muted) !important; cursor: default; box-shadow: none;
}
.arcade-class-card .acc-button--soldout:hover { opacity: 1; transform: none; }
body.wp-child-theme-arcade-child .arcade-class-card .acc-button--waitlist {
  background: var(--gold) !important; color: var(--ink) !important;
}

/* Featured badge for people cards (instructor grid, staff & board). Sits in
   the flow above the avatar as a tilted volt chip; the avatar's offset shadow
   goes volt too (see §49 / §23 / §24). */
.card-featured-badge {
  display: inline-block; position: static; z-index: 3;
  background: var(--volt); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 0.66rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.35em 0.7em; border-radius: 999px; border: 2px solid var(--ink);
  transform: rotate(-3deg); margin: 0 0 8px; pointer-events: none;
}


/* ============================================================
   19  CLASS CARDS — COMPACT
   ============================================================ */
.class-compact {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: 14px 18px; border-left: 5px solid var(--l1); margin-bottom: 12px;
  text-decoration: none; color: var(--ink);
  transition: transform 0.18s, box-shadow 0.18s;
}
.class-compact:hover { transform: translateX(4px); box-shadow: var(--shadow-lift); }
.class-compact--l1 { border-left-color: var(--l1); }
.class-compact--l2 { border-left-color: var(--l2); }
.class-compact--l3 { border-left-color: var(--l3); }
.class-compact--l4 { border-left-color: var(--l4); }
.class-compact__avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 15px; background: var(--l1-bg); color: var(--l1-ink); background-size: cover; background-position: center top; }
.class-compact__main { flex: 1; min-width: 0; }
.class-compact__level { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--l1); line-height: 1; margin-bottom: 3px; }
.class-compact--l2 .class-compact__level { color: var(--l2); }
.class-compact--l3 .class-compact__level { color: var(--l3); }
.class-compact--l4 .class-compact__level { color: var(--l4); }
.class-compact__name { font-family: var(--display); font-weight: 700; font-size: 16px; text-transform: uppercase; line-height: 1.1; color: var(--ink); }
.class-compact__meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.class-compact__right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.class-compact__price { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); }


/* ============================================================
   20  VIDEO SECTION
   ============================================================ */
.arcade-section--video { background: var(--ink); overflow: hidden; position: relative; color: var(--paper); }
.arcade-section--video::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 100%, rgba(255, 61, 139, 0.22), transparent 65%);
  pointer-events: none;
}
.arcade-section--video .eyebrow { color: var(--volt); }
.arcade-section--video h2, .arcade-section--video h3 { color: var(--paper); }
.video-frame { position: relative; border: 3px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--riso); aspect-ratio: 16/9; background: var(--ink-2); }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }


/* ============================================================
   21  IMAGE TREATMENTS
   ============================================================ */
.img-duotone { position: relative; overflow: hidden; border-radius: var(--r-md); }
.img-duotone::after { content: ''; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(202,39,121,0.45), rgba(107,75,196,0.35)); mix-blend-mode: color; }
.img-framed { border: 3px solid var(--pink); border-radius: var(--r-md); overflow: hidden; }
.gallery-tile { position: relative; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 1/1; background: var(--purple-deep); }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-tile:hover img { transform: scale(1.07); }
.gallery-tile__caption { position: absolute; inset: 0; background: linear-gradient(to top, rgba(29,22,38,0.75), transparent 60%); display: flex; align-items: flex-end; padding: 14px; opacity: 0; transition: opacity 0.28s; }
.gallery-tile:hover .gallery-tile__caption { opacity: 1; }
.gallery-tile__caption span { font-family: var(--display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: #fff; line-height: 1.3; }


/* ============================================================
   22  PEOPLE — INSTRUCTOR GRID
   The live rules are in §49 (the shortcode's own class names,
   instructor-card-photo / -name / -meta / -hint). This older
   BEM set (.instructor-card__photo …) matches no current markup
   and is kept only so nothing referencing it errors.
   ============================================================ */
.arcade-instructors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 28px 18px; }


/* ============================================================
   23  PEOPLE — STAFF GRID  ([arcade_staff], /about/staff)
   The mockup's people grid: a round headshot with a 3px ink
   border and a pink offset, name under it, role under that.
   The card itself is invisible — no box, no border — so the
   avatars carry the design. Body-prefixed: the legacy blob
   still styles every one of these selectors.
   ============================================================ */
body.wp-child-theme-arcade-child .team-block-title { font-family: var(--display); font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; color: var(--ink); margin: 0 0 28px; }
body.wp-child-theme-arcade-child .team-staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 30px 20px; margin-bottom: 48px; }
body.wp-child-theme-arcade-child .team-staff-card {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  padding: 0; text-align: center; cursor: pointer; transition: none;
}
body.wp-child-theme-arcade-child .team-staff-card:hover { transform: none; box-shadow: none; border-color: transparent; }
body.wp-child-theme-arcade-child .team-staff-card__avatar-wrap {
  width: 136px; height: 136px; border-radius: 50%; margin: 0 auto 12px;
  background-color: var(--gold); background-size: cover; background-position: center top;
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--pink);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: transform 0.12s;
}
body.wp-child-theme-arcade-child .team-staff-card:hover .team-staff-card__avatar-wrap { transform: rotate(-4deg) scale(1.04); }
body.wp-child-theme-arcade-child .team-staff-card.is-featured { box-shadow: none; }
body.wp-child-theme-arcade-child .team-staff-card.is-featured .team-staff-card__avatar-wrap { box-shadow: 4px 4px 0 var(--volt); }
body.wp-child-theme-arcade-child .team-staff-card__avatar-circle { font-family: var(--display); font-size: 2rem; font-weight: 800; color: var(--ink); background: none; border: 0; width: auto; height: auto; }
body.wp-child-theme-arcade-child .team-staff-card__info { padding: 0; }
body.wp-child-theme-arcade-child .team-staff-card__name { font-family: var(--display); font-size: 1.05rem; font-weight: 800; text-transform: none; letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; margin: 0; }
body.wp-child-theme-arcade-child .team-staff-card__title { font-size: 0.82rem; color: var(--muted); line-height: 1.4; margin-top: 3px; }
body.wp-child-theme-arcade-child .team-staff-card__dept { display: none; }

/* Leadership cards (older markup, kept styled in case a page still uses it). */
.team-leadership-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.team-leader-card { background: var(--cream); border-radius: var(--r-lg); overflow: hidden; border: 3px solid var(--ink); box-shadow: var(--hard); cursor: pointer; transition: transform 0.12s; }
.team-leader-card:hover { transform: translate(-2px, -2px); }
.team-leader-card__accent { height: 6px; background: var(--pink); border-bottom: 3px solid var(--ink); }
.team-leader-card__photo { height: 220px; background-color: var(--ink-2); background-size: cover; background-position: center top; position: relative; display: flex; align-items: center; justify-content: center; }
.team-leader-card__meta { padding: 14px 18px 18px; position: relative; }
.team-leader-card__role { font-family: var(--marker); font-size: 0.95rem; color: var(--pink); margin-bottom: 4px; }
.team-leader-card__name { color: var(--ink); font-family: var(--display); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }


/* ============================================================
   24  PEOPLE — BOARD GRID  ([arcade_staff], the board half)
   One cream box with an ink header strip, and inside it the
   same round-avatar people grid at a smaller size with the
   gold offset instead of pink.
   ============================================================ */
body.wp-child-theme-arcade-child .team-board-section { background: var(--cream); border-radius: var(--r-xl); overflow: hidden; border: 3px solid var(--ink); box-shadow: var(--hard); margin-bottom: 28px; }
body.wp-child-theme-arcade-child .team-board-header { background: var(--ink); padding: 14px 22px; border-bottom: 3px solid var(--ink); display: flex; align-items: center; justify-content: space-between; }
body.wp-child-theme-arcade-child .team-board-header__title { color: var(--gold); font-family: var(--display); font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
body.wp-child-theme-arcade-child .team-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px; padding: 26px 22px; }
body.wp-child-theme-arcade-child .team-board-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; cursor: pointer; padding: 0; border-radius: 0; transition: none; background: transparent; }
body.wp-child-theme-arcade-child .team-board-card:hover { background: transparent; }
body.wp-child-theme-arcade-child .team-board-card__avatar {
  width: 104px; height: 104px; border-radius: 50%;
  background-color: var(--gold); background-size: cover; background-position: center top;
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 1.5rem; font-weight: 800; color: var(--ink);
  transition: transform 0.12s;
}
body.wp-child-theme-arcade-child .team-board-card:hover .team-board-card__avatar { transform: rotate(-4deg) scale(1.04); border-color: var(--ink); box-shadow: 4px 4px 0 var(--pink); }
body.wp-child-theme-arcade-child .team-board-card.is-featured { box-shadow: none; }
body.wp-child-theme-arcade-child .team-board-card.is-featured .team-board-card__avatar { box-shadow: 4px 4px 0 var(--volt); }
body.wp-child-theme-arcade-child .team-board-card__name { font-family: var(--display); font-size: 0.95rem; font-weight: 800; text-transform: none; letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; }
body.wp-child-theme-arcade-child .team-board-card__title { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }


/* ============================================================
   25  PEOPLE — STAFF BIO MODAL  (openTeamModal)
   A cream box with a 3px ink border and the riso offset; gold
   strip on top, headshot down the left, bio in the body.
   ============================================================ */
body.wp-child-theme-arcade-child .team-modal-overlay { position: fixed; inset: 0; background: rgba(19, 12, 28, 0.78); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
body.wp-child-theme-arcade-child .team-modal-overlay.is-open { opacity: 1; pointer-events: all; }
body.wp-child-theme-arcade-child .team-modal { background: var(--cream); border: 3px solid var(--ink); border-radius: var(--r-xl); width: 100%; max-width: 600px; overflow: hidden; box-shadow: var(--riso); transform: translateY(14px) rotate(-0.5deg); transition: transform 0.2s; }
body.wp-child-theme-arcade-child .team-modal-overlay.is-open .team-modal { transform: none; }
body.wp-child-theme-arcade-child .team-modal__accent { height: 10px; background: var(--gold); border-bottom: 3px solid var(--ink); }
body.wp-child-theme-arcade-child .team-modal__top { display: flex; align-items: stretch; min-height: 180px; }
body.wp-child-theme-arcade-child .team-modal__photo { width: 190px; flex-shrink: 0; background-color: var(--gold); background-size: cover; background-position: center top; display: flex; align-items: center; justify-content: center; border-right: 3px solid var(--ink); }
body.wp-child-theme-arcade-child .team-modal__photo-initials { font-family: var(--display); font-size: 3rem; font-weight: 800; color: var(--ink); letter-spacing: 0; }
/* The legacy modal drew initials as a faint watermark over the headshot; solid ink over a face is not the same thing. */
body.wp-child-theme-arcade-child .team-modal__photo[style*="background-image"] .team-modal__photo-initials,
body.wp-child-theme-arcade-child .team-leader-card__photo[style*="background-image"] .team-leader-card__initials { display: none; }
body.wp-child-theme-arcade-child .team-modal__header { flex: 1; padding: 22px 22px 18px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; background: var(--paper); }
body.wp-child-theme-arcade-child .team-modal__close { position: absolute; top: 12px; right: 12px; background: var(--cream); border: 2px solid var(--ink); color: var(--ink); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 0 var(--ink); transition: background 0.15s; font-family: var(--body); }
body.wp-child-theme-arcade-child .team-modal__close:hover { background: var(--pink); color: var(--ink); }
body.wp-child-theme-arcade-child .team-modal__name { color: var(--ink); font-family: var(--display); font-size: 1.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.98; margin: 0; }
body.wp-child-theme-arcade-child .team-modal__title { color: var(--pink); font-family: var(--marker); font-size: 1rem; margin-top: 6px; line-height: 1.3; font-weight: 400; letter-spacing: 0; text-transform: none; }
body.wp-child-theme-arcade-child .team-modal__dept { display: none; }
body.wp-child-theme-arcade-child .team-modal__bio { padding: 20px 24px 26px; color: var(--ink-80); font-family: var(--body); font-size: 0.98rem; line-height: 1.7; max-height: 300px; overflow-y: auto; border-top: 3px solid var(--ink); font-weight: 400; letter-spacing: 0; text-transform: none; }
@media (max-width: 768px) {
  body.wp-child-theme-arcade-child .team-modal__top { flex-direction: column; }
  body.wp-child-theme-arcade-child .team-modal__photo { width: 100%; height: 220px; border-right: 0; border-bottom: 3px solid var(--ink); }
  body.wp-child-theme-arcade-child .team-modal__bio { max-height: 240px; }
}


/* ============================================================
   26  CALENDAR & LIST WIDGET
   ============================================================ */
.event-list-widget { background: var(--cream); border: 3px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--hard); }
.event-list-widget__head { background: var(--ink); color: var(--gold); font-family: var(--display); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 11px 18px; }
.event-list-widget__item { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 2px dashed var(--ink-12); text-decoration: none; color: var(--ink); transition: background 0.18s; }
.event-list-widget__item:last-child { border-bottom: none; }
.event-list-widget__item:hover { background: var(--volt); }
.event-list-widget__date { font-family: var(--display); font-weight: 800; text-align: center; flex-shrink: 0; width: 40px; line-height: 1; }
.event-list-widget__date .d { font-size: 1.4rem; display: block; }
.event-list-widget__date .m { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink); display: block; margin-top: 2px; }
.event-list-widget__name { font-family: var(--display); font-weight: 800; font-size: 0.98rem; flex: 1; letter-spacing: -0.01em; line-height: 1.15; }
.event-list-widget__time { font-size: 0.8rem; color: var(--muted); flex-shrink: 0; }


/* ============================================================
   27  EVENTS ARCHIVE
   ============================================================ */
.tribe-events-pro-photo__list { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.tribe-events-pro-photo__event-article { border-radius: var(--r-md); overflow: hidden; border: 2px solid rgba(202,39,121,0.18); box-shadow: var(--shadow-sm); background: var(--surface); transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s; }
.tribe-events-pro-photo__event-article:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: rgba(202,39,121,0.50); }
.tribe-events-pro-photo__event-image, .tribe-events-pro-photo__event-image-link { width: 100%; height: 220px; overflow: hidden; display: block; }
.tribe-events-pro-photo__event-image img, .tribe-events-pro-photo__event-image-link img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.4s ease; }
.tribe-events-pro-photo__event-article:hover img { transform: scale(1.06); }
.tribe-events-pro-photo__event-datetime { display: inline-block; background: rgba(202,39,121,0.09); color: var(--pink); font-family: var(--display); font-size: 0.85em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 14px; border-radius: 20px; margin-bottom: 6px; }
.tribe-events-pro-photo__event-title,
.tribe-events-pro-photo__event-title a { font-family: var(--display); font-weight: 700; font-size: 1.05em; color: var(--ink); text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; transition: color 0.18s; display: block; margin-top: 4px; }
.tribe-events-pro-photo__event-title a:hover { color: var(--pink); }
.tribe-events-pro-photo__event-cost { display: none; }


/* ============================================================
   28  SINGLE EVENT PAGE
   ============================================================ */
.single-event-card { background: var(--surface); border: 2px solid rgba(202,39,121,0.24); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); margin: 0 auto 24px; max-width: 1080px; display: flex; flex-direction: row; align-items: stretch; }
.single-event-card__left { width: 300px; flex-shrink: 0; background: linear-gradient(160deg, var(--paper), var(--paper-2)); border-right: 2px solid rgba(107,75,196,0.14); padding: 20px; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; }
.single-event-card__header-band { background: linear-gradient(to right, var(--pink), var(--purple-soft)); color: var(--ink); font-family: var(--display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.17em; padding: 8px 16px; margin: -20px -20px 0 -20px; line-height: 1.2; }
.single-event-card__poster { border: 2px solid var(--pink); border-radius: var(--r-md); overflow: hidden; }
.single-event-card__poster img { width: 100%; height: auto; display: block; }
.single-event-card__meta-block { background: linear-gradient(to right, var(--l1-bg), var(--l4-bg)); border: 1px solid rgba(202,39,121,0.20); border-left: 4px solid var(--pink); border-radius: var(--r-sm); padding: 10px 12px; }
.single-event-card__meta-label { font-family: var(--display); font-size: 9px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--pink); margin-bottom: 3px; display: block; }
.single-event-card__meta-value { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.single-event-card__right { flex: 1; padding: 24px 28px; display: flex; flex-direction: column; box-sizing: border-box; }
.single-event-card__right::before { content: ''; display: block; width: 100%; height: 4px; background: linear-gradient(to right, var(--pink), var(--blue), rgba(107,75,196,0.14)); border-radius: 2px; margin-bottom: 20px; flex-shrink: 0; }
.single-event-card__right p { font-size: 16px; line-height: 1.8; color: #333; margin-bottom: 14px; }


/* ============================================================
   29  FOOTER
   ============================================================ */
.arcade-footer { background: var(--paper-2); border-top: 4px solid var(--pink); padding: 52px 0 38px; color: var(--muted); }
.arcade-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.arcade-footer__tagline { font-family: var(--display); font-weight: 700; font-size: 22px; text-transform: uppercase; color: var(--ink); line-height: 1.1; margin-bottom: 10px; }
.arcade-footer__tagline .script { font-size: 1.05em; }
.arcade-footer__address { font-size: 14px; color: var(--muted); line-height: 1.65; margin-top: 10px; }
.arcade-footer__col-title { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.arcade-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.arcade-footer__links a { font-size: 14px; color: var(--muted); transition: color 0.18s; }
.arcade-footer__links a:hover { color: var(--pink); }
.arcade-footer__social { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.arcade-footer__social a { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); transition: color 0.18s; }
.arcade-footer__social a:hover { color: var(--pink); }
.arcade-footer__bottom { border-top: 1px solid var(--ink-12); padding-top: 22px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); flex-wrap: wrap; gap: 8px; }
.arcade-footer__bottom a { color: var(--muted); transition: color 0.18s; }
.arcade-footer__bottom a:hover { color: var(--pink); }


/* ============================================================
   30  DIVI GLOBAL RESETS
   All !important flags live here and nowhere else.
   ============================================================ */
/* Excludes sections carrying one of the band variants, and the homepage
   section that wraps the hero (§47 paints that one ink) — !important always
   beats specificity regardless of selector, so a blanket rule here would
   silently override .arcade-section--light/--white/--dark/--video/--gold/
   --pink no matter how those were written. Those variants get their own
   !important background right below instead. The default band is
   TRANSPARENT: the body already paints the paper and its dot grid, so a
   Divi-built page sits on the same ground as the rest of the site — and a
   legacy page's own section background image (set inline by the builder)
   still shows, because nothing here touches background-image. */
.et_pb_section:not(.arcade-section--light):not(.arcade-section--white):not(.arcade-section--dark):not(.arcade-section--video):not(.arcade-section--gold):not(.arcade-section--pink):not(:has(.hero)) { background-color: transparent !important; }
.et_pb_section.arcade-section--light { background-color: var(--cream) !important; }
.et_pb_section.arcade-section--white { background-color: var(--cream) !important; }
.et_pb_section.arcade-section--dark  { background-color: var(--ink) !important; }
.et_pb_section.arcade-section--video { background-color: var(--ink) !important; }
.et_pb_section.arcade-section--gold  { background-color: var(--gold) !important; background-image: var(--dots-gold) !important; background-size: 14px 14px !important; }
.et_pb_section.arcade-section--pink  { background-color: var(--pink) !important; }

/* The legacy "v6.3" Custom CSS (WordPress's own Additional CSS field,
   wp_get_custom_css_post() — separate from this stylesheet, loads after
   it) has its own blanket ".et_pb_section{background-color:#fdf9fb!important}"
   rule. Same specificity + same !important as the plain rule above, so
   source order decides the tie — and that blob wins it on every page
   except the ones already covered by the .arcade-section variants above.
   `body.wp-child-theme-arcade-child` is a real, always-present class (WP
   core adds it automatically whenever a child theme is active) —
   anchoring to it adds one extra class of specificity, which wins
   regardless of load order, without touching or deleting the legacy CSS. */
body.wp-child-theme-arcade-child .et_pb_section:not(.arcade-section--light):not(.arcade-section--white):not(.arcade-section--dark):not(.arcade-section--video):not(.arcade-section--gold):not(.arcade-section--pink):not(:has(.hero)) { background-color: transparent !important; }
body.wp-child-theme-arcade-child .et_pb_section.arcade-section--light { background-color: var(--cream) !important; background-image: none !important; }
body.wp-child-theme-arcade-child .et_pb_section.arcade-section--white { background-color: var(--cream) !important; background-image: none !important; }
body.wp-child-theme-arcade-child .et_pb_section.arcade-section--dark  { background-color: var(--ink) !important; background-image: var(--dots-dark) !important; background-size: 22px 22px !important; }
body.wp-child-theme-arcade-child .et_pb_section.arcade-section--video { background-color: var(--ink) !important; }
body.wp-child-theme-arcade-child .et_pb_section.arcade-section--gold  { background-color: var(--gold) !important; background-image: var(--dots-gold) !important; background-size: 14px 14px !important; }
body.wp-child-theme-arcade-child .et_pb_section.arcade-section--pink  { background-color: var(--pink) !important; background-image: none !important; }
.et_pb_text_inner, .et_pb_text_inner p { font-family: var(--body) !important; color: var(--ink) !important; }
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3, .et_pb_text h4 { font-family: var(--display) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: -0.02em !important; line-height: 0.98 !important; }
/* Headings needed the same colour treatment the body copy gets. Divi's own
   `.et_pb_bg_layout_dark h2 {color:#fff}` ships in a later inline <style>, so at
   equal specificity it won — and any section still carrying that flag rendered
   its headings white. On /about/staff that meant white-on-paper: invisible.
   Default to ink; the theme's genuinely dark sections opt back into paper. */
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3, .et_pb_text h4 { color: var(--ink) !important; }
.arcade-section--dark .et_pb_text h1, .arcade-section--dark .et_pb_text h2,
.arcade-section--dark .et_pb_text h3, .arcade-section--dark .et_pb_text h4,
.arcade-section--video .et_pb_text h1, .arcade-section--video .et_pb_text h2,
.arcade-section--video .et_pb_text h3, .arcade-section--video .et_pb_text h4 { color: var(--paper) !important; }
/* /about/staff/ — the team section's heading takes the marker face. Scoped by
   the grid it introduces rather than a page id, so it survives the page being
   rebuilt or renumbered. The marker is a single weight and reads badly in
   caps, so the uppercase treatment above is lifted here. */
.et_pb_section:has(.team-staff-grid) .et_pb_text h2 {
  font-family: var(--marker) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  color: var(--pink) !important;
  transform: rotate(-1.5deg);
  display: inline-block;
}
/* Divi's own buttons take the site's pill: gold, 3px ink border, hard shadow. */
.et_pb_button::after { display: none !important; }
.et_pb_button {
  font-family: var(--display) !important; font-weight: 800 !important; letter-spacing: 0.01em !important; text-transform: uppercase !important;
  border-radius: 999px !important; border: 3px solid var(--ink) !important;
  background: var(--gold) !important; color: var(--ink) !important;
  box-shadow: var(--hard) !important; padding: 0.8em 1.35em !important;
  transition: transform 0.12s, box-shadow 0.12s !important;
}
.et_pb_button:hover { transform: translate(-2px, -2px); box-shadow: var(--hard-lg) !important; padding: 0.8em 1.35em !important; }
.arcade-section--dark .et_pb_text_inner,
.arcade-section--dark .et_pb_text_inner p { color: rgba(255, 246, 227, 0.75) !important; }
.arcade-section--dark .et_pb_text h1,
.arcade-section--dark .et_pb_text h2,
.arcade-section--dark .et_pb_text h3 { color: var(--paper) !important; }

/* Theme Builder full-bleed fix */
.et-db #et-boc .et-l--header,
.et-db #et-boc .et-l--header .et_pb_section { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; }
.et-db #et-boc .et-l--header .et_pb_row { width: 100% !important; max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; }
.et-db #et-boc .et-l--header .et_pb_column,
.et-db #et-boc .et-l--header .et_pb_module,
.et-db #et-boc .et-l--header .et_pb_code_inner { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; }


/* ============================================================
   31  RESPONSIVE — TABLET (768–1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-panel { grid-template-columns: 1fr; }
  .hero-right { min-height: 300px; }
  .hero-left { padding: 32px 28px; }
  .stub-grid   { grid-template-columns: 1fr 1fr; }
  .poster-grid { grid-template-columns: 1fr 1fr; }
  .feature-block__grid { grid-template-columns: 1fr; }
  .feature-block__left  { padding: 36px 32px 20px; }
  .feature-block__right { padding: 16px 32px 36px; }
  .team-leadership-grid { grid-template-columns: repeat(3,1fr); }
  .team-staff-grid      { grid-template-columns: repeat(3,1fr); }
  .arcade-instructors-grid { grid-template-columns: repeat(3,1fr); }
  .tribe-events-pro-photo__list { grid-template-columns: repeat(2,1fr); }
  .single-event-card { flex-direction: column; }
  .single-event-card__left { width: 100%; border-right: none; border-bottom: 2px solid rgba(107,75,196,0.14); }
  .arcade-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}


/* ============================================================
   32  RESPONSIVE — MOBILE (<=767px)
   ============================================================ */
@media (max-width: 767px) {
  :root { --pad-section: 44px; --pad-section-sm: 24px; }
  .arcade-hero { padding: 20px 0 16px; }
  .hero-panel { grid-template-columns: 1fr; border-radius: var(--r-lg); }
  .hero-left { padding: 28px 22px; }
  .hero-left__headline { font-size: 36px; }
  .hero-right { min-height: 260px; }
  .stub-grid   { grid-template-columns: 1fr; }
  /* Two up on phones, like .team-staff-grid below. One full-width square
     poster per row would be ~350px tall — one show per screen and a very long
     scroll. Paired, each card is ~160px: smaller than the old 200px strip it
     replaced, and the whole poster still fits with no crop and no side bars. */
  .poster-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .poster__body { padding: 16px 12px 18px !important; gap: 7px; }
  .poster__name { font-size: 14px; }
  .poster__cta  { padding: 0 12px 16px; }
  .poster .btn-pink { padding: 10px 12px; font-size: 11px; letter-spacing: 0.08em; }
  .poster .pill { font-size: 9px; padding: 3px 9px; }
  /* 22px of blur on a 161px card is proportionally twice what it is on a
     379px one — it turns to mush. Scale it with the card. */
  .poster__img-fill { filter: blur(11px) brightness(0.62) saturate(1.15); }
  .feature-block__grid { grid-template-columns: 1fr; }
  .feature-block__left  { padding: 28px 24px 16px; }
  .feature-block__right { padding: 12px 24px 28px; }
  .team-leadership-grid { grid-template-columns: 1fr; }
  .team-staff-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .arcade-instructors-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .tribe-events-pro-photo__list { grid-template-columns: 1fr; }
  .single-event-card { flex-direction: column; }
  .single-event-card__left { width: 100%; border-right: none; border-bottom: 2px solid rgba(107,75,196,0.14); padding: 16px; }
  .single-event-card__right { padding: 16px; }
  .arcade-class-card .acc-body { flex-direction: column; align-items: center; }
  .arcade-footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .arcade-footer__bottom { flex-direction: column; text-align: center; }
  .page-hero { padding: 26px 0; }

  /* arc- Code module responsive */
  .arc-hero-grid { grid-template-columns: 1fr !important; }
  .arc-fc-grid   { grid-template-columns: 1fr !important; }
  .arc-poster-grid { grid-template-columns: 1fr 1fr !important; }
  .arc-map-inner { grid-template-columns: 1fr !important; }
  .arc-footer-top { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .arc-nav-links { display: none !important; }
  .arc-hero-h1 { font-size: 40px !important; }
}


/* ============================================================
   33  REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* .topbar-track is the ticker that actually ships — the two legacy
     ticker class names below predate it and match nothing, so the marquee
     was still scrolling for anyone who asked it not to. */
  .topbar-track,
  .arcade-ticker__track,
  .hero-slide,
  .arc-bulb,
  .arc-ticker-track { animation: none !important; transition: none !important; }
  .stub, .poster, .team-leader-card, .team-staff-card,
  .arcade-instructor-card, .class-compact, .gallery-tile img, .level-row { transition: none !important; }
}


/* ============================================================
   34  HOMEPAGE — FULL-WIDTH SUPPRESSION
   Hides the Divi theme's own header and footer on the static
   front page only. The .home class is added to <body> by
   WordPress automatically when a static page is set as the
   homepage in Settings → Reading.
   ============================================================ */

/* Hide the Divi theme header — #top-header is Divi's classic-theme
   secondary menu bar (social links), a separate element from
   #main-header that was missed here until 2026-07-12 and rendered
   above the homepage's own content as a stray unstyled link bar. */
.home #top-header,
.home #main-header,
.home .et-l--header { display: none !important; }

/* Hide the Divi theme footer */
.home #main-footer,
.home .et-l--footer { display: none !important; }

/* Remove Divi's top padding that normally clears its own sticky/classic
   header. Was scoped to .home only from when the homepage had its own
   separate header — missed when header.php/footer.php were later unified
   sitewide, so every OTHER page kept Divi's real, still-active
   `.et_fixed_nav.et_show_nav.et_secondary_nav_enabled #page-container
   {padding-top:111px}` (those body classes are present on every page,
   not just home) with nothing to actually offset it, since this theme's
   .topbar/.nav were never position:fixed to begin with — a real ~111px
   dead gap at the top of every non-homepage page. Un-scoped so it applies
   everywhere; harmless overlap with the .home-specific rule above. */
#page-container,
#et-main-area { padding-top: 0 !important; }

/* Ensure the Code module content stretches fully edge-to-edge */
.home .et_pb_section,
.home .et_full_width_page .et_pb_section { padding: 0 !important; }

.home .et_full_width_page #main-content .container,
.home #main-content .container { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }

.home .et_pb_code_inner { padding: 0 !important; }


/* ============================================================
   35  v7.1 HOMEPAGE CODE MODULE SUPPORT
   Scoped to .arcade-page so nothing bleeds into other pages.
   These back-stop any Divi inheritance that might leak into
   the arc- prefixed Code module markup.
   ============================================================ */

.arcade-page { all: initial; display: block; }

/* Prevent Divi's body font from leaking in. Set on the wrapper only and let
   it inherit — the old `.arcade-page *` version forced the body face onto
   every descendant at class specificity, which silently beat the eyebrow,
   chip and marker-face rules on the About/Info pages. */
.arcade-page { font-family: var(--body); }
.arcade-page * { box-sizing: border-box; }

/* Sticky nav needs z-index above Divi's own admin bar */
.arcade-page .arc-nav { z-index: 9999 !important; }

/* Make sure the marquee board shadow isn't clipped */
.home .et_pb_code_inner,
.home .et_pb_column { overflow: visible !important; }


/* ============================================================
   36  NAV — LIVE STATUS PILL
   The "Open tonight" / "The weekend" pill next to the brand
   mark. Feeds from [arcade_open_tonight]. A volt chip with a
   pink dot, like the mockup's sticker.
   ============================================================ */
.pill-live { background: var(--volt); color: var(--ink); cursor: pointer; transform: rotate(-2deg); box-shadow: 2px 2px 0 var(--ink); }
.pill-live:hover { transform: rotate(-2deg) translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.pill-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); border: 1.5px solid var(--ink); display: inline-block; }


/* ============================================================
   37  HERO — PHOTO PIN-FRAME (v12.1)
   The "pinned photo" on the right side of the hero — a cream
   mat with a 3px ink border and the riso offset, a strip of
   pink tape, a dashed postage stamp, and a Ken-Burns slider.
   ============================================================ */
.pin-frame {
  background: var(--cream); padding: 12px 12px 40px;
  border: 3px solid var(--ink); border-radius: 6px;
  box-shadow: var(--riso);
  transform: rotate(-1.5deg);
  position: relative; width: 100%; max-width: 400px; margin: 0 auto;
}
.pin-frame::before {
  content: ''; position: absolute; top: -12px; left: 50%;
  width: 80px; height: 24px; background: var(--pink); border: 2px solid var(--ink);
  transform: translateX(-50%) rotate(-2deg); z-index: 5;
}
.hero-photo { position: relative; overflow: hidden; aspect-ratio: 4/5; border: 2px solid var(--ink); background: var(--ink-2); }
.photo-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.3s ease; background-size: cover; background-position: center; }
.photo-slide.active { opacity: 1; animation: arcade-kenburns 6s ease-out forwards; }
@keyframes arcade-kenburns { from { transform: scale(1.04); } to { transform: scale(1.1); } }
.pin-caption { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-family: var(--marker); font-size: 1.05rem; color: var(--ink); }
.photo-dots { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; gap: 6px; }
.photo-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); border: 1.5px solid var(--ink); }
.photo-dot.active { background: var(--volt); }
.stamp {
  position: absolute; top: -18px; right: -22px; width: 88px; height: 88px;
  border-radius: 50%; border: 3px dashed var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(-14deg); background: var(--volt); z-index: 6;
  box-shadow: 3px 3px 0 var(--ink);
}
.stamp span { font-family: var(--marker); font-size: 0.8rem; letter-spacing: 0; text-transform: none; text-align: center; line-height: 1.1; color: var(--ink); }
.stamp svg { width: 15px; height: 15px; margin-bottom: 2px; color: var(--ink); }


/* ============================================================
   38  TEAR DIVIDER
   Dashed perforation between sections, e.g. hero -> "Next up".
   ============================================================ */
.tear { display: flex; align-items: center; gap: 10px; max-width: var(--wrap); margin: 20px auto -36px; padding: 6px clamp(16px, 4vw, 40px) 0; }
.tear::before, .tear::after { content: ''; flex: 1; border-top: 3px dashed var(--ink-40); }
.tear-eye { width: 11px; height: 11px; border-radius: 50%; border: 3px solid var(--ink); background: var(--volt); flex-shrink: 0; }


/* ============================================================
   39  "NEXT UP" — FEATURED ROTATOR + LIST
   The homepage show rotator: one large featured card (rf-*)
   synced to a scrollable list of stub-rows (sr-*). Built by
   [arcade_shows]. Distinct from the hero's own photo rotator
   (§10/§37) and from the plain static grid in §15 (stub-grid) —
   that one still powers non-homepage "upcoming shows" blocks.
   ============================================================ */
.rotator-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: start; }

.rotator-list { display: flex; flex-direction: column; gap: 14px; max-height: 680px; overflow-y: auto; padding: 4px 10px 12px 4px; scroll-behavior: smooth; scrollbar-width: thin; }
/* Stub rows: the mockup's ticket stub — cream, 3px ink border, hard shadow. */
.stub-row {
  position: relative; display: flex; background: var(--cream);
  border: 3px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--hard-sm);
  overflow: hidden; cursor: pointer; text-decoration: none; color: var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
  flex-shrink: 0;
}
.stub-row:hover { transform: translate(-2px, -2px); box-shadow: var(--hard); }
.stub-row.active { box-shadow: 6px 6px 0 var(--pink); }
.sr-date {
  flex-shrink: 0; width: 68px; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 0; position: relative;
  border-right: 3px solid var(--ink);
}
.sr-date::after { content: none; }
.sr-mo { font-family: var(--display); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; }
.sr-day { font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.sr-thumb { flex-shrink: 0; width: 68px; background-size: cover; background-position: center; background-color: var(--ink-2); border-right: 2px dashed var(--ink-12); }
.sr-body { flex: 1; min-width: 0; padding: 16px 12px 16px 16px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.sr-name { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.1; }
.sr-meta { font-size: 0.8rem; color: var(--muted); }

/* "Show details" arrow — the one part of a stub row that navigates.
   Clicking anywhere else on the row only focuses it in the feature card. */
.sr-details {
  align-self: center; flex-shrink: 0;
  width: 36px; height: 36px; margin-right: 14px; margin-left: 4px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--paper);
  color: var(--ink); text-decoration: none;
  transition: transform 0.15s, background 0.15s, color 0.15s;
}
.sr-details svg { width: 15px; height: 15px; display: block; }
.stub-row:hover .sr-details { background: var(--volt); transform: translateX(2px); }
.sr-details:hover, .sr-details:focus-visible { background: var(--pink); color: var(--ink); }

/* Polaroid treatment: the poster sits inside an even cream frame and the
   "chin" below (title/meta/CTA) is part of the same card, with the riso
   offset underneath. */
.rotator-feature {
  position: relative; background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--riso);
  overflow: hidden; padding: 14px 14px 0;
}
.rf-art {
  position: relative; aspect-ratio: 16/10; width: 100%;
  background-size: cover; background-position: center; transition: background 0.3s;
  background-color: var(--ink-2);
  border: 2px solid var(--ink); border-radius: 8px;
}

.rf-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: background 0.15s, transform 0.15s;
}
.rf-nav:hover { background: var(--volt); }
.rf-nav-prev { left: 12px; }
.rf-nav-next { right: 12px; }

.rf-tab {
  position: absolute; top: 14px; left: -8px; background: var(--ink); color: var(--volt);
  font-family: var(--marker); font-size: 0.85rem; letter-spacing: 0;
  padding: 5px 12px 5px 16px; transform: rotate(-3deg); z-index: 5;
}
.sale-ribbon {
  position: absolute; top: 16px; right: -40px; width: 158px; padding: 6px 0; text-align: center;
  transform: rotate(45deg); font-family: var(--display); font-weight: 800; font-size: 0.7rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); z-index: 5; display: none;
}
.sale-ribbon.purple { background: var(--purple); }
.sale-ribbon.pink   { background: var(--pink); }
.sale-ribbon.ink    { background: var(--ink); color: var(--volt); }
/* The polaroid chin. Every piece gets a reserved height so the card
   stays the exact same size while shows rotate — no page reflow. */
.rf-body { padding: 16px 6px 20px; position: relative; }
.rf-title {
  font-family: var(--display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em;
  text-transform: uppercase; line-height: 0.98; margin: 12px 0 4px;
  min-height: 53px; /* two lines — one-line titles reserve the same space */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rf-meta {
  font-family: var(--display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
  min-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rf-foot { display: flex; align-items: center; gap: 14px; min-height: 44px; flex-wrap: wrap; }


/* ============================================================
   40  FEATURE-COLOR BLOCK
   The homepage Academy block (fc-left copy + fc-right level
   ladder) and the donate/support block (feature-color.support +
   support-inner, single centred column). Academy is the mockup's
   gold dot-grid band; donate is the pink band.
   ============================================================ */
.feature-color {
  background: var(--gold); background-image: var(--dots-gold); background-size: 14px 14px;
  color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--r-xl); overflow: hidden; position: relative;
  box-shadow: var(--hard);
}
.fc-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.15fr; }
.fc-left { padding: 46px 42px; }
.fc-logo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; margin-bottom: 16px; border: 3px solid var(--ink); }
.fc-logo img { width: 100%; height: 100%; object-fit: cover; }
.fc-left .eyebrow { color: var(--ink); }
.fc-left h3 { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 4.5vw, 3.6rem); letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); margin: 6px 0 14px; line-height: 0.95; }
.fc-left p { color: var(--ink-80); max-width: 36ch; margin-bottom: 22px; font-size: 1.05rem; }
.fc-left .btn-white { background: var(--pink); color: var(--ink); }
.fc-right { padding: 32px 36px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }

.ct-tile { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: var(--r-md); background: var(--cream); border: 2px solid var(--ink); }
.ct-badge { width: 40px; height: 40px; border-radius: var(--r-sm); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 0.8rem; flex-shrink: 0; color: #fff; }
.ct-badge.b-pink   { background: var(--pink); }
.ct-badge.b-purple { background: var(--purple); }
.ct-badge.b-blue   { background: var(--blue); }
.ct-badge.b-orange { background: var(--orange); }
.ct-badge.b-ink    { background: var(--ink); color: var(--volt); }
.ct-main { flex: 1; min-width: 0; }
.ct-name { font-family: var(--display); font-weight: 800; font-size: 0.98rem; letter-spacing: -0.01em; color: var(--ink); }
.ct-meta { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.ct-price { font-family: var(--display); font-weight: 800; font-size: 0.95rem; color: var(--ink); flex-shrink: 0; text-align: right; }

/* Donate block: the pink band. */
.feature-color.support { background: var(--pink); background-image: none; color: var(--paper); box-shadow: var(--shadow-riso-pink); }
.support-inner { position: relative; z-index: 1; padding: 48px 42px; text-align: center; max-width: 600px; margin: 0 auto; }
.support-inner .eyebrow { color: var(--volt); justify-content: center; transform-origin: center; }
.support-inner h3 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.02em; text-transform: uppercase; color: var(--paper); margin: 8px 0 14px; line-height: 0.95; }
.support-inner p { color: rgba(255, 246, 227, 0.92); margin-bottom: 22px; font-size: 1.05rem; }
.support-inner .btn, .support-inner .btn-white { background: var(--volt); color: var(--ink); }


/* ============================================================
   41  SPOTLIGHT POSTCARDS
   Auto-scrolling row of special-series postcards, pauses on
   hover. JS gives each card a small random rotate on load.
   ============================================================ */
.spotlight-wrap { overflow: hidden; padding: 22px 0 34px; }
.spotlight-track { display: flex; gap: 34px; width: max-content; animation: arcade-spot-scroll 34s linear infinite; }
.spotlight-wrap:hover .spotlight-track { animation-play-state: paused; }
@keyframes arcade-spot-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.postcard { flex: 0 0 220px; background: var(--cream); padding: 8px 8px 12px; border: 3px solid var(--ink); border-radius: 6px; box-shadow: var(--hard-sm); text-decoration: none; color: var(--ink); display: block; }
.postcard-img { height: 130px; display: flex; align-items: flex-end; padding: 10px; background-size: cover; background-position: center; border: 2px solid var(--ink); background-color: var(--ink-2); }
.postcard-name { font-family: var(--display); font-weight: 800; font-size: 0.9rem; text-transform: uppercase; color: var(--paper); text-shadow: 2px 2px 0 var(--ink); line-height: 1; }
.postcard-cap { font-family: var(--marker); font-size: 0.95rem; color: var(--pink); text-align: center; margin-top: 8px; }


/* ============================================================
   42  VIDEO — PLAY BUTTON
   ============================================================ */
.video-play { width: 66px; height: 66px; border-radius: 50%; background: var(--pink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: flex; align-items: center; justify-content: center; }
.video-play::after { content: ''; border-left: 19px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }


/* ============================================================
   43  FOOTER  (footer.php)
   Ink footer under a thick pink rule: brand / explore / visit /
   map. Links warm off-white, volt on hover; column heads gold.
   ============================================================ */
.site-footer { background: var(--ink); color: var(--paper); border-top: 6px solid var(--pink); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; padding: 56px 0 30px; }
.f-head { font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.f-col a { display: block; font-size: 0.95rem; color: rgba(255, 246, 227, 0.85); margin-bottom: 8px; }
.f-col a:hover { color: var(--volt); }
.f-brand p { font-size: 0.95rem; color: rgba(255, 246, 227, 0.75); margin: 14px 0 16px; max-width: 34ch; }
/* The wordmark block flips on ink: gold slab, ink letters, pink offset. */
.site-footer .brand-name { background: var(--gold); color: var(--ink); box-shadow: 3px 3px 0 var(--pink); }
.site-footer .brand-sub { color: var(--paper); }
.site-footer .brand-mark { border-color: var(--paper); }
.f-socials { display: flex; gap: 10px; }
.f-socials a { width: 36px; height: 36px; border-radius: 999px; border: 2px solid rgba(255, 246, 227, 0.5); display: flex; align-items: center; justify-content: center; color: var(--paper); margin: 0; }
.f-socials a:hover { background: var(--volt); border-color: var(--volt); color: var(--ink); }
.f-socials a svg { width: 16px; height: 16px; display: block; }
.f-contact p { font-size: 0.95rem; color: rgba(255, 246, 227, 0.85); margin-bottom: 6px; }
.f-map iframe { width: 100%; height: 150px; border: 3px solid rgba(255, 246, 227, 0.35); border-radius: var(--r-lg); filter: grayscale(0.2) contrast(1.03); }
.f-logos { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 24px 0; border-top: 1px solid rgba(255, 246, 227, 0.15); }
.f-logos-label { font-family: var(--display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 246, 227, 0.6); margin-right: 6px; }
.f-logos img { height: 34px; width: auto; }
.footer-bottom { border-top: 1px solid rgba(255, 246, 227, 0.15); padding: 18px 0 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 0.82rem; color: rgba(255, 246, 227, 0.6); }
.footer-legal a { margin-left: 16px; color: rgba(255, 246, 227, 0.6); }
.footer-legal a:hover { color: var(--volt); }


/* ============================================================
   44  CONFETTI
   Click-burst pieces spawned by script.js on .js-confetti CTAs.
   ============================================================ */
.confetti-piece { position: fixed; pointer-events: none; z-index: 9999; animation: arcade-confetti-burst 0.8s ease-out forwards; }
@keyframes arcade-confetti-burst { to { transform: translate(var(--tx), var(--ty)) rotate(var(--r)); opacity: 0; } }


/* ============================================================
   45  RESPONSIVE — v12.1 SECTIONS (<=900px)
   ============================================================ */
@media (max-width: 900px) {
  .rotator-grid, .fc-grid { grid-template-columns: 1fr; }
  .support-inner { padding: 36px 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pin-frame { transform: none; max-width: 320px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .fc-left { padding: 30px 22px; }
}

/* ============================================================
   45b  "NEXT UP" LIST ON PHONES (<=700px)
   ------------------------------------------------------------
   The stub row is a desktop shape: date | poster | text | arrow,
   sitting beside a feature card it drives. On a 375px screen that
   left the text 135px — about 13 characters a line — so a long
   title wrapped to eight lines and the time broke across two
   ("6:30" / "PM"). Three separate things were wrong, and widening
   the text alone would have fixed only the visible one:

   1. Once .rotator-grid stacks, the feature card is ~430px ABOVE
      the list. Tapping a row still only focused it there, so on a
      phone the tap appeared to do nothing at all.
   2. The row is a <div> with no href — the 36px arrow was the only
      thing that navigated, which is also the smallest target.
   3. The list is its own scroll box (max-height 680 / overflow
      auto), so a thumb-scroll down the page gets captured by it.

   So on phones the row becomes an ordinary link: .sr-details keeps
   its href but collapses to nothing and stretches an invisible
   ::after over the whole row, which .stub-row's existing
   position:relative anchors. No JS, and the desktop behaviour —
   where clicking the row drives the visible feature card — is
   untouched.
   ============================================================ */
/* ============================================================
   45c  DOUBLE INSET ON PHONES (<=900px)
   ------------------------------------------------------------
   Divi's .et_pb_row is 80% wide by default. Every redesign
   section puts an .arcade-wrap inside one, and .arcade-wrap adds
   its own 24px each side — so on a 375px screen the row was 300px
   and the content 252px. A third of the screen, gone, on all six
   homepage sections at once. It reads as "everything is squeezed
   into a column", and it was the real reason the show list looked
   so cramped; the row's own layout was only half the story.

   Desktop is left alone: there 80% is wider than .arcade-wrap's
   1180px cap anyway, so the wrap is what actually sets the width.
   The header already does this same thing at line ~1166.

   Two rules, not one selector list: if a browser does not know
   :has() it drops that rule only, and the .arcade-section fallback
   still covers most sections. (Not every section carries the
   class — the homepage's first one does not.)
   ============================================================ */
@media (max-width: 900px) {
  .arcade-section .et_pb_row { width: 100%; max-width: none; }
}
@media (max-width: 900px) {
  .et_pb_row:has(.arcade-wrap) { width: 100%; max-width: none; }
}

@media (max-width: 700px) {
  /* Not a scroll box inside a scroll box. */
  .rotator-list { max-height: none; overflow-y: visible; }

  /* Slimmer date, and a squarer poster: at 68px wide and full row
     height the art was a vertical sliver of a square image. */
  .sr-date  { width: 52px; padding: 10px 0; }
  .sr-day   { font-size: 22px; }
  .sr-thumb { width: 84px; }

  /* The whole row navigates. Collapsed to zero so it costs no
     width, but still carrying the href. */
  .sr-details {
    width: 0; height: 0; margin: 0; padding: 0;
    border: 0; overflow: hidden;
  }
  .sr-details::after { content: ''; position: absolute; inset: 0; }

  .sr-body { padding: 14px 12px; }
  .sr-name { font-size: 15px; }
  /* Keep "12:00 PM" from breaking mid-value. */
  .sr-meta { font-size: 12px; text-wrap: pretty; }
}
@media (prefers-reduced-motion: reduce) {
  .spotlight-track, .photo-slide.active { animation: none !important; }
}


/* ============================================================
   46  SITEWIDE TOPBAR + NAV  (header.php)
   The ticker strip and the sticky nav under it. The homepage
   used to build its own copy of this markup; header.php is the
   single shared version now (see the note at the top of that
   file). Class names are deliberately distinct from §07's old
   .arcade-nav/.arcade-topbar system.

   Look: the arcade-platform header. Ticker in gold on ink with
   pink stars; nav on paper under a 3px ink rule; brand as the
   black block with a gold wordmark and a pink offset; links as
   pills that fill volt on hover; Shows as the gold hard-shadow
   button.
   ============================================================ */
.topbar { background: var(--ink); color: var(--gold); position: relative; z-index: 100; border-bottom: 3px solid var(--gold); }
.topbar-inner { display: flex; align-items: center; height: 38px; }
.topbar-marquee {
  flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
.topbar-track {
  display: inline-flex; gap: 36px; white-space: nowrap;
  animation: arcade-topbar-scroll 40s linear infinite;
}
/* Hover covers the mouse; .is-paused is the touch equivalent, set by the
   tap handler in script.js — a phone has no hover, so without it the links
   are both tiny and moving. */
.topbar:hover .topbar-track,
.topbar.is-paused .topbar-track { animation-play-state: paused; }
/* Paused reads as deliberate rather than broken. */
.topbar.is-paused .topbar-track .ticker-link { text-decoration: underline; text-underline-offset: 3px; }
.topbar-track span,
.topbar-track .ticker-link { font-family: var(--display); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.topbar-track .ticker-link { color: inherit; text-decoration: none; transition: color 0.15s; }
.topbar-track .ticker-link:hover { color: var(--volt); text-decoration: underline; text-underline-offset: 3px; }
.topbar-track .sep { color: var(--pink); }
@keyframes arcade-topbar-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.topbar-social { display: flex; gap: 6px; padding-left: 14px; flex-shrink: 0; }
.topbar-social a {
  width: 26px; height: 26px; border-radius: 999px;
  border: 2px solid rgba(255, 184, 28, 0.55);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.topbar-social a:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
/* Brand marks are inline SVG filled with currentColor, so they inherit the
   link colour and the hover states above need no changes. */
.topbar-social a svg { width: 13px; height: 13px; display: block; }

.nav { position: sticky; top: 0; z-index: 90; background: var(--paper); border-bottom: 3px solid var(--ink); }
/* The nav gets a wider column than page content so the six top-level items
   plus the two pills never wrap. Brand at the left, everything else pushed
   right as one cluster: status pill, Shows button, links. */
.nav .arcade-wrap { max-width: 1400px; }
.nav-inner { display: flex; align-items: center; justify-content: flex-start; gap: 14px; min-height: 74px; padding: 8px 0; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  border: 2px solid var(--ink); background: var(--ink); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 17px;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
/* The wordmark block: ink slab, gold letters, pink misregistration, a
   two-degree lean. The "comedy theater" beside it is the marker face. */
.brand-name {
  display: inline-block;
  font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em;
  text-transform: uppercase; line-height: 1;
  background: var(--ink); color: var(--gold);
  padding: 0.15em 0.45em; border-radius: 8px;
  box-shadow: 3px 3px 0 var(--pink);
  transform: rotate(-2deg);
}
.brand-sub {
  font-family: var(--marker); font-size: 0.9rem; line-height: 1;
  letter-spacing: 0; text-transform: none; color: var(--ink);
  margin-top: 0; max-width: 5.5em;
}
.brand > a { display: flex; align-items: center; gap: 10px; }
.brand-status { display: flex; align-items: center; gap: 8px; margin: 0 -2px 0 0; flex-wrap: nowrap; }
.brand-status .pill { white-space: nowrap; }

/* list-style/margin/padding reset needed now that .nav-links is a real
   <ul> from wp_nav_menu() on interior pages. */
.nav-links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; row-gap: 2px; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links li { list-style: none; }
.nav-links a:not(.btn) {
  display: inline-block; white-space: nowrap;
  font-family: var(--display); font-weight: 800; font-size: 0.82rem; letter-spacing: 0; text-transform: uppercase;
  padding: 0.5em 0.55em; border-radius: 999px; border: 2px solid transparent;
  color: var(--ink); line-height: 1.1;
  transition: background 0.15s, border-color 0.15s;
}
.nav-links > li > a:not(.btn):hover,
.nav-links > li:hover > a:not(.btn),
.nav-links > li.current-menu-item > a:not(.btn),
.nav-links > li.current-menu-ancestor > a:not(.btn) { border-color: var(--ink); background: var(--volt); color: var(--ink); }

/* Standout Shows button in the navbar — the mockup's "Tonight's tickets". */
.nav-links > li.menu-btn-shows {
  margin-right: 8px;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
.nav-links > li.menu-btn-shows > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--gold) !important;
  color: var(--ink) !important;
  padding: 0.6em 1em !important;
  border-radius: 999px !important;
  font-family: var(--display) !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  border: 3px solid var(--ink) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  transition: transform 0.12s, box-shadow 0.12s !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
.nav-links > li.menu-btn-shows > a:hover {
  background: var(--gold) !important;
  color: var(--ink) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
}

/* Dropdowns — menu items with children (e.g. Academy, Info, Teams) */
.nav-links > li { position: relative; }
.nav-links .menu-item-has-children > a::after { content: '⌄'; margin-left: 4px; font-size: 0.95em; opacity: 0.6; display: inline-block; line-height: 1; vertical-align: 0.05em; }
.nav-links .sub-menu {
  position: absolute; top: calc(100% + 6px); left: -6px;
  min-width: 210px; margin: 0; padding: 8px; list-style: none;
  background: var(--cream); border: 3px solid var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--hard);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.16s, transform 0.16s, visibility 0.16s; z-index: 100;
}
/* Bridge the 6px gap so the pointer can travel from link to menu. */
.nav-links > li > .sub-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-links > li:hover > .sub-menu,
.nav-links > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-links .sub-menu li { display: block; }
.nav-links .sub-menu a:not(.btn) { display: block; padding: 8px 12px; white-space: nowrap; font-size: 0.85rem; color: var(--ink); border-radius: 10px; border: 0; }
.nav-links .sub-menu a:not(.btn):hover { color: var(--ink); background: var(--volt); }
/* Keep dropdowns a compact fixed width and let long labels wrap to a second
   line instead of spilling out (the legacy Customizer blob pins width:240px +
   the items were nowrap, so "Inclusion, Diversity, and Belonging" overflowed).
   Per Ryan: narrow it a touch and word-wrap rather than grow the box wide. */
body.wp-child-theme-arcade-child .nav-links .sub-menu { width: 250px !important; min-width: 250px !important; max-width: 250px !important; }
body.wp-child-theme-arcade-child .nav-links .sub-menu a:not(.btn) { white-space: normal; line-height: 1.3; }

/* Right-edge dropdowns open leftward so they stay on-screen and clickable.
   script.js measures each dropdown on load/resize and adds `.flip` to any that
   would run past the viewport (robust to menu reordering — a fixed
   nth-last-child rule breaks when items move). The overflow-x guard below is
   the belt-and-suspenders for the closed state. */
.nav-links > li > .sub-menu.flip { left: auto !important; right: 0 !important; }

/* Horizontal page-width guard: the .sub-menu dropdowns above are
   position:absolute and stay laid out while closed (visibility:hidden), so
   the right-most flyouts reach past the viewport and cause horizontal PAGE
   scroll / dead space at mid widths (~900–1100px). Clip it at the page
   wrapper with overflow-x:clip — NOT hidden, which would turn #page-container
   into a scroll container and break the sticky .nav. */
#page-container { overflow-x: clip; }

.burger { display: none; background: none; border: 3px solid var(--ink); border-radius: 10px; padding: 7px 9px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.burger span { display: block; width: 18px; height: 3px; border-radius: 2px; background: var(--ink); margin: 3px 0; }

/* Six top-level items plus two pills fit to about 1100px. Below that the
   status pill goes first, then the brand's marker sub-line, so the links
   never wrap onto a second line before the burger takes over at 900px. */
@media (max-width: 1180px) {
  .nav-links a:not(.btn) { font-size: 0.78rem; padding: 0.5em 0.45em; }
}
@media (max-width: 1080px) {
  .brand-status { display: none; }
  .brand-sub { display: none; }
  .nav-links a:not(.btn) { font-size: 0.76rem; padding: 0.5em 0.4em; }
  .nav-links > li.menu-btn-shows > a { font-size: 0.76rem !important; padding: 0.6em 0.8em !important; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .brand-status { display: flex; margin-right: 6px; }
  /* Burger open: one column, top to bottom. script.js sets the panel's
     position, background and a max-height with inner scroll inline; the
     desktop rule's flex-wrap + justify-content:flex-end have to be undone here
     or, once the list is taller than that max-height, a column layout wraps
     the overflow into a SECOND column off to the right (seen 2026-09-05:
     "Teams" and its dropdown floating beside "Info"). Sub-menus become inline,
     expanded and indented — there is no hover on touch. */
  .nav-links.is-open { flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: stretch !important; }
  .nav-links.is-open > li { width: 100%; text-align: left; }
  .nav-links.is-open > li > a:not(.btn) { display: block; width: 100%; text-align: left; font-size: 1rem; padding: 0.55em 0.7em; }
  .nav-links.is-open > li.menu-btn-shows { width: auto; align-self: flex-start; }
  .nav-links.is-open .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: transparent; min-width: 0; padding: 2px 0 6px 16px; }
  body.wp-child-theme-arcade-child .nav-links.is-open .sub-menu { width: auto !important; min-width: 0 !important; max-width: none !important; }
  .nav-links.is-open .sub-menu::before { display: none; }
  .nav-links.is-open .sub-menu a:not(.btn) { font-size: 0.92rem; padding: 8px 10px; }
  .nav-links.is-open .menu-item-has-children > a::after { content: ''; }
  /* Parents with a dropdown are headings in the open menu, not links — script.js
     already swallows their click. Marker face in pink, a dashed rule above each
     group, and none of the volt hover/current pill that made "Info" look like a
     button on any page under it (Ryan, 2026-09-05). */
  .nav-links.is-open > li.menu-item-has-children { margin-top: 12px; padding-top: 12px; border-top: 2px dashed var(--ink-12); }
  .nav-links.is-open > li.menu-item-has-children > a:not(.btn),
  .nav-links.is-open > li.menu-item-has-children:hover > a:not(.btn),
  .nav-links.is-open > li.menu-item-has-children.current-menu-ancestor > a:not(.btn),
  .nav-links.is-open > li.menu-item-has-children.current-menu-item > a:not(.btn) {
    font-family: var(--marker); font-weight: 400; font-size: 1.15rem; letter-spacing: 0; text-transform: none;
    color: var(--pink-deep); background: transparent; border-color: transparent; padding: 0.2em 0.4em 0.3em; cursor: default;
  }
  /* Plain top-level links and the child links: the current page is underlined
     in pink rather than filled — a fill reads as a heading in this list. */
  .nav-links.is-open > li:not(.menu-item-has-children):hover > a:not(.btn),
  .nav-links.is-open > li.current-menu-item:not(.menu-item-has-children) > a:not(.btn) { background: transparent; border-color: transparent; text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--pink); text-underline-offset: 4px; }
  .nav-links.is-open .sub-menu li.current-menu-item > a:not(.btn) { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--pink); text-underline-offset: 4px; background: transparent; }
  .nav-links.is-open .sub-menu a:not(.btn):hover { background: transparent; }
  .topbar-social { display: none; }
}
@media (max-width: 560px) {
  .brand-status { display: none; }
  .brand-name { font-size: 1.15rem; }
}


/* ============================================================
   47  HOMEPAGE — HERO (v12.1 markup, arcade-platform look)
   The text column (.hero-copy) beside §37's pin-frame. The hero
   is the mockup's: an ink band with the gold dot grid and a pink
   glow rising from the bottom edge, a marker eyebrow in volt,
   the headline in paper with a pink misregistration, the
   hand-written word in gold. The Divi section wrapping it goes
   ink too so the band runs edge to edge.
   ============================================================ */
.home .et_pb_section:has(.hero),
body.wp-child-theme-arcade-child.home .et_pb_section:has(.hero) { background-color: var(--ink) !important; background-image: var(--dots-dark) !important; background-size: 22px 22px !important; }
/* Divi's row is 80% wide by default; the hero band has to run edge to edge, so
   the row and column that wrap it give up their width. (§30's default-section
   rule excludes this section — see :not(:has(.hero)) there — or its paper
   would beat the ink above on specificity.) */
.home .et_pb_section:has(.hero) .et_pb_row,
.home .et_pb_section:has(.hero) .et_pb_column { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.hero {
  padding: clamp(48px, 7vw, 96px) 0 clamp(44px, 6vw, 80px); position: relative; overflow: hidden;
  background: var(--ink); color: var(--paper);
  background-image: var(--dots-dark); background-size: 22px 22px;
  border-bottom: 4px solid var(--gold);
}
.hero::before {
  content: ''; position: absolute; inset: auto -20% -40% -20%; height: 70%;
  background: radial-gradient(ellipse at center, rgba(255, 61, 139, 0.35), transparent 60%);
  pointer-events: none;
}
.hero .arcade-wrap { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 52px; align-items: center; }
.hero .eyebrow, .hero-copy .eyebrow { color: var(--volt); }
.hero-copy h1 {
  font-family: var(--display); font-weight: 800; font-size: clamp(3.2rem, 8vw, 6.6rem); line-height: 0.88; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--paper); text-shadow: 5px 5px 0 var(--pink); margin: 10px 0 0;
}
.script-wrap { position: relative; display: inline-block; }
.hero-copy h1 .script {
  font-family: var(--marker); font-weight: 400; font-size: 0.85em; text-transform: none; letter-spacing: 0;
  color: var(--gold); text-shadow: none; display: inline-block; transform: rotate(-3deg);
}
.squiggle-under { position: absolute; left: -4px; bottom: -8px; width: calc(100% + 8px); height: 14px; color: var(--teal); }
.hero-sub { color: rgba(255, 246, 227, 0.85); margin: 22px 0 26px; max-width: 44ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-cta .btn-pink { background: var(--gold); color: var(--ink); }
.hero-cta .btn-ghost { color: var(--paper); }
.hero .stub { --stub-hole: var(--ink); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
}


/* ============================================================
   49  EVENTS — LIST VIEW
   TEC's list view as a stack of ticket stubs: cream rows with a
   3px ink border and hard shadow, an ink date block with the
   day in gold, the poster as a square cap on the right. The
   layout tricks below (display:contents on the header, flex
   ordering) are unchanged from the earlier pass; only the
   visual language moved. TEC's own compound selectors and the
   legacy blob both outrank a bare class, hence the body-prefix
   + !important on the layout properties.
   ============================================================ */
.tribe-events-calendar-list__month-separator-text {
  font-family: var(--marker); font-size: 1.2rem; color: var(--pink); padding: 8px 0;
}
body.wp-child-theme-arcade-child .tribe-events-calendar-list__month-separator-text {
  font-family: var(--marker) !important; font-weight: 400 !important; font-size: 1.2rem !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--pink) !important;
}
body.wp-child-theme-arcade-child .tribe-events-calendar-list__month-separator::after {
  background-color: var(--ink-40) !important; height: 2px !important;
}
body.wp-child-theme-arcade-child .tribe-events .tribe-events-c-nav {
  border-top: 3px dashed var(--ink-40) !important;
}
/* Poster thumbnail — square, at the row's trailing edge (TEC's row is
   row-reverse), inside its own 2px ink frame. */
html body.wp-child-theme-arcade-child .tribe-events .tribe-events-calendar-list__event-featured-image-wrapper { display: block !important; align-self: center !important; flex: 0 0 96px !important; width: 96px !important; height: 96px !important; max-width: 96px !important; margin: 0 16px !important; padding: 0 !important; overflow: hidden !important; border-radius: 8px !important; border: 2px solid var(--ink) !important; background: var(--ink-2) !important; }
html body.wp-child-theme-arcade-child .tribe-events .tribe-events-calendar-list__event-featured-image { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center !important; display: block !important; }
html body.wp-child-theme-arcade-child .tribe-events .tribe-events-calendar-list__event { align-items: stretch !important; }
html body.wp-child-theme-arcade-child .tribe-events .tribe-events-calendar-list__event-details { flex: 1 1 auto !important; min-width: 0 !important; }
html body.wp-child-theme-arcade-child .tribe-events .tribe-events-calendar-list__event-date-tag { flex: 0 0 76px !important; width: 76px !important; padding: 14px 6px !important; }
.tribe-events-calendar-list__event-row {
  display: flex; align-items: stretch; gap: 0;
  background: var(--cream); border: 3px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--hard-sm);
  margin-bottom: 16px; overflow: hidden; list-style: none;
  transition: transform 0.12s, box-shadow 0.12s;
}
.tribe-events-calendar-list__event-row:hover { transform: translate(-2px, -2px); box-shadow: var(--hard); }
.tribe-events-calendar-list__event-date-tag {
  flex-shrink: 0; width: 76px; background: var(--ink); color: var(--gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 0; position: relative; border-right: 3px solid var(--ink);
}
.tribe-events-calendar-list__event-date-tag::after { content: none; }
.tribe-events-calendar-list__event-date-tag-datetime {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.tribe-events-calendar-list__event-date-tag-weekday {
  display: block; font-family: var(--display); font-size: 0.7rem !important; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper) !important; opacity: 0.85;
  margin: 0 !important;
}
.tribe-events-calendar-list__event-date-tag-daynum {
  display: block; font-family: var(--display); font-weight: 800; font-size: 2rem !important;
  line-height: 1; color: var(--gold) !important; margin: 3px 0 0 !important;
}
.tribe-events-calendar-list__event-wrapper { flex: 1; min-width: 0; }
.tribe-events-calendar-list__event { height: 100%; }

.tribe-events-calendar-list__event-details {
  padding: 12px 18px; box-sizing: border-box; height: 100%;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px;
  align-content: center;
}
.tribe-events-calendar-list__event-header { display: contents !important; }

.tribe-events-calendar-list__event-title {
  order: 1 !important; flex-basis: 100%; margin: 0; font-family: var(--display);
  font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.1;
}
.tribe-events-calendar-list__event-title-link { color: var(--ink); text-decoration: none; transition: color 0.18s; }
.tribe-events-calendar-list__event-title-link:hover { color: var(--pink); }

.tribe-events-calendar-list__event-datetime-wrapper {
  order: 2 !important; font-family: var(--display); font-size: 0.8rem;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.tribe-events-calendar-list__event-datetime .timezone { display: none; }

.tribe-events-c-small-cta.tribe-events-calendar-list__event-cost {
  order: 3 !important; font-family: var(--display); font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--pink-deep);
  padding: 0; background: none; border-radius: 0; display: inline-block;
}
.tribe-events-c-small-cta.tribe-events-calendar-list__event-cost::before { content: '\2013'; margin-right: 8px; color: var(--ink-40); font-weight: 700; }
.tribe-events-c-small-cta__price { display: inline; }

.tribe-events-calendar-list__event-description.tribe-common-a11y-hidden {
  position: static !important; width: auto !important; height: auto !important;
  overflow: hidden !important; clip: auto !important; clip-path: none !important;
  white-space: normal !important;
}
.tribe-events-calendar-list__event-description {
  order: 4 !important; flex-basis: 100%; margin-top: 2px;
  font-size: 0.9rem; color: var(--ink-80); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tribe-events-calendar-list__event-description p { margin: 0; }
.arcade-excerpt-more {
  color: var(--pink-deep) !important; font-weight: 800; text-transform: uppercase;
  font-size: 0.72rem; letter-spacing: 0.04em; text-decoration: none; margin-left: 2px; font-family: var(--display);
}
.arcade-excerpt-more:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .tribe-events-calendar-list__event-row { flex-direction: row; }
  .tribe-events-calendar-list__event-date-tag-daynum { font-size: 1.5rem !important; }
  .tribe-events-calendar-list__event-details { padding: 10px 12px; }
  .tribe-events-calendar-list__event-title { font-size: 1rem; }
  html body.wp-child-theme-arcade-child .tribe-events .tribe-events-calendar-list__event { flex-direction: row-reverse !important; flex-wrap: nowrap !important; align-items: center !important; margin-left: 0 !important; margin-right: 0 !important; }
  html body.wp-child-theme-arcade-child .tribe-events .tribe-events-calendar-list__event-date-tag { flex: 0 0 54px !important; width: 54px !important; padding: 10px 4px !important; }
  html body.wp-child-theme-arcade-child .tribe-events .tribe-events-calendar-list__event-details { flex: 1 1 0% !important; min-width: 0 !important; padding-left: 12px !important; padding-right: 8px !important; }
  html body.wp-child-theme-arcade-child .tribe-events .tribe-events-calendar-list__event-featured-image-wrapper { flex: 0 0 56px !important; width: 56px !important; height: 56px !important; margin: 0 8px !important; }
  html body.wp-child-theme-arcade-child .tribe-events .tribe-events-calendar-list__event-featured-image { width: 56px !important; height: 56px !important; }
}


/* ============================================================
   50  EVENTS — MONTH VIEW
   Day-cell thumbnail/tooltip already stripped by Ghostlight's
   template overrides (featured-image.php / tooltip.php are
   intentionally empty) — this is the visual restyle.
   ============================================================ */
.tribe-events-calendar-month__day {
  background: var(--cream); border: 2px solid var(--ink-12);
  vertical-align: top; transition: background 0.15s;
}
.tribe-events-calendar-month__day--current { background: rgba(233, 255, 58, 0.35); border-color: var(--ink); }
.tribe-events-calendar-month__day--past { background: rgba(19, 12, 28, 0.04); }
.tribe-events-calendar-month__day--other-month { background: var(--paper); opacity: 0.5; }

.tribe-events-calendar-month__day-cell--desktop { padding: 8px; min-height: 110px; box-sizing: border-box; }
.tribe-events-calendar-month__day-date { margin-bottom: 6px; }
.tribe-events-calendar-month__day-date-daynum { font-family: var(--display); font-weight: 800; font-size: 0.95rem; color: var(--ink); }
.tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-daynum { color: var(--muted); }

.tribe-events-calendar-month__events { display: flex; flex-direction: column; gap: 4px; }

/* Weekday header row: a small ink coin per day with the letter in gold and
   the pink offset — TEC's own grid layout makes each <th> shrink to content,
   so the coin leans into that instead of fighting it. */
.tribe-events-calendar-month__header-column { background: transparent; padding-bottom: 10px; }
.tribe-events-calendar-month__header-column-title {
  font-family: var(--display) !important; font-weight: 800 !important; font-size: 0.8rem !important; text-transform: uppercase !important;
  color: var(--gold) !important; text-align: center !important; padding: 0 !important;
  width: 32px !important; height: 32px !important; line-height: 32px !important; margin: 0 auto !important;
  border-radius: 50% !important; background: var(--ink) !important; box-shadow: 2px 2px 0 var(--pink) !important;
}

@media (max-width: 767px) {
  .tribe-events-calendar-month__day-cell--desktop { min-height: 70px; padding: 6px; }
  .tribe-events-calendar-month__calendar-event-title { font-size: 10px; }
}


/* ============================================================
   51  EVENTS — SHARED SEARCH + VIEW-SWITCHER BAR
   The chrome wrapping all three views (search, List/Month/
   Posters tabs, prev/today/next). One cream box with a 3px ink
   border and hard shadow; the search field a pill; the view
   tabs chips that fill volt when active. Body-prefixed +
   !important throughout: TEC's reset stylesheet and the legacy
   blob both carry rules for these at higher specificity.
   ============================================================ */
body.wp-child-theme-arcade-child .tribe-events-c-events-bar {
  background: var(--cream) !important; border: 3px solid var(--ink) !important;
  border-radius: var(--r-xl) !important; box-shadow: var(--hard) !important;
  padding: 16px 20px !important; margin-bottom: 30px !important;
  justify-content: center !important; flex-wrap: wrap !important;
}
@media (min-width: 782px) {
  body.wp-child-theme-arcade-child .tribe-events-c-events-bar__search-container { flex: 0 1 560px !important; order: 1 !important; }
  body.wp-child-theme-arcade-child .tribe-events-c-events-bar__views { flex: 0 0 100% !important; order: 2 !important; display: flex !important; justify-content: center !important; margin-top: 14px !important; }
}
@media (max-width: 781px) {
  body.wp-child-theme-arcade-child .tribe-events-c-events-bar {
    flex: 0 0 calc(100% - 39px) !important;
    margin-left: 19.5px !important;
    margin-right: 19.5px !important;
  }
  body.wp-child-theme-arcade-child .tribe-events-c-events-bar__search-button {
    width: 100% !important; margin: 0 !important; justify-content: center !important;
  }
  html body.wp-child-theme-arcade-child .tribe-events-c-events-bar__search-container {
    background: var(--cream) !important;
    border: 3px solid var(--ink) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--hard) !important;
    padding: 12px 14px !important;
  }
  body.wp-child-theme-arcade-child .tribe-events-c-search {
    flex-direction: column !important; align-items: stretch !important;
  }
  body.wp-child-theme-arcade-child .tribe-events-c-search__input-group,
  body.wp-child-theme-arcade-child .tribe-events-c-search__input-control,
  body.wp-child-theme-arcade-child .tribe-events-c-search__button {
    width: 100% !important;
  }
}
body.wp-child-theme-arcade-child .tribe-events-c-events-bar__search-button {
  background: var(--cream) !important; border: 2px solid var(--ink) !important;
  border-radius: 999px !important; padding: 8px 14px !important; color: var(--ink) !important;
  font-family: var(--display) !important; font-weight: 800 !important; text-transform: uppercase !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-events-bar__search-button-icon-svg { fill: var(--pink) !important; }
body.wp-child-theme-arcade-child .tribe-events-c-events-bar__search-container { background: transparent !important; }
body.wp-child-theme-arcade-child .tribe-events-c-search { gap: 12px !important; }
body.wp-child-theme-arcade-child .tribe-events-c-search__input-control {
  border: 3px solid var(--ink) !important; border-radius: 999px !important;
  background: var(--paper) !important; overflow: hidden !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-search__input {
  font-family: var(--body) !important; font-size: 1rem !important; color: var(--ink) !important;
  padding: 10px 16px 10px 38px !important; border: none !important; background: transparent !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-search__input-control-icon-svg { fill: var(--pink) !important; }
body.wp-child-theme-arcade-child .tribe-events-c-search__button {
  background: var(--pink) !important; color: #fff !important;
  font-family: var(--display) !important; font-weight: 800 !important; font-size: 0.85rem !important;
  letter-spacing: 0.01em !important; text-transform: uppercase !important;
  border-radius: 999px !important; padding: 10px 20px !important; border: 3px solid var(--ink) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  transition: transform 0.12s, box-shadow 0.12s !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-search__button:hover { background: var(--pink) !important; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink) !important; }

/* View tabs: chips. */
body.wp-child-theme-arcade-child .tribe-events-c-view-selector__list-item { margin: 0 3px !important; }
body.wp-child-theme-arcade-child .tribe-events-c-view-selector__list-item-link {
  font-family: var(--display) !important; font-weight: 800 !important; font-size: 0.82rem !important;
  letter-spacing: 0.02em !important; text-transform: uppercase !important; color: var(--ink) !important;
  padding: 7px 14px !important; border-radius: 999px !important;
  border: 2px solid transparent !important; transition: background 0.15s, border-color 0.15s !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link,
body.wp-child-theme-arcade-child .tribe-events-c-view-selector__list-item-link:hover {
  color: var(--ink) !important; background: var(--volt) !important; border-color: var(--ink) !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-view-selector__list-item-icon-svg { fill: currentColor !important; }
body.wp-child-theme-arcade-child .tribe-events-c-view-selector__list-item-link::after { display: none !important; }

body.wp-child-theme-arcade-child .tribe-events-c-nav__today {
  font-family: var(--display) !important; font-weight: 800 !important; font-size: 0.8rem !important;
  letter-spacing: 0.01em !important; text-transform: uppercase !important; color: var(--ink) !important;
  background: var(--gold) !important; border: 2px solid var(--ink) !important; border-radius: 999px !important;
  padding: 7px 16px !important; box-shadow: 3px 3px 0 var(--ink) !important; transition: transform 0.12s, box-shadow 0.12s !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-nav__today:hover { background: var(--gold) !important; color: var(--ink) !important; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink) !important; }
body.wp-child-theme-arcade-child .tribe-events-c-nav__prev,
body.wp-child-theme-arcade-child .tribe-events-c-nav__next {
  font-family: var(--display) !important; font-weight: 800 !important; font-size: 0.8rem !important;
  letter-spacing: 0.02em !important; text-transform: uppercase !important; color: var(--ink) !important;
  transition: color 0.18s !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-nav__prev:hover,
body.wp-child-theme-arcade-child .tribe-events-c-nav__next:hover:not(:disabled) { color: var(--pink) !important; }
body.wp-child-theme-arcade-child .tribe-events-c-nav__prev-icon-svg,
body.wp-child-theme-arcade-child .tribe-events-c-nav__next-icon-svg { fill: currentColor !important; }

/* The "Upcoming ⌄" datepicker toggle next to Today/prev/next. */
body.wp-child-theme-arcade-child .tribe-events-c-top-bar__datepicker-button {
  font-family: var(--display) !important; font-weight: 800 !important; font-size: 0.95rem !important;
  letter-spacing: 0.01em !important; text-transform: uppercase !important; color: var(--ink) !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  background: none !important; border: none !important; padding: 0 !important; cursor: pointer !important;
  transition: color 0.18s !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-top-bar__datepicker-button:hover { color: var(--pink) !important; }
body.wp-child-theme-arcade-child .tribe-events-c-top-bar__datepicker-button-icon-svg { fill: var(--pink) !important; width: 9px !important; margin-left: 2px !important; }

body.wp-child-theme-arcade-child .tribe-events-c-subscribe-dropdown__button {
  border: 2px solid var(--ink) !important; border-radius: 999px !important; background: var(--cream) !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-subscribe-dropdown__button-text {
  font-family: var(--display) !important; font-weight: 800 !important; font-size: 0.8rem !important;
  letter-spacing: 0.02em !important; text-transform: uppercase !important; color: var(--ink) !important;
}

@media (max-width: 767px) {
  body.wp-child-theme-arcade-child .tribe-events-c-events-bar { padding: 12px 14px !important; }
}


/* ============================================================
   52  EVENTS — TOP-LEVEL WRAPPER BACKGROUND
   Confirmed via real screenshots the /events/* archive pages
   still showed a stark white body — traced to the actual DOM:
   these pages have NO .et_pb_section at all (TEC's own view
   template sits directly inside #et-main-area, unlike a normal
   Divi-built page), so §30/§51's .et_pb_section-anchored fixes
   never had anything to apply to here. The real culprit is the
   legacy Custom CSS's ".tribe-events .tribe-common{background-
   color:#fdf9fb!important}" rule, sitting on TEC's own outer
   wrapper — same root cause as §30/§51, different selector.
   ============================================================ */
body.wp-child-theme-arcade-child .tribe-events .tribe-common,
body.wp-child-theme-arcade-child.events-archive .tribe-common {
  background-color: var(--paper) !important;
}


/* ============================================================
   53  EVENTS — PHOTOS/GRID VIEW PAGINATION NAV
   Ghostlight's own shows-grid.css already styles .arcade-grid-nav
   correctly (flex, centered, spaced) using this theme's own design
   tokens — but as a plain single-class selector with no !important,
   it silently loses to tribe-common's own reset stylesheet, which
   includes a compound `.tribe-common nav{display:block;margin:0}`
   rule. That compound selector's extra type-selector (nav) gives it
   higher specificity than a bare class selector, so it wins even
   though it loads earlier — same root cause as §49/§51/§52's fixes,
   just hitting a plugin's CSS instead of our own this time. Re-
   declaring the same values here with !important is enough to win.
   ============================================================ */
body.wp-child-theme-arcade-child .arcade-grid-nav {
  display: flex !important; justify-content: center !important;
  gap: 12px !important; margin-top: 28px !important; flex-wrap: wrap !important;
}


/* ============================================================
   54  EVENTS — HIDE "FEATURED" BADGE (LIST + MONTH)
   Every seed event on this dev site happens to be flagged
   Featured, so the flag/"Featured" icon+text was rendering on
   nearly every row/chip — per the user, it doesn't need to show
   visually even though the underlying flag stays set. TEC repeats
   this icon+text pair under a different class prefix per view
   (list, month desktop, month mobile, month multi-day, month
   multi-day-hidden) — an attribute substring selector catches all
   of them in one rule instead of enumerating five near-duplicate
   class names. The text half is TEC's own `.tribe-common-a11y-
   visual-hide` utility, which TEC itself re-shows at the medium+
   breakpoint via a more-specific rule — !important is needed to
   keep it hidden regardless of viewport width.
   ============================================================ */
body.wp-child-theme-arcade-child [class*="-featured-icon"],
body.wp-child-theme-arcade-child [class*="-featured-text"] {
  display: none !important;
}


/* ============================================================
   55  EVENTS — POSTERS/GRID CARD OVERRIDES
   Ghostlight's own shows-grid.css paints .poster as a white
   card with a gradient rule and soft shadow; §16 turns it into
   the frame-and-caption poster. These body-anchored rules carry
   the !important that Ghostlight's and the legacy blob's more
   specific selectors need.
   ============================================================ */
body.wp-child-theme-arcade-child .poster { background: transparent !important; box-shadow: none !important; }
body.wp-child-theme-arcade-child .poster__body::before { display: none !important; }
body.wp-child-theme-arcade-child .pill-cost { background: var(--gold) !important; color: var(--ink) !important; }
body.wp-child-theme-arcade-child .pill-time { background: var(--pink) !important; color: var(--ink) !important; }
body.wp-child-theme-arcade-child .poster .pill { font-size: 0.72rem !important; padding: 0.35em 0.7em !important; }
body.wp-child-theme-arcade-child .poster__meta { gap: 8px !important; justify-content: flex-start !important; }
body.wp-child-theme-arcade-child .poster__name { font-size: 1.25rem !important; }
body.wp-child-theme-arcade-child .poster__body { gap: 8px !important; padding: 18px 6px 0 !important; align-items: flex-start !important; text-align: left !important; }
body.wp-child-theme-arcade-child .poster__cta { padding: 14px 6px 0 !important; }

@media (max-width: 767px) {
  body.wp-child-theme-arcade-child .poster__name  { font-size: 1rem !important; }
  body.wp-child-theme-arcade-child .poster .pill  { font-size: 0.62rem !important; padding: 0.3em 0.6em !important; }
  body.wp-child-theme-arcade-child .poster__meta  { gap: 6px !important; }
  body.wp-child-theme-arcade-child .poster__body  { gap: 6px !important; padding: 12px 2px 0 !important; }
  body.wp-child-theme-arcade-child .poster__cta   { padding: 10px 2px 0 !important; }
  body.wp-child-theme-arcade-child .poster .btn   { font-size: 0.75rem !important; padding: 0.7em 1em !important; }
}


/* ============================================================
   56  EVENTS — MONTH VIEW CHIPS
   The event chip inside a day cell: a small cream card with an
   ink outline and a pink lead edge, the poster thumb beside the
   name. Layout props body-anchored + !important: TEC v2's own
   stylesheet and the legacy blob set the chip's `display` at
   equal specificity but load after us.
   ============================================================ */
body.wp-child-theme-arcade-child .tribe-events-calendar-month__calendar-event {
  background: var(--cream); border: 2px solid var(--ink); border-left: 6px solid var(--pink);
  border-radius: 8px; padding: 5px 7px; transition: background 0.15s;
  display: grid !important; grid-template-columns: auto 1fr !important;
  align-items: center !important; column-gap: 0 !important; row-gap: 1px !important;
}
.tribe-events-calendar-month__calendar-event:hover { background: var(--volt); }
body.wp-child-theme-arcade-child .arcade-month-thumb {
  display: block !important; grid-row: 1 / 3 !important; grid-column: 1 !important;
  width: 30px !important; height: 30px !important;
  margin-right: 7px !important; border-radius: 4px !important; border: 1.5px solid var(--ink) !important; background-size: cover !important;
  background-position: center top !important; background-color: var(--ink-2) !important;
}
body.wp-child-theme-arcade-child .tribe-events-calendar-month__calendar-event-datetime,
body.wp-child-theme-arcade-child .tribe-events-calendar-month__calendar-event-title { grid-column: 2 !important; }
.tribe-events-calendar-month__calendar-event-datetime {
  display: block; font-family: var(--display); font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--pink-deep);
}
.tribe-events-calendar-month__calendar-event-title { margin: 0; font-family: var(--display); font-size: 0.74rem; font-weight: 700; line-height: 1.25; overflow-wrap: break-word; }
.tribe-events-calendar-month__calendar-event-title-link { color: var(--ink); text-decoration: none; }
.tribe-events-calendar-month__calendar-event-title-link:hover { color: var(--pink-deep); }

/* Multiday bars use different markup (a spanning pill). Same recipe. */
body.wp-child-theme-arcade-child .tribe-events-calendar-month__multiday-event-bar {
  background: var(--pink) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 8px !important;
  transition: background 0.15s;
}
body.wp-child-theme-arcade-child .tribe-events-calendar-month__multiday-event-bar:hover,
body.wp-child-theme-arcade-child .tribe-events-calendar-month__multiday-event-bar:focus-within {
  background: var(--pink-deep) !important;
}
body.wp-child-theme-arcade-child .tribe-events-calendar-month__multiday-event-bar-inner {
  background: transparent !important;
}
body.wp-child-theme-arcade-child .tribe-events-calendar-month__multiday-event-bar-title {
  font-family: var(--display) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: #fff !important;
}


/* ============================================================
   57  EVENTS — POSTERS/GRID DATE-RANGE + SORT FILTER
   A <details>/<summary> disclosure whose summary matches the
   native "Upcoming ⌄" control (§51) so collapsed it is hard to
   tell apart from TEC's own. The open panel is a cream box with
   the site's inputs and chips. Every layout property is
   !important + body-anchored because this sits inside TEC's
   .tribe-common wrapper, whose reset strips unguarded rules.
   ============================================================ */
body.wp-child-theme-arcade-child .arcade-grid-filters { margin-bottom: 24px !important; }
body.wp-child-theme-arcade-child .arcade-grid-filters__summary {
  font-family: var(--display) !important; font-weight: 800 !important; font-size: 0.95rem !important;
  letter-spacing: 0.01em !important; text-transform: uppercase !important; color: var(--ink) !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  cursor: pointer !important; list-style: none !important; padding: 0 !important;
}
body.wp-child-theme-arcade-child .arcade-grid-filters__summary::-webkit-details-marker { display: none !important; }
body.wp-child-theme-arcade-child .arcade-grid-filters__summary:hover { color: var(--pink) !important; }
body.wp-child-theme-arcade-child .arcade-grid-filters__summary-icon {
  fill: var(--pink) !important; width: 9px !important; transition: transform 0.18s !important;
}
body.wp-child-theme-arcade-child .arcade-grid-filters[open] .arcade-grid-filters__summary-icon { transform: rotate(180deg); }

body.wp-child-theme-arcade-child .arcade-grid-filters__panel {
  background: var(--cream) !important; border: 3px solid var(--ink) !important; border-radius: var(--r-lg) !important; box-shadow: var(--hard) !important;
  padding: 16px 20px !important; margin-top: 14px !important;
}
body.wp-child-theme-arcade-child .arcade-grid-filters__row { display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; gap: 14px !important; }
body.wp-child-theme-arcade-child .arcade-grid-filters__field { display: flex !important; flex-direction: column !important; gap: 4px !important; font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .arcade-grid-filters__field span {
  font-size: 0.7rem !important; font-weight: 800 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--muted) !important;
}
body.wp-child-theme-arcade-child .arcade-grid-filters__field input,
body.wp-child-theme-arcade-child .arcade-grid-filters__field select {
  font-family: var(--body) !important; font-size: 0.95rem !important; color: var(--ink) !important;
  border: 2px solid var(--ink) !important; border-radius: var(--r-md) !important; background: var(--paper) !important;
  padding: 8px 10px !important; height: 40px !important; box-sizing: border-box !important;
}
body.wp-child-theme-arcade-child .arcade-grid-filters .btn-pink { padding: 0.6em 1.2em !important; height: 40px !important; box-sizing: border-box !important; box-shadow: 3px 3px 0 var(--ink) !important; }
body.wp-child-theme-arcade-child .arcade-grid-filters__clear {
  font-family: var(--display) !important; font-size: 0.8rem !important; font-weight: 800 !important; letter-spacing: 0.02em !important;
  text-transform: uppercase !important; color: var(--muted) !important; text-decoration: none !important; padding: 0 4px !important; height: 40px !important;
  display: inline-flex !important; align-items: center !important; transition: color 0.18s !important;
}
body.wp-child-theme-arcade-child .arcade-grid-filters__clear:hover { color: var(--pink) !important; }
body.wp-child-theme-arcade-child .arcade-grid-filters__quick { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 14px !important; }
body.wp-child-theme-arcade-child .arcade-grid-filters__chip {
  font-family: var(--display) !important; font-weight: 800 !important; font-size: 0.75rem !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; color: var(--ink) !important;
  text-decoration: none !important; padding: 0.4em 0.85em !important; border-radius: 999px !important;
  border: 2px solid var(--ink) !important; background: var(--paper) !important; transition: background 0.15s, transform 0.12s !important;
}
body.wp-child-theme-arcade-child .arcade-grid-filters__chip:hover { background: var(--volt) !important; transform: translate(-1px, -1px); }
body.wp-child-theme-arcade-child .arcade-grid-filters__chip.is-active { background: var(--pink) !important; color: var(--ink) !important; }

@media (max-width: 700px) {
  body.wp-child-theme-arcade-child .arcade-grid-filters__row { flex-direction: column !important; align-items: stretch !important; }
  body.wp-child-theme-arcade-child .arcade-grid-filters .btn-pink { width: 100% !important; }
}


/* ============================================================
   58  SINGLE EVENT PAGE — RETHEME (generic "event" tag template)
   This page's actual layout/content lives in a Divi Theme Builder
   body template (post 10155, assigned to any post tagged "event" —
   term 175), NOT in this theme's own files; all of its styling used
   to live entirely in the legacy Custom CSS blob (wp_get_custom_css_
   post, post 12246), scoped to Divi's auto-numbered module classes
   (.et_pb_text_1_tb_body etc.) under body.wp-child-theme-arcade-child.single-tribe_events. Migrated
   here per the user: same structure, same elements (poster, date/
   time, tickets, per-showtime button, description, "Upcoming Shows"
   + "Next Team Shows" widgets) — only the visual language changed,
   from glossy gradients/heavy shadows/white cards to this theme's
   flat riso look (2-color offset shadows, cream paper, solid brand
   colors instead of gradients). One real color fix along the way:
   several rules used #9b3fc4 for "purple" instead of this theme's
   actual --purple (#6b4bc4) — the bottom widgets' event-grid pills
   already used the correct value, so the mismatch was only visible
   in the top card's Tickets-box accent and title-bar gradient.
   The matching legacy CSS block (wp_get_custom_css_post, same
   selectors) still needs to be neutralized once this is confirmed
   working — left in place for now so nothing goes visually blank
   mid-edit; every rule here is deliberately at least as specific so
   it wins regardless of the legacy block's own !important.
   ============================================================ */
body.wp-child-theme-arcade-child.single-tribe_events,
body.wp-child-theme-arcade-child.single-tribe_events #page-container,
body.wp-child-theme-arcade-child.single-tribe_events #et-main-area,
body.wp-child-theme-arcade-child.single-tribe_events .et_builder_inner_content,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_section,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_section_0_tb_body,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_section_1_tb_body,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_section_2_tb_body,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_section_3_tb_body {
  background: var(--paper) !important;
  background-color: var(--paper) !important;
  border: none !important;
}
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_section_2_tb_body { padding-top: 8px !important; padding-bottom: 32px !important; }
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_0_tb_body .et_pb_text_inner {
  background: var(--paper-2) !important; border-left: 4px solid var(--pink) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; padding: 12px 16px !important; font-size: 0.9em !important;
}
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_0_tb_body .et_pb_text_inner a { color: var(--pink) !important; font-weight: 700 !important; }

body.wp-child-theme-arcade-child.single-tribe_events .et_pb_row_1_tb_body {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  box-shadow: none !important; overflow: visible !important; padding: 0 !important;
  margin: 0 auto 24px !important; max-width: 1080px !important; width: 100% !important; box-sizing: border-box !important;
  display: flex !important; flex-direction: row !important; align-items: flex-start !important; flex-wrap: nowrap !important; gap: 36px !important;
}
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_row_1_tb_body .et_pb_column_1_tb_body {
  padding: 20px !important; box-sizing: border-box !important; background: var(--paper-2) !important;
  border: none !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-riso-neutral) !important;
  float: none !important; align-self: flex-start !important; flex: 0 0 380px !important;
  display: flex !important; flex-direction: column !important;
}
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_row_1_tb_body .et_pb_column_2_tb_body {
  padding: 8px 0 0 !important; box-sizing: border-box !important; background: transparent !important;
  overflow-y: visible !important; max-height: none !important; float: none !important; align-self: flex-start !important;
  display: flex !important; flex-direction: column !important;
}
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_row_1_tb_body .et_pb_column_2_tb_body,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_row_1_tb_body .et_pb_column_2_tb_body *,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_row_1_tb_body .et_pb_column_2_tb_body .et_pb_module,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_row_1_tb_body .et_pb_column_2_tb_body .et_pb_text,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_row_1_tb_body .et_pb_column_2_tb_body .et_pb_text_inner,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_row_1_tb_body .et_pb_column_2_tb_body .et_pb_bg_layout_light { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; }

/* Title bar — was a pink→purple gradient bleeding off the column's
   own padding; flattened to solid --pink, matching every other
   colored bar on the site (events-bar, list-view date-tag, etc.). */
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_1_tb_body { background: var(--pink) !important; margin: -20px -16px 16px -20px !important; padding: 10px 20px !important; }
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_1_tb_body .et_pb_text_inner {
  color: #fff !important; font-family: var(--display) !important; font-size: 14px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 2px !important; line-height: 1.2 !important; margin: 0 !important;
  background: transparent !important; padding: 0 !important; box-shadow: none !important; border: none !important;
}

body.wp-child-theme-arcade-child.single-tribe_events .et_pb_image_0_tb_body, body.wp-child-theme-arcade-child.single-tribe_events .et_pb_image_0_tb_body .et_pb_image_wrap { width: 100% !important; max-width: 100% !important; display: block !important; }
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_image_0_tb_body .et_pb_image_wrap { border: 2px solid var(--pink) !important; border-radius: var(--r-sm) !important; overflow: hidden !important; box-shadow: none !important; }
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_image_0_tb_body img { width: 100% !important; height: auto !important; display: block !important; }

/* Date & Time / Tickets boxes — were a pastel pink-purple gradient
   wash; flattened to --surface with a colored accent border only,
   matching the Date&Time/Tickets info style used nowhere else on
   the site verbatim, but consistent with this theme's general
   "colored left border on a plain card" language (e.g. §49's list
   rows use the same idea via their date-tag). */
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_2_tb_body {
  background: var(--surface) !important; border: 1px solid var(--ink-12) !important; border-left: 4px solid var(--pink) !important;
  border-radius: var(--r-sm) !important; padding: 10px 12px !important; margin-top: 12px !important; margin-bottom: 0 !important;
}
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_2_tb_body .et_pb_text_inner { color: var(--ink) !important; font-family: var(--display) !important; font-size: 15px !important; font-weight: 700 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; border: none !important; }
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_2_tb_body .et_pb_text_inner::before { content: 'Date & Time' !important; display: block !important; color: var(--pink) !important; font-size: 10px !important; letter-spacing: 2px !important; text-transform: uppercase !important; margin-bottom: 3px !important; font-weight: 700 !important; }
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_3_tb_body {
  background: var(--surface) !important; border: 1px solid var(--ink-12) !important; border-left: 4px solid var(--purple) !important;
  border-radius: var(--r-sm) !important; padding: 10px 12px !important; margin-top: 8px !important; margin-bottom: 0 !important;
}
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_3_tb_body .et_pb_text_inner { color: var(--ink) !important; font-family: var(--display) !important; font-size: 15px !important; font-weight: 700 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; border: none !important; }
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_3_tb_body .et_pb_text_inner::before { content: 'Tickets' !important; display: block !important; color: var(--purple) !important; font-size: 10px !important; letter-spacing: 2px !important; text-transform: uppercase !important; margin-bottom: 3px !important; font-weight: 700 !important; }

/* Get Tickets button — was a pink→purple gradient with a volt-glow
   hover state unique to this page; flattened to the same .btn-pink
   recipe used everywhere else (Find Events, poster-card Get Tickets,
   Apply), including the same pink-hot hover, so buttons behave
   identically site-wide instead of this one page doing its own thing. */
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_button_0_tb_body {
  background: var(--pink) !important; color: #fff !important; border: none !important; border-radius: var(--r-sm) !important;
  font-family: var(--display) !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: 3px !important;
  text-transform: uppercase !important; padding: 14px 28px !important; display: block !important; text-align: center !important;
  margin-top: 16px !important; width: 100% !important; box-sizing: border-box !important; box-shadow: none !important;
  transition: background 0.18s, transform 0.15s !important;
}
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_button_0_tb_body:hover { background: var(--pink-hot) !important; color: #fff !important; transform: translateY(-2px) !important; box-shadow: none !important; }
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_button_0_tb_body::after { display: none !important; }

body.wp-child-theme-arcade-child.single-tribe_events .et_pb_column_2_tb_body .et_pb_text_inner,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_column_2_tb_body .et_pb_text_inner p { color: var(--ink) !important; font-size: 17px !important; line-height: 1.8 !important; }
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_column_2_tb_body .et_pb_text_inner strong,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_column_2_tb_body .et_pb_text_inner b { color: var(--ink) !important; }
/* Eyebrow label — same small-caps-pink treatment as the homepage's
   .eyebrow (minus the doodle-star icon, which needs real markup this
   pseudo-element can't hold), repurposing what used to be a "display:
   none" reset on this exact pseudo-element. Gives the column a
   deliberate top-of-section moment instead of dropping straight into
   body copy. [show_event_content] renders the event's own post_content
   — itself a full Divi section/row/column/text structure — nested
   *inside* this template's own text module, so there are really two
   .et_pb_text_inner elements stacked (the template's own outer wrapper,
   whose only child is an <h4>, and the event's real one, whose direct
   children are <p> tags) — :has(> p) is required to target only the
   real one, or the label renders twice. */
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_column_2_tb_body .et_pb_text_inner:has(> p)::before {
  display: block !important; content: 'About the Show' !important;
  font-family: var(--display) !important; font-weight: 600 !important; font-size: 12px !important;
  letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--pink) !important;
  margin: 0 0 10px !important;
}
/* First paragraph reads as a lede — larger and bolder than the rest,
   same "opening line carries more weight" idea as the homepage hero
   copy, so the column has a clear entry point instead of every line
   looking the same. */
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_column_2_tb_body .et_pb_text_inner > p:first-of-type {
  font-size: 20px !important; font-weight: 600 !important; line-height: 1.5 !important;
}
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_row_1_tb_body .et_pb_column_2_tb_body::before {
  content: '' !important; display: block !important; width: 100% !important; height: 4px !important;
  background: linear-gradient(to right, var(--pink), var(--blue), rgba(107, 75, 196, 0.15)) !important;
  border-radius: 2px !important; margin-bottom: 20px !important; flex-shrink: 0 !important;
}
/* Closing divider — same dashed "torn paper" line used between
   homepage sections (§.tear), simplified to a single rule here so the
   description has a defined end instead of just stopping. */
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_row_1_tb_body .et_pb_column_2_tb_body::after {
  content: '' !important; display: block !important; border-top: 2px dashed var(--ink-12) !important;
  margin-top: 28px !important; padding-top: 0 !important;
}
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_column_2_tb_body .et_pb_text_inner h4 { display: contents !important; font-size: inherit !important; font-weight: inherit !important; color: inherit !important; text-transform: none !important; letter-spacing: normal !important; margin: 0 !important; }
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_column_2_tb_body .et_pb_text_inner h4 strong { font-weight: inherit !important; color: var(--ink) !important; }

/* Bottom widgets — "Upcoming Shows" (pink) and "Next Team Shows"
   (ink + volt, the same dark/bright pairing used for Month view's
   current-day highlight) — both cards dropped their tinted borders
   for the same riso shadow used on white cards everywhere else. */
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_column_5_tb_body,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_column_6_tb_body { background: var(--surface) !important; border: none !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-riso-neutral) !important; overflow: hidden !important; padding: 0 !important; }
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_7_tb_body .et_pb_text_inner h3,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_8_tb_body .et_pb_text_inner h3 { font-family: var(--display) !important; font-size: 12px !important; letter-spacing: 3px !important; text-transform: uppercase !important; margin: 0 !important; padding: 10px 16px !important; }
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_7_tb_body .et_pb_text_inner,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_8_tb_body .et_pb_text_inner { padding: 0 !important; }
/* "Next Team Shows" was ink+volt — a stark, disconnected combo next to
   the rest of this pink/cream page and, worse, mismatched against its
   OWN purple event-date pills just below it. Swapped to solid --purple
   + white, same treatment as "Upcoming Shows" just a different hue, so
   the two widgets read as a matched pair (pink card / purple card)
   instead of one on-brand and one oddly dark. */
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_7_tb_body .et_pb_text_inner h3 { background: var(--pink) !important; color: #fff !important; }
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_text_8_tb_body .et_pb_text_inner h3 { background: var(--purple) !important; color: #fff !important; }

body.wp-child-theme-arcade-child.single-tribe_events .ecs-event-list { padding: 0 16px !important; margin: 0 !important; list-style: none !important; }
body.wp-child-theme-arcade-child.single-tribe_events .ecs-event-list li.ecs-event,
body.wp-child-theme-arcade-child.single-tribe_events .event-item { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 10px 0 !important; margin: 0 !important; gap: 12px !important; }
body.wp-child-theme-arcade-child.single-tribe_events .ecs-event-list li.ecs-event { border-bottom: 1px solid rgba(202, 39, 121, 0.12) !important; }
body.wp-child-theme-arcade-child.single-tribe_events .ecs-event-list li.ecs-event:last-child { border-bottom: none !important; }
body.wp-child-theme-arcade-child.single-tribe_events .event-grid { padding: 0 16px !important; gap: 0 !important; display: flex !important; flex-direction: column !important; }
body.wp-child-theme-arcade-child.single-tribe_events .event-item { border-bottom: 1px solid rgba(107, 75, 196, 0.12) !important; }
body.wp-child-theme-arcade-child.single-tribe_events .event-item:last-child { border-bottom: none !important; }
body.wp-child-theme-arcade-child.single-tribe_events .ecs-event-list .entry-title,
body.wp-child-theme-arcade-child.single-tribe_events .event-item strong { font-family: var(--display) !important; font-size: 13px !important; font-weight: 700 !important; margin: 0 !important; flex: 1 !important; color: var(--ink) !important; transition: color 0.2s !important; }
body.wp-child-theme-arcade-child.single-tribe_events .ecs-event-list .entry-title a { color: var(--ink) !important; text-decoration: none !important; transition: color 0.2s !important; }
body.wp-child-theme-arcade-child.single-tribe_events .ecs-event-list .entry-title a:hover { color: var(--pink) !important; }
body.wp-child-theme-arcade-child.single-tribe_events .event-item a { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; text-decoration: none !important; color: inherit !important; gap: 12px !important; }
body.wp-child-theme-arcade-child.single-tribe_events .event-item a:hover strong { color: var(--purple) !important; }
body.wp-child-theme-arcade-child.single-tribe_events .ecs-event-list .timezone { display: none !important; }
body.wp-child-theme-arcade-child.single-tribe_events .ecs-event-list .duration.time,
body.wp-child-theme-arcade-child.single-tribe_events .event-date { display: inline-block !important; font-family: var(--display) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; padding: 5px 14px !important; border-radius: 20px !important; white-space: nowrap !important; flex-shrink: 0 !important; line-height: 1 !important; }
body.wp-child-theme-arcade-child.single-tribe_events .ecs-event-list .duration.time { background: rgba(202, 39, 121, 0.1) !important; color: var(--pink) !important; }
body.wp-child-theme-arcade-child.single-tribe_events .ecs-event-list .duration.time *,
body.wp-child-theme-arcade-child.single-tribe_events .ecs-event-list .duration.time a { background: transparent !important; padding: 0 !important; border-radius: 0 !important; display: inline !important; color: inherit !important; font-size: 1em !important; font-weight: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; border: none !important; box-shadow: none !important; }
body.wp-child-theme-arcade-child.single-tribe_events .event-date { background: rgba(107, 75, 196, 0.1) !important; color: var(--purple) !important; }

@media (max-width: 900px) {
  body.wp-child-theme-arcade-child.single-tribe_events .et_pb_row_1_tb_body { flex-direction: column !important; gap: 24px !important; }
  body.wp-child-theme-arcade-child.single-tribe_events .et_pb_row_1_tb_body .et_pb_column_1_tb_body { flex: 1 1 auto !important; width: 100% !important; }
}


/* ============================================================
   48  ACADEMY CLASSES — Content Manager (banner + early-bird)
   Styles the output of [arcade_classes_banner] and the early-bird
   price spans in [arcade_classes_roster] (legacy roster). The
   redesign's own banner lives in arcade-content-manager/assets/
   front.css under .arcade-classes-v2.
   ============================================================ */
.acm-classes-banner {
  background: var(--gold); background-image: var(--dots-gold); background-size: 14px 14px;
  color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--r-md);
  padding: 16px 20px;
  margin: 0 0 22px;
  box-shadow: 5px 5px 0 var(--ink);
}
.acm-classes-banner__msg  { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; margin: 0; }
.acm-classes-banner__note { font-size: 0.9em; opacity: 0.85; margin: 6px 0 0; }
.acm-classes-subhead      { font-family: var(--marker); font-size: 1.3em; color: var(--pink); }

/* Early-bird price presentation inside .acc-price */
.acc-price-tag {
  display: inline-block;
  background: var(--volt);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 8px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  vertical-align: middle;
}
.acc-price-now { font-weight: 800; }
.acc-price-was { color: var(--muted); text-decoration: line-through; font-size: 0.9em; }


/* ============================================================
   49  INSTRUCTORS — header, people grid, past chips & bio modal
   Powers [arcade_instructors] (/classes/instructors) and the
   class roster's bio modal. The arcade-platform teachers page:
   an ink header block, then a grid of round headshots with the
   pink offset — no card boxes — and the past instructors as a
   wall of gold chips. Body-prefixed throughout because the
   legacy blob styles every one of these selectors.
   ============================================================ */
body.wp-child-theme-arcade-child .instructors-page-header {
  background: var(--ink); color: var(--paper);
  border: 3px solid var(--ink); border-radius: var(--r-xl); box-shadow: var(--riso);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 48px); margin: 0 0 40px;
  position: relative; overflow: hidden;
  background-image: var(--dots-dark); background-size: 22px 22px;
}
body.wp-child-theme-arcade-child .instructors-page-header::after { content: none; }
body.wp-child-theme-arcade-child .instructors-page-header::before {
  content: ''; position: absolute; inset: auto -20% -50% -20%; height: 80%;
  background: radial-gradient(ellipse at center, rgba(255, 61, 139, 0.32), transparent 60%); pointer-events: none;
}
body.wp-child-theme-arcade-child .instructors-page-header h1 {
  position: relative; color: var(--paper); font-family: var(--display); font-size: clamp(2.2rem, 5.5vw, 4.2rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 0.92; text-transform: uppercase; margin: 0 0 12px;
}
body.wp-child-theme-arcade-child .instructors-page-header p { position: relative; color: rgba(255, 246, 227, 0.82); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.5; margin: 0; max-width: 60ch; }

body.wp-child-theme-arcade-child .arcade-instructors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 34px 18px; margin-bottom: 56px; }
body.wp-child-theme-arcade-child .arcade-instructor-card {
  background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none;
  text-align: center; cursor: pointer; transition: none;
}
body.wp-child-theme-arcade-child .arcade-instructor-card:hover { transform: none; box-shadow: none; border-color: transparent; }
body.wp-child-theme-arcade-child .instructor-card-photo {
  width: 128px; height: 128px; margin: 0 auto; border-radius: 50%;
  background-color: var(--gold); background-size: cover; background-position: center top;
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--pink);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  transition: transform 0.12s;
}
body.wp-child-theme-arcade-child .arcade-instructor-card:hover .instructor-card-photo { transform: rotate(-4deg) scale(1.04); }
body.wp-child-theme-arcade-child .arcade-instructor-card.is-featured { box-shadow: none; }
body.wp-child-theme-arcade-child .arcade-instructor-card.is-featured .instructor-card-photo { box-shadow: 4px 4px 0 var(--volt); }
body.wp-child-theme-arcade-child .instructor-card-photo[style*="background-image"] .instructor-card-initials { display: none; }
body.wp-child-theme-arcade-child .instructor-card-initials { font-family: var(--display); font-size: 2rem; font-weight: 800; color: var(--ink); letter-spacing: 0; }
body.wp-child-theme-arcade-child .instructor-card-info { padding: 12px 4px 0; text-align: center; }
body.wp-child-theme-arcade-child .instructor-card-name { font-family: var(--display); font-size: 1.05rem; font-weight: 800; text-transform: none; letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; margin-bottom: 3px; }
body.wp-child-theme-arcade-child .instructor-card-meta { font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
body.wp-child-theme-arcade-child .instructor-card-hint { font-family: var(--marker); font-size: 0.85rem; letter-spacing: 0; text-transform: none; color: var(--pink); margin-top: 6px; opacity: 0; transition: opacity 0.15s, color 0.15s; }
body.wp-child-theme-arcade-child .arcade-instructor-card:hover .instructor-card-hint { opacity: 1; color: var(--pink); }

/* Past & Present: a wall of gold chips. The shortcode gives each one an inline
   background:none / border:none, hence the !important on those two. */
body.wp-child-theme-arcade-child .past-instructors-section { background: var(--cream); border: 3px solid var(--ink); border-radius: var(--r-xl); padding: 28px 32px; box-shadow: var(--hard); }
body.wp-child-theme-arcade-child .past-instructors-section h2 { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; color: var(--ink); margin: 0 0 18px; }
body.wp-child-theme-arcade-child .past-instructors-grid { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.85rem; color: var(--ink); }
body.wp-child-theme-arcade-child .past-instructors-grid .arcade-instructor-card {
  display: inline-flex; align-items: center;
  background: var(--gold) !important; border: 2px solid var(--ink) !important; border-radius: 999px;
  font-family: var(--display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 0.45em 0.9em; line-height: 1; cursor: pointer; color: var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}
body.wp-child-theme-arcade-child .past-instructors-grid .arcade-instructor-card:hover { color: var(--ink); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }

/* Bio modal */
body.wp-child-theme-arcade-child .instructor-modal-overlay { position: fixed; inset: 0; background: rgba(19, 12, 28, 0.82); z-index: 99999; display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.2s; }
body.wp-child-theme-arcade-child .instructor-modal-overlay.is-open { display: flex; opacity: 1; }
body.wp-child-theme-arcade-child .instructor-modal { background: var(--cream); border: 3px solid var(--ink); border-radius: var(--r-xl); width: 100%; max-width: 720px; overflow: hidden; box-shadow: var(--riso); transform: translateY(16px) rotate(-0.5deg); transition: transform 0.2s; }
body.wp-child-theme-arcade-child .instructor-modal-overlay.is-open .instructor-modal { transform: none; }
body.wp-child-theme-arcade-child .instructor-modal-accent { height: 10px; background: var(--gold); border-bottom: 3px solid var(--ink); }
body.wp-child-theme-arcade-child .instructor-modal-top { display: flex; align-items: stretch; min-height: 220px; }
body.wp-child-theme-arcade-child .instructor-modal-photo { width: 240px; flex-shrink: 0; background-color: var(--gold); background-size: cover; background-position: center top; display: flex; align-items: center; justify-content: center; border-right: 3px solid var(--ink); }
body.wp-child-theme-arcade-child .instructor-modal-photo[style*="background-image"] .instructor-modal-initials { display: none; }
body.wp-child-theme-arcade-child .instructor-modal-initials { font-family: var(--display); font-size: 3.5rem; font-weight: 800; color: var(--ink); letter-spacing: 0; }
body.wp-child-theme-arcade-child .instructor-modal-header { flex: 1; padding: 24px 22px 20px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; background: var(--paper); }
body.wp-child-theme-arcade-child .instructor-modal-close { position: absolute; top: 14px; right: 14px; background: var(--cream); border: 2px solid var(--ink); color: var(--ink); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 0 var(--ink); transition: background 0.15s; font-family: var(--body); }
body.wp-child-theme-arcade-child .instructor-modal-close:hover { background: var(--pink); color: var(--ink); }
body.wp-child-theme-arcade-child .instructor-modal-name { color: var(--ink); font-family: var(--display); font-size: 1.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.98; margin: 0; }
body.wp-child-theme-arcade-child .instructor-modal-meta { color: var(--pink); font-family: var(--marker); font-size: 1rem; margin-top: 6px; line-height: 1.3; }
body.wp-child-theme-arcade-child .instructor-modal-divider { height: 3px; background: var(--ink); }
body.wp-child-theme-arcade-child .instructor-modal-bio { padding: 22px 26px 28px; color: var(--ink-80); font-size: 0.98rem; line-height: 1.7; max-height: 400px; overflow-y: auto; white-space: pre-line; }
@media (max-width: 768px) {
  body.wp-child-theme-arcade-child .arcade-instructors-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 24px 12px; }
  body.wp-child-theme-arcade-child .instructor-card-photo { width: 108px; height: 108px; }
  body.wp-child-theme-arcade-child .instructor-modal-top { flex-direction: column; min-height: auto; }
  body.wp-child-theme-arcade-child .instructor-modal-photo { width: 100%; height: 240px; border-right: 0; border-bottom: 3px solid var(--ink); }
  body.wp-child-theme-arcade-child .instructor-modal-bio { max-height: 260px; }
}


/* ============================================================
   46  ABOUT / PLAN A VISIT / INFO PAGES  (Content Manager)
   Rendered by [arcade_about], [arcade_plan_visit] and
   [arcade_info key=…] inside a Divi full-width code module.
   Reuses §12 bands / §13 heads / §14 hero / §05 buttons; the
   .about-* .pv-* .info-* classes below are the page pieces.
   Cards are the mockup's .box: cream, 3px ink border, hard
   shadow, a colour fill where the content earns it.
   ============================================================ */

/* Let the code module run edge-to-edge like the homepage (§34), scoped to the
   arcade-fullbleed body class (added by arcade_body_classes for any page built
   from one of these shortcodes). */
body.arcade-fullbleed #main-content .container { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
body.arcade-fullbleed .et_pb_section { padding: 0 !important; }
body.arcade-fullbleed .et_pb_code_inner,
body.arcade-fullbleed .et_pb_fullwidth_code { padding: 0 !important; }
body.arcade-fullbleed .et_pb_row { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
/* A plain (non-builder) page prints Divi's own <h1 class="entry-title"> above
   the content; these pages carry their title in the hero. */
body.arcade-fullbleed h1.entry-title, body.arcade-fullbleed .et_pb_title_container { display: none; }
body.arcade-fullbleed #main-content .container::before { display: none; }

.arcade-section--dark .section-head h2 { color: var(--paper); }

/* Rhythm. These pages' bands were 96px top and bottom with a narrow centred
   intro, which read as wasted space (Ryan, 2026-09-05): tighter bands and
   heads, and the intro runs in two text columns at a wider measure. */
.arcade-page .arcade-section { padding: clamp(34px, 4.5vw, 56px) 0; }
.arcade-page .section-head { margin-bottom: clamp(16px, 2.6vw, 26px); }
.arcade-page .section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }

/* Intro prose */
.about-intro { max-width: 90ch; margin: 0 auto; text-align: left; column-count: 2; column-gap: 44px; }
.about-intro--short { column-count: 1; max-width: 68ch; }   /* under ~60 words: one column, not two stubs */
.about-intro p { font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; color: var(--ink); margin: 0 0 16px; break-inside: avoid; }
.about-intro p:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .about-intro { column-count: 1; } }

/* Mission & Vision — two colour boxes */
.about-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.about-mv-card { background: var(--cream); border: 3px solid var(--ink); border-radius: var(--r-xl); padding: 30px 32px; box-shadow: var(--hard); position: relative; overflow: visible; color: var(--ink); }
.about-mv-card::before { content: none; }
.about-mv-card--mission { background: var(--gold); background-image: var(--dots-gold); background-size: 14px 14px; }
.about-mv-card--vision  { background: var(--volt); }
.about-mv-card .eyebrow { margin-bottom: 10px; color: var(--ink); }
.about-mv-card p { font-size: 1.05rem; line-height: 1.6; color: var(--ink); margin: 0; }

/* Values grid */
.about-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.about-value { background: var(--cream); border: 3px solid var(--ink); border-top-width: 12px; border-radius: var(--r-lg); padding: 18px 18px 20px; box-shadow: var(--hard); }
.about-value--0 { border-top-color: var(--pink); }
.about-value--1 { border-top-color: var(--blue); }
.about-value--2 { border-top-color: var(--orange); }
.about-value--3 { border-top-color: var(--purple); }
.about-value__label { font-family: var(--display); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; color: var(--ink); margin-bottom: 8px; }
.about-value p { font-size: 0.95rem; line-height: 1.55; color: var(--ink-80); margin: 0; }

/* Leadership / help pointer band (dark): one row, copy left, button right. */
.about-lead .arcade-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; text-align: left; }
.about-lead__note { max-width: 60ch; margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; color: rgba(255, 246, 227, 0.85); }

/* Sponsor logo grid — each logo on a cream tile */
.about-sponsors { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; align-items: stretch; }
.about-sponsor { display: flex; align-items: center; justify-content: center; padding: 14px 16px; min-height: 76px; background: var(--cream); border: 2px solid var(--ink); border-radius: var(--r-md); box-shadow: var(--hard-sm); }
.about-sponsor img { max-width: 100%; max-height: 54px; width: auto; height: auto; object-fit: contain; }
.about-sponsor--knockout img { filter: brightness(0); }

/* Awards grid */
.about-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.about-award { background: var(--cream); border: 3px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--hard); padding: 22px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.about-award__badge { width: 84px; height: 84px; }
.about-award__badge img { width: 100%; height: 100%; object-fit: contain; }
.about-award__title { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; }
.about-award__source { font-size: 0.85rem; color: var(--muted); }

/* Video facades (thumbnail links to YouTube — no heavy iframes) */
.about-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.about-videos__year {
  margin: 34px 0 14px; font-family: var(--marker); font-size: 1.2rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--volt) !important;
  display: flex; align-items: center; gap: 14px;
}
.about-videos__year::after { content: ""; flex: 1; height: 2px; background: rgba(255, 246, 227, 0.2); }
.section-head + .about-videos__year { margin-top: 0; }
.about-video { text-decoration: none; display: block; transition: transform 0.15s; }
.about-video:hover { transform: translateY(-4px) rotate(-1deg); }
.about-video__thumb { display: flex; align-items: center; justify-content: center; position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; border: 3px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: 4px 4px 0 var(--gold); }
.about-video__thumb::after { content: ''; position: absolute; inset: 0; background: rgba(19, 12, 28, 0.25); transition: background 0.2s; }
.about-video:hover .about-video__thumb::after { background: rgba(19, 12, 28, 0.08); }
.about-video__play { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 50%; background: var(--pink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: flex; align-items: center; justify-content: center; }
.about-video__play::before { content: ''; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.about-video__title { display: block; margin-top: 12px; font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; color: var(--paper); text-align: center; }

/* Founders */
.about-founders .arcade-wrap { text-align: center; }
.about-founders__photo { max-width: 620px; margin: 0 auto 26px; }
.about-founders__photo img { width: 100%; height: auto; border: 3px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--riso); display: block; }
.about-founders__caption { max-width: 56ch; margin: 0 auto; }
.about-founders__caption p { font-size: 0.95rem; line-height: 1.6; color: var(--ink-80); margin: 0 0 8px; }

/* Plan a Visit — info cards */
.pv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: start; }
.pv-card { background: var(--cream); border: 3px solid var(--ink); border-top-width: 12px; border-radius: var(--r-xl); box-shadow: var(--hard); padding: 24px 26px 26px; }
.pv-card:nth-child(4n+1) { border-top-color: var(--pink); }
.pv-card:nth-child(4n+2) { border-top-color: var(--blue); }
.pv-card:nth-child(4n+3) { border-top-color: var(--orange); }
.pv-card:nth-child(4n+4) { border-top-color: var(--purple); }
.pv-card__title { font-family: var(--display); font-weight: 800; font-size: 1.4rem; text-transform: uppercase; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 10px; line-height: 1; }
.pv-card__body { font-size: 0.98rem; line-height: 1.6; color: var(--ink-80); }
.pv-card__body p { margin: 0 0 12px; }
.pv-card__body p:last-child { margin-bottom: 0; }
.pv-card__body a { color: var(--pink-deep); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.pv-card__body a:hover { color: var(--pink); }
.pv-card__body strong, .pv-card__body b { color: var(--ink); font-weight: 700; }

/* Generic Info page ([arcade_info]) — prose blocks + CTA boxes, one per band. */
.info-block { max-width: 760px; margin: 0 auto; }
/* Media-heavy Info pages (Whose Brine: 16 clips, 49 photos, 19 sponsor cards) get a wider column so their grids can go 3–5 across. */
.info-page--whosebrine .info-block, .info-page--wide .info-block { max-width: 1040px; }
/* A row of small badges/logos: an <img> that declares its width sits inline, so several fit one line (Penny Arcade's award badges). */
.info-block__body img[width] { display: inline-block; vertical-align: middle; margin: 4px 8px 4px 0; }
.info-block__body { font-size: 1.05rem; line-height: 1.65; color: var(--ink); }
.info-block__body p { margin: 0 0 16px; }
.info-block__body p:last-child { margin-bottom: 0; }
.info-block__body a { color: var(--pink-deep); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.info-block__body a:hover { color: var(--pink); }
.info-block__body strong, .info-block__body b { color: var(--ink); font-weight: 700; }
.info-block__body ul, .info-block__body ol { text-align: left; margin: 0 0 16px; padding-left: 22px; }
.info-block__body li { margin-bottom: 8px; }
.info-block__body blockquote { margin: 0 0 16px; padding: 12px 18px; border: 3px solid var(--ink); border-left-width: 12px; border-left-color: var(--pink); border-radius: var(--r-md); background: var(--cream); font-style: italic; color: var(--ink); }
.info-block__body table { width: 100%; border-collapse: collapse; margin: 4px 0 18px; font-size: 0.98rem; text-align: left; }
.info-block__body table td, .info-block__body table th { padding: 11px 14px; border-bottom: 2px dashed var(--ink-12); vertical-align: top; color: var(--ink); }
.info-block__body table tr td:first-child { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; color: var(--pink-deep); }

.info-cta { max-width: 680px; margin: 0 auto; background: var(--cream); border: 3px solid var(--ink); border-radius: var(--r-xl); box-shadow: var(--hard); padding: 32px 36px; text-align: center; }
.info-cta__title { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.2rem); text-transform: uppercase; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 12px; line-height: 0.98; }
.info-cta__body { font-size: 1rem; line-height: 1.6; color: var(--ink-80); margin-bottom: 22px; }
.info-cta .btn { max-width: 100%; white-space: normal; line-height: 1.25; }   /* long labels wrap instead of running past the card on phones */
.info-cta__body p { margin: 0 0 10px; }
.info-cta__body p:last-child { margin-bottom: 0; }
.info-cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; max-width: 900px; margin: 0 auto; align-items: start; }
.info-cta-grid--single { max-width: 680px; }
.info-cta-grid .info-cta { max-width: none; margin: 0; }
.info-cta-grid .info-cta:nth-child(2n) { background: var(--gold); background-image: var(--dots-gold); background-size: 14px 14px; }
.info-cta-grid .info-cta:nth-child(2n) .info-cta__body { color: var(--ink); }
.info-cta-grid .info-cta:nth-child(2n) .btn-pink { background: var(--ink); color: var(--paper); }
.page-hero__cta { margin-top: 22px; }

/* Accordion / FAQ blocks — native <details>, no JS. */
.info-accordion { max-width: 760px; margin: 0 auto; }
.info-accordion__item { background: var(--cream); border: 3px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--hard-sm); margin-bottom: 14px; overflow: hidden; }
.info-accordion__item[open] { box-shadow: var(--hard); }
.info-accordion__q { list-style: none; cursor: pointer; padding: 16px 20px; font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.info-accordion__q::-webkit-details-marker { display: none; }
.info-accordion__q:hover { background: var(--volt); }
.info-accordion__icon { flex-shrink: 0; width: 28px; height: 28px; position: relative; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); }
.info-accordion__icon::before, .info-accordion__icon::after { content: ''; position: absolute; background: var(--ink); border-radius: 2px; }
.info-accordion__icon::before { top: 11px; left: 6px; width: 12px; height: 2.5px; }
.info-accordion__icon::after { top: 6px; left: 11px; width: 2.5px; height: 12px; transition: transform 0.2s; }
.info-accordion__item[open] .info-accordion__icon::after { transform: rotate(90deg); }
.info-accordion__item[open] .info-accordion__icon { background: var(--pink); }
.info-accordion__a { padding: 4px 20px 18px; font-size: 0.98rem; line-height: 1.6; color: var(--ink-80); border-top: 2px dashed var(--ink-12); margin-top: 0; padding-top: 14px; }
.info-accordion__a p { margin: 0 0 12px; }
.info-accordion__a p:last-child { margin-bottom: 0; }
.info-accordion__a a { color: var(--pink-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.info-accordion__a a:hover { color: var(--pink); }
.info-accordion__a strong, .info-accordion__a b { color: var(--ink); }

/* Image blocks */
.info-image { max-width: 860px; margin: 0 auto; text-align: center; }
.info-image__fig { margin: 0; }
.info-image__fig img { max-width: 100%; height: auto; border: 3px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--riso); display: block; margin: 0 auto; }
.info-image__caption { margin-top: 18px; font-family: var(--marker); font-size: 1rem; color: var(--pink); }

/* Embed blocks (Airtable/Google forms, video) */
.info-embed { max-width: 820px; margin: 0 auto; }
.info-embed iframe { width: 100%; height: 720px; border: 3px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--hard); background: var(--cream); display: block; }
.info-embed--video { max-width: 760px; }
.info-embed--video iframe { aspect-ratio: 16 / 9; height: auto; }

/* Two-column block (text + image side by side). */
.info-twocol { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.info-twocol__text { min-width: 0; }
.info-twocol__title { margin: 0 0 14px; font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3.5vw, 2.8rem); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; }
.info-twocol__body { color: var(--ink); font-size: 1.05rem; line-height: 1.6; }
.info-twocol__body p:last-child { margin-bottom: 0; }
.info-twocol__text .btn { margin-top: 22px; }
.info-twocol__media img { width: 100%; height: auto; border: 3px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--riso); display: block; }
.info-twocol--image-left .info-twocol__text { order: 2; }
.info-twocol--image-left .info-twocol__media { order: 1; }

@media (max-width: 700px) {
  .about-mv { grid-template-columns: 1fr; }
  .pv-cards { grid-template-columns: 1fr; }
  .info-cta { padding: 26px 22px; }
  .info-twocol { grid-template-columns: 1fr; gap: 26px; }
  .info-twocol--image-left .info-twocol__text,
  .info-twocol--image-left .info-twocol__media { order: 0; }
}


/* ============================================================
   59  CONTACT FORM  ([arcade_contact])
   Simple stacked form; recipient dropdown routes server-side.
   Inputs: cream, 3px ink border; labels in the display face.
   ============================================================ */
.arcade-contact { max-width: 720px; margin: 0 auto; }
.contact-intro { margin-bottom: 24px; font-size: 1.05rem; }
.contact-notice { padding: 14px 18px; border: 3px solid var(--ink); border-radius: var(--r-md); margin-bottom: 22px; font-weight: 600; box-shadow: 4px 4px 0 var(--ink); }
.contact-notice--ok  { background: var(--volt); color: var(--ink); }
.contact-notice--err { background: #ffe3ec; color: var(--pink-deep); border-color: var(--pink); }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--display); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.contact-field input, .contact-field select, .contact-field textarea {
  font-family: var(--body); font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none;
  padding: 11px 14px; border: 3px solid var(--ink); border-radius: var(--r-md);
  background: var(--cream); color: var(--ink);
}
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { outline: 3px solid var(--volt); outline-offset: 1px; }
.contact-field textarea { resize: vertical; min-height: 130px; }
.contact-submit { align-self: flex-start; margin-top: 4px; cursor: pointer; }
.contact-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.contact-unconfigured { color: var(--muted); font-style: italic; }
@media (max-width: 640px) { .contact-grid { grid-template-columns: 1fr; } }


/* ─────────────────────────────────────────────────────────────────────────────
   §60  WORKSHOPS  ([arcade_workshops], /classes/workshops/)
   One card per upcoming workshop. Finished ones are filtered out server-side,
   so there's no "past" state to style here — only the empty message.
   ───────────────────────────────────────────────────────────────────────────*/
.arcade-workshops__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px;
}
.arcade-workshops__empty {
  text-align: center; color: var(--muted); font-size: 1rem; line-height: 1.6;
  padding: 26px 20px; border: 3px dashed var(--ink-40); border-radius: var(--r-lg);
}
.workshop-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--cream); border-radius: var(--r-lg);
  box-shadow: var(--hard); border: 3px solid var(--ink);
  transition: transform 0.12s;
}
.workshop-card:hover { transform: translate(-2px, -2px); }
.workshop-card__art { height: 168px; background-size: cover; background-position: center; border-bottom: 3px solid var(--ink); background-color: var(--ink-2); }
.workshop-card__body { display: flex; flex-direction: column; flex: 1; gap: 7px; padding: 16px 18px 18px; }
.workshop-card__when {
  font-family: var(--marker); font-size: 0.95rem; color: var(--pink);
}
.workshop-card__title {
  margin: 0; font-family: var(--display); font-size: 1.35rem; font-weight: 800;
  line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink);
}
.workshop-card__teacher { font-size: 0.88rem; color: var(--muted); }
.workshop-card__desc { margin: 2px 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--ink-80); }
.workshop-card__foot {
  margin-top: auto; padding-top: 14px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.workshop-card__cost { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--ink); }
.workshop-card__btn.is-disabled { opacity: 0.55; cursor: default; pointer-events: none; }
.workshop-card--soldout .workshop-card__when { color: var(--muted); }


/* ============================================================
   61  RESPONSIVE — MINIMUM READABLE TYPE ON PHONES
   An audit at 375px turned up a handful of functional labels
   sitting at 9–10px: small on a desktop card, genuinely hard to
   read on a phone. Nothing decorative is touched — .brand-sub
   stays 10px because it's part of the wordmark, not something
   you're meant to read at distance.

   Placed last on purpose: §55's poster rules and the per-
   component rules above both carry !important, so a floor set
   any earlier loses to them.
   ============================================================ */
@media (max-width: 767px) {
  /* "Click for bio" under an instructor photo */
  .instructor-card-hint { font-size: 11px !important; letter-spacing: 1px !important; }
  /* "Early Bird" flag and the Sold out / Waitlist chips on class cards */
  .acc-price-tag { font-size: 11px !important; }
  .arcade-class-card .acc-status { font-size: 11px !important; padding: 3px 9px !important; }
  /* Poster date/cost pills — 9px was my own mobile setting and it was too far */
  body.wp-child-theme-arcade-child .poster .pill { font-size: 11px !important; padding: 3px 8px !important; }
  /* "From" / "Sort" labels above the events-grid filters */
  body.wp-child-theme-arcade-child .arcade-grid-filters__field > span { font-size: 11px !important; }
  /* Board members' names and roles — the grid is two-up here, but a name is
     the whole point of the card and 10px doesn't carry it. */
  .team-board-card__name  { font-size: 12px !important; }
  .team-board-card__title { font-size: 11px !important; }
  /* Homepage rotator: the feature card's date pill and the stub rows' month */
  .rf-body .pill { font-size: 11px !important; }
  .sr-mo { font-size: 11px !important; }
}

/* ============================================================
   62  UNDER-CALENDAR SHOW LIST WITH POSTERS
   The list TEC renders under the month grid for the selected
   day: one cream stub per show with the poster as a thumb.
   ============================================================ */
.tribe-events-calendar-month-mobile-events {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.tribe-events-calendar-month-mobile-events__mobile-day:not(.tribe-events-calendar-month-mobile-events__mobile-day--show) {
  display: none !important;
}

.tribe-events-calendar-month-mobile-events__mobile-day--show {
  display: block !important;
}

.tribe-events-calendar-month-mobile-events__mobile-day--show .tribe-events-calendar-month-mobile-events__mobile-event {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 14px 16px !important;
  background: var(--cream) !important;
  border: 3px solid var(--ink) !important;
  border-radius: var(--r-lg) !important;
  margin-bottom: 14px !important;
  box-shadow: var(--hard-sm) !important;
  transition: transform 0.12s, box-shadow 0.12s !important;
}

.tribe-events-calendar-month-mobile-events__mobile-day--show .tribe-events-calendar-month-mobile-events__mobile-event:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: var(--hard) !important;
}

.tribe-events-calendar-month-mobile-events__mobile-event-featured-image-wrapper {
  flex: 0 0 80px !important;
  width: 80px !important;
  max-width: 80px !important;
  height: 80px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 8px !important;
  border: 2px solid var(--ink) !important;
  overflow: hidden !important;
  background: var(--ink-2) !important;
  margin: 0 !important;
}

.tribe-events-calendar-month-mobile-events__mobile-event-featured-image-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.tribe-events-calendar-month-mobile-events__mobile-event-featured-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.tribe-events-calendar-month-mobile-events__mobile-event-details {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Guard against empty image wrappers / empty sub-menus rendering as blank bars */
.tribe-events-calendar-list__event-featured-image-wrapper:empty,
.tribe-events-calendar-month-mobile-events__mobile-event-featured-image-wrapper:empty,
.single-tribe_events .et_pb_image_0_tb_body:empty,
.nav-links .sub-menu:empty {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}


/* ============================================================
   63  UPCOMING SHOWS LIST BELOW MONTH CALENDAR GRID
   ============================================================ */
.arcade-upcoming-shows-section {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 3px dashed var(--ink-40);
}

.arcade-upcoming-shows-heading {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--ink);
  margin-bottom: 20px;
}

.arcade-upcoming-shows-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.arcade-upcoming-show-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--hard-sm);
  transition: transform 0.12s, box-shadow 0.12s;
}

.arcade-upcoming-show-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--hard);
}

.arcade-upcoming-show-thumb {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  overflow: hidden;
  background: var(--ink-2);
}

.arcade-upcoming-show-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.arcade-upcoming-show-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.arcade-upcoming-show-when {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pink-deep);
}

.arcade-upcoming-show-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.arcade-upcoming-show-title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s;
}

.arcade-upcoming-show-title a:hover {
  color: var(--pink);
}

.arcade-upcoming-show-cost {
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--muted);
}

.arcade-upcoming-show-action {
  flex-shrink: 0;
}

.arcade-upcoming-show-action .btn {
  padding: 0.6em 1em !important;
  font-size: 0.8rem !important;
  border-radius: 999px !important;
}

/* Make entire month calendar grid day cell box clickable */
.tribe-events-calendar-month__day {
  position: relative;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

.tribe-events-calendar-month__day:hover {
  background-color: var(--paper-2) !important;
}

.tribe-events-calendar-month__calendar-event {
  position: relative;
  z-index: 3;
}

/* Fix single event and archive page background to prevent white horizontal bars below card */
body.wp-child-theme-arcade-child.single-tribe_events,
body.wp-child-theme-arcade-child.single-tribe_events #page-container,
body.wp-child-theme-arcade-child.single-tribe_events #et-main-area,
body.wp-child-theme-arcade-child.single-tribe_events .et_builder_inner_content,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_section,
body.wp-child-theme-arcade-child.single-tribe_events .et_pb_row,
body.wp-child-theme-arcade-child.events-archive #page-container,
body.wp-child-theme-arcade-child.events-archive #et-main-area,
body.wp-child-theme-arcade-child.events-archive .et_pb_section,
body.wp-child-theme-arcade-child.post-type-archive-tribe_events #page-container,
body.wp-child-theme-arcade-child.post-type-archive-tribe_events #et-main-area,
body.wp-child-theme-arcade-child.post-type-archive-tribe_events .et_pb_section {
  background: var(--paper) !important;
  background-color: var(--paper) !important;
  background-image: var(--dots) !important;
  background-size: var(--dots-size) !important;
  border-color: transparent !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   §61  MOBILE TOUCH ERGONOMICS  (2026-08-24 audit)
   Tap targets measured 30-37px on phones — under the 44px guideline. Modals
   could clip long bios on short viewports (they had no internal scroll).
   ───────────────────────────────────────────────────────────────────────────*/

/* Modals: never taller than the viewport; scroll inside instead of clipping.
   overflow-y:auto still clips to the border-radius when not scrolling.
   body-class prefix: the legacy Customizer blob (post 12246) re-declares
   .instructor-modal { overflow: hidden } AFTER this sheet loads. */
body.wp-child-theme-arcade-child .instructor-modal,
body.wp-child-theme-arcade-child .team-modal {
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  /* Every CTA button becomes a real thumb target. Padding is preserved;
     min-height only adds room. (.pill stays text-sized on purpose.) */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  /* Rotator arrows + modal close buttons up from 30-34px. */
  .rf-nav { width: 44px; height: 44px; }
  body.wp-child-theme-arcade-child .instructor-modal-close,
  body.wp-child-theme-arcade-child .team-modal__close { width: 40px; height: 40px; font-size: 20px; }

  /* iOS Safari zooms the page when a focused field is under 16px. */
  .contact-field input,
  .contact-field select,
  .contact-field textarea { font-size: 16px; }
}


/* ============================================================
   64  LEGACY CUSTOMIZER CSS — FONT REMAP  (mostly retired 2026-09-05)
   Until 2026-09-05 this held 124 rules re-pointing every 'Oswald'
   selector in the legacy "Additional CSS" blob at the display
   token. The blob is now cut to its Whose Brine (EVENT-BRINE) rules
   — tools/legacy-blob/12246-after-slice3.css, runbook step 5 for
   prod — and only three of those still name Oswald. These are the
   three. If the EVENT-BRINE rules go too, so does this section.
   ============================================================ */
body.wp-child-theme-arcade-child .tag-event-brine .tribe-common-c-btn-border { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine .tribe-events-back a { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine .tribe-events-event-url a { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine .tribe-events-meta-label { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine .tribe-events-meta-value { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine .tribe-events-meta-value * { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine .tribe-events-schedule { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine .tribe-events-schedule .tribe-event-date-end { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine .tribe-events-schedule .tribe-event-date-start { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine .tribe-events-schedule .tribe-events-cost { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine .tribe-events-single-event-description p:has(br) { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine .tribe-events-single-event-description p:has(br)::before { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine .tribe-events-single-event-title { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine .tribe-events-single-section-title { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine .tribe-events-sub-nav a { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine.single-tribe_events [class*="et_pb_row_1"] .et_pb_column:first-child .et_pb_button { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine.single-tribe_events [class*="et_pb_row_1"] .et_pb_column:first-child .et_pb_text:nth-of-type(2) .et_pb_text_inner { font-family: var(--display) !important; }
body.wp-child-theme-arcade-child .tag-event-brine.single-tribe_events [class*="et_pb_row_1"] .et_pb_column:first-child .et_pb_text:nth-of-type(3) .et_pb_text_inner { font-family: var(--display) !important; }


/* ============================================================
   65  RIVERS DIVIDER + WEEK RAIL  (from the arcade-platform mockup)
   ------------------------------------------------------------
   The rivers: three curved strokes — gold, pink, teal, the Mon,
   the Allegheny, the Ohio — meeting at a volt point, on ink. In
   the mockup it is the seam between the ink hero and the first
   paper section. Here it is a class (`.rivers`, usable on any
   Divi module) and it replaces the dashed tear that follows the
   homepage hero, so the homepage content did not have to change.
   The SVG is inline as a data URI so it needs no file and no
   request; preserveAspectRatio='none' lets it stretch to any
   width, as the mockup's does.

   The week rail: [arcade_week_rail] (inc/week-rail.php). One
   card a day, scrolling sideways with snap points; today's card
   is volt; the dot before each title is the show's kind colour,
   the same one its poster chip and its own page use.
   ============================================================ */
.rivers,
.home .et_pb_section:has(.hero) .tear {
  display: block; width: 100%; max-width: none;
  height: clamp(44px, 6.25vw, 90px);
  margin: 0; padding: 0; border: 0;
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C 300 70, 500 0, 720 50 S 1200 30, 1440 55' fill='none' stroke='%23ffb81c' stroke-width='7'/%3E%3Cpath d='M0 58 C 260 10, 520 80, 720 50 S 1150 90, 1440 20' fill='none' stroke='%23ff3d8b' stroke-width='7'/%3E%3Cpath d='M0 40 C 200 90, 480 40, 720 50 S 1250 5, 1440 80' fill='none' stroke='%231fd6c4' stroke-width='7'/%3E%3Ccircle cx='720' cy='50' r='12' fill='%23e9ff3a' stroke='%23130c1c' stroke-width='4'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
}
.rivers::before, .rivers::after,
.home .et_pb_section:has(.hero) .tear::before,
.home .et_pb_section:has(.hero) .tear::after { content: none; border: 0; }
.home .et_pb_section:has(.hero) .tear .tear-eye { display: none; }
/* The rivers are the hero's bottom edge now; the gold rule would double it. */
.home .et_pb_section:has(.hero) .hero { border-bottom: 0; }
/* Divi's own code-module inner has a little padding on non-home pages; the
   rivers want none. */
.et_pb_code_inner > .rivers { margin-left: 0; margin-right: 0; }

/* ---------- week rail ---------- */
.arc-week { position: relative; }
/* The homepage zeroes Divi's section padding (§34), so the rail's section
   carries its own. */
.home .arc-week { padding: clamp(28px, 4vw, 52px) 0 4px; }
.arc-week__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.arc-week__head h2 { margin: 0; }
.arc-week__head .btn { margin-bottom: 6px; }

.arc-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
  gap: 16px; overflow-x: auto; padding: 8px 12px 20px 4px;
  scroll-snap-type: x mandatory; scroll-padding-left: 4px;
  scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
  -webkit-overflow-scrolling: touch;
}
.arc-rail:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; border-radius: var(--r-md); }
.arc-day {
  scroll-snap-align: start;
  background: var(--cream); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--r-xl);
  padding: 16px; box-shadow: var(--hard); min-height: 220px;
}
.arc-day--tonight { background: var(--volt); }
.arc-day__label { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.35rem; line-height: 1; letter-spacing: -0.02em; }
.arc-day__date { font-family: var(--display); font-weight: 700; font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 5px 0 12px; }
.arc-day--tonight .arc-day__date { color: var(--ink-80); }
.arc-day__list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 6px; }
.arc-day__list li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.arc-day__list li::marker { content: none; }
.arc-day__list a {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; align-items: start;
  text-decoration: none; color: var(--ink); font-size: 0.92rem; line-height: 1.2;
  padding: 8px; border-radius: 10px; border: 2px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.arc-day__list a:hover { border-color: var(--ink); background: var(--paper); }
.arc-day--tonight .arc-day__list a:hover { background: var(--cream); }
.arc-day__list b { font-family: var(--display); font-weight: 800; font-size: 0.95rem; white-space: nowrap; }
.arc-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; border: 1.5px solid var(--ink); vertical-align: 1px; background: var(--paper); }
.arc-dot--pink   { background: var(--pink); }
.arc-dot--volt   { background: var(--volt); }
.arc-dot--teal   { background: var(--teal); }
.arc-dot--orange { background: var(--orange); }
.arc-dot--purple { background: var(--purple); }
.arc-dot--blue   { background: var(--blue); }
.arc-dot--gold   { background: var(--gold); }
.arc-day--tonight .arc-dot--volt { background: var(--paper); }
.arc-day__more a { grid-template-columns: 1fr; font-family: var(--display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--pink-deep); }
.arc-day--empty { grid-column: 1 / -1; min-height: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 28px; }
.arc-day--empty p { color: var(--muted); margin: 6px 0 0; }
.arc-day--empty a { color: var(--pink-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ---- List | Posters (arc-week--switch, 2026-09-05) ----------------------
   One section, two views of the same week. data-view on .arc-week decides;
   the list is the server-rendered default, so no-JS visitors get the list. */
.arc-week__tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.arc-week__views {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 999px; box-shadow: var(--hard);
}
.arc-week__view {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  font-family: var(--display); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 0.55em 0.95em; border-radius: 999px; transition: background 0.12s, color 0.12s;
}
.arc-week__view svg { width: 14px; height: 14px; }
.arc-week__view:hover { background: var(--cream); }
.arc-week__view.is-on, .arc-week__view.is-on:hover { background: var(--ink); color: var(--volt); }
.arc-week__view:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }
.arc-week[data-view="posters"] .arc-rail,
.arc-week[data-view="posters"] .arc-week__days { display: none !important; }
.arc-week:not([data-view="posters"]) .arc-week__posters { display: none; }
.arc-week__posters { padding: 6px 0 4px; }
.arc-week__key { margin: 0 0 20px; color: var(--muted); font-size: 0.95rem; max-width: 62ch; }
.arc-week__posters .arc-wall__grid .poster__img { box-shadow: var(--hard); }

/* Day tabs — rendered always, shown only on phones once script.js adds .js-tabs. */
.arc-week__days { display: none; }
.arc-week__day {
  appearance: none; -webkit-appearance: none; cursor: pointer; flex: 0 0 auto;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px;
  font-family: var(--display); font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1;
  padding: 0.55em 0.8em;
}
.arc-week__day small { font-weight: 700; font-size: 0.85em; opacity: 0.6; margin-left: 2px; }
.arc-week__day[aria-selected="true"] { background: var(--ink); color: var(--volt); box-shadow: 3px 3px 0 var(--pink); }
.arc-week__day[aria-selected="true"] small { opacity: 0.8; }
.arc-week__day:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }

@media (max-width: 767px) {
  .arc-rail { grid-auto-columns: minmax(200px, 74vw); gap: 12px; padding: 6px 10px 16px 2px; }
  .arc-day { min-height: 0; padding: 14px; }
  .arc-week__head .btn { margin-bottom: 0; }
  .arc-week__tools { width: 100%; justify-content: space-between; margin-bottom: 0; }
  /* One day at a time: tabs above, the picked day's card below, nothing scrolls sideways. */
  .arc-week.js-tabs .arc-week__days { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 12px; }
  .arc-week.js-tabs .arc-rail { display: block; overflow: visible; padding: 4px 4px 12px 0; scroll-snap-type: none; }
  .arc-week.js-tabs .arc-day { display: none; }
  .arc-week.js-tabs .arc-day.is-active { display: block; }
  .arc-week.js-tabs .arc-day__list a { font-size: 1rem; padding: 9px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-rail { scroll-behavior: auto; }
}


/* ============================================================
   66  PHONES — THE LANGUAGE AT SMALL SIZES  (2026-09-05 audit)
   ------------------------------------------------------------
   A 375px scan of twenty pages found no horizontal overflow, but
   three things that read wrong at that size: the 6px/12px hard
   shadows are heavy on a card that is already the whole screen
   wide; the Staff page fell to one 136px avatar per row because
   its Divi row is still 80% wide on phones; and a handful of
   chips and labels dipped under 11px. Placed after §61's floor
   on purpose — same specificity, later wins.
   ============================================================ */
@media (max-width: 767px) {
  /* Shadows two thirds the size. Every hard-shadow rule reads these tokens. */
  :root {
    --hard:     4px 4px 0 var(--ink);
    --hard-sm:  3px 3px 0 var(--ink);
    --hard-lg:  6px 6px 0 var(--ink);
    --riso:     4px 4px 0 var(--pink), 8px 8px 0 var(--gold);
    --shadow-riso-pink:    4px 4px 0 var(--gold),  8px 8px 0 var(--teal);
    --shadow-riso-purple:  4px 4px 0 var(--pink),  8px 8px 0 var(--volt);
    --shadow-riso-orange:  4px 4px 0 var(--ink),   8px 8px 0 var(--pink);
  }
  .btn:hover { box-shadow: var(--hard); }

  /* Divi rows are 80% wide by default. On a phone that is a third of the
     screen gone, and it is what made the people grids single-column. §45c
     already does this for .arcade-section rows; these pages have none. */
  .et_pb_row:has(.team-staff-grid),
  .et_pb_row:has(.team-board-section),
  .et_pb_row:has(.arcade-instructors-grid),
  .et_pb_row:has(.instructors-page-header),
  .et_pb_row:has(.arcade-classes-v2),
  .et_pb_row:has(.arcade-workshops__grid) { width: 100%; max-width: none; }

  /* People grids two-up, avatars sized for it. Body-prefixed to match §23/§24/§49. */
  body.wp-child-theme-arcade-child .team-staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  body.wp-child-theme-arcade-child .team-staff-card__avatar-wrap { width: 112px; height: 112px; }
  body.wp-child-theme-arcade-child .team-staff-card__name { font-size: 0.95rem; }
  body.wp-child-theme-arcade-child .team-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; padding: 18px 12px; }
  body.wp-child-theme-arcade-child .team-board-card__avatar { width: 88px; height: 88px; font-size: 1.3rem; }
  body.wp-child-theme-arcade-child .team-block-title { font-size: 2rem; }
  body.wp-child-theme-arcade-child .arcade-instructors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
  body.wp-child-theme-arcade-child .instructors-page-header { padding: 24px 20px; }
  body.wp-child-theme-arcade-child .instructors-page-header h1 { font-size: 2rem; }
  body.wp-child-theme-arcade-child .past-instructors-section { padding: 20px 18px; }
  .arcade-people-v2 .arc-people-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }

  /* 11px floor for the chips and small labels the scan caught at 10–10.9px. */
  .arc-chip, .arc-chip--sm, .arcade-classes-v2 .arc-chip, .arcade-class-v2 .arc-chip,
  .arcade-people-v2 .arc-chip, .arc-event .arc-chip { font-size: 11px !important; }
  .arc-team__show-date small, .arc-relstub__meta, .arc-teacher__id small,
  .arc-datelist__day small, .arc-stub__time small,
  .arc-person__meta, .arc-klass__meta, .arc-day__date { font-size: 11px !important; }
  .stub__mo, .sr-mo, .event-list-widget__date .m { font-size: 11px !important; }

  /* Page heroes: the display face is wide, and a long title at 41px wraps to
     four lines on a 343px column. */
  .page-hero h1 { font-size: clamp(2rem, 9.5vw, 2.6rem); }
  .page-hero { padding: 34px 0 30px; }
  .arcade-people-v2 .arc-teams-archive__title { font-size: clamp(2.4rem, 12vw, 3.2rem); }

  /* The events bar's view tabs stack raggedly on TEC's phone layout, and the
     active pill sat on the bar's bottom edge. */
  body.wp-child-theme-arcade-child .tribe-events-c-view-selector__list { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; }
  body.wp-child-theme-arcade-child .tribe-events-c-events-bar { padding-bottom: 22px !important; }
  body.wp-child-theme-arcade-child .tribe-events-c-events-bar__views { margin-top: 12px !important; margin-bottom: 4px !important; }
  body.wp-child-theme-arcade-child .tribe-events-c-view-selector__list-item-link { padding: 8px 16px !important; }

  /* Rotator feature card: the 16/10 art plus its chin is most of a screen;
     let the list of stub rows be the thing you reach first on a phone. */
  .rotator-grid { grid-template-columns: 1fr; }
  .rotator-feature { order: 2; }
  .rotator-list { order: 1; }

  /* Centred body copy is fine for two lines on a desktop and hard work for
     twelve on a phone. */
  .about-intro, .about-intro p, .about-lead__note { text-align: left; }
  .info-cta { text-align: left; }
  .info-cta .btn { align-self: flex-start; }

  /* Ticket stub notches are a desktop flourish; at 22px they eat the card. */
  .stub::before, .stub::after { width: 16px; height: 16px; }
  .stub::before { left: -11px; } .stub::after { right: -11px; }
}


/* ============================================================
   67  IN THE NEWS  ([arcade_press])
   Press coverage as a grid of link cards under the page hero:
   the article's image on top, outlet chip and date, headline,
   blurb, "Read at …". Year markers in the marker face split the
   run. Cards without an image are cream boxes.
   ============================================================ */
.press-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.press-year { grid-column: 1 / -1; margin: 10px 0 -6px; font-family: var(--marker); font-weight: 400; font-size: 1.4rem; color: var(--pink); display: flex; align-items: center; gap: 14px; }
.press-year::after { content: ''; flex: 1; height: 3px; border-top: 3px dashed var(--ink-40); }
.press-year:first-child { margin-top: 0; }
.press-card {
  display: flex; flex-direction: column; background: var(--cream); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--hard);
  text-decoration: none; transition: transform 0.12s;
}
a.press-card:hover { transform: translate(-2px, -2px) rotate(-0.4deg); color: var(--ink); }
.press-card__img { display: block; aspect-ratio: 16 / 9; background: var(--ink-2) center / cover no-repeat; border-bottom: 3px solid var(--ink); }
.press-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.press-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.press-card__title { font-family: var(--display); font-weight: 800; font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.01em; }
.press-card__blurb { font-size: 0.95rem; line-height: 1.55; color: var(--ink-80); }
.press-card__more { margin-top: auto; padding-top: 6px; font-family: var(--display); font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--pink-deep); }
.press-card--text { background: var(--gold); background-image: var(--dots-gold); background-size: 14px 14px; }
.press-card--text .press-card__blurb, .press-card--text .press-card__meta { color: var(--ink); }
.press-card--text .press-card__more { color: var(--ink); }
/* "Seen us in the news?" — the reader's way in, under the cards. */
.press-submit {
  margin-top: clamp(28px, 4vw, 44px); padding: 26px 28px;
  background: var(--volt); border: 3px solid var(--ink); border-radius: var(--r-xl); box-shadow: var(--hard);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.press-submit .eyebrow { color: var(--ink); }
.press-submit h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; margin: 0 0 6px; }
.press-submit p { margin: 0; color: var(--ink-80); max-width: 54ch; }
.press-submit .btn { background: var(--ink); color: var(--volt); }
@media (max-width: 767px) {
  .press-grid { grid-template-columns: 1fr; gap: 18px; }
  .press-submit { padding: 20px; }
}


/* ============================================================
   68  POSTER WALL  ([arcade_poster_wall] — "Posters, n'at")
   The mockup's home-page poster grid, in the dark section that
   replaced the "Next up" rotator on 2026-09-05. Cards are §16's
   .poster; this section adds the grid, the head with its lead,
   and the two stamps on the art (kind chip, "Tonight · 8pm").
   ============================================================ */
.arc-wall { position: relative; }
.arc-wall__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.arc-wall__head h2 { margin: 0; }
.arc-wall__lead { margin: 0 0 6px; max-width: 46ch; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.45; }
.arcade-section--dark .arc-wall__lead { color: rgba(255, 246, 227, 0.65); }

.arc-wall__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; }
.arc-wall__grid .poster { color: inherit; }
.arc-wall__grid .poster__img { padding: 0; box-shadow: var(--riso); }
.arc-wall__grid .poster__body { padding: 16px 6px 0 !important; gap: 6px; }
.arc-wall__grid .poster__meta { font-size: 0.85rem; color: var(--muted); }
.arc-wall__grid .poster__meta .pill { font-size: 0.62rem; }
.arcade-section--dark .arc-wall__grid .poster__name { color: var(--paper); }
.arcade-section--dark .arc-wall__grid .poster__meta { color: rgba(255, 246, 227, 0.65); }

/* Kind chip, top-left; "Tonight · 8pm", bottom-right — ink on volt, the mockup's stamp. */
.poster__chip { position: absolute; top: 10px; left: 10px; z-index: 5; box-shadow: 2px 2px 0 var(--ink); }
.poster__when {
  position: absolute; right: 10px; bottom: 10px; z-index: 5;
  background: var(--ink); color: var(--volt);
  font-family: var(--display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.02em;
  text-transform: uppercase; padding: 0.35em 0.65em; border-radius: 8px; white-space: nowrap;
}
.poster--nopic .poster__img { display: grid; place-items: center; padding: 20px !important; }
.arc-wall__grid .poster--nopic .poster__img-title { text-align: center; font-size: 1.5rem; }

.arc-wall__foot { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 40px); }
.arcade-section--dark .arc-wall__foot .btn { background: var(--gold); color: var(--ink); }
.arc-wall__empty { padding: 28px; border: 3px dashed rgba(255, 246, 227, 0.35); border-radius: var(--r-lg); text-align: center; }
.arc-wall__empty p { margin: 0; }
.arc-wall__empty a { color: var(--gold); }

/* The "Next up" tear used to sit on cream; under the dark wall it needs the dark stub holes. */
.arcade-section--dark .tear { --stub-hole: var(--ink); }

@media (max-width: 1100px) { .arc-wall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .arc-wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .arc-wall__grid .poster__body { padding: 12px 4px 0 !important; gap: 4px; }
  .arc-wall__grid .poster__name { font-size: 15px; }
  .arc-wall__grid .poster__meta { font-size: 12px; }
  .poster__chip { top: 8px; left: 8px; }
  .poster__when { right: 8px; bottom: 8px; font-size: 0.68rem; padding: 0.3em 0.55em; }
  .arc-wall__grid .poster--nopic .poster__img-title { font-size: 1.1rem; }
  .arc-wall__lead { margin-bottom: 0; }
}


/* ============================================================
   69  KEYBOARD FOCUS  (2026-09-05 accessibility pass)
   One visible ring for everything you can tab to. Ink on the
   cream pages, volt on ink — never the browser default blue,
   never nothing. :focus-visible so mouse clicks stay clean.
   ============================================================ */
body.wp-child-theme-arcade-child a:focus-visible,
body.wp-child-theme-arcade-child button:focus-visible,
body.wp-child-theme-arcade-child [role="button"]:focus-visible,
body.wp-child-theme-arcade-child [tabindex="0"]:focus-visible,
body.wp-child-theme-arcade-child input:focus-visible,
body.wp-child-theme-arcade-child select:focus-visible,
body.wp-child-theme-arcade-child textarea:focus-visible,
body.wp-child-theme-arcade-child summary:focus-visible {
  outline: 3px solid var(--ink) !important; outline-offset: 3px; border-radius: 6px;
}
body.wp-child-theme-arcade-child .hero :focus-visible,
body.wp-child-theme-arcade-child .page-hero :focus-visible,
body.wp-child-theme-arcade-child .topbar :focus-visible,
body.wp-child-theme-arcade-child .arcade-section--dark :focus-visible,
body.wp-child-theme-arcade-child .arcade-section--video :focus-visible,
body.wp-child-theme-arcade-child .site-footer :focus-visible,
body.wp-child-theme-arcade-child footer :focus-visible,
body.wp-child-theme-arcade-child .nav-links > li.menu-btn-shows > a:focus-visible,
body.wp-child-theme-arcade-child .instructor-modal-overlay :focus-visible,
body.wp-child-theme-arcade-child .team-modal-overlay :focus-visible {
  outline-color: var(--volt) !important;
}
/* Pills and round buttons keep their own shape under the ring. */
body.wp-child-theme-arcade-child .btn:focus-visible,
body.wp-child-theme-arcade-child .pill:focus-visible,
body.wp-child-theme-arcade-child .nav-links a:focus-visible,
body.wp-child-theme-arcade-child .arc-week__view:focus-visible,
body.wp-child-theme-arcade-child .arc-week__day:focus-visible { border-radius: 999px; }
body.wp-child-theme-arcade-child .arcade-instructor-card:focus-visible,
body.wp-child-theme-arcade-child .team-staff-card:focus-visible,
body.wp-child-theme-arcade-child .poster:focus-visible,
body.wp-child-theme-arcade-child .arc-person:focus-visible { border-radius: var(--r-xl); }
/* The dropdown a parent opens on focus stays open while a child link has focus (focus-within, §46). */