/*
 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:      1.2.0
 License:      Private
 Text Domain:  arcade-child
*/

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

   TABLE OF CONTENTS
   00  Design tokens (:root)
   01  Google Fonts import
   02  Reset & base
   03  Typography scale
   04  Utility classes
   05  Buttons
   06  Pills & tags
   07  Navigation & topbar
   08  Alert bar
   09  Hero — split panel
   10  Hero — show rotator (right panel)
   11  Show ticker
   12  Section scaffold
   13  Section header pattern
   14  Interior page hero (slim banner)
   15  Ticket stub cards
   16  Poster cards (events archive grid)
   17  Academy / color-block feature
   18  Class cards — full (featured/on-sale)
   19  Class cards — compact (listing view)
   20  Video section
   21  Image treatments
   22  People — instructor grid
   23  People — staff & leadership grids
   24  People — board grid
   25  People — modal lightbox
   26  Calendar & list widget
   27  Events archive (/events TEC overrides)
   28  Single event page
   29  Footer
   30  Divi global resets (all !important flags live here)
   31  Responsive — tablet (768–1024px)
   32  Responsive — mobile (<=767px)
   33  Reduced motion
   34  Homepage — full-width suppression
   35  v7.1 homepage Code module support (legacy — unused, kept
       for the mobile .arc- overrides below until confirmed dead)
   36  Nav — live status pill
   37  Hero — photo pin-frame (v12.1)
   38  Tear divider
   39  "Next up" — featured rotator + list
   40  Feature-color block (riso variant — Academy + donate)
   41  Spotlight postcards
   42  Video — play button
   43  Footer — v12.1 four-column grid (reference only —
       the live footer is the Divi Theme Builder Global Footer,
       see divi-classes.md; not wired up automatically)
   44  Confetti
   45  Responsive — v12.1 sections (<=900px)
   ============================================================ */


/* ============================================================
   00  DESIGN TOKENS
   v1.1: Updated to match v7.1 design system
   v1.2: Confirmed already aligned with the v12.1 "riso-fun"
   mockup (fonts/colors unchanged) — new sections 36-45 add the
   v12.1-only pieces (rotator, spotlight, tear, confetti, etc.)
   ============================================================ */
:root {
  /* Brand colours */
  --pink:         #ca2779;
  --pink-hot:     #ff3d8b;
  --pink-deep:    #9c1c5c;
  --purple:       #6b4bc4;
  --purple-deep:  #3f2c7e;
  --blue:         #2773ca;
  --orange:       #c2601a;
  --volt:         #ffe600;
  --volt-deep:    #d4c000;
  --bulb:         #ffce4a;

  /* Neutrals */
  --ink:          #1d1626;
  --ink-80:       rgba(29, 22, 38, 0.80);
  --ink-40:       rgba(29, 22, 38, 0.40);
  --ink-12:       rgba(29, 22, 38, 0.12);
  --paper:        #f4ecdd;
  --paper-2:      #fbf6ec;
  --surface:      #ffffff;
  --muted:        #6b6275;
  --muted-light:  #a89fb0;

  /* Polaroid frame (rotator feature card) — deliberately darker than
     --paper so the frame reads against the tan page background. */
  --polaroid:      #e7d9bc;
  --polaroid-line: rgba(29, 22, 38, 0.10);

  /* Level system */
  --l1:     #ca2779;
  --l1-bg:  #fbeaf0;
  --l1-ink: #72243e;
  --l2:     #2773ca;
  --l2-bg:  #e6f1fb;
  --l2-ink: #0c447c;
  --l3:     #c2601a;
  --l3-bg:  #faece7;
  --l3-ink: #712b13;
  --l4:     #6b4bc4;
  --l4-bg:  #eeedfe;
  --l4-ink: #3c3489;

  /* Typography */
  --display: 'Oswald', sans-serif;
  --script:  'Kaushan Script', cursive;
  --body:    'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Shadows */
  --shadow-sm:   0 4px 16px rgba(29, 22, 38, 0.08);
  --shadow-md:   0 8px 32px rgba(29, 22, 38, 0.10);
  --shadow-lift: 0 20px 56px rgba(202, 39, 121, 0.22);
  --shadow-dark: 0 26px 70px rgba(202, 39, 121, 0.30);

  /* Riso shadows — two-color offset (mimics risograph ink misregistration)
     plus a soft ambient shadow for actual lift, instead of one flat hard
     offset. Paired against each card's own background so the offset
     colors read clearly rather than blending into the card itself. */
  --shadow-riso-neutral: 4px 4px 0 var(--pink), 8px 8px 0 var(--blue), 14px 18px 30px rgba(29, 22, 38, 0.22);
  --shadow-riso-pink:    4px 4px 0 var(--blue), 8px 8px 0 var(--purple), 14px 18px 30px rgba(29, 22, 38, 0.22);
  --shadow-riso-purple:  4px 4px 0 var(--pink), 8px 8px 0 var(--orange), 14px 18px 30px rgba(29, 22, 38, 0.22);
  --shadow-riso-orange:  4px 4px 0 var(--purple), 8px 8px 0 var(--pink), 14px 18px 30px rgba(29, 22, 38, 0.22);

  /* Spacing */
  --pad-section:    64px;
  --pad-section-sm: 36px;
}


/* ============================================================
   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);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* warm radial spotlight */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    70% 40% at 50% -5%,
    rgba(255, 206, 74, 0.15),
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

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

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

.arcade-wrap         { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.arcade-wrap--narrow { max-width: 840px; }
.arcade-wrap--wide   { max-width: 1400px; }


/* ============================================================
   03  TYPOGRAPHY SCALE
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 8px;
}
.doodle-star { width: 13px; height: 13px; flex-shrink: 0; }

.script {
  font-family: var(--script);
  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: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.04;
  color: var(--ink);
}

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


/* ============================================================
   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
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, transform 0.15s,
              box-shadow 0.18s, border-color 0.18s;
}

.btn-pink { background: var(--pink); color: #fff; padding: 12px 24px; }
.btn-pink:hover {
  background: var(--pink-hot); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 61, 139, 0.40);
}

.btn-volt { background: var(--volt); color: var(--ink); padding: 12px 24px; }
.btn-volt:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255, 230, 0, 0.45);
}

.btn-ghost {
  background: transparent; color: var(--ink);
  padding: 11px 22px;
  border: 1.5px solid var(--ink);
}
.btn-ghost:hover { border-color: var(--pink); color: var(--pink); }

.btn-ghost-light {
  background: transparent; color: rgba(255,255,255,0.85);
  padding: 11px 22px;
  border: 1.5px solid rgba(255,255,255,0.38);
}
.btn-ghost-light:hover { border-color: #fff; color: #fff; }

.btn-white { background: #fff; color: var(--pink-deep); padding: 12px 24px; }
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.16);
}

.btn--sm   { padding: 7px 16px; font-size: 11px; }
.btn--lg   { padding: 15px 32px; font-size: 14px; }
.btn--full { display: block; width: 100%; }


/* ============================================================
   06  PILLS & TAGS
   ============================================================ */
.pill {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  line-height: 1.2;
  white-space: nowrap;
}

.pill-time  { background: rgba(202, 39, 121, 0.10); color: var(--pink); }
.pill-cost  { background: rgba(255, 230, 0, 0.20);  color: #7a6200; }
.pill-flag  { background: var(--volt); color: var(--ink); }
.pill-alert { background: var(--pink); color: #fff; }
.pill-sold  { background: var(--ink);  color: #fff; }
.pill-few   { background: rgba(194, 96, 26, 0.12); color: var(--orange); }
.pill-l1 { background: var(--l1-bg); color: var(--l1-ink); }
.pill-l2 { background: var(--l2-bg); color: var(--l2-ink); }
.pill-l3 { background: var(--l3-bg); color: var(--l3-ink); }
.pill-l4 { background: var(--l4-bg); color: var(--l4-ink); }


/* ============================================================
   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: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center; padding: 10px 20px;
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}
.arcade-alert a { color: var(--pink-deep); text-decoration: underline; text-underline-offset: 2px; }


/* ============================================================
   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
   ============================================================ */
.arcade-section { padding: var(--pad-section) 0; background: var(--paper); position: relative; z-index: 1; }
.arcade-section--light  { background: var(--paper-2); }
.arcade-section--white  { background: var(--surface); }
.arcade-section--dark   { background: var(--ink); }
.arcade-section--dark .eyebrow { color: var(--volt); }
.arcade-section--dark h1,
.arcade-section--dark h2,
.arcade-section--dark h3 { color: #fff; }
.arcade-section--dark p   { color: rgba(255,255,255,0.55); }
.arcade-section--compact  { padding: var(--pad-section-sm) 0; }


/* ============================================================
   13  SECTION HEADER PATTERN
   ============================================================ */
.section-head { margin-bottom: 32px; }
.section-head h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 3.2vw, 36px);
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.04;
  color: var(--ink); margin: 0;
}
.section-head--center { text-align: center; }
.section-head--center .section-rule { margin-left: auto; margin-right: auto; }


/* ============================================================
   14  INTERIOR PAGE HERO (slim banner)
   ============================================================ */
.page-hero {
  background: var(--ink); padding: 40px 0;
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right, var(--pink), var(--blue), var(--purple), var(--volt));
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 8px 8px; pointer-events: none;
}
.page-hero .eyebrow { color: var(--pink); position: relative; z-index: 1; }
.page-hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 4vw, 42px);
  text-transform: uppercase; letter-spacing: 0.04em; color: #fff;
  margin: 0; position: relative; z-index: 1;
}
.page-hero p { color: rgba(255,255,255,0.48); font-size: 15px; margin-top: 8px; line-height: 1.6; position: relative; z-index: 1; }


/* ============================================================
   15  TICKET STUB CARDS
   ============================================================ */
.stub-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

.stub {
  display: flex; background: var(--surface);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  overflow: hidden; text-decoration: none; color: var(--ink);
  transition: transform 0.2s, box-shadow 0.2s;
}
.stub:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.stub__date {
  flex-shrink: 0; width: 76px; background: var(--pink); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px 0; position: relative;
}
.stub__date::after {
  content: ''; position: absolute; right: -7px; top: 0; bottom: 0; width: 14px;
  background: radial-gradient(circle at right, transparent 0 6px, var(--surface) 6px) repeat-y;
  background-size: 14px 14px;
}
.stub__mo { font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--volt); line-height: 1; }
.stub__day { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; margin-top: 3px; }

