/* MCO Productions — theme stylesheet.
   R1C: the design system from docs/design/mco/, built as drawn — the
   royal aubergine + gold tokens, the layered gradient room, editorial
   Playfair at real scale, the gilded ledger, the poster jewel case,
   the velvet footer, the bottom tab bar. Breakpoints are the design's
   own (560 / 640 / 680 / 700 / 820 / 880 / 900 / 960 / 980).
   Fonts self-hosted (latin subsets). No external requests. */

/* ---- Fonts ------------------------------------------------------- */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/assets/fonts/playfair-400.e0c764a8e9.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500;
  font-display: swap; src: url(/assets/fonts/playfair-500.1e3429a212.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600;
  font-display: swap; src: url(/assets/fonts/playfair-600.e0c764a8e9.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700;
  font-display: swap; src: url(/assets/fonts/playfair-700.e0c764a8e9.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url(/assets/fonts/playfair-italic.54af24bd0f.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/assets/fonts/lato-400.918b7dc3e2.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700;
  font-display: swap; src: url(/assets/fonts/lato-700.c447dd7677.woff2) format('woff2'); }

/* ---- Tokens — royal aubergine + gold ----------------------------- */
:root {
  --bg:       #131022;                     /* aubergine-black */
  --bg-2:     #1A1530;                     /* lifted band */
  --bg-3:     #241C40;                     /* card / hover */
  --edge-g:   rgba(212,172,51,.22);        /* gold hairline */
  --edge-g2:  rgba(212,172,51,.45);        /* gold hairline strong */
  --edge-c:   rgba(240,233,218,.12);       /* ivory hairline */

  --ivory:    #F0E9DA;
  --mute:     #B3A9C6;                     /* lavender-gray */
  /* R4-B8: was #776C92, which sat at 3.9:1 on --bg and 3.6:1 on
     --bg-2 — under the 4.5:1 AA floor for the footer base line, the
     dimlinks and the tab-bar labels. #9188AE holds the same quiet
     lavender register at 5.9:1 / 5.3:1. */
  --dim:      #9188AE;

  --gold:     #C9A227;                     /* fills */
  --gold-t:   #D9B544;                     /* text-safe gold */
  --gold-hi:  #E8C558;
  --gold-act: #A88519;

  --ok:       #7BC894;
  --warn:     #E0A458;

  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:    'Lato', system-ui, -apple-system, sans-serif;

  --w:  1240px;
  --px: clamp(1.25rem, 4.5vw, 2.5rem);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---- Reset / base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 1.125rem;                     /* 18px — every generation */
  line-height: 1.65;
  color: var(--ivory);
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(201,162,39,.05), transparent 60%),
    radial-gradient(1000px 800px at -10% 30%, rgba(78,58,128,.14), transparent 55%),
    var(--bg);
}
@media (min-width: 900px) {
  /* fixed attachment repaints badly on phones; the room holds still
     only where it is cheap */
  body { background-attachment: fixed; }
}
img { display: block; max-width: 100%; height: auto; }
picture, video, iframe { max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--gold-t); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--w); margin-inline: auto; padding-inline: var(--px); }

/* Royal separator glyph */
.sep { color: var(--gold-t); font-size: .75em; vertical-align: .12em; padding-inline: .45em; }

p { margin: 0 0 1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--gold-t); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--gold-hi); }
.prose :is(h2, h3) { font-family: var(--display); font-weight: 500; color: var(--ivory);
  margin: 1.4em 0 .5em; line-height: 1.15; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 200; background: var(--gold);
  color: #171226; padding: .6rem 1.1rem; border-radius: 6px; font-weight: 700; }

/* ---- Buttons — gold as commitment -------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; border-radius: 5px;
  padding: .875rem 1.875rem; min-height: 52px;
  transition: background .13s, color .13s, border-color .13s, transform .09s;
  white-space: nowrap;
}
.btn-gold { background: var(--gold); color: #171226; border-color: var(--gold); }
.btn-gold:hover  { background: var(--gold-hi); border-color: var(--gold-hi); }
.btn-gold:active { background: var(--gold-act); transform: scale(.975); }
.btn-ghost { background: transparent; color: var(--ivory); border-color: rgba(240,233,218,.32); }
.btn-ghost:hover  { border-color: var(--ivory); }
.btn-ghost:active { background: rgba(240,233,218,.08); transform: scale(.975); }
.btn-full { width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; margin: 1.4rem 0; }

/* ---- Header — quiet velvet, gold thread beneath ------------------ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(19,16,34,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--edge-g);
}
.site-nav { display: flex; align-items: center; height: 70px; gap: 1rem; }
@media (min-width: 820px) { .site-nav { height: 78px; } }

.logo {
  font-family: var(--display);
  font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none; color: var(--ivory);
  margin-right: auto; min-height: 44px;
  display: inline-flex; align-items: center; gap: .55rem;
}
.logo .mark { color: var(--gold-t); font-size: .8em; }
.logo .co { color: var(--dim); font-weight: 400; }

.nav-links { display: none; align-items: center; gap: .25rem; }
.nav-links a {
  display: inline-flex; align-items: center;
  height: 48px; padding: 0 1.05rem;
  font-size: .9375rem; font-weight: 400;
  color: var(--mute); text-decoration: none; border-radius: 6px;
  transition: color .12s, background .12s;
}
.nav-links a:hover  { color: var(--ivory); background: rgba(240,233,218,.06); }
.nav-links a:active { background: rgba(240,233,218,.1); }
.nav-links a[aria-current="page"] { color: var(--gold-t); font-weight: 700; }

.nav-cta { display: none; margin-left: .5rem; min-height: 46px; padding: .6rem 1.5rem; }

/* Mobile nav — <details>, zero JS */
.m-nav { position: relative; }
.m-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 6px;
  cursor: pointer; color: var(--ivory); list-style: none;
  transition: background .12s;
}
.m-toggle::-webkit-details-marker { display: none; }
.m-toggle::marker { content: ''; }
.m-toggle:hover  { background: rgba(240,233,218,.07); }
.m-toggle:active { background: rgba(240,233,218,.12); }
.i-menu  { display: block; }
.i-close { display: none; }
details[open] .i-menu  { display: none; }
details[open] .i-close { display: block; }

