/* Soul Penny Circus — design tokens + base styles
   Palette/typography source: design/SOUL-PENNY-DESIGN-SYSTEM.md
   "The clown made the scenery. A competent web developer built the website." */

:root {
  /* color tokens */
  --spc-midnight: #0d1720;
  --spc-deep-blue: #173647;
  --spc-teal: #176f73;
  --spc-crimson: #8d2924;
  --spc-burgundy: #5f2025;
  --spc-mustard: #cf972d;
  --spc-aged-gold: #b7893d;
  --spc-emerald: #3f6549;
  --spc-purple: #654a6f;
  --spc-parchment: #e5d2aa;
  --spc-cream: #f1e4c8;
  --spc-charcoal: #181715;
  --spc-stage-black: #090b0c;

  /* functional tokens */
  --color-bg: var(--spc-stage-black);
  --color-bg-panel: var(--spc-midnight);
  --color-bg-panel-alt: var(--spc-deep-blue);
  --color-text: var(--spc-cream);
  --color-text-muted: #c7bda3;
  --color-text-on-parchment: var(--spc-charcoal);
  --color-accent: var(--spc-mustard);
  --color-accent-strong: var(--spc-crimson);
  --color-accent-alt: var(--spc-teal);
  --color-border: rgba(229, 210, 170, 0.25);

  /* type */
  --font-display: "IM Fell English", Georgia, "Times New Roman", serif;
  --font-accent: "IM Fell English", var(--font-display);
  --font-body: "Jost", "Century Gothic", Futura, sans-serif;

  /* rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --radius: 4px;
  --max-width: 1200px;
  --sidebar-width: 280px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* A faint paper-grain texture over the whole site -- the "someone built
   this by hand" feel belongs in the material, not just the imagery.
   Pure CSS (an inline SVG turbulence filter), no image request, and
   kept subtle enough it never competes with real photography or text. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.14;
  /* "overlay" barely shows on a near-black background (it behaves like
     multiply in shadows) -- "screen" lightens based on the noise itself,
     which is what actually makes grain visible on dark theatrical bg. */
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#site-header, main, #site-footer { position: relative; z-index: 1; }

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

a { color: var(--color-accent); }
a:hover, a:focus-visible { color: var(--spc-parchment); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  color: var(--spc-cream);
}

h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

p { margin: 0 0 var(--space-2); }
p:last-child { margin-bottom: 0; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

section { padding: var(--space-4) 0; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 0.85em 1.75em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-1px); }
.btn-spaced { margin-top: var(--space-3); }
.panel-spaced { margin-top: var(--space-4); }
.text-center { text-align: center; }
.measure-center { max-width: 60ch; margin-left: auto; margin-right: auto; }
.no-margin-top { margin-top: 0; }
.display-block { display: block; }

.btn-primary {
  background: var(--spc-crimson);
  color: var(--spc-cream);
  border-color: var(--spc-crimson);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: #a5332c;
  color: var(--spc-cream);
}

.btn-secondary {
  background: transparent;
  color: var(--spc-cream);
  border-color: var(--color-border);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ---------- site header / nav ----------
   Desktop default is a persistent LEFT SIDEBAR (this codebase's CSS is
   desktop-first, mobile.css overrides down -- see that file for the
   ≤900px reversion to a top bar + hamburger drawer). */

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  background: var(--spc-stage-black);
  border-right: 1px solid var(--color-border);
}

body > main,
#site-footer {
  margin-left: var(--sidebar-width);
}

.nav-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-3) var(--space-2) var(--space-3);
}