.stub__body { flex: 1; padding: 14px 18px 14px 22px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.stub__name { font-family: var(--display); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.1; color: var(--ink); }
.stub__venue { font-size: 12px; color: var(--muted); }
.stub__badges { display: flex; gap: 5px; flex-wrap: wrap; }


/* ============================================================
   16  POSTER CARDS
   ============================================================ */
.poster-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }

.poster {
  display: flex; flex-direction: column; background: var(--surface);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md);
  text-decoration: none; color: var(--ink);
  transition: transform 0.22s, box-shadow 0.22s;
}
.poster:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

/* Was a fixed 200px window with `cover` + `center top`, which scaled an 800x800
   poster to 379px tall and showed only its top ~53% — the art the show is sold
   on, cut in half on the card advertising it. A square box with `contain` shows
   the whole poster: the square ones (nearly all of them) fill it exactly, and
   taller art letterboxes against the card colour instead of losing its ends.
   Keep in step with the copy in ghostlight/assets/css/shows-grid.css — that
   sheet loads first, so this one wins wherever both are present. */
.poster__img {
  position: relative; aspect-ratio: 1 / 1;
  background-color: var(--purple-deep);
  display: flex; align-items: flex-end; padding: 14px; overflow: hidden;
}
/* Blurred stand-in for whatever the poster doesn't cover, so an off-square
   upload still reads as full-bleed instead of floating on flat colour. Inset
   past the edges so the blur's own soft border stays outside the card. */
.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);
}
/* The poster itself, whole. A square one covers the fill exactly. */
.poster__img-art {
  position: absolute; inset: 0; z-index: 1;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.poster__img::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 7px 7px;
}
.poster__img::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(to top, rgba(29,22,38,0.68), transparent 55%);
}
.poster__img-title {
  position: relative; z-index: 4;
  font-family: var(--display); font-weight: 700; font-size: 24px;
  text-transform: uppercase; color: #fff; line-height: 0.96;
}
.poster__body {
  padding: 14px 16px 18px; text-align: center; position: relative;
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.poster__body::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--pink), var(--blue), var(--purple));
}
.poster__name { font-family: var(--display); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); line-height: 1.1; }


/* ============================================================
   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
   ============================================================ */
.arcade-class-card { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-md); }
.arcade-class-card .acc-header { display: flex; align-items: center; gap: 10px; padding: 11px 16px; }
.arcade-class-card .acc-level { background: rgba(255,255,255,0.25); color: #fff; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; flex-shrink: 0; }
.arcade-class-card .acc-title { color: #fff; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0.07em; 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; font-family: var(--display); font-weight: 700; font-size: 18px; background-size: cover; background-position: center top; flex-shrink: 0; }
.arcade-class-card .acc-instructor-name { font-size: 11px; 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: 13px; line-height: 1.4; }
.arcade-class-card .acc-info-label { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #888; min-width: 80px; flex-shrink: 0; }
.arcade-class-card .acc-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 4px; }
.arcade-class-card .acc-price-regular { font-size: 13px; font-weight: 700; color: var(--ink); }
.arcade-class-card .acc-price-earlybird { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 4px; background: var(--volt); color: var(--ink); }
.arcade-class-card .acc-description { font-size: 14px; color: #333; line-height: 1.65; margin: 0 0 12px; }
.arcade-class-card .acc-button { display: inline-block; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 22px; border-radius: var(--r-sm); color: #fff; transition: opacity 0.18s, transform 0.14s; }
.arcade-class-card .acc-button:hover { opacity: 0.88; transform: translateY(-1px); }
/* 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 { border: 2px solid var(--l1); }
.class-level-1 .acc-header { background: var(--l1); }
.class-level-1 .acc-avatar { background-color: #f4c0d1; border-color: var(--l1); 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 { border: 2px solid var(--l2); }
.class-level-2 .acc-header { background: var(--l2); }
.class-level-2 .acc-avatar { background-color: #b5d4f4; border-color: var(--l2); 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 { border: 2px solid var(--l3); }
.class-level-3 .acc-header { background: var(--l3); }
.class-level-3 .acc-avatar { background-color: #f5c4b3; border-color: var(--l3); 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 { border: 2px solid var(--l4); }
.class-level-4 .acc-header { background: var(--l4); }
.class-level-4 .acc-avatar { background-color: #cecbf6; border-color: var(--l4); 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); }

/* Class-card niceties (CPT): 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.
   Button-color rules are body-anchored + !important to beat the per-level
   .acc-button backgrounds above and the legacy blob. */
.arcade-class-card { position: relative; }
.arcade-class-card.is-featured { box-shadow: 0 0 0 3px var(--volt), var(--shadow-md); }
.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: 700; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 44px; transform: rotate(45deg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.arcade-class-card .acc-status {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--display); font-weight: 700; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 11px; border-radius: 20px;
}
.arcade-class-card .acc-status--soldout  { background: #b32d2e; color: #fff; }
.arcade-class-card .acc-status--waitlist { background: #ffd23f; color: #3a2c00; }
body.wp-child-theme-arcade-child .arcade-class-card .acc-button--soldout {
  background: #8a8a8a !important; color: #fff !important; cursor: default;
}
.arcade-class-card .acc-button--soldout:hover { opacity: 1; transform: none; }
body.wp-child-theme-arcade-child .arcade-class-card .acc-button--waitlist {
  background: #e6a700 !important; color: #3a2c00 !important;
}

/* Featured badge + highlight ring for people cards (instructor grid, staff &
   board grids). Same volt accent as the class ribbon; box-shadow ring shows
   even on overflow:hidden cards (a shadow isn't clipped by overflow). */
.arcade-instructor-card.is-featured,
.team-staff-card.is-featured,
.team-board-card.is-featured { position: relative; box-shadow: 0 0 0 3px var(--volt), var(--shadow-md); }
.card-featured-badge {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  background: var(--volt); color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25); 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; }
.arcade-section--video::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 100%, rgba(202,39,121,0.10), transparent 65%);
  pointer-events: none;
}
.video-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 2px solid rgba(202,39,121,0.32); box-shadow: var(--shadow-md); aspect-ratio: 16/9; }
.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
   ============================================================ */
.arcade-instructors-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.arcade-instructor-card { background: var(--surface); border: 2px solid rgba(202,39,121,0.18); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.arcade-instructor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--pink); }
.instructor-card__photo { height: 200px; background-color: var(--l4-bg); background-size: cover; background-position: center top; display: flex; align-items: center; justify-content: center; position: relative; }
.instructor-card__initials { font-family: var(--display); font-size: 48px; font-weight: 700; color: rgba(202,39,121,0.14); }
.instructor-card__info { padding: 16px 18px 20px; text-align: center; }
.instructor-card__name { font-family: var(--display); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); line-height: 1.2; }
.instructor-card__meta { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.instructor-card__hint { font-family: var(--display); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(202,39,121,0.38); margin-top: 8px; transition: color 0.18s; }
.arcade-instructor-card:hover .instructor-card__hint { color: var(--pink); }


/* ============================================================
   23  PEOPLE — STAFF & LEADERSHIP GRIDS
   ============================================================ */
.team-block-title { font-family: var(--display); font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); margin: 0 0 16px; }
.team-leadership-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 32px; }
.team-leader-card { background: var(--ink); border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(202,39,121,0.30); cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
.team-leader-card:hover { border-color: rgba(202,39,121,0.70); transform: translateY(-3px); }
.team-leader-card__accent { height: 3px; background: linear-gradient(to right, var(--pink), var(--purple)); }
.team-leader-card__photo { height: 220px; background-color: var(--purple-deep); background-size: cover; background-position: center top; position: relative; display: flex; align-items: center; justify-content: center; }
.team-leader-card__photo::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 55%; background: linear-gradient(to top, var(--ink), transparent); }
.team-leader-card__meta { padding: 14px 18px 18px; position: relative; }
.team-leader-card__role { font-family: var(--display); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: var(--pink); margin-bottom: 4px; }
.team-leader-card__name { color: #fff; font-family: var(--display); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.2; }
.team-staff-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 28px; }
.team-staff-card { background: var(--surface); border-radius: var(--r-md); border: 2px solid #eee; padding: 22px 14px 18px; text-align: center; cursor: pointer; transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s; }
.team-staff-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(202,39,121,0.13); border-color: rgba(202,39,121,0.40); }
.team-staff-card__avatar-wrap { width: 128px; height: 128px; border-radius: 50%; margin: 0 auto 14px; background-color: var(--l1-bg); background-size: cover; background-position: center top; border: 3px solid var(--pink); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.team-staff-card__avatar-circle { font-family: var(--display); font-size: 34px; font-weight: 700; color: var(--pink); }
.team-staff-card__name { font-family: var(--display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); line-height: 1.2; }
.team-staff-card__title { font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-top: 4px; }


/* ============================================================
   24  PEOPLE — BOARD GRID
   ============================================================ */
.team-board-section { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; border: 2px solid rgba(202,39,121,0.18); box-shadow: var(--shadow-sm); margin-bottom: 28px; }
.team-board-header { background: var(--ink); padding: 13px 22px; }
.team-board-header__title { color: #fff; font-family: var(--display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; }
.team-board-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; padding: 22px; }
.team-board-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; cursor: pointer; padding: 12px 6px; border-radius: var(--r-md); transition: background 0.18s; }
.team-board-card:hover { background: #fdf0f5; }
.team-board-card__avatar { width: 100px; height: 100px; border-radius: 50%; background-color: var(--l4-bg); background-size: cover; background-position: center top; border: 2px solid rgba(107,75,196,0.28); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--l4-ink); transition: border-color 0.18s, box-shadow 0.18s; }
.team-board-card:hover .team-board-card__avatar { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(202,39,121,0.13); }
/* The legacy Customizer blob (post 12246) still carries an older
   .team-board-card__avatar {width:64px} that loads after this file; the
   body.wp-child-theme-arcade-child prefix (always present) out-specifies it so
   the intended size wins without !important. (Retire the blob's team CSS later.) */
body.wp-child-theme-arcade-child .team-board-card__avatar { width: 100px; height: 100px; font-size: 24px; }
.team-board-card__name { font-family: var(--display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); line-height: 1.2; }
.team-board-card__title { font-size: 10px; color: var(--muted); line-height: 1.4; }


/* ============================================================
   25  PEOPLE — MODAL LIGHTBOX
   ============================================================ */