.m-drawer {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: var(--bg-2);
  border: 1px solid var(--edge-g);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 6px 20px rgba(0,0,0,.4);
  min-width: 270px; z-index: 100;
  padding: .625rem;
}
.m-drawer ul a {
  display: flex; align-items: center;
  min-height: 56px; padding: 0 1.125rem;
  font-size: 1.0625rem; font-weight: 400;
  color: var(--ivory); text-decoration: none; border-radius: 9px;
  transition: background .12s;
}
.m-drawer ul a:hover  { background: rgba(240,233,218,.06); }
.m-drawer ul a:active { background: rgba(240,233,218,.11); }
.m-drawer ul a[aria-current="page"] { color: var(--gold-t); font-weight: 700; }
.m-drawer-foot { padding: .625rem .375rem .25rem; }

@media (min-width: 820px) {
  .nav-links { display: flex; }
  .nav-cta   { display: inline-flex; }
  .m-nav     { display: none; }
}

/* ---- Hero — the royal announcement ------------------------------- */
.hero {
  position: relative;
  padding: clamp(3.25rem, 7vw, 6rem) 0 clamp(3.75rem, 7vw, 6.5rem);
  overflow: hidden;
}
.hero--detail { padding-top: clamp(2rem, 4vw, 3rem); }
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(560px 620px at 82% 42%, rgba(201,162,39,.09), transparent 65%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2.75rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-t); margin-bottom: 0;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-t); flex-shrink: 0;
  box-shadow: 0 0 12px rgba(217,181,68,.8);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.hero-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(3.25rem, 10vw, 7.25rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ivory);
  margin: 1.375rem 0 1.75rem;
  text-wrap: balance;
  text-shadow: 0 4px 60px rgba(201,162,39,.14);
}
.hero--detail .hero-title { font-size: clamp(3rem, 9vw, 6.5rem); margin-bottom: .75rem; }

.hero-tag {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.3125rem, 2.4vw, 1.625rem);
  color: var(--gold-t); margin-bottom: 1.5rem;
}
.hero-sub {
  font-size: 1.1875rem; line-height: 1.68; color: var(--mute);
  max-width: 33em; margin-bottom: 1.875rem;
}
.hero-sub p { margin-bottom: 0; }

.free-line {
  font-family: var(--display);
  font-style: italic; font-weight: 500;
  font-size: clamp(1.3125rem, 2.4vw, 1.5rem);
  color: var(--gold-t);
  margin-bottom: .55rem;
}
.vip-note {
  font-size: .9375rem; color: var(--mute);
  margin-bottom: 2.125rem;
}