.nav-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  text-decoration: none;
  color: var(--spc-cream);
  padding: var(--space-2) 0;
  text-align: center;
  width: 100%;
}
.nav-brand img { height: 120px; width: auto; flex-shrink: 0; }
.nav-brand span {
  font-family: var(--font-accent);
  font-size: 1rem;
  letter-spacing: 0.03em;
  line-height: 1.25;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.nav-links a {
  display: block;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.6em var(--space-1);
  border-left: 3px solid transparent;
}
.nav-links a:hover, .nav-links a:focus-visible {
  color: var(--spc-cream);
}
.nav-links a[aria-current="page"] {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  background: rgba(229, 210, 170, 0.05);
}

.nav-cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  text-align: center;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--spc-cream);
  border-radius: var(--radius);
  padding: 0.5em 0.75em;
  font-size: 1.1rem;
  cursor: pointer;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(9, 11, 12, 0.96) 0%,
    rgba(9, 11, 12, 0.55) 45%,
    rgba(9, 11, 12, 0.15) 75%
  );
}
.hero-quote {
  position: absolute;
  top: var(--space-4);
  right: var(--space-3);
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-style: italic;
  color: var(--spc-cream);
  max-width: 35ch;
  text-align: right;
  line-height: 1.4;
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: var(--space-5) var(--space-3) var(--space-5);
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}
.hero-content h1 { max-width: 20ch; }
.hero-tagline {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 45ch;
  margin-bottom: var(--space-3);
}
.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- section: current show ---------- */

.show-panel {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.show-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.show-meta div { display: flex; flex-direction: column; gap: 0.2em; }
.show-meta .label {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ---------- about / mission ---------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.troupe-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
.troupe-list li {
  padding: var(--space-2);
  border-left: 3px solid var(--color-accent);
  background: rgba(229, 210, 170, 0.04);
}
.troupe-list .name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--spc-cream);
  display: block;
}
.troupe-list .role {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ---------- quote panel ---------- */

.quote-panel {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--spc-cream);
  margin: var(--space-4) 0;
}
.quote-panel cite {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.9rem;
  color: var(--color-accent);
}

/* ---------- handmade world / photo frames ---------- */