.team-modal-overlay { position: fixed; inset: 0; background: rgba(29,22,38,0.72); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.24s; }
.team-modal-overlay.is-open { opacity: 1; pointer-events: all; }
.team-modal { background: var(--surface); border-radius: var(--r-lg); width: 100%; max-width: 580px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,0.32); transform: translateY(14px) scale(0.97); transition: transform 0.24s; }
.team-modal-overlay.is-open .team-modal { transform: translateY(0) scale(1); }
.team-modal__accent { height: 3px; background: linear-gradient(to right, var(--pink), var(--blue), var(--purple)); }
.team-modal__top { display: flex; align-items: stretch; min-height: 168px; }
.team-modal__photo { width: 185px; flex-shrink: 0; background-color: var(--l4-bg); background-size: cover; background-position: center top; display: flex; align-items: center; justify-content: center; }
.team-modal__photo-initials { font-family: var(--display); font-size: 52px; font-weight: 700; color: rgba(202,39,121,0.18); }
.team-modal__header { flex: 1; padding: 22px 22px 18px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; background: var(--paper-2); }
.team-modal__close { position: absolute; top: 12px; right: 12px; background: var(--ink-12); border: none; color: var(--muted); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background 0.18s, color 0.18s; }
.team-modal__close:hover { background: var(--pink); color: #fff; }
.team-modal__name { color: var(--ink); font-family: var(--display); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.1; }
/* Same blob collision as .team-board-card__avatar above: the legacy
   Customizer CSS (post 12246, ~line 1622) paints .team-modal__name white —
   unreadable on this header's tan background. The body-class prefix
   out-specifies it so ink wins without !important. */
body.wp-child-theme-arcade-child .team-modal__name { color: var(--ink); }
body.wp-child-theme-arcade-child .team-modal__title { color: var(--muted); }
body.wp-child-theme-arcade-child .team-modal__photo-initials { color: rgba(202, 39, 121, 0.18); }
.team-modal__title { color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.4; }
.team-modal__bio { padding: 20px 24px 26px; color: #444; font-size: 14px; line-height: 1.85; max-height: 280px; overflow-y: auto; }
@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; }
  body.wp-child-theme-arcade-child .team-modal__bio { max-height: 240px; }
}


/* ============================================================
   26  CALENDAR & LIST WIDGET
   ============================================================ */
.event-list-widget { background: var(--surface); border: 2px solid rgba(202,39,121,0.24); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.event-list-widget__head { background: var(--pink); color: #fff; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.17em; text-transform: uppercase; padding: 11px 18px; }
.event-list-widget__item { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid 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: #fdf0f5; }
.event-list-widget__date { font-family: var(--display); font-weight: 700; text-align: center; flex-shrink: 0; width: 36px; line-height: 1; }
.event-list-widget__date .d { font-size: 22px; display: block; }
.event-list-widget__date .m { font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--pink); display: block; }
.event-list-widget__name { font-family: var(--display); font-weight: 700; font-size: 14px; text-transform: uppercase; flex: 1; letter-spacing: 0.04em; line-height: 1.2; }
.event-list-widget__time { font-size: 11px; 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)); color: #fff; 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 §36-47 v12.1 band variants —
   !important always beats specificity regardless of selector, so a
   blanket rule here would silently override .arcade-section--light/
   --white/--dark/--video no matter how those were written. Those
   variants get their own !important background right below instead,
   keeping the "all !important lives in §30" rule intact. */
.et_pb_section:not(.arcade-section--light):not(.arcade-section--white):not(.arcade-section--dark):not(.arcade-section--video) { background-color: var(--paper) !important; }
.et_pb_section.arcade-section--light { background-color: var(--paper-2) !important; }
.et_pb_section.arcade-section--white { background-color: var(--surface) !important; }
.et_pb_section.arcade-section--dark  { background-color: var(--ink) !important; }
.et_pb_section.arcade-section--video { background-color: var(--ink) !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 — confirmed
   in the actual rendered <body> tag) — anchoring to it adds one extra
   class of specificity, which wins regardless of load order, without
   touching or deleting the legacy CSS (still load-bearing elsewhere:
   Events archive, single event page, Team/Instructors pages, class
   cards). */
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) { background-color: var(--paper) !important; }
body.wp-child-theme-arcade-child .et_pb_section.arcade-section--light { background-color: var(--paper-2) !important; }
body.wp-child-theme-arcade-child .et_pb_section.arcade-section--white { background-color: var(--surface) !important; }
body.wp-child-theme-arcade-child .et_pb_section.arcade-section--dark  { background-color: var(--ink) !important; }
body.wp-child-theme-arcade-child .et_pb_section.arcade-section--video { background-color: var(--ink) !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; text-transform: uppercase !important; letter-spacing: 0.04em !important; }
/* Headings needed the same colour treatment §1113 gives body copy. 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 white. */
.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(--surface) !important; }
/* /about/staff/ — the team section's heading takes the script face. Scoped by
   the grid it introduces rather than a page id, so it survives the page being
   rebuilt or renumbered. Kaushan is a single 400 weight and reads badly in
   caps, so the uppercase/tracking treatment above is lifted here. */
.et_pb_section:has(.team-staff-grid) .et_pb_text h2 {
  font-family: var(--script) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}
.et_pb_button::after { display: none !important; }
.et_pb_button { font-family: var(--display) !important; font-weight: 700 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; border-radius: var(--r-sm) !important; }
.arcade-section--dark .et_pb_text_inner,
.arcade-section--dark .et_pb_text_inner p { color: rgba(255,255,255,0.55) !important; }
.arcade-section--dark .et_pb_text h1,
.arcade-section--dark .et_pb_text h2,
.arcade-section--dark .et_pb_text h3 { color: #fff !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 */
.arcade-page,
.arcade-page * { font-family: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif; 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" / "Next show ..." pill next to the brand
   mark. Feeds from [arcade_open_tonight].
   ============================================================ */
.pill-live { background: rgba(107, 75, 196, 0.12); color: var(--purple); cursor: pointer; }
.pill-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); display: inline-block; margin-right: 2px; }


/* ============================================================
   37  HERO — PHOTO PIN-FRAME (v12.1)
   The "pinned photo" treatment on the right side of the hero —
   a white mat, riso drop-shadow, dashed postage stamp, and a
   Ken-Burns photo slider. Pairs with the existing hero-panel
   (§09) — swap hero-right's plain slide-fill for this frame
   when using the v12.1 hero layout.
   ============================================================ */
.pin-frame {
  background: #fff; padding: 12px 12px 40px;
  box-shadow: var(--shadow-riso-neutral);
  transform: rotate(-1.5deg);
  position: relative; width: 100%; max-width: 400px; margin: 0 auto;
}
.pin-frame::before {
  content: ''; position: absolute; top: -10px; left: 50%;
  width: 70px; height: 22px; background: var(--purple);
  transform: translateX(-50%) rotate(-2deg);
}
.hero-photo { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.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: 10px; left: 0; right: 0; text-align: center; font-family: var(--script); font-size: 17px; color: var(--ink); }
.photo-dots { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; gap: 6px; }
.photo-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }
.photo-dot.active { background: var(--pink); }
.stamp {
  position: absolute; top: -18px; right: -22px; width: 88px; height: 88px;
  border-radius: 50%; border: 2.5px dashed var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(-14deg); background: rgba(244, 236, 221, 0.94); z-index: 4;
}
.stamp span { font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; line-height: 1.15; 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".
   ============================================================ */
/* margin-top separates it a bit from the content above; the negative
   margin-bottom pulls the section's own bottom padding (§12, --pad-section)
   in closer so the gap to the next section isn't double-padded. */
.tear { display: flex; align-items: center; gap: 10px; max-width: 1180px; margin: 20px auto -36px; padding: 6px 24px 0; }
.tear::before, .tear::after { content: ''; flex: 1; border-top: 2px dashed var(--ink-12); }
.tear-eye { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ink-12); background: var(--paper); 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: 26px; align-items: start; }

.rotator-list { display: flex; flex-direction: column; gap: 12px; max-height: 680px; overflow-y: auto; padding-right: 2px; scroll-behavior: smooth; }
.stub-row {
  position: relative; display: flex; background: var(--surface);
  border-radius: var(--r-sm); box-shadow: 3px 3px 0 var(--ink-12);
  overflow: hidden; cursor: pointer; text-decoration: none; color: var(--ink);
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.stub-row:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink-12); }
.stub-row.active { box-shadow: 4px 4px 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;
}
.sr-date::after {
  content: ''; position: absolute; right: -1px; top: 0; bottom: 0; width: 10px;
  background-image: radial-gradient(circle, #fff 0 3px, transparent 3.4px);
  background-size: 10px 13px; background-repeat: repeat-y;
}
.sr-mo { font-family: var(--display); font-size: 10px; letter-spacing: 0.16em; opacity: 0.85; }
.sr-day { font-family: var(--display); font-weight: 700; font-size: 27px; line-height: 1; }
.sr-thumb { flex-shrink: 0; width: 68px; background-size: cover; background-position: center; background-color: var(--purple-deep); }
.sr-body { flex: 1; min-width: 0; padding: 18px 12px 18px 18px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.sr-name { font-family: var(--display); font-weight: 700; font-size: 16px; text-transform: uppercase; line-height: 1.15; }
.sr-meta { font-size: 12.5px; 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-12); border-radius: 50%;
  color: var(--ink); text-decoration: none;
  transition: transform 0.15s, border-color 0.15s, background 0.15s, color 0.15s;
}
.sr-details svg { width: 15px; height: 15px; display: block; }
.stub-row:hover .sr-details { border-color: var(--pink); color: var(--pink); transform: translateX(2px); }
.sr-details:hover, .sr-details:focus-visible { background: var(--pink); border-color: var(--pink); color: #fff; }

/* Polaroid treatment: the poster sits inside an even frame and the
   "chin" below (title/meta/CTA) is part of the same frame — one solid
   card in --polaroid, deliberately darker than the tan page background.
   Keeps the riso two-color offset shadow underneath (design language). */
.rotator-feature {
  position: relative; background: var(--polaroid);
  border: 1px solid var(--polaroid-line);
  border-radius: var(--r-sm); box-shadow: var(--shadow-riso-neutral);
  overflow: hidden; padding: 16px 16px 0;
}
.rf-art {
  position: relative; aspect-ratio: 16/10; width: 100%;
  background-size: cover; background-position: center; transition: background 0.3s;
  background-color: var(--purple-deep);
  border: 1px solid var(--polaroid-line); border-radius: 2px;
}

.rf-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(29,22,38,0.55); color: #fff; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.rf-nav:hover { background: rgba(29,22,38,0.85); }
.rf-nav-prev { left: 12px; }
.rf-nav-next { right: 12px; }

.rf-tab {
  position: absolute; top: 14px; left: -8px; background: var(--ink); color: var(--paper);
  font-family: var(--display); font-weight: 700; font-size: 9px; letter-spacing: 0.14em;
  padding: 5px 12px 5px 16px; transform: rotate(-3deg);
}
.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: 700; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); z-index: 5; display: none;
}
.sale-ribbon.purple { background: var(--purple); }
.sale-ribbon.pink   { background: var(--pink); }
.sale-ribbon.ink    { background: var(--ink); }
/* 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 8px 22px; position: relative; }
.rf-title {
  font-family: var(--display); font-weight: 700; font-size: 26px;
  text-transform: uppercase; line-height: 0.98; margin: 12px 0 4px;
  min-height: 51px; /* two lines at 26px/0.98 — 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-size: 11px; letter-spacing: 0.1em;
  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; }


/* ============================================================
   40  FEATURE-COLOR BLOCK (riso variant)
   A flatter, hard-shadow sibling to §17's feature-block — used
   for the Academy block (fc-left/fc-right + ct-tile level rows)
   and the donate/support block (feature-color.support +
   support-inner, single centered column, no fc-grid split).
   ============================================================ */