/* Dates — gilded ledger */
.dates {
  border-top: 1px solid var(--edge-g2);
  margin-bottom: 2rem;
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 560px) { .dates { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.dates li {
  border-bottom: 1px solid var(--edge-c);
  font-size: 1.0625rem;
}
.d-link {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .8125rem 0; min-height: 44px;
  text-decoration: none;
  transition: background .12s;
}
a.d-link:hover  { background: rgba(240,233,218,.04); }
a.d-link:hover .d-go { color: var(--gold-hi); }
a.d-link:active { background: rgba(240,233,218,.08); }
.dates .d-day  { font-weight: 700; color: var(--ivory); }
.dates .d-time { color: var(--mute); font-variant-numeric: tabular-nums; margin-left: auto; }
.dates .d-go   { font-size: .8125rem; font-weight: 700; letter-spacing: .04em;
  color: var(--gold-t); white-space: nowrap; }
.d-link--flat .d-time { margin-left: 0; }

.venue-line { font-size: 1rem; color: var(--mute); margin-bottom: 2.25rem; }
.venue-line strong { color: var(--ivory); font-weight: 700; }

.hero-actions { display: flex; gap: .875rem; flex-wrap: wrap; }
.hero-actions--pad { margin-top: 2rem; }

/* Poster — jewel in the case */
.hero-art { display: flex; justify-content: center; }
.poster {
  display: block; width: min(100%, 390px);
  text-decoration: none;
  transition: transform .2s ease;
}
a.poster:hover  { transform: translateY(-5px); }
a.poster:active { transform: scale(.98); }
.poster-img {
  aspect-ratio: 2 / 3; overflow: hidden; border-radius: 6px;
  background: var(--bg-3);
  box-shadow:
    0 0 0 1px var(--edge-g2),
    0 0 70px rgba(201,162,39,.13),
    0 26px 70px rgba(0,0,0,.6),
    0 8px 24px rgba(0,0,0,.45);
}
.poster-img img, .poster-img picture { width: 100%; height: 100%; }
/* R3-C containment rule: a poster is TYPE — the frame never crops it.
   object-fit: contain letterboxes every aspect (square, 4:5, 8.5x11,
   11x17, 9:16) on the case's own panel; only PHOTOGRAPH faces
   (.p-card-img--photo) keep cover, where a crop costs nothing. */
.poster-img img { object-fit: contain; }
.poster-cap {
  margin-top: 1.05rem; text-align: center;
  font-size: .875rem; color: var(--dim); margin-bottom: 0;
}
.poster-cap em { color: var(--mute); font-style: italic; }
.poster-ph {
  width: 100%; height: 100%; aspect-ratio: 2 / 3;
  display: flex; flex-direction: column; gap: .8rem;
  align-items: center; justify-content: center;
  padding: 2rem; background: var(--bg-3); text-align: center;
}
.poster-ph .ph-mark { color: var(--gold-t); font-size: 1.2rem; }
.poster-ph p {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: 1.5rem; line-height: 1.25; color: var(--mute); margin: 0;
}

/* State B announce line */
.announce {
  font-size: 1rem; color: var(--mute);
  padding: 1.05rem 0;
  border-top: 1px solid var(--edge-g2);
  border-bottom: 1px solid var(--edge-c);
  margin-bottom: 2.25rem;
}
.announce strong { color: var(--ivory); font-weight: 700; }
.announce a { color: var(--gold-t); }

/* Closed / passed note card */
.closed-note {
  display: flex; align-items: flex-start; gap: 1rem; max-width: 44em;
  background: var(--bg-2); border: 1px solid var(--edge-g2); border-radius: 12px;
  padding: 1.5rem 1.75rem; margin-bottom: 2rem;
}
.closed-note .ci { color: var(--gold-t); flex-shrink: 0; margin-top: .2rem; }
.closed-note p { color: var(--mute); margin: 0; }
.closed-note strong { color: var(--ivory); }
.closed-note a { color: var(--gold-t); }

/* Breadcrumb */
.crumbs { padding: 1.5rem 0 0; font-size: .9375rem; color: var(--dim); margin: 0; }
/* R6-1: inside a gallery band the crumb sits tight above the title —
   the band supplies the top padding, the crumb just needs the gap
   down to the heading. */
.gallery-band .crumbs { padding: 0; margin: 0 0 1.5rem; }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--ivory); }

/* Fact pills */
.show-facts, .venue-facts {
  display: flex; flex-wrap: wrap; gap: .625rem; margin-bottom: 2.25rem;
}
.show-facts li, .venue-facts li {
  font-size: .9375rem; color: var(--mute); border: 1px solid var(--edge-c);
  border-radius: 999px; padding: .45rem 1rem;
}
.venue-facts { margin-bottom: 1.75rem; }

/* ---- Full-bleed photograph — gilt-framed ------------------------- */
.stagephoto {
  border-top: 1px solid var(--edge-g);
  border-bottom: 1px solid var(--edge-g);
  background: #000; margin: 0;
}
.stagephoto-img, .stagephoto picture img {
  width: 100%; aspect-ratio: 21 / 9; min-height: 380px; max-height: 74vh;
  object-fit: cover;
  opacity: .96;
}
.stagephoto-cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  flex-wrap: wrap;
  padding: 1.05rem var(--px) 1.25rem;
  max-width: var(--w); margin-inline: auto;
  font-size: .9375rem; color: var(--dim);
}
.stagephoto-cap em { font-family: var(--display); font-style: italic; color: var(--mute); }

/* ---- Past productions — the royal gallery ------------------------ */
.past {
  background: var(--bg-2);
  border-bottom: 1px solid var(--edge-g);
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.past-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.past-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  letter-spacing: -.015em; line-height: 1.08;
  color: var(--ivory); margin: 0;
}
.past-title em { font-style: italic; color: var(--gold-t); }
.past-link {
  font-size: 1rem; font-weight: 700; color: var(--gold-t);
  text-decoration: none; border-bottom: 1.5px solid var(--edge-g2);
  padding-bottom: .2rem; min-height: 44px; display: inline-flex; align-items: flex-end;
  transition: border-color .12s, color .12s;
}
.past-link:hover  { border-color: var(--gold-t); color: var(--gold-hi); }
.past-link:active { opacity: .7; }