.frame-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.photo-frame {
  border: 1px solid var(--color-border);
  background: var(--color-bg-panel);
  padding: 0.5rem;
  border-radius: var(--radius);
}
.photo-frame img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.photo-frame figcaption {
  padding: 0.75em 0.25em 0.25em;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* archival variant: aged-paper mount for behind-the-scenes/candid shots,
   as distinct from the gilded founder-portrait treatment -- the design
   system calls for photo treatment to vary, not one filter for everything */
.photo-frame--archival {
  background: var(--spc-parchment);
  border: 1px solid var(--spc-aged-gold);
  transform: rotate(-1deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.photo-frame--archival:nth-child(even) { transform: rotate(1deg); }
.photo-frame--archival img { filter: sepia(0.15) contrast(1.02); }
.photo-frame--archival figcaption {
  color: var(--color-text-on-parchment);
  font-family: var(--font-display);
  font-style: italic;
}

.show-image {
  margin: 0 0 var(--space-3) 0;
  max-width: 400px;
}
.show-image img {
  width: 100%;
  height: auto;
  display: block;
}

.show-panel-sidebyside {
  display: grid;
  grid-template-columns: 1fr minmax(0, 350px);
  gap: var(--space-4);
  align-items: start;
}
.show-image-side {
  margin: 0;
  max-width: 100%;
}
.show-content {
  padding-top: 0;
}

@media (max-width: 900px) {
  .show-panel-sidebyside {
    grid-template-columns: 1fr;
  }
}

/* ---------- mood gallery ---------- */

.mood-grid {
  display: grid;
  grid-template-columns: repeat(minmax(300px, 1fr), auto);
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.mood-frame {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.mood-frame img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

/* ---------- gallery ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
.gallery-grid img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius);
}

/* ---------- join the circus / support ---------- */

.callout-panel {
  background: linear-gradient(135deg, var(--spc-deep-blue), var(--spc-midnight));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
}
.callout-panel h2 { margin-bottom: var(--space-1); }
.callout-panel p { max-width: 55ch; margin-left: auto; margin-right: auto; }
.callout-panel .btn { margin-top: var(--space-2); }

/* ---------- footer ---------- */

#site-footer {
  background: var(--spc-stage-black);
  border-top: 1px solid var(--color-border);
  padding: var(--space-5) 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.footer-brand img {
  height: 150px;
  width: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.footer-grid h4 {
  font-family: var(--font-accent);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.5em; }
.footer-grid a { color: var(--color-text-muted); text-decoration: none; }
.footer-grid a:hover, .footer-grid a:focus-visible { color: var(--spc-cream); }
.footer-bottom {
  max-width: var(--max-width);
  margin: var(--space-4) auto 0;
  padding: var(--space-3) var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}

/* ---------- page hero banner (non-homepage pages) ---------- */

.page-banner {
  position: relative;
  overflow: hidden;
  background: var(--spc-charcoal);
}
.page-banner img {
  width: 100%;
  height: min(38vh, 340px);
  object-fit: cover;
  object-position: center 35%;

  opacity: 0.55;
}
.page-banner img.pos-20 { object-position: center 20%; }
.page-banner img.pos-0 { object-position: center 25%; }
<<<<<<< HEAD
.page-banner img.pos-left { object-position: left 45%; }
.page-banner img.gallery-banner { object-fit: cover; object-position: center 35%; width: 100%; }
=======
>>>>>>> 44918cb72f698ea05f70c30527ddbb6c7e0a6c68
.page-banner img.banner-natural {
  width: 100%;
  height: auto !important;
  object-fit: none !important;
  object-position: unset !important;
  opacity: 1;
  display: block;
}
.page-banner-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(to bottom, rgba(9,11,12,0.35), rgba(9,11,12,0.85));
}
.page-banner-content h1 { margin: 0; }
.page-banner-content p { color: var(--color-text-muted); margin-top: var(--space-1); }

/* ---------- section divider (ArtifactDivider) ---------- */

.section-divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 320px;
  margin: 0 auto var(--space-5);
  color: var(--color-accent);
}
.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.section-divider svg { flex-shrink: 0; }

/* ---------- founder / talent cards ---------- */

.founder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.founder-card {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.founder-photo-frame {
  padding: 10px;
  background: linear-gradient(135deg, var(--spc-aged-gold), var(--spc-mustard));
}
.founder-photo-frame img {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  border: 1px solid rgba(9,11,12,0.4);
}
.founder-card-body { padding: var(--space-3); }
.founder-card-body h3 { margin-bottom: 0.15em; }
.founder-role {
  display: block;
  font-family: var(--font-accent);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.founder-card-body p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* ---------- roster (players / roustabouts) ---------- */

.roster-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.roster-pill {
  display: inline-block;
  padding: 0.5em 1.1em;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--spc-cream);
  background: rgba(229, 210, 170, 0.04);
}

/* ---------- decorative CTA art panel ---------- */

.art-panel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  padding: var(--space-5) var(--space-3);
  text-align: center;
  z-index: 1;
}
.art-panel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: -2;
}
.art-panel.zoomed .art-panel-img {
  object-fit: cover;
  object-position: center 40%;
}
.art-panel-down .art-panel-img {
  object-position: center 25% !important;
}
.art-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9,11,12,0.5), rgba(9,11,12,0.2));
  z-index: -1;
  pointer-events: none;
}
.art-panel h2 { margin-bottom: var(--space-1); }
.art-panel p { max-width: 55ch; margin: 0 auto var(--space-3); color: var(--color-text-muted); }

/* ---------- timeline (Our Story production history) ---------- */

.timeline {
  border-left: 2px solid var(--color-border);
  margin-left: 0.5rem;
  padding-left: var(--space-4);
}
.timeline-item {
  position: relative;
  padding-bottom: var(--space-4);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-4) - 6px);
  top: 0.35em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
}
.timeline-year {
  font-family: var(--font-accent);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.15em;
}
.timeline-item h3 { margin-bottom: 0.2em; }
.timeline-item p { color: var(--color-text-muted); font-size: 0.95rem; }
.timeline-item.is-current .timeline-year { color: var(--spc-cream); }
.timeline-item.is-current::before { background: var(--spc-crimson); }