/* Academy block went pink → orange (Ryan's pick from the recolor options;
   layout unchanged). Only post 2632 uses .feature-color, and the donate
   block re-overrides via .support, so recoloring the base is safe. */
.feature-color { background: var(--orange); border-radius: var(--r-lg); overflow: hidden; position: relative; box-shadow: var(--shadow-riso-orange); }
.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; }
.fc-logo img { width: 100%; height: 100%; object-fit: cover; }
.fc-left .eyebrow { color: #fff; }
.fc-left h3 { font-family: var(--display); font-weight: 700; font-size: 32px; text-transform: uppercase; color: #fff; margin: 10px 0 14px; line-height: 1.02; }
.fc-left p { color: rgba(255, 255, 255, 0.85); max-width: 320px; margin-bottom: 22px; }
.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-sm); background: #fff; }
.ct-badge { width: 40px; height: 40px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 12px; 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); }
.ct-main { flex: 1; min-width: 0; }
.ct-name { font-family: var(--display); font-weight: 700; font-size: 14px; text-transform: uppercase; color: var(--ink); }
.ct-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ct-price { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--ink); flex-shrink: 0; text-align: right; }

/* Donate block: deep purple, not the mid-purple the rest of §40 uses.
   The mid tone sat awkwardly between the tan page and its own white text
   ("weird place contrast-wise") — going darker anchors the section and
   lifts the copy/CTA contrast instead. */
.feature-color.support { background: var(--purple-deep); box-shadow: var(--shadow-riso-purple); }
.support-inner { position: relative; z-index: 1; padding: 48px 42px; text-align: center; max-width: 560px; margin: 0 auto; }
.support-inner .eyebrow { color: var(--volt); justify-content: center; }
.support-inner h3 { font-family: var(--display); font-weight: 700; font-size: 30px; text-transform: uppercase; color: #fff; margin: 10px 0 14px; line-height: 1.05; }
.support-inner p { color: rgba(255, 255, 255, 0.92); margin-bottom: 22px; }


/* ============================================================
   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 30px; }
.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: #fff; padding: 8px 8px 14px; box-shadow: 4px 4px 0 var(--ink-12); 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; }
.postcard-name { font-family: var(--display); font-weight: 700; font-size: 13px; text-transform: uppercase; color: #fff; }
.postcard-cap { font-family: var(--script); font-size: 14px; color: var(--muted); text-align: center; margin-top: 8px; }


/* ============================================================
   42  VIDEO — PLAY BUTTON
   .video-frame itself is already defined in §20 (soft shadow,
   16:9) and is left as-is to avoid changing it everywhere it's
   already in use — this only adds the missing play-button glyph
   for the homepage's "video coming soon" placeholder.
   ============================================================ */
.video-play { width: 66px; height: 66px; border-radius: 50%; background: var(--pink); 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 — v12.1 FOUR-COLUMN GRID (reference only)
   The live footer is the Divi Theme Builder Global Footer,
   already styled by §29's .arcade-footer* (3-column). These
   classes match the v12.1 mockup's 4-column brand/explore/
   contact/map layout in case the Global Footer template is
   ever updated to it — not wired up or activated automatically.
   ============================================================ */
.site-footer { background: var(--paper); border-top: 3px solid var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; padding: 44px 0 30px; }
.f-head { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.f-col a { display: block; font-size: 13px; color: var(--muted); margin-bottom: 9px; }
.f-col a:hover { color: var(--pink); }
.f-brand p { font-size: 13px; color: var(--muted); margin: 10px 0 16px; max-width: 220px; }
.f-socials { display: flex; gap: 10px; }
.f-socials a { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 10px; font-weight: 700; color: var(--ink); }
.f-socials a:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.f-socials a svg { width: 16px; height: 16px; display: block; }
.f-contact p { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.f-map iframe { width: 100%; height: 130px; border: 0; filter: grayscale(0.15) contrast(1.03); }
.f-logos { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 24px 0; border-top: 1px solid var(--ink-12); }
.f-logos-label { font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.f-logos img { height: 34px; width: auto; }
.footer-bottom { border-top: 2px solid var(--ink-12); padding: 18px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); }
.footer-legal a { margin-left: 16px; }
.footer-legal a:hover { color: var(--pink); }


/* ============================================================
   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; }
}
@media (prefers-reduced-motion: reduce) {
  .spotlight-track, .photo-slide.active { animation: none !important; }
}


/* ============================================================
   46  HOMEPAGE — OWN TOPBAR + NAV
   The homepage builds its own topbar/nav directly in its Code
   module content (the sitewide Theme Builder header is hidden
   on .home via §34). Deliberately separate class names from
   §07's .arcade-nav/.arcade-topbar system used by that header,
   so this block and the sitewide one never collide even though
   only one is ever in the DOM on a given page.
   ============================================================ */
.topbar { background: var(--ink); color: var(--paper); position: relative; z-index: 100; }
.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 24s 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-size: 11px; 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(--pink); 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: 24px; height: 24px; border-radius: var(--r-sm);
  border: 1px solid rgba(244, 236, 221, 0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 9px; font-weight: 700; color: var(--paper);
  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: 2px solid var(--ink); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--purple); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 17px;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; }
.brand-sub { font-family: var(--display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.brand-status { display: flex; align-items: center; gap: 8px; margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--ink-12); flex-wrap: wrap; }

/* list-style/margin/padding reset needed now that .nav-links is a real
   <ul> from wp_nav_menu() on interior pages (the homepage's own nav
   uses bare <a> tags instead, where these are no-ops). */
.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-links li { list-style: none; }
.nav-links a:not(.btn) { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:not(.btn):hover { color: var(--pink); }

/* Standout Shows / Calendar button in header navbar */
.nav-links > li.menu-btn-shows {
  margin-right: 4px;
  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(--pink, #e63073) !important;
  color: #ffffff !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-family: var(--display) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px rgba(230, 48, 115, 0.35) !important;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
  text-decoration: none !important;
  line-height: 1 !important;
  border: none !important;
}
.nav-links > li.menu-btn-shows > a:hover {
  background: var(--pink-hot, #ff3d8b) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(230, 48, 115, 0.45) !important;
}

/* Dropdowns — menu items with children (e.g. Academy, Shows, About) */
.nav-links > li { position: relative; }
.nav-links .menu-item-has-children > a::after { content: '⌄'; margin-left: 5px; font-size: 0.95em; opacity: 0.55; display: inline-block; line-height: 1; }
.nav-links .sub-menu {
  position: absolute; top: 100%; left: -14px;
  min-width: 210px; margin: 0; padding: 8px 0; list-style: none;
  background: var(--surface); border: 1px solid var(--ink-12);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.16s, transform 0.16s, visibility 0.16s; z-index: 100;
}
.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 20px; white-space: nowrap; font-size: 12px; color: var(--ink); }
.nav-links .sub-menu a:not(.btn):hover { color: var(--pink); background: #fdf0f5; }
/* 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: 244px !important; min-width: 244px !important; max-width: 244px !important; }
body.wp-child-theme-arcade-child .nav-links .sub-menu a:not(.btn) { white-space: normal; line-height: 1.35; }

/* 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. (The topbar ticker is
   already clipped by .topbar-marquee and is not the cause.) */
#page-container { overflow-x: clip; }

.burger { display: none; background: none; border: 1.5px solid var(--ink); border-radius: var(--r-sm); padding: 8px 9px; cursor: pointer; }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 4px 0; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: block; }
  /* Burger open: sub-menus become inline, expanded & indented (no hover on touch) */
  .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; }
  .nav-links.is-open .menu-item-has-children > a::after { content: ''; }
  .topbar-social { display: none; }
}


/* ============================================================
   47  HOMEPAGE — HERO TEXT COLUMN (v12.1)
   Pairs with §37's .pin-frame photo column. The text-column
   wrapper is named .hero-copy, not .hero-left, specifically to
   avoid colliding with §09's existing .hero-left (the older
   hero-panel system, which has its own padding/flex rules that
   would otherwise leak into this unrelated block).
   ============================================================ */
.hero { padding: 52px 0 34px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.hero-copy h1 {
  font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 0.94;
  text-transform: uppercase; text-shadow: 4px 4px 0 var(--pink); margin-top: 14px;
}
.script-wrap { position: relative; display: inline-block; }
.hero-copy h1 .script {
  font-family: var(--script); font-weight: 400; font-size: 0.8em; text-transform: none;
  color: var(--pink); text-shadow: none; display: inline-block; transform: rotate(-4deg);
}
.squiggle-under { position: absolute; left: -4px; bottom: -8px; width: calc(100% + 8px); height: 14px; }
.hero-sub { color: var(--muted); margin: 18px 0 26px; max-width: 360px; font-size: 16px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: 38px; }
}


/* ============================================================
   49  EVENTS — LIST VIEW
   Events without a featured image render with no thumbnail by
   default (List View has none built in — that's the Grid/Photos
   view's job). Events WITH a featured image do render one via
   TEC's own markup, and per the user's explicit call this view
   should never show a poster at all — hidden below, see that
   rule's own comment for why hiding just the <img> wasn't enough.
   Same pink date-tag + card visual language as the homepage's
   rotator-list/stub-row, for consistency between "Next up" and
   the full /events list.

   Layout is "Name – Date/Time – Cost" all on one line, then the
   blurb below — but title/datetime/cost are scattered across
   three different DOM parents (title+datetime inside
   .event-header, cost a separate sibling after description), so
   they can't share a line via plain markup order. Fix:
   `display: contents` on .event-header removes it from the box
   model without touching the DOM, promoting title + datetime to
   be direct children of .event-details, which becomes a wrapping
   flex row; `order` sequences title/datetime/cost together and
   `flex-basis: 100%` forces the blurb onto its own line below.
   (All three of these !important — see that rule's comment for why.)
   ============================================================ */
.tribe-events-calendar-list__month-separator-text {
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  padding: 8px 0;
}
/* The bare-class rule above is silently beaten by TEC's own higher-specificity
   .tribe-common styles (same root cause as §56/§57), so the label rendered
   near-stock — and the separator's ::after LINE was never styled at all,
   leaving TEC's stock #d5d5d5: a washed gray-white line that appears right
   under the preceding event's description at every month boundary (the
   "random white line under some events" report, 2026-07-19). Anchor + brand
   both, plus the views' pagination nav whose stock top border is the same
   #d5d5d5 under the last listed event. */
body.wp-child-theme-arcade-child .tribe-events-calendar-list__month-separator-text {
  font-family: var(--display) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--muted) !important;
}
body.wp-child-theme-arcade-child .tribe-events-calendar-list__month-separator::after {
  background-color: var(--ink-12) !important;
}
body.wp-child-theme-arcade-child .tribe-events .tribe-events-c-nav {
  border-top-color: var(--ink-12) !important;
}
/* User wants no poster in List view at all (title/blurb only). Hiding
   just the <img> left an empty reserved grid column showing as a blank
   white box — TEC's own views-skeleton.css sets `.tribe-events
   .tribe-events-calendar-list__event-featured-image-wrapper{flex:none}`
   (a real, un-!important'd rule but with higher specificity than a bare
   class selector), so the wrapper's column space survived even with the
   image inside it hidden. Hiding the wrapper itself removes it from the
   row's flex layout entirely, so .event-details expands to fill the row. */
/* Show the event poster as a thumbnail between the date stub and the details —
   this site is poster-forward, so the list should show them (was display:none). */
/* Posters are square (1080×1080), so the thumbnail is a fixed 96×96 square,
   vertically centered in the row, rather than stretched to row height (which
   center-crops the sides). Sits at the row's trailing edge because TEC's
   .tribe-common-g-row makes .event flex-direction:row-reverse — the date stub's
   perforated edge then cleanly separates date from text, poster as a right cap. */
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: var(--r-sm) !important; background: var(--paper-2) !important; }
html body.wp-child-theme-arcade-child .tribe-events .tribe-events-calendar-list__event-featured-image { width: 96px !important; height: 96px !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; }
/* Date stub: TEC's own `.tribe-events .…__event-date-tag` (0,2,0) out-specifies
   the bare-class rule below and injects 24px side padding + flex:auto, blowing
   the stub out to ~136px. Pin it back to a clean fixed width here. */
html body.wp-child-theme-arcade-child .tribe-events .tribe-events-calendar-list__event-date-tag { flex: 0 0 72px !important; width: 72px !important; padding: 14px 6px !important; }
.tribe-events-calendar-list__event-row {
  display: flex; align-items: stretch; gap: 0;
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: 3px 3px 0 var(--ink-12);
  margin-bottom: 14px; overflow: hidden; list-style: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.tribe-events-calendar-list__event-row:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink-12); }
.tribe-events-calendar-list__event-date-tag {
  flex-shrink: 0; width: 72px; background: var(--pink); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 0; position: relative;
}
.tribe-events-calendar-list__event-date-tag::after {
  content: ''; position: absolute; right: -1px; top: 0; bottom: 0; width: 10px;
  background-image: radial-gradient(circle, var(--surface) 0 3px, transparent 3.4px);
  background-size: 10px 14px; background-repeat: repeat-y;
}
/* TEC's own `.tribe-events .event-date-tag-weekday` rule (2-class compound,
   beats a bare 1-class selector even un-!important'd) was quietly setting
   a negative margin-bottom and a different font-size — the actual source
   of the lopsided vertical centering the user flagged, not the flex rules
   above (those were already correct). The <time> wrapper is made flex too
   so centering doesn't depend on its own intrinsic height matching its
   children exactly. Sizes bumped up per "should be bigger" feedback. */
.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: 12px !important; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff !important; opacity: 0.85;
  margin: 0 !important;
}
.tribe-events-calendar-list__event-date-tag-daynum {
  display: block; font-family: var(--display); font-weight: 700; font-size: 32px !important;
  line-height: 1.1; color: #fff !important; margin: 4px 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: 9px 18px; box-sizing: border-box; height: 100%;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px;
  align-content: center;
}
/* TEC's own views-skeleton.css sets `.tribe-events .event-header{display:
   flex;flex-direction:column}` plus its own order values on the title/
   datetime children — a real, more-specific (3-class descendant) rule
   that silently beat this `display:contents` and the order values below
   with no !important on either side, so the "dissolve the header" trick
   never actually applied and title/datetime rendered in TEC's own order
   inside their own mini column instead of sharing a line with cost.
   None of TEC's competing rules use !important, so adding it here is
   sufficient to win regardless of specificity — no selector rewrite
   needed. */