.past-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
@media (min-width: 680px) { .past-grid { grid-template-columns: repeat(4, 1fr); } }

.p-card { text-decoration: none; color: var(--ivory); display: block; }
.p-card-img {
  aspect-ratio: 2 / 3; overflow: hidden; border-radius: 5px;
  background: var(--bg-3);
  box-shadow:
    0 0 0 1px var(--edge-c),
    0 10px 30px rgba(0,0,0,.45);
  transition: box-shadow .16s, transform .16s;
  margin-bottom: .95rem;
}
.p-card:hover .p-card-img {
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px var(--edge-g2), 0 0 40px rgba(201,162,39,.14), 0 20px 50px rgba(0,0,0,.55);
}
.p-card:active .p-card-img { transform: scale(.98); }
.p-card-img img, .p-card-img picture { width: 100%; height: 100%; }
.p-card-img img { object-fit: contain; }
.p-card-name {
  font-family: var(--display);
  font-size: 1.1875rem; font-weight: 600; letter-spacing: -.005em;
  line-height: 1.18; color: var(--ivory); margin: 0;
}
.p-card-name em { font-style: italic; font-weight: 400; color: var(--mute); }
.p-card-year { font-size: .875rem; color: var(--dim); margin: .25rem 0 0; }

/* R2I: gallery covers are landscape stage photos in the portrait card
   face; the crop centres them. */
.p-card-img--photo img { object-fit: cover; object-position: center; }

.p-card--current .p-card-img {
  box-shadow: 0 0 0 2px var(--gold), 0 0 44px rgba(201,162,39,.2), 0 14px 40px rgba(0,0,0,.5);
}
.p-card--current .p-card-year { color: var(--gold-t); }

/* B7: no-poster face — the display italic on the deep panel */
.p-card-ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; gap: .6rem;
  align-items: center; justify-content: center;
  padding: 1.25rem; text-align: center;
}
.p-card-ph .ph-mark { color: var(--gold-t); font-size: 1rem; }
.p-card-ph .ph-name {
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: 1.35rem; line-height: 1.2; color: var(--mute);
}

/* ---- Support — the benediction ----------------------------------- */
.support {
  padding: clamp(4.5rem, 9vw, 8rem) 0;
  text-align: center;
  position: relative; overflow: hidden;
}
.support::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(640px 420px at 50% 55%, rgba(201,162,39,.07), transparent 70%);
  pointer-events: none;
}
.support > * { position: relative; }
.support-kicker {
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-t); display: block; margin-bottom: 1.5rem;
}
.support-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  letter-spacing: -.02em; line-height: 1.08;
  color: var(--ivory);
  max-width: 14em; margin: 0 auto 1.5rem;
  text-wrap: balance;
}
.support-title em { font-style: italic; font-weight: 500; color: var(--gold-t); }
.support-body {
  font-size: 1.125rem; line-height: 1.75; color: var(--mute);
  max-width: 32em; margin: 0 auto 2.5rem;
}
.support-body p { margin-bottom: 0; }

/* ---- Story band -------------------------------------------------- */
.story {
  background: var(--bg-2); border-block: 1px solid var(--edge-g);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.story-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 880px) { .story-grid { grid-template-columns: 4fr 7fr; gap: 5rem; } }
.story-h {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: -.015em; line-height: 1.1; color: var(--ivory); margin: 0;
}
.story-h em { font-style: italic; color: var(--gold-t); }
.story-credit { margin: 1.25rem 0 0; font-size: .9375rem; color: var(--dim); }
.story-credit strong { color: var(--mute); font-weight: 700; }
.story-body p { color: var(--mute); line-height: 1.8; max-width: 38em; margin: 0; }
.story-body p + p { margin-top: 1.25rem; }
.story-body a { color: var(--gold-t); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.story-body a:hover { color: var(--gold-hi); }
.story-body--pad { margin-top: 1.25rem; }

/* ---- Performance picker (static reserve entry) ------------------- */
.reserve { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.reserve-head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 38em; }
.reserve-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  letter-spacing: -.015em; line-height: 1.08;
  color: var(--ivory); margin-bottom: .75rem;
}
.reserve-sub { color: var(--mute); margin: 0; }