/* ---------- impact stat row ---------- */

.stat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  text-align: center;
}
.stat-row .stat-figure {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--color-accent);
  display: block;
}
.stat-row .stat-label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ---------- donation method cards ---------- */

.give-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.give-card {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.give-card h3 { margin-bottom: 0.3em; }
.give-card p { color: var(--color-text-muted); font-size: 0.95rem; }
.give-note {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ---------- path cards (Book Us hub) ---------- */

.path-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.path-card {
  display: block;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.path-card:hover, .path-card:focus-visible {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.path-card .eyebrow { margin-bottom: var(--space-1); }
.path-card h2 { color: var(--spc-cream); }
.path-card p { color: var(--color-text-muted); }
.path-card .path-cta {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--color-accent);
  font-family: var(--font-accent);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- service list ---------- */

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
.service-list li {
  padding: var(--space-3);
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.service-list h3 { margin-bottom: 0.3em; }
.service-list p { color: var(--color-text-muted); font-size: 0.95rem; margin: 0; }

/* ---------- masonry gallery + lightbox ---------- */

.masonry-gallery {
  column-count: 1;
  column-gap: var(--space-2);
}
.masonry-gallery-item {
  display: block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: var(--space-2);
  border: none;
  padding: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius);
  overflow: hidden;
}
.masonry-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.2s ease;
}
.masonry-gallery-item:hover img,
.masonry-gallery-item:focus-visible img {
  transform: scale(1.02);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(9, 11, 12, 0.94);
  padding: var(--space-3);
}
.lightbox.is-open { display: flex; }
.lightbox-figure {
  position: relative;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  margin: 0;
}
.lightbox-figure img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 1px solid var(--color-border);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: fixed;
  background: rgba(9, 11, 12, 0.85);
  border: 1px solid var(--color-border);
  color: var(--spc-cream);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover,
.lightbox-close:focus-visible, .lightbox-prev:focus-visible, .lightbox-next:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.lightbox-close { top: var(--space-3); right: var(--space-3); }
.lightbox-prev { left: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox-count {
  position: fixed;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

/* ---------- alt page theme (Fabrication) ----------
   "Someone opened the theatrical paint cabinet" -- Performance keeps the
   default crimson/gold accent; Fabrication swaps to teal so the two
   Book Us paths read as visually distinct, not just differently labeled. */
.theme-alt {
  --color-accent: var(--color-accent-alt);
  --color-accent-strong: var(--spc-teal);
}
.theme-alt .btn-primary {
  background: var(--spc-teal);
  border-color: var(--spc-teal);
}
.theme-alt .btn-primary:hover, .theme-alt .btn-primary:focus-visible {
  background: #1f8b90;
}
.theme-alt .timeline-item::before,
.theme-alt .path-card:hover,
.theme-alt .path-card:focus-visible {
  border-color: var(--spc-teal);
}

/* ---------- essay (long-form editorial content, e.g. What's Next) ---------- */

.essay {
  max-width: 68ch;
  margin: 0 auto;
  font-size: 1.05rem;
}
.essay p {
  margin-bottom: var(--space-3);
}
.essay .essay-beat {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--spc-cream);
  margin: var(--space-4) 0;
}
.essay .essay-signature {
  text-align: center;
  font-family: var(--font-accent);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin: var(--space-5) 0 var(--space-3);
}

/* ---------- poster frame (full show poster, not overlaid with our own text) ---------- */

.poster-frame {
  max-width: 640px;
  margin: var(--space-2) auto;
  border: 1px solid var(--color-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.poster-frame img { width: 100%; height: auto; display: block; }

/* ---------- series callout (Pentacle Cycle) ---------- */

.series-panel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4) var(--space-3);
}
.series-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.series-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 11, 12, 0.65);
  z-index: -1;
}
.series-panel .series-content { max-width: 55ch; }
.series-panel p.eyebrow { color: var(--spc-parchment); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}