.tribe-events-calendar-list__event-header { display: contents !important; }

/* Re-laid-out per the user into three explicit rows — name on its own
   line, date/time + cost together on a smaller second line, blurb as
   normal-weight text on a third — instead of the previous "name – date –
   cost" single line. Title and datetime both get their own forced line
   via flex-basis:100%, same trick already used for the blurb. */
.tribe-events-calendar-list__event-title {
  order: 1 !important; flex-basis: 100%; margin: 0; font-family: var(--display);
  font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.3;
}
.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: 13px;
  font-weight: 600; 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: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--pink);
  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-12); font-weight: 700; }
.tribe-events-c-small-cta__price { display: inline; }

/* Blurb — reverses TEC's own .tribe-common-a11y-hidden utility class
   (visually-hidden-but-accessible pattern), which this row was using by
   default. flex-basis:100% forces it onto its own line below the name/
   date/cost rows. Sized up to read as normal body text now that it has
   its own dedicated line rather than being a cramped one-line snippet;
   line-clamp bumped 1→2 to make use of the extra room. */
.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: 0;
  font-size: 13px; color: var(--muted); 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; }
/* "[…]" replaced with a real "Tell me more →" link in the theme's
   description.php template override — styled here to read as a distinct
   call-to-action rather than blending into the muted blurb text. */
.arcade-excerpt-more {
  color: var(--pink) !important; font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.04em; text-decoration: none; margin-left: 2px;
}
.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: 24px !important; }
  .tribe-events-calendar-list__event-details { padding: 10px 12px; }
  .tribe-events-calendar-list__event-title { font-size: 14px; }
  /* These need the same high-specificity prefix as the desktop poster/date-tag
     rules above, or they lose to them at mobile width. At mobile TEC switches
     .event to flex-direction:column (via .tribe-common-g-row), stacking the 96px
     poster ON TOP of the details and forcing a ~440px-tall row. Force it back to
     row-reverse + nowrap so the poster stays an inline right-hand cap like on
     desktop; the poster + date stub shrink to fit a 375px screen. */
  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; }
  /* flex-basis:0 (not auto) so details takes only the leftover space after the
     date stub + poster and wraps its text, instead of sizing to its widest line
     (the long date-range datetime) and shoving the poster off the row edge. */
  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, previously
   using TEC's unstyled defaults entirely.
   ============================================================ */
/* --surface (white) as the default here was visually identical to an
   unstyled cell against the page's own white-ish surroundings — every
   cell needs to clearly read as "themed", not just the past/other-month
   ones that happened to get a tinted background. */
.tribe-events-calendar-month__day {
  background: var(--paper-2); border: 2px solid var(--ink-12);
  vertical-align: top; transition: background 0.15s;
}
.tribe-events-calendar-month__day--current { background: rgba(255, 230, 0, 0.14); border-color: var(--volt-deep); }
.tribe-events-calendar-month__day--past { background: rgba(29, 22, 38, 0.05); }
.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: 700; font-size: 14px; 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; }
/* Event chip itself (background/padding/title/datetime) reworked in §56,
   after the "Featured" badge got hidden sitewide — kept together there
   instead of split across two sections. */

/* Weekday header row (Sun/Mon/Tue...) */
/* TEC's own `.tribe-events .header tr{display:grid;justify-items:center}`
   (its own CSS, not a bug in ours) makes each <th> a narrow grid item
   sized to content instead of spanning the column — painting the old
   flat var(--ink) background directly on the <th> just produced a small
   off-square box that didn't read as a header bar. Leaning into the
   narrow-centered layout instead of fighting it: a small circular "coin"
   badge per weekday letter, riso-offset like the rest of the site's small
   accents — the requested "little flair" plus the fix for the odd box. */
.tribe-events-calendar-month__header-column { background: transparent; padding-bottom: 10px; }
/* TEC's `.tribe-common-b3` utility class (also on this element) sets its
   own font-size/line-height via a 3-class compound selector, beating a
   plain 1-class rule — the letter was rendering at the wrong line-height
   for a 30px circle, pushed up near the top edge instead of centered.
   !important across the board since this is now a fully custom badge. */
.tribe-events-calendar-month__header-column-title {
  font-family: var(--display) !important; font-weight: 700 !important; font-size: 13px !important; text-transform: uppercase !important;
  color: var(--paper) !important; text-align: center !important; padding: 0 !important;
  width: 30px !important; height: 30px !important; line-height: 30px !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/Photos
   tabs, prev/today/next). Never styled before this pass — List
   and Month view *content* got new CSS earlier (§49/§50), but
   this shared bar around them was still bare/default. Some of
   its class names (search-button, input-group, subscribe-
   dropdown) don't exist in the legacy Custom CSS at all — this
   TEC version's markup has moved on since that blob was written
   — but a few (view-selector links, nav today/prev/next) do
   still carry old !important rules, so body.wp-child-theme-
   arcade-child is used throughout for a guaranteed, order-proof
   win, consistent with §30's fix for the same root cause.
   ============================================================ */