.perf-list { display: grid; grid-template-columns: 1fr; gap: .625rem; }
@media (min-width: 640px) { .perf-list { grid-template-columns: 1fr 1fr; } }
.perf-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 72px; padding: .875rem 1.25rem;
  background: var(--bg-2); border: 1.5px solid var(--edge-c); border-radius: 8px;
  text-decoration: none;
  transition: border-color .12s, background .12s, transform .09s;
}
.perf-link:hover  { border-color: var(--edge-g2); }
.perf-link:active { transform: scale(.99); background: var(--bg-3); }
.perf-when .d { display: block; font-weight: 700; color: var(--ivory); font-size: 1.0625rem; }
.perf-when .t { display: block; color: var(--mute); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.perf-go { font-size: .8125rem; font-weight: 700; letter-spacing: .04em;
  color: var(--gold-t); white-space: nowrap; }
.perf-link--past .perf-go { color: var(--dim); }

/* ---- Reservation page (reserve_template, R2G) -------------------- */
.reserve-form { max-width: 44em; margin-top: 1rem; }
.reserve-form .step { border: 0; margin: 0 0 2.25rem; padding: 0; }
.step-label { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1.125rem; }
.step-num { font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--gold-t); }
.step-name { font-size: 1.0625rem; font-weight: 700; color: var(--ivory); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.perf-stack { display: grid; gap: .625rem; }
.perf { background: var(--bg-2); border: 1.5px solid var(--edge-c); border-radius: 8px;
  padding: .875rem 1.25rem; transition: border-color .12s, background .12s; }
.perf:has(input:checked) { border-color: var(--gold); background: var(--bg-3);
  box-shadow: 0 0 0 1px var(--gold), 0 0 30px rgba(201,162,39,.1); }
.perf:has(input:focus-visible) { outline: 3px solid var(--gold-t); outline-offset: 3px; }
.perf--soldout { opacity: .55; }
.perf-head { display: flex; align-items: center; gap: .75rem; }
.perf-head input[type=radio] { width: 20px; height: 20px; accent-color: var(--gold); flex: none; }
.perf-head label { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex: 1; min-height: 44px; cursor: pointer; }
.perf-head .perf-when .d { display: block; font-weight: 700; color: var(--ivory); font-size: 1.0625rem; }
.perf-head .perf-when .t { display: block; color: var(--mute); font-size: .9375rem;
  font-variant-numeric: tabular-nums; }
.avail { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.avail-out { color: var(--dim); }
.tiers { border-top: 1px solid var(--edge-c); margin-top: .75rem; padding-top: .25rem; }
.tier { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 0; flex-wrap: wrap; }
.tier + .tier { border-top: 1px solid var(--edge-c); }
.tier-info .tn { font-weight: 700; color: var(--ivory); font-size: 1.0625rem; margin: 0; }
.tier-info .tp { font-family: var(--display); font-style: italic; color: var(--gold-t);
  font-size: 1rem; margin: .1rem 0 0; }
.tier-info .td { font-size: .875rem; color: var(--dim); margin: .2rem 0 0; }
.td.avail-comfortable { color: var(--ok); }
.td.avail-limited { color: var(--warn); }
.td.avail-sold_out { color: var(--dim); }
.tier-qty { display: flex; align-items: center; gap: .75rem; }
.tier-qty .lbl { font-size: .9375rem; font-weight: 700; color: var(--ivory); }
.tier-qty input { width: 5rem; min-height: 52px; padding: .35rem .5rem; text-align: center;
  font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--bg); border: 1.5px solid var(--edge-g2); border-radius: 8px;
  color: var(--ivory); }
.tier-qty input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 1px var(--gold); }
.rfield { margin: 0 0 1.125rem; max-width: 26rem; }
.rfield label { display: block; font-size: .9375rem; font-weight: 700; color: var(--ivory);
  margin-bottom: .45rem; }
.rfield .opt { color: var(--dim); font-weight: 400; }
.rfield input { width: 100%; min-height: 56px; padding: .8rem 1.125rem; font-size: 1.0625rem;
  background: var(--bg-2); border: 1.5px solid var(--edge-c); border-radius: 8px;
  color: var(--ivory); }
.rfield input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 1px var(--gold); }
.field-error { color: var(--warn); font-size: .875rem; margin: .35rem 0 0; }
.reserve-note { color: var(--dim); font-size: .875rem; margin: 1rem 0 0; }
.reserve-submit { min-width: 14rem; }
.form-bad { border-color: var(--warn); }
.form-bad .ci, .form-bad p, .form-bad strong { color: var(--warn); }
.confirm-card { background: var(--bg-2); border: 1px solid var(--edge-g2); border-radius: 12px;
  padding: 1.75rem; max-width: 34em; margin: 1rem 0 2rem;
  box-shadow: 0 0 50px rgba(201,162,39,.06), 0 20px 60px rgba(0,0,0,.4); }
.confirm-kicker { font-size: .8125rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-t); margin: 0 0 .5rem; }
.confirm-code { font-family: var(--display); font-weight: 600; font-size: 2rem;
  letter-spacing: .08em; color: var(--ivory); margin: 0 0 .75rem; }
.confirm-line { color: var(--mute); margin: 0 0 .75rem; }
.confirm-line strong { color: var(--ivory); }
.confirm-rows { border-top: 1px solid var(--edge-c); margin: 1rem 0; }
.confirm-rows li { display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--edge-c); font-size: 1rem;
  color: var(--mute); }
.confirm-rows .confirm-total { color: var(--ivory); font-weight: 700; }
.confirm-rows .confirm-total span:last-child { font-family: var(--display);
  font-size: 1.25rem; color: var(--gold-t); }