/* Flat --surface white + a plain 3px offset read as an unstyled default
   box next to the rest of the page's riso treatment — swapped for the
   same --shadow-riso-neutral card language as .pin-frame/.rotator-feature
   (two-color offset + soft ambient shadow) so this shared chrome reads as
   themed rather than left over. Background swapped from stark white
   (--surface) to --paper-2 (warm off-white, already used for Month view's
   day cells) per explicit user feedback — this bar is shared markup, so
   the fix automatically applies identically on List/Month/Photos. */
body.wp-child-theme-arcade-child .tribe-events-c-events-bar {
  background: var(--paper-2) !important; border: none !important;
  border-radius: var(--r-md) !important; box-shadow: var(--shadow-riso-neutral) !important;
  padding: 14px 18px !important; margin-bottom: 28px !important;
  justify-content: center !important; flex-wrap: wrap !important;
}
/* Search dead-center on its own row; the view tabs (List/Month/Posters) drop to
   the row below, centered. (search-button is display:none on desktop.) */
@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; }
}
/* Mobile: TEC's stock layout shrink-wraps the bar (flex: 0 0 auto) inside the
   full-bleed .tribe-events-header, whose row-reverse + space-between pins it
   to the RIGHT edge — ~50px of dead space on the left, so the search/tabs
   card sat visibly off-center. Give it the full row minus the page gutter
   (19.5px = half TEC's 39px small-breakpoint grid gutter, matching the
   l-container side padding the header's own negative margins cancel) so the
   card lines up with the event cards below and its contents center. */
@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;
  }
  /* Fill the bar symmetrically (was ~8px off-center from a stray right gap). */
  body.wp-child-theme-arcade-child .tribe-events-c-events-bar__search-button {
    width: 100% !important; margin: 0 !important; justify-content: center !important;
  }
  /* The tapped-open search is an absolute OVERLAY panel on mobile (not the
     sandwiched desktop wrapper) — the global transparent-background fix
     above must not apply to it, and the form must stack input-over-button
     (something upstream keeps it in row layout: a 54px input stub beside a
     100%-width button overflowing the viewport). */
  /* html prefix out-specifies the later global transparent-bg rule for this
     wrapper (equal specificity would let file order hand it the win). */
  html body.wp-child-theme-arcade-child .tribe-events-c-events-bar__search-container {
    background: var(--paper-2) !important;
    border-radius: var(--r-sm) !important;
    box-shadow: var(--shadow-riso-neutral) !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(--paper-2) !important; border: 1.5px solid var(--ink-12) !important;
  border-radius: var(--r-sm) !important; padding: 8px 14px !important; color: var(--ink) !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-events-bar__search-button-icon-svg { fill: var(--pink) !important; }

/* .events-bar__search-container is a wrapper TEC puts between the bar and
   the search form itself — a separate element from both the outer bar and
   the input control (each already fixed), still white and previously
   unnoticed since it's sandwiched invisibly between two now-matching
   layers most of the time; visible as a slightly different-toned patch
   right around the input. */
body.wp-child-theme-arcade-child .tribe-events-c-events-bar__search-container { background: transparent !important; }
/* The search field and "Find Events" button were sitting flush against
   each other (TEC's own .tribe-events-c-search form has no gap between
   its input-group and button by default) — added breathing room per the
   user rather than shortening the input itself. */
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: 2px solid var(--ink) !important; border-radius: var(--r-sm) !important;
  background: var(--paper-2) !important; overflow: hidden !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-search__input {
  font-family: var(--display) !important; font-size: 13px !important; color: var(--ink) !important;
  padding: 10px 14px 10px 36px !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: 700 !important; font-size: 12px !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important;
  border-radius: var(--r-sm) !important; padding: 10px 20px !important; border: none !important;
  transition: background 0.18s !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-search__button:hover { background: var(--pink-hot) !important; }

/* List/Month/Photos pulled closer together per the user — TEC's own
   list-item <li> carries a 2px margin on each side on top of this link's
   own padding, spreading the group out more than intended. */
body.wp-child-theme-arcade-child .tribe-events-c-view-selector__list-item { margin: 0 !important; }
body.wp-child-theme-arcade-child .tribe-events-c-view-selector__list-item-link {
  font-family: var(--display) !important; font-weight: 700 !important; font-size: 12px !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--muted) !important;
  padding: 7px 10px !important; border-radius: var(--r-sm) !important;
  border-bottom: none !important; transition: color 0.18s, background 0.18s !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(--pink) !important; background: rgba(202, 39, 121, 0.10) !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-view-selector__list-item-icon-svg { fill: currentColor !important; }
/* Divi's own sitewide "growing underline" link-hover effect (a ::after bar,
   unrelated to anything TEC or this theme's list-item styling sets) was
   rendering as a stray dark offset line under the tab on hover/active —
   these already have their own pill background + color treatment above,
   so the extra underline is just noise. */
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: 700 !important; font-size: 11px !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--pink) !important;
  border: 1.5px solid var(--pink) !important; border-radius: var(--r-sm) !important;
  padding: 6px 16px !important; transition: background 0.18s, color 0.18s !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-nav__today:hover { background: var(--pink) !important; color: #fff !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: 700 !important; font-size: 11px !important;
  letter-spacing: 0.08em !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 was never
   themed — everything around it (Today pill, prev/next) was, but this
   specific piece was left as plain default browser text. Styling it here
   also gives Grid view's new date-range filter (§57) something to
   visually match, per the user's request that it "look like the TEC
   sort" instead of a one-off custom form. */
body.wp-child-theme-arcade-child .tribe-events-c-top-bar__datepicker-button {
  font-family: var(--display) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.06em !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: 1.5px solid var(--ink-12) !important; border-radius: var(--r-sm) !important;
}
body.wp-child-theme-arcade-child .tribe-events-c-subscribe-dropdown__button-text {
  font-family: var(--display) !important; font-weight: 700 !important; font-size: 11px !important;
  letter-spacing: 0.08em !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 — PHOTOS/GRID POSTER CARD BACKGROUND
   Ghostlight's own .poster uses var(--surface) (this theme's white
   token) for the card body under the image — per the user, swapped
   to --paper-2 to match the events-bar fix above, same reasoning:
   flat white read as unstyled next to the rest of the page's warm
   cream palette.
   ============================================================ */
body.wp-child-theme-arcade-child .poster { background: var(--paper-2) !important; }

/* Cost pill was Ghostlight's own volt/yellow treatment — dropped per the
   user, swapped to purple so it still reads as visually distinct from the
   pink time pill without the yellow. Also sized both pills and the show
   name up a notch so the card body (28-32px of padding around not much
   text) fills its space better instead of looking sparse. */
body.wp-child-theme-arcade-child .pill-cost { background: rgba(107, 75, 196, 0.14) !important; color: var(--purple) !important; }
body.wp-child-theme-arcade-child .poster .pill { font-size: 12px !important; padding: 6px 14px !important; }
body.wp-child-theme-arcade-child .poster__meta { gap: 10px !important; }
body.wp-child-theme-arcade-child .poster__name { font-size: 20px !important; }
body.wp-child-theme-arcade-child .poster__body { gap: 14px !important; }

/* The size-up above is tuned for a ~380px desktop card. Phones now show two
   posters per row (§32), where the same card is ~160px and a 20px title with
   12px pills wraps into a mess. Scale them back at that breakpoint only —
   same specificity and !important as the rules above, and later in the file,
   so this is what wins there. */
@media (max-width: 767px) {
  body.wp-child-theme-arcade-child .poster__name  { font-size: 14px !important; }
  body.wp-child-theme-arcade-child .poster .pill  { font-size: 9px !important; padding: 3px 8px !important; }
  body.wp-child-theme-arcade-child .poster__meta  { gap: 6px !important; }
  body.wp-child-theme-arcade-child .poster__body  { gap: 7px !important; padding: 16px 10px 18px !important; }
}


/* ============================================================
   56  EVENTS — MONTH VIEW CHIP REWORK
   Content (title + time) stays as-is — TEC's month-view markup has
   no cost field to show here at all (list view's cost comes from a
   different template part). This is a pure spacing/hierarchy pass:
   §54 freed up the space the featured-icon used to occupy, tokenized
   border-radius instead of a magic 4px, a touch more padding and
   gap between the time/title lines so the chip reads as a small
   card instead of cramped text, and dropped the now-dead featured-
   icon fill color rule (the icon is unconditionally hidden by §54).
   ============================================================ */
/* Layout props are body-class-anchored + !important: TEC v2's own stylesheet
   and the legacy Customizer blob both set the chip's `display` at equal
   specificity but load after us, so an unguarded `display: grid` loses and the
   thumb <span> never gets blockified as a grid item (stays inline → 0×0).
   Same root cause / same fix as §57. */
body.wp-child-theme-arcade-child .tribe-events-calendar-month__calendar-event {
  background: rgba(202, 39, 121, 0.08); border-left: 3px solid var(--pink);
  border-radius: var(--r-sm); 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: rgba(202, 39, 121, 0.16); }
/* Small poster thumbnail beside the event name (Ghostlight month
   featured-image.php). Spans both text rows; events with no featured image
   render no thumb and the name column simply starts at the left edge. */
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; background-size: cover !important;
  background-position: center top !important; background-color: var(--paper-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: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pink);
}
.tribe-events-calendar-month__calendar-event-title { margin: 0; font-family: var(--display); font-size: 11px; font-weight: 600; line-height: 1.3; 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); }

/* MULTIDAY events use entirely different markup from the single-event chip
   above (a spanning …__multiday-event-bar pill, not …__calendar-event), which
   this rework originally missed — so those bars kept TEC's stock look: a WHITE
   pill + a 24% accent wash + overflow:hidden, which against the paper cells and
   pink chips reads as a broken washed-out white line across the day cells
   (only multiday shows produce one, hence "a random white line on some
   events"). Same recipe as the chips: pink tint, pink lead edge, ink title.
   Same body-class + !important guard as the chip rules above (TEC v2's own
   stylesheet and the legacy Customizer blob load after us at equal
   specificity). */
body.wp-child-theme-arcade-child .tribe-events-calendar-month__multiday-event-bar {
  background: rgba(202, 39, 121, 0.08) !important;
  border-left: 3px solid var(--pink) !important;
  border-radius: var(--r-sm) !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: rgba(202, 39, 121, 0.16) !important;
}
/* The stock 24% wash lives on the inner wrapper — clear it so the bar's own
   tint above is the only background. */
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: 11px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}


/* ============================================================
   57  EVENTS — PHOTOS/GRID DATE-RANGE + SORT FILTER
   Rebuilt as a <details>/<summary> disclosure per the user — should
   "visually look like the TEC sort" (List/Month's "Upcoming ⌄" datepicker
   button, themed just above this section) rather than an always-open
   custom form. .arcade-grid-filters__summary intentionally uses the
   *exact same* recipe as .tribe-events-c-top-bar__datepicker-button
   (font/size/weight/caret icon) — collapsed, it should be difficult to
   tell apart from the native control. The expanded panel (from/to/sort/
   quick-picks) reuses the same input/tab recipes as the events-bar
   established elsewhere in this file, same reasoning as before.
   Every layout property is !important + body-class-anchored because this
   sits inside the same .tribe-common wrapper as the rest of the view,
   whose own reset (`.tribe-common form/input/a/summary{margin:0;
   padding:0;border:0}`) silently strips unguarded rules — same root
   cause as §49/§51/§52/§53's fixes, just hitting new elements this time.
   ============================================================ */
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: 700 !important; font-size: 13px !important;
  letter-spacing: 0.06em !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(--paper-2) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-riso-neutral) !important;
  padding: 14px 18px !important; margin-top: 12px !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: 10px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--muted) !important;
}
/* Same recipe as .tribe-events-c-search__input-control above. */
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(--display) !important; font-size: 13px !important; color: var(--ink) !important;
  border: 2px solid var(--ink) !important; border-radius: var(--r-sm) !important; background: var(--surface) !important;
  padding: 8px 10px !important; height: 38px !important; box-sizing: border-box !important;
}
body.wp-child-theme-arcade-child .arcade-grid-filters .btn-pink { padding: 9px 22px !important; height: 38px !important; box-sizing: border-box !important; }
body.wp-child-theme-arcade-child .arcade-grid-filters__clear {
  font-family: var(--display) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.06em !important;
  text-transform: uppercase !important; color: var(--muted) !important; text-decoration: none !important; padding: 0 4px !important; height: 38px !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: 6px !important; margin-top: 14px !important; }
/* Same recipe as .tribe-events-c-view-selector__list-item-link above —
   the quick-pick chips are styled to look like the same "tab" language
   used for List/Month/Photos, not a separate pill design. */
body.wp-child-theme-arcade-child .arcade-grid-filters__chip {
  font-family: var(--display) !important; font-weight: 700 !important; font-size: 12px !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--muted) !important;
  text-decoration: none !important; padding: 7px 10px !important; border-radius: var(--r-sm) !important;
  border: none !important; transition: color 0.18s, background 0.18s !important;
}
body.wp-child-theme-arcade-child .arcade-grid-filters__chip:hover { color: var(--pink) !important; background: rgba(202, 39, 121, 0.10) !important; }
body.wp-child-theme-arcade-child .arcade-grid-filters__chip.is-active { background: var(--pink) !important; color: #fff !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]. The class cards themselves
   reuse the existing .arcade-class-card / .acc-* styling.
   ============================================================ */
.acm-classes-banner {
  background: linear-gradient(120deg, var(--pink), var(--purple-deep));
  color: #fff;
  border-radius: var(--r-md);
  padding: 14px 20px;
  margin: 0 0 20px;
  box-shadow: var(--shadow-sm);
}
.acm-classes-banner__msg  { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
.acm-classes-banner__note { font-size: 0.85em; opacity: 0.85; margin: 6px 0 0; }
.acm-classes-subhead      { font-family: var(--script); 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: 700;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.acc-price-now { font-weight: 700; }
.acc-price-was { color: var(--muted); text-decoration: line-through; font-size: 0.9em; }


/* ============================================================
   49  INSTRUCTORS — grid, cards & bio modal
   Powers [arcade_instructors] + the class roster's bio modal.
   Migrated out of the /instructors page's inline code block so
   the modal works site-wide (e.g. on /classes too).
   ============================================================ */
.instructors-page-header { background: var(--ink); border-radius: 14px; padding: 32px; margin-bottom: 32px; border: 1px solid rgba(202,39,121,0.35); position: relative; overflow: hidden; }
.instructors-page-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--pink), var(--blue), var(--purple), var(--volt)); }
.instructors-page-header h1 { color: #fff; font-family: var(--display); font-size: 32px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 8px; }
.instructors-page-header p { color: rgba(255,255,255,0.5); font-size: 14px; line-height: 1.6; margin: 0; }
.arcade-instructors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 48px; }
.arcade-instructor-card { background: #fff; border: 2px solid rgba(202,39,121,0.25); border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.arcade-instructor-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(202,39,121,0.18); border-color: var(--pink); }
.instructor-card-photo { height: 200px; background-color: #f0ebff; background-size: cover; background-position: center top; display: flex; align-items: center; justify-content: center; }
.instructor-card-photo[style*="background-image"] .instructor-card-initials { display: none; }
.instructor-card-initials { font-family: var(--display); font-size: 48px; font-weight: 700; color: rgba(202,39,121,0.15); letter-spacing: 2px; }
.instructor-card-info { padding: 16px 18px 20px; text-align: center; }
.instructor-card-name { font-family: var(--display); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink); line-height: 1.2; margin-bottom: 6px; }
.instructor-card-meta { font-size: 12px; color: var(--muted); line-height: 1.4; }
.instructor-card-hint { font-family: var(--display); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(202,39,121,0.45); margin-top: 8px; transition: color 0.2s; }
.arcade-instructor-card:hover .instructor-card-hint { color: var(--pink); }

.past-instructors-section { background: #fff; border: 2px solid rgba(107,75,196,0.25); border-radius: 12px; padding: 28px 32px; }
.past-instructors-section h2 { font-family: var(--display); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--purple); margin-bottom: 16px; }
.past-instructors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 16px; font-size: 13px; color: #555; }
.past-instructors-grid .arcade-instructor-card:hover { color: var(--pink); }

.instructor-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 99999; display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.25s; }
.instructor-modal-overlay.is-open { display: flex; opacity: 1; }
.instructor-modal { background: var(--ink); border-radius: 16px; width: 100%; max-width: 700px; overflow: hidden; border: 1px solid rgba(202,39,121,0.4); transform: translateY(16px) scale(0.97); transition: transform 0.25s; box-shadow: 0 32px 80px rgba(0,0,0,0.6); }
.instructor-modal-overlay.is-open .instructor-modal { transform: none; }
.instructor-modal-accent { height: 3px; background: linear-gradient(to right, var(--pink), var(--blue), var(--purple)); }
.instructor-modal-top { display: flex; align-items: stretch; min-height: 200px; }
.instructor-modal-photo { width: 240px; flex-shrink: 0; background-color: #1a1a2e; background-size: cover; background-position: center top; display: flex; align-items: center; justify-content: center; }
.instructor-modal-photo[style*="background-image"] .instructor-modal-initials { display: none; }
.instructor-modal-initials { font-family: var(--display); font-size: 64px; font-weight: 700; color: rgba(255,255,255,0.12); }
.instructor-modal-header { flex: 1; padding: 24px 22px 20px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.instructor-modal-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.06); border: none; color: rgba(255,255,255,0.4); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; }
.instructor-modal-close:hover { background: rgba(202,39,121,0.35); color: #fff; }
.instructor-modal-name { color: #fff; font-family: var(--display); font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.1; margin: 0; }
.instructor-modal-meta { color: rgba(255,255,255,0.45); font-size: 13px; margin-top: 8px; line-height: 1.4; }
.instructor-modal-divider { height: 1px; background: rgba(255,255,255,0.07); }
.instructor-modal-bio { padding: 24px 28px 28px; color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.85; max-height: 400px; overflow-y: auto; white-space: pre-line; }
@media (max-width: 1024px) { .arcade-instructors-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
  .arcade-instructors-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .instructor-modal-top { flex-direction: column; min-height: auto; }
  /* body-prefix out-specifies the legacy blob's mobile .instructor-modal-photo{height:160px} */
  body.wp-child-theme-arcade-child .instructor-modal-photo { width: 100%; height: 240px; }
  body.wp-child-theme-arcade-child .instructor-modal-bio { max-height: 260px; }
  .past-instructors-grid { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   46  ABOUT PAGE (type-C "Info" template)
   Rendered by [arcade_about] (arcade-content-manager) inside a Divi
   full-width code module. Reuses §12 sections / §13 heads / §14 hero /
   §05 buttons; the .about-* classes below are the page-specific pieces.
   ============================================================ */

/* Let the [arcade_about] code module run edge-to-edge like the homepage
   (§34), scoped to the About page's body class (added by arcade_body_classes)
   so no other page is affected. Without this, Divi caps #main-content
   .container at ~1080px and the alternating section bands can't span the
   viewport. Applies to the Info-template pages as they migrate — add their
   page-{slug} class here too. */
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; }

/* Dark bands: §13's `.section-head h2 { color: var(--ink) }` ties on specificity
   with §12's white-heading rule and wins on source order, rendering headings
   dark-on-dark (e.g. the videos band). Force them white. */
.arcade-section--dark .section-head h2 { color: #fff; }

/* Intro prose */
.about-intro { max-width: 760px; margin: 0 auto; text-align: center; }
.about-intro p { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0 0 18px; }
.about-intro p:last-child { margin-bottom: 0; }

/* Mission & Vision — two accent cards */
.about-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.about-mv-card { background: var(--surface); border-radius: var(--r-lg); padding: 34px 32px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.about-mv-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }
.about-mv-card--mission::before { background: var(--pink); }
.about-mv-card--vision::before { background: var(--blue); }
.about-mv-card .eyebrow { margin-bottom: 10px; }
.about-mv-card--mission .eyebrow { color: var(--pink); }
.about-mv-card--vision .eyebrow { color: var(--blue); }
.about-mv-card p { font-size: 15px; line-height: 1.7; color: var(--ink); margin: 0; }

/* Values grid */
.about-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.about-value { background: var(--surface); border-radius: var(--r-md); padding: 24px 22px; box-shadow: var(--shadow-md); border-top: 4px solid var(--pink); }
.about-value--0 { border-top-color: var(--pink); }
.about-value--1 { border-top-color: var(--blue); }
.about-value--2 { border-top-color: var(--purple); }
.about-value--3 { border-top-color: var(--volt); }
.about-value__label { font-family: var(--display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); margin-bottom: 8px; }
.about-value p { font-size: 14px; line-height: 1.62; color: var(--muted); margin: 0; }

/* Leadership pointer band (dark) */
.about-lead .arcade-wrap { text-align: center; }
.about-lead__note { max-width: 620px; margin: 0 auto 20px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.75); }

/* Sponsor logo grid — each logo on a white chip so mixed color/black logos read
   crisply on the light band. (Reversed/white logos need a dark-on-light version
   swapped in via the About tab — they'd be invisible on white.) */
.about-sponsors { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; align-items: stretch; }
.about-sponsor { display: flex; align-items: center; justify-content: center; padding: 18px 22px; min-height: 92px; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.about-sponsor img { max-width: 100%; max-height: 54px; width: auto; height: auto; object-fit: contain; }
/* Reversed logos (white ink on transparency — RAD, Bloomberg, Zapier, Slack)
   would disappear against the white tile. brightness(0) zeroes the colour
   channels and leaves alpha untouched, so the mark renders as a solid black
   silhouette. The knockout class is applied by arcade_cm_logo_is_knockout(). */
.about-sponsor--knockout img { filter: brightness(0); }

/* Awards grid */
.about-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.about-award { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-md); 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: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); line-height: 1.2; }
.about-award__source { font-size: 13px; 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: 18px; }
/* Year divider between video groups (newest first). Sits in the dark Watch
   section, so it takes the volt accent rather than ink. First one loses its
   top margin — the section head already provides that space. */
/* !important because §1114's `.arcade-section--dark .et_pb_text h3` (which
   keeps Divi headings white in dark sections) also matches this one — the
   About page is rendered inside a Divi text module. */
.about-videos__year {
  margin: 34px 0 14px; font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--volt) !important;
  display: flex; align-items: center; gap: 14px;
}
.about-videos__year::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.18); }
.section-head + .about-videos__year { margin-top: 0; }
.about-video { text-decoration: none; display: block; }
.about-video__thumb { display: flex; align-items: center; justify-content: center; position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); }
.about-video__thumb::after { content: ''; position: absolute; inset: 0; background: rgba(29,22,38,0.28); transition: background 0.2s; }
.about-video:hover .about-video__thumb::after { background: rgba(29,22,38,0.10); }
.about-video__play { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: var(--pink); 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: 10px; font-family: var(--display); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; text-align: center; }