/* ---- Venue band -------------------------------------------------- */
.venue {
  background: var(--bg-2); border-top: 1px solid var(--edge-g);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.venue-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 880px) { .venue-grid { grid-template-columns: 4fr 7fr; gap: 5rem; } }
.venue-h {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: -.015em; line-height: 1.1; color: var(--ivory); margin: 0;
}
.venue-h em { font-style: italic; color: var(--gold-t); }
.venue-body .vname { font-size: 1.25rem; font-weight: 700; color: var(--ivory); margin: 0; }
.venue-body .vaddr { color: var(--mute); margin: .35rem 0 1.5rem; }
.venue-body .vphone { color: var(--mute); margin: -1rem 0 1.5rem; }
.venue-body .vphone a { color: var(--gold-t); text-decoration: none; }
.arrival { color: var(--mute); max-width: 38em; margin-top: 1.75rem; }
.arrival p { margin: 0 0 .75rem; }

/* ---- Sections / generic pages ------------------------------------ */
.band {
  background: var(--bg-2); border-block: 1px solid var(--edge-g);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.band--plain { background: transparent; border: 0; padding: clamp(3rem, 6vw, 5rem) 0; }
/* R3-F4: when the content band directly follows the page hero
   (contact, join), the hero's own bottom padding already made the
   room — the band's full top padding on top of it read as a hole. */
.page-hero + .band--plain { padding-top: clamp(1rem, 2vw, 1.75rem); }
.band-h {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  letter-spacing: -.015em; line-height: 1.08;
  color: var(--ivory); margin: 0 0 1.25rem;
}
.band-h em { font-style: italic; color: var(--gold-t); }

.page-hero { position: relative; padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(560px 420px at 80% 20%, rgba(201,162,39,.07), transparent 65%);
  pointer-events: none;
}
.page-hero > * { position: relative; }
.page-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  letter-spacing: -.02em; line-height: 1.05;
  color: var(--ivory); margin: 1rem 0 1.25rem; text-wrap: balance;
}
.page-title em { font-style: italic; color: var(--gold-t); }
.page-lede { font-size: 1.1875rem; line-height: 1.7; color: var(--mute); max-width: 36em; }
.page-lede p { margin-bottom: 0; }
.page-body { padding: 0 0 clamp(3rem, 6vw, 5rem); }
.page-body .prose { max-width: 42em; color: var(--mute); }
.page-body .prose strong { color: var(--ivory); }
.donate-note { color: var(--dim); font-size: .9375rem; max-width: 34em; }
.donate-note--center { margin: 1.5rem auto 0; }
.backlink { margin: 2.5rem 0 0; }
.backlink a { color: var(--gold-t); text-decoration: none; font-weight: 700; }
.backlink a:hover { color: var(--gold-hi); }
.empty { color: var(--mute); font-size: 1.125rem; }

/* ---- FAQ — <details> accordion ----------------------------------- */
.faq-list { max-width: 46em; }
/* R5-3 (About): heading column beside the answers column, the same
   4/7 split as the story band, so the list no longer stops mid-air
   under a full-width heading. The contact backlink lives under the
   heading; kill its top margin there. */
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 880px) {
  .faq-grid { grid-template-columns: 4fr 7fr; gap: 5rem; }
  .faq-grid .faq-list { max-width: none; }
}
.faq-grid .backlink { margin-top: 1rem; }
.faq {
  border-bottom: 1px solid var(--edge-c);
}
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 64px; padding: 1rem 0;
  font-family: var(--display); font-weight: 600; font-size: 1.25rem;
  color: var(--ivory);
  transition: color .12s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ''; }
.faq summary::after {
  content: '+'; color: var(--gold-t); font-family: var(--sans);
  font-size: 1.375rem; font-weight: 400; flex-shrink: 0;
}
.faq[open] summary::after { content: '−'; }
.faq summary:hover { color: var(--gold-t); }
.faq summary:active { opacity: .8; }
.faq-a { padding: 0 0 1.25rem; color: var(--mute); max-width: 40em; }
.faq-a p { margin: 0 0 .75rem; }

/* ---- Forms — 56px fields, gold focus ----------------------------- */
.forge-field { margin: 0 0 1.125rem; }
.forge-field label { display: block; font-size: .9375rem; font-weight: 700;
  color: var(--ivory); margin-bottom: .45rem; }