/* Founders */
.about-founders .arcade-wrap { text-align: center; }
.about-founders__photo { max-width: 620px; margin: 0 auto 18px; }
.about-founders__photo img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-md); display: block; }
.about-founders__caption { max-width: 560px; margin: 0 auto; }
.about-founders__caption p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0 0 8px; }

/* Plan a Visit — info cards (shares the hero / .arcade-section bands / .about-intro
   / .about-lead footer with About; only the card grid is page-specific). */
.pv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.pv-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 26px 28px; border-top: 4px solid var(--pink); }
.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(--purple); }
.pv-card:nth-child(4n+4) { border-top-color: var(--volt); }
.pv-card__title { font-family: var(--display); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); margin: 0 0 10px; line-height: 1.15; }
.pv-card__body { font-size: 15px; line-height: 1.7; color: var(--muted); }
.pv-card__body p { margin: 0 0 12px; }
.pv-card__body p:last-child { margin-bottom: 0; }
.pv-card__body a { color: var(--pink); text-decoration: none; font-weight: 600; }
.pv-card__body a:hover { text-decoration: underline; }
.pv-card__body strong, .pv-card__body b { color: var(--ink); font-weight: 700; }

/* Generic Info page ([arcade_info]) — readable prose blocks + accent CTA cards,
   one per alternating band. Shares the hero / bands / footer with About. */
.info-block { max-width: 760px; margin: 0 auto; }
.info-block__body { font-size: 16px; line-height: 1.8; color: var(--muted); }
.info-block__body p { margin: 0 0 16px; }
.info-block__body p:last-child { margin-bottom: 0; }
.info-block__body a { color: var(--pink); text-decoration: none; font-weight: 600; }
.info-block__body a:hover { text-decoration: underline; }
.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: 4px 0 4px 20px; border-left: 4px solid var(--pink); font-style: italic; color: var(--ink); }
.info-block__body table { width: 100%; border-collapse: collapse; margin: 4px 0 18px; font-size: 15px; text-align: left; }
.info-block__body table td, .info-block__body table th { padding: 11px 14px; border-bottom: 1px solid var(--ink-12); vertical-align: top; color: var(--ink); }
.info-block__body table tr td:first-child { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; color: var(--pink); }

.info-cta { max-width: 680px; margin: 0 auto; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 32px 36px; text-align: center; border-top: 4px solid var(--pink); }
.info-cta__title { font-family: var(--display); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); margin: 0 0 12px; line-height: 1.15; }
.info-cta__body { font-size: 15px; line-height: 1.7; color: var(--muted); margin-bottom: 22px; }
.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: 20px; 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; }
.page-hero__cta { margin-top: 18px; }

/* Accordion / FAQ blocks — native <details>, no JS. */
.info-accordion { max-width: 760px; margin: 0 auto; }
.info-accordion__item { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-md); margin-bottom: 12px; overflow: hidden; }
.info-accordion__q { list-style: none; cursor: pointer; padding: 17px 22px; font-family: var(--display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; 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 { color: var(--pink); }
.info-accordion__icon { flex-shrink: 0; width: 16px; height: 16px; position: relative; }
.info-accordion__icon::before, .info-accordion__icon::after { content: ''; position: absolute; background: var(--pink); border-radius: 2px; }
.info-accordion__icon::before { top: 7px; left: 0; width: 16px; height: 2.5px; }
.info-accordion__icon::after { top: 0; left: 7px; width: 2.5px; height: 16px; transition: transform 0.2s; }
.info-accordion__item[open] .info-accordion__icon::after { transform: rotate(90deg); }
.info-accordion__a { padding: 0 22px 18px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.info-accordion__a p { margin: 0 0 12px; }
.info-accordion__a p:last-child { margin-bottom: 0; }
.info-accordion__a a { color: var(--pink); font-weight: 600; text-decoration: none; }
.info-accordion__a a:hover { text-decoration: underline; }
.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-radius: var(--r-lg); box-shadow: var(--shadow-md); display: block; margin: 0 auto; }
.info-image__caption { margin-top: 12px; font-size: 14px; color: var(--muted); font-style: italic; }

/* Embed blocks (Airtable/Google forms, video) */
.info-embed { max-width: 820px; margin: 0 auto; }
.info-embed iframe { width: 100%; height: 720px; border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-md); background: var(--surface); 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). Text is first in the DOM for
   reading order; the --image-left variant swaps sides with grid `order` so the
   markup stays accessible either way. */
.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; }
.info-twocol__body { color: var(--ink); }
.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-radius: var(--r-lg); box-shadow: var(--shadow-md); 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; }
  /* Stack; text on top regardless of the desktop image side. */
  .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
   reset the label's display-font/uppercase back to body text.
   ============================================================ */
.arcade-contact { max-width: 720px; margin: 0 auto; }
.contact-intro { margin-bottom: 24px; }
.contact-notice { padding: 14px 18px; border-radius: var(--r-md); margin-bottom: 22px; font-weight: 600; }
.contact-notice--ok  { background: rgba(46,160,67,0.12);  color: #1a7f37; border: 1px solid rgba(46,160,67,0.40); }
.contact-notice--err { background: rgba(179,45,46,0.10);  color: #b32d2e; border: 1px solid rgba(179,45,46,0.40); }
.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: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.contact-field input, .contact-field select, .contact-field textarea {
  font-family: var(--body); font-size: 15px; font-weight: 400; letter-spacing: normal; text-transform: none;
  padding: 11px 13px; border: 1px solid #d3ccc0; border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
}
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { outline: 2px solid var(--pink); outline-offset: 1px; border-color: var(--pink); }
.contact-field textarea { resize: vertical; min-height: 130px; }
.contact-submit { align-self: flex-start; margin-top: 4px; cursor: pointer; border: 0; }
.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: 20px;
}
.arcade-workshops__empty {
  text-align: center; color: var(--muted); font-size: 15px; line-height: 1.6;
  padding: 26px 20px; border: 1.5px dashed var(--ink-12); border-radius: var(--r-md);
}
.workshop-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); border: 1.5px solid var(--ink);
}
.workshop-card__art { height: 168px; background-size: cover; background-position: center; }
.workshop-card__body { display: flex; flex-direction: column; flex: 1; gap: 7px; padding: 16px 18px 18px; }
.workshop-card__when {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink);
}
.workshop-card__title {
  margin: 0; font-family: var(--display); font-size: 19px; font-weight: 700;
  line-height: 1.15; text-transform: uppercase; color: var(--ink);
}
.workshop-card__teacher { font-size: 13px; color: var(--muted); }
.workshop-card__desc { margin: 2px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-80); }
/* Foot pinned to the bottom so buttons line up across cards of unequal height */
.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: 700; font-size: 14px; 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
   Displays event posters in the show listing below month calendar.
   ============================================================ */
.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(--surface, #ffffff) !important;
  border: 1.5px solid var(--ink-12, rgba(0, 0, 0, 0.12)) !important;
  border-radius: var(--r-md, 8px) !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.tribe-events-calendar-month-mobile-events__mobile-day--show .tribe-events-calendar-month-mobile-events__mobile-event:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !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: 6px !important;
  overflow: hidden !important;
  background: #f4f4f6 !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;
  border-radius: 6px !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 white 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: 2px solid var(--ink-12, rgba(0, 0, 0, 0.12));
}

.arcade-upcoming-shows-heading {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  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(--surface, #ffffff);
  border: 1.5px solid var(--ink-12, rgba(0, 0, 0, 0.12));
  border-radius: var(--r-md, 8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.arcade-upcoming-show-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.arcade-upcoming-show-thumb {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  background: #f4f4f6;
}

.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: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink);
}

.arcade-upcoming-show-title {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.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: 13px;
  font-weight: 600;
  color: var(--muted);
}

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

.arcade-upcoming-show-action .btn {
  padding: 8px 16px !important;
  font-size: 11px !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, #fdf0f5) !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;
  border-color: transparent !important;
}