.forge-required { color: var(--gold-t); }
.forge-form input, .forge-form textarea, .forge-form select {
  width: 100%; min-height: 56px; padding: .8rem 1.125rem; font-size: 1.0625rem;
  background: var(--bg-2); border: 1.5px solid var(--edge-c); border-radius: 8px;
  color: var(--ivory);
}
.forge-form textarea { min-height: 9rem; }
.forge-form input::placeholder, .forge-form textarea::placeholder { color: var(--dim); }
.forge-form input:focus, .forge-form textarea:focus, .forge-form select:focus {
  border-color: var(--gold); outline: none; box-shadow: 0 0 0 1px var(--gold);
}
.forge-submit {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; background: var(--gold); color: #171226;
  border: 1.5px solid var(--gold); border-radius: 5px;
  padding: .875rem 1.875rem; min-height: 52px; cursor: pointer;
  transition: background .13s, transform .09s;
}
.forge-submit:hover  { background: var(--gold-hi); border-color: var(--gold-hi); }
.forge-submit:active { background: var(--gold-act); transform: scale(.975); }
.forge-form-success, .forge-form-error { border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1rem 0; }
.forge-form-success { background: rgba(123,200,148,.1); border: 1px solid rgba(123,200,148,.4); }
.forge-form-error { background: rgba(224,164,88,.1); border: 1px solid rgba(224,164,88,.45); }
.forge-field-error { color: var(--warn); font-size: .875rem; margin: .35rem 0 0; }
.form-block { max-width: 34em; }

/* ---- Gallery band + lightbox ------------------------------------- */
.gallery-band {
  background: var(--bg-2); border-top: 1px solid var(--edge-g);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.gal-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem);
}
.gal-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  letter-spacing: -.015em; line-height: 1.08; color: var(--ivory); margin: 0;
}
.gal-title em { font-style: italic; color: var(--gold-t); }
.gal-count { font-size: .9375rem; color: var(--dim); margin: 0; }

.gal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px) { .gal-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 980px) { .gal-grid { grid-template-columns: repeat(4, 1fr); } }
.gal-item {
  display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 5px;
  background: var(--bg-3);
  box-shadow: 0 0 0 1px var(--edge-c), 0 8px 24px rgba(0,0,0,.4);
  transition: box-shadow .15s, transform .15s;
}
.gal-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--edge-g2), 0 0 30px rgba(201,162,39,.12), 0 14px 36px rgba(0,0,0,.5);
}
.gal-item:active { transform: scale(.98); }
.gal-item img, .gal-item picture { width: 100%; height: 100%; }
.gal-item img { object-fit: cover; }
.gal-note { margin: 2rem 0 0; font-size: .9375rem; color: var(--dim); }
.gal-note strong { color: var(--mute); }

/* R3-E: the browse-everything chain. The template emits one anchor
   per later gallery in browse order; only the first shows, so the
   link is always "the next one" with no template state and no JS.
   An empty chain (the last gallery) collapses entirely. */
.gal-chain { margin: 2.25rem 0 0; }
.gal-chain a ~ a { display: none; }
.gal-chain:empty { display: none; }
.gal-chain--start { margin-top: 2.5rem; }
.gal-chain-note { margin: .8rem 0 0; font-size: .9375rem; color: var(--dim); }

/* R3-F2: the confirmation's way back — first matching gold anchor
   wins, the ghost Home button is untouched. */
.back-choice .btn-gold ~ .btn-gold { display: none; }

/* Lightbox — CSS :target, zero JS */
.lb { position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(10,8,20,.96); padding: 1rem; }
.lb:target { display: flex; flex-direction: column; }
.lb-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem .5rem 1rem; max-width: 1100px; width: 100%; margin-inline: auto;
}
.lb-cap { font-size: .9375rem; color: var(--mute); margin: 0; }
.lb-cap em { font-family: var(--display); font-style: italic; color: var(--ivory); }
/* R3-E: the caption names the production and takes you to it */
.lb-cap-link { color: inherit; text-decoration: underline;
  text-decoration-color: rgba(240,233,218,.35); text-underline-offset: 3px; }
.lb-cap-link:hover { text-decoration-color: var(--gold-t); }
.lb-actions { display: flex; gap: .5rem; }
.lb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 48px; padding: 0 1.125rem;
  border: 1.5px solid rgba(240,233,218,.32); border-radius: 6px;
  color: var(--ivory); text-decoration: none; font-size: .9375rem; font-weight: 700;
  transition: border-color .12s, background .12s;
}
.lb-btn:hover  { border-color: var(--ivory); }
.lb-btn:active { background: rgba(240,233,218,.1); }
.lb-btn--gold { border-color: var(--gold); color: var(--gold-t); }
.lb-btn--gold:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
.lb-stage {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 0; max-width: 1100px; width: 100%; margin-inline: auto;
}
.lb-stage picture { display: contents; }
.lb-img, .lb-stage img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 4px;
  box-shadow: 0 0 0 1px var(--edge-g2), 0 30px 90px rgba(0,0,0,.7);
}
.lb-nav {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border: 1.5px solid rgba(240,233,218,.25); border-radius: 50%;
  color: var(--ivory); text-decoration: none; font-size: 1.375rem;
  transition: border-color .12s, background .12s;
}
.lb-nav:hover { border-color: var(--gold-t); color: var(--gold-t); }
.lb-nav:active { background: rgba(240,233,218,.08); }
.lb-nav--off { opacity: .25; pointer-events: none; }
@media (max-width: 640px) { .lb-nav { display: none; } }

/* Pagination — real links */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 2.5rem 0 0; }
.pagination ul { display: flex; flex-wrap: wrap; gap: .35rem; }
.pagination a, .pagination span[aria-current] {
  display: inline-flex; min-width: 48px; min-height: 48px;
  align-items: center; justify-content: center; border-radius: 8px;
  border: 1.5px solid var(--edge-c); text-decoration: none; color: var(--ivory);
  font-weight: 700; transition: border-color .12s;
}
.pagination a:hover { border-color: var(--edge-g2); color: var(--gold-t); }
.pagination span[aria-current] { background: var(--gold); color: #171226; border-color: var(--gold); }

/* ---- Videos ------------------------------------------------------ */
.videos { padding: clamp(3rem, 6vw, 5rem) 0; }
.video-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 880px) { .video-grid { grid-template-columns: 1fr 1fr; } }
.video-item h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem;
  color: var(--ivory); margin: 0 0 .75rem;
}
.forge-embed-frame { border-radius: 8px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--edge-c), 0 12px 34px rgba(0,0,0,.45); }
/* R5-3 (About): the platform's hosted <video> arrives with its master
   width/height attributes and no styling, so inside any column it
   kept height 720 while the column squeezed its width — a letterboxed
   tower with the controls stranded at its foot. Centred at a reading
   width, sized by CSS at its own aspect, framed like an embed. */
.feature-video { max-width: 880px; margin: 0 auto; }
.feature-video video {
  display: block; width: 100%; height: auto;
  border-radius: 8px; background: #000;
  box-shadow: 0 0 0 1px var(--edge-c), 0 12px 34px rgba(0,0,0,.45);
}
.feature-video p { margin: .6rem 0 0; font-size: .9375rem; }
.feature-video a { color: var(--gold-t); }
.forge-embed-fallback { margin: .6rem 0 0; font-size: .9375rem; }
.forge-embed-fallback a { color: var(--gold-t); }

/* ---- Cards (archive grid uses p-card; keep card hooks for B7) ---- */
.card-art--text {
  aspect-ratio: 2/3; background: var(--bg-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; padding: 1.25rem; text-align: center;
}
.card-art--text .ph-mark { color: var(--gold-t); font-size: 1.1rem; }
.card-art--text .ph-name {
  font-family: var(--display); font-style: italic;
  font-weight: 600; font-size: 1.35rem; line-height: 1.2; color: var(--mute);
}

/* ---- Footer — deepest velvet ------------------------------------- */
.site-footer {
  background: #0E0B1A;
  border-top: 1px solid var(--edge-g);
  color: var(--mute);
  padding: clamp(4rem, 7vw, 5.5rem) 0 2.5rem;
}
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 3.5rem; }
@media (min-width: 700px) { .foot-grid { grid-template-columns: 6fr 3fr 3fr; } }
.foot-logo {
  font-family: var(--display);
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--ivory); text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 1rem;
}
.foot-logo .mark { color: var(--gold-t); font-size: .75em; }
.foot-tag { font-size: 1rem; line-height: 1.7; max-width: 30em; }
.foot-social { display: flex; gap: .625rem; margin-top: 1.75rem; }
.foot-social a {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 8px;
  color: var(--mute); border: 1px solid var(--edge-c); text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.foot-social a:hover { color: var(--gold-t); border-color: var(--edge-g2); background: rgba(201,162,39,.06); }
.foot-social a:active { background: rgba(201,162,39,.12); }
.foot-social svg { width: 18px; height: 18px; }
.foot-h {
  font-size: .8125rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-t); margin-bottom: 1.125rem;
}
.foot-links { display: flex; flex-direction: column; }
.foot-links a {
  display: inline-flex; align-items: center;
  min-height: 46px;
  font-size: 1rem; color: var(--mute); text-decoration: none;
  transition: color .12s;
}
.foot-links a:hover { color: var(--ivory); }
.foot-base {
  border-top: 1px solid var(--edge-c); padding-top: 2rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem;
  font-size: .875rem; color: var(--dim);
}
.foot-base p { margin: 0; }
.dimlink { color: var(--dim); }
.dimlink:hover { color: var(--mute); }

/* ---- Mobile bottom tab bar --------------------------------------- */
.m-tabbar {
  position: sticky; bottom: 0; z-index: 55; display: flex;
  background: rgba(14,11,26,.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--edge-g);
  padding-bottom: var(--safe-b);
}
.m-tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; min-height: 60px; text-decoration: none; color: var(--dim);
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  transition: color .12s;
}
.m-tabbar a svg { width: 22px; height: 22px; }
.m-tabbar a:active { color: var(--mute); }
.m-tabbar a.on, .m-tabbar a[aria-current="page"] { color: var(--gold-t); }
@media (min-width: 820px) { .m-tabbar { display: none; } }

/* ---- Motion ------------------------------------------------------ */
@media (hover: none) {
  .btn-ghost:hover { border-color: rgba(240,233,218,.32); color: var(--ivory); }
  .nav-links a:hover { color: var(--mute); background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .live-dot { animation: none; }
}