/* ==========================================================================
   Rebel Town the Musical — site styles
   Design notes:
     - Cinematic darkness as the ground; parchment for moments of intimacy.
     - Brand red ("rebel") as the accent; gold for highlights.
     - Period-meets-now: Cinzel + IM Fell English (display) on Crimson Pro (body).
     - Mobile-first; respects prefers-reduced-motion.
   ========================================================================== */

/* --------- Custom properties --------- */
:root {
  /* Colors */
  --ink:           #0a0a0a;        /* near-black ground */
  --ink-2:         #141414;        /* slightly lifted */
  --smoke:         #1f1f1f;        /* panels */
  --char:          #2a2a2a;        /* borders */
  --rebel:         #c33b32;        /* primary brand red */
  --rebel-deep:    #8a1d18;        /* darker red for hover */
  --rebel-glow:    rgba(195, 59, 50, 0.45);
  --parchment:     #f3e3c1;        /* aged paper */
  --parchment-2:   #e8d6ae;        /* warmer parchment */
  --cream:         #f8eed1;        /* light cream */
  --gold:          #c9a961;        /* gilded accent (on dark grounds) */
  --gold-2:        #e2c47e;
  --gold-deep:     #7a5a1f;        /* gold-feeling accent for parchment grounds (AA contrast) */
  --ink-warm:      #3a2818;        /* warm dark brown for prose on parchment — not stark black */
  --liberty-blue:  #1e3556;        /* used sparingly */
  --whisper:       rgba(243, 227, 193, 0.85);  /* parchment 85% on dark — primary body */
  --whisper-2:     rgba(243, 227, 193, 0.72);  /* secondary text on dark — readable, not noisy */

  /* Type scale */
  --font-display:  "Cinzel", "IM Fell English", Georgia, serif;
  --font-quill:    "IM Fell English", "Cinzel", Georgia, serif;
  --font-body:     "Crimson Pro", Georgia, "Times New Roman", serif;
  --font-ui:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-display-xl: clamp(3rem, 8vw, 6.5rem);
  --fs-display-l:  clamp(2.25rem, 5vw, 4.5rem);
  --fs-h1:         clamp(2rem, 4vw, 3.25rem);
  --fs-h2:         clamp(1.6rem, 2.6vw, 2.4rem);
  --fs-h3:         clamp(1.25rem, 1.6vw, 1.6rem);
  --fs-body:       1.0625rem;
  --fs-body-lg:    1.1875rem;
  --fs-small:      0.875rem;
  --fs-eyebrow:    0.78rem;

  /* Layout */
  --container:     min(86rem, 92vw);
  --container-narrow: min(60rem, 92vw);
  --container-prose: min(46rem, 92vw);
  --gutter:        clamp(1rem, 3vw, 2rem);
  --section-y:     clamp(4rem, 9vw, 8rem);

  /* Misc */
  --radius:        2px;
  --radius-card:   4px;
  --transition:    0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-deep:   0 30px 80px -30px rgba(0,0,0,0.8);
  --shadow-soft:   0 8px 32px -10px rgba(0,0,0,0.6);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--whisper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Subtle film grain over the whole site (CSS noise, no asset request) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
  mix-blend-mode: overlay;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
img { font-style: italic; }  /* alt text styled when broken */

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: var(--rebel); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* --------- Typography --------- */
.display, h1.display, .hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--cream);
  text-transform: uppercase;
}

.quill {
  font-family: var(--font-quill);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--cream);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.015em;
  margin: 0 0 0.6em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: 0.04em; text-transform: uppercase; }
h4 { font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }

p { margin: 0 0 1.1em; }
p.lead { font-size: var(--fs-body-lg); color: var(--cream); }
p:last-child { margin-bottom: 0; }

a.text-link {
  color: var(--rebel);
  border-bottom: 1px solid var(--rebel);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
a.text-link:hover { color: var(--gold); border-color: var(--gold); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 1.25rem;
  display: inline-block;
}
.eyebrow::after {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1px;
  background: var(--gold);
  vertical-align: middle;
  margin-left: 0.6rem;
  opacity: 0.6;
}

blockquote {
  font-family: var(--font-quill);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  line-height: 1.4;
  color: var(--cream);
  margin: 0;
  padding: 0;
  position: relative;
}

cite {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--fs-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

/* --------- Layout primitives --------- */
.container       { width: var(--container); margin-inline: auto; }
.container-narrow{ width: var(--container-narrow); margin-inline: auto; }
.container-prose { width: var(--container-prose); margin-inline: auto; }

.section { padding-block: var(--section-y); position: relative; }
.section-tight { padding-block: clamp(2rem, 5vw, 4rem); }

.parchment {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.4) 0, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(0,0,0,0.06) 0, transparent 60%),
    linear-gradient(180deg, var(--parchment), var(--parchment-2));
  color: var(--ink-warm);
  position: relative;
  overflow: hidden;
}
.parchment::after {
  /* paper grain */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.10  0 0 0 0 0.04  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: multiply;
}
.parchment > * { position: relative; z-index: 1; }

/* Headings — slightly darker than body for hierarchy. */
.parchment h1, .parchment h2, .parchment h3, .parchment h4 {
  color: #1f1408;
}

/* Eyebrows + text-links use the brand red, which already reads cleanly on parchment. */
.parchment .eyebrow { color: var(--rebel-deep); }
.parchment .eyebrow::after { background: var(--rebel-deep); }
.parchment a.text-link { color: var(--rebel-deep); border-color: var(--rebel-deep); }
.parchment a.text-link:hover { color: var(--ink-warm); border-color: var(--ink-warm); }

.parchment blockquote, .parchment cite { color: var(--ink-warm); }

/* Ghost button on parchment uses warm dark ink + a softer border. */
.parchment .btn-ghost {
  color: var(--ink-warm);
  border-color: rgba(58, 40, 24, 0.45);
}
.parchment .btn-ghost:hover {
  color: var(--rebel-deep);
  border-color: var(--rebel-deep);
}

/* Body-text classes on parchment.
   Default styles use cream/whisper variables intended for dark grounds.
   On parchment we use warm dark variants — colored, not stark black —
   that still hit AA contrast on the cream ground. */
.parchment .lead {
  color: var(--ink-warm);
}
.parchment .dim {
  color: rgba(58, 40, 24, 0.7);
}
.parchment p,
.parchment li,
.parchment strong {
  color: var(--ink-warm);
}

/* The creative-list (cast page + homepage) uses gold + cream by default —
   both vanish on parchment. Swap to a deep amber (gold-feel) for role
   labels and deeper warm ink for person names; keep the ornamental
   left-border in matching amber so the visual rhythm survives. */
.parchment .creative-list .role { color: var(--gold-deep); }
.parchment .creative-list .person { color: #1a1208; }
.parchment .creative-list li {
  border-left-color: rgba(122, 90, 31, 0.55);
  background: linear-gradient(90deg, rgba(122, 90, 31, 0.07), transparent);
}

.divider-skyline {
  display: block;
  margin: 0 auto;
  width: clamp(140px, 18vw, 240px);
  opacity: 0.65;
  filter: brightness(1.6);
}

/* --------- Buttons --------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1rem 1.75rem;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--cream);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--rebel);
  border-color: var(--rebel);
  color: var(--cream);
  box-shadow: 0 0 0 0 var(--rebel-glow);
}
.btn-primary:hover {
  background: var(--rebel-deep);
  border-color: var(--rebel-deep);
  box-shadow: 0 0 30px 0 var(--rebel-glow);
}

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(243,227,193,0.5);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn-arrow::after {
  content: "→";
  font-family: var(--font-ui);
  letter-spacing: 0;
  margin-left: 0.25rem;
  transition: transform var(--transition-fast);
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* --------- Site header / nav --------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.25rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(10,10,10,0.85), rgba(10,10,10,0));
  transition: background var(--transition), padding var(--transition);
  backdrop-filter: blur(0);
}
.site-header.scrolled {
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(8px);
  padding-block: 0.85rem;
  border-bottom: 1px solid rgba(243,227,193,0.06);
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.brand-mark img {
  height: clamp(28px, 3.8vw, 40px);
  width: auto;
  transition: height var(--transition);
}
.brand-mark span {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--whisper);
  font-weight: 500;
  display: none;
}
@media (min-width: 700px) { .brand-mark span { display: inline; } }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 0.6rem;
  margin: -0.6rem;
  cursor: pointer;
  z-index: 110;
}
.nav-toggle span {
  display: block;
  width: 28px;
  height: 1.5px;
  background: var(--cream);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}
@media (min-width: 1000px) { .nav-toggle { display: none; } }

.nav-menu {
  display: flex;
  gap: 2.25rem;
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-menu a {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--whisper-2);
  transition: color var(--transition-fast);
  position: relative;
  padding-block: 0.4rem;
}
.nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--cream); }
.nav-menu a[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--rebel);
}

.nav-menu .nav-cta {
  border: 1px solid var(--rebel);
  background: var(--rebel);
  color: var(--cream);
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius);
  letter-spacing: 0.2em;
}
.nav-menu .nav-cta:hover { background: var(--rebel-deep); border-color: var(--rebel-deep); color: var(--cream); }
.nav-menu .nav-cta::after { display: none; }

@media (max-width: 999px) {
  /* Push the hamburger to the right edge.
     The empty <nav> wrapper (its drawer is fixed-positioned off-flow)
     would otherwise consume the right slot of justify-content: space-between
     and trap the hamburger in the center. */
  .nav-toggle { margin-left: auto; }
  .site-header > nav { width: 0; flex: 0 0 0; }

  .nav-menu {
    position: fixed;
    inset: 0;
    background: var(--ink);
    flex-direction: column;
    /* CRITICAL: justify-content: center used to push items off-screen
       at the top when the menu list is taller than the viewport (the
       overflow happens at the start, so the first items are clipped
       above the fold and the user can't scroll to them). flex-start
       guarantees the first item is always visible at the top, and
       overflow-y: auto handles the rest. */
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    padding:
      calc(5rem + env(safe-area-inset-top, 0px))
      2rem
      calc(3rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
  }
  /* Subtle bottom-edge fade hints at scrollable content when the menu
     is open — appears as a soft gradient over the lower edge of the
     drawer. Pure CSS, no JS. */
  .nav-menu[data-open="true"]::after {
    content: "";
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    height: 4rem;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--ink) 75%);
    z-index: 1;
  }
  .nav-menu[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
  }
  .nav-menu a { font-size: 1.1rem; letter-spacing: 0.3em; }
  .nav-menu .nav-cta { font-size: 0.88rem; padding: 1rem 1.5rem; margin-top: 0.5rem; }
}

/* --------- Hero --------- */
.hero {
  position: relative;
  min-height: 100vh;
  /* Two-row grid: row 1 (1fr) holds the centered content, row 2 (auto)
     holds the scroll cue. They cannot overlap because they're in
     separate grid rows. */
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 6rem var(--gutter) 1.5rem;
}
.hero-inner {
  grid-row: 1;
  align-self: center;  /* center the content within its row */
}
.hero-scroll-wrap-row {
  grid-row: 2;
  align-self: end;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../images/photos/set-wide.jpeg");
  background-size: cover;
  background-position: center;
  filter: brightness(0.65) saturate(0.85) contrast(1.05);
  animation: heroDrift 32s ease-in-out infinite alternate;
  transform-origin: center;
}

@keyframes heroDrift {
  from { transform: scale(1.05) translate(0, 0); }
  to   { transform: scale(1.15) translate(-2%, 1%); }
}

.hero::before {
  /* Vignette + dramatic light bloom from top */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(195,59,50,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 80% 100% at 50% 50%, transparent 0, rgba(10,10,10,0.85) 75%),
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.4) 30%, rgba(10,10,10,0.95) 100%);
}

.hero-inner {
  text-align: center;
  max-width: 56rem;
  position: relative;
  z-index: 1;
  margin-inline: auto;
}

.hero-tagline {
  font-family: var(--font-quill);
  font-style: italic;
  font-size: clamp(1.45rem, 2.8vw, 2.1rem);
  letter-spacing: 0.04em;
  color: var(--cream);
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 1.2s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-skyline {
  width: clamp(220px, 30vw, 380px);
  margin: 0 auto 1.25rem;
  opacity: 0;
  animation: fadeUp 1.2s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  filter: brightness(2) drop-shadow(0 0 20px rgba(243,227,193,0.15));
}

.hero-wordmark {
  width: clamp(280px, 70vw, 720px);
  height: auto;
  margin: 0 auto;
  opacity: 0;
  animation: fadeUp 1.4s 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  filter: drop-shadow(0 0 40px rgba(195,59,50,0.4));
}

.hero-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--cream);
  margin-top: 0.6rem;
  opacity: 0;
  animation: fadeUp 1.2s 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-meta {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: fadeUp 1.2s 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-dates {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  letter-spacing: 0.18em;
  color: var(--cream);
  font-weight: 600;
}
.hero-venue {
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--whisper-2);
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  opacity: 0;
  animation: fadeUp 1.2s 1.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Broken-teacup hero centerpiece — between subtitle and dates */
.hero-teacup {
  display: block;
  width: clamp(280px, 60vw, 560px);
  height: auto;
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  opacity: 0;
  animation: fadeUp 1.4s 1.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.55));
}

/* --------- Rolodex "deal-in" entrance for the hero ---------
   All seven hero cards (tagline, skyline, wordmark, subtitle, teacup,
   meta, cta) begin lying flat on a shared invisible table at the
   bottom of the hero. Each then peels off the table — pivoting on its
   bottom edge from horizontal to upright while translating UP to its
   final spot — and fades from invisible to opaque as it rises.
   Per-element --rolodex-y sets the travel distance (final → table).
   These declarations come AFTER the existing fadeUp rules above so
   the cascade lets rolodexDeal win for the animation property. To
   roll back, delete this section and the fadeUp animations resume. */
/* Perspective restored — without it the rotation reads as a flat
   vertical scale and feels like an earlier revision. perspective()
   inside the per-element transform guarantees 3D projection
   regardless of any stacking-context quirks on the parent. Smaller
   value = camera closer = more dramatic foreshortening (top edge of
   the flat card reads visibly wider than the bottom). */
.hero-inner {
  perspective: 600px;
  perspective-origin: center 70%;
  transform-style: preserve-3d;
}
@keyframes rolodexDeal {
  /* Card lies flat on the shared table with the top edge TOWARD the
     viewer (rotateX(-90deg) around the bottom-edge hinge). Fully
     invisible. */
  0% {
    transform: perspective(550px) translateY(var(--rolodex-y, 30vh)) rotateX(-90deg);
    opacity: 0;
  }
  /* Frontload opacity so most of the rotation is visible. */
  18% {
    opacity: 1;
  }
  /* Card fully upright at its final position. */
  100% {
    transform: perspective(550px) translateY(0) rotateX(0deg);
    opacity: 1;
  }
}
.hero-tagline,
.hero-skyline,
.hero-wordmark,
.hero-subtitle,
.hero-teacup,
.hero-meta,
.hero-cta {
  transform-origin: center bottom;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
/* Per-card travel distances and stagger. animation-fill-mode:both keeps
   the FROM state during the delay (invisible & on the table) and the
   TO state after (visible & in place). Cascade overrides the
   fadeUp animations declared above. */
.hero-tagline {
  --rolodex-y: 60vh;
  animation: rolodexDeal 1.4s 0.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-skyline {
  --rolodex-y: 50vh;
  animation: rolodexDeal 1.4s 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-wordmark {
  --rolodex-y: 38vh;
  animation: rolodexDeal 1.4s 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-subtitle {
  --rolodex-y: 30vh;
  animation: rolodexDeal 1.4s 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-teacup {
  --rolodex-y: 22vh;
  animation: rolodexDeal 1.4s 1.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-meta {
  --rolodex-y: 9vh;
  animation: rolodexDeal 1.4s 1.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-cta {
  --rolodex-y: 0;
  animation: rolodexDeal 1.4s 1.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Sponsor wall on /sponsors — uniform white cards in a flexbox row that
   wraps and CENTERS each line (including any partial final row). Fixed
   card width means natural responsiveness: 1-up on phones, 2 on small
   tablets, 3 on tablets, up to 4 across on wide desktops (capped via
   the wall's max-width). */
.sponsor-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: stretch;
  margin: 2.5rem auto 0;
  /* 4 × 240 + 3 × 24 = 1032 — caps the wall so we never get more than
     4 cards across regardless of viewport width. */
  max-width: 1080px;
}

.sponsor-card {
  margin: 0;
  flex: 0 0 auto;
  width: 240px;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border: 0;
  border-radius: 1.5rem;
  background: #fff;
  /* Soft rounded-rect fade — two linear gradients (one horizontal, one
     vertical) intersected via mask-composite. The card stays fully
     opaque in the center; each of the four edges fades smoothly to
     transparent. Because both gradients fade at the corners, corners
     soften most of all — visually matching the rounded-rectangle
     shape of the card rather than the previous ellipse. */
  mask-image:
    linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  transition: transform var(--transition);
}
.sponsor-card:hover {
  transform: translateY(-2px);
}
.sponsor-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Tiny viewports (older / narrow phones) — let the card shrink slightly
   so it never overflows the page gutter. */
@media (max-width: 380px) {
  .sponsor-card {
    width: min(85vw, 240px);
  }
}

/* Wrapper handles horizontal centering of the cue. The hero is now a
   2-row grid so this wrapper sits naturally in row 2 — it cannot overlap
   the centered content in row 1. */
.hero-scroll-wrap {
  display: flex;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  width: 100%;
}
.hero-scroll {
  pointer-events: auto;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--whisper-2);
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  opacity: 0;
  animation: fadeUp 1.2s 2.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* The text gets the letter-spacing; the negative right margin trims
   the trailing letter-space so the visual content centers correctly
   under the line below it. */
.hero-scroll > span {
  letter-spacing: 0.4em;
  margin-right: -0.4em;
}
.hero-scroll::after {
  content: "";
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: pulseLine 2.4s ease-in-out infinite;
}

/* On very short viewports there isn't enough vertical room for the cue
   to sit comfortably below the centered content even with grid layout.
   Hide it then. */
@media (max-height: 720px) {
  .hero-scroll-wrap { display: none; }
}
@keyframes pulseLine {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; transform-origin: top; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------- Story sections (the scroll-told experience) --------- */
.story {
  text-align: center;
  position: relative;
}
.story-prose {
  width: var(--container-prose);
  margin-inline: auto;
}

.story-bostonworld {
  background: linear-gradient(180deg, var(--ink), var(--ink-2) 50%, var(--ink));
  position: relative;
}
.story-bostonworld::before {
  /* Atmospheric red glow at center */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(195,59,50,0.08), transparent 60%);
  pointer-events: none;
}

.story-peter {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .story-peter { grid-template-columns: 1fr 1fr; }
}

.photo-frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-deep);
}
.photo-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* For portrait images cropped into landscape frames (e.g. william-sarah),
     keep the top of the image visible so faces aren't cropped out. */
  object-position: center top;
  transition: transform 1.6s ease;
}
.photo-frame:hover img { transform: scale(1.04); }

.photo-frame::after {
  /* subtle gilded inner border */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(201,169,97,0.25);
  pointer-events: none;
}

/* --------- Music section --------- */
.music-section {
  background:
    linear-gradient(180deg, var(--ink-2), var(--ink) 60%);
  text-align: center;
}
.music-embed {
  margin: 2.5rem auto 0;
  width: 100%;
  max-width: 56rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-deep);
  background: var(--smoke);
}
.music-embed iframe { width: 100%; height: 450px; border: 0; display: block; }

.tracklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 2rem;
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  text-align: left;
}
.tracklist li {
  border-bottom: 1px solid rgba(243,227,193,0.07);
  margin: 0;
  padding: 0;
}

/* Each track is a clickable button that plays via the SoundCloud Widget API */
.track {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.65rem 0.4rem;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 0.95rem;
  color: inherit;
  border-radius: 2px;
  transition: background var(--transition-fast), padding-inline var(--transition-fast);
}
.track:hover, .track:focus-visible {
  background: rgba(195,59,50,0.07);
  padding-inline: 0.7rem;
}
.track:focus-visible { outline: 1px solid var(--rebel); outline-offset: 2px; }

.t-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(243,227,193,0.22);
  color: var(--cream);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.t-play svg { width: 14px; height: 14px; }
.t-play .ic-play { transform: translateX(1px); /* optical center for triangle */ }
.t-play .ic-stop { display: none; }
/* When the track is currently playing, swap the triangle for the stop square. */
.track.playing .t-play .ic-play { display: none; }
.track.playing .t-play .ic-stop { display: block; }

.track:hover .t-play,
.track:focus-visible .t-play,
.track.playing .t-play {
  background: var(--rebel);
  border-color: var(--rebel);
  color: var(--cream);
  box-shadow: 0 0 14px var(--rebel-glow);
}

.tracklist .t-num {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  font-weight: 500;
  width: 1.4rem;
  text-align: right;
  flex-shrink: 0;
}
.tracklist .t-name {
  flex: 1;
  color: var(--cream);
  line-height: 1.3;
  min-width: 0;
}
.tracklist .t-time {
  color: var(--whisper-2);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.track.playing .t-name { color: var(--gold-2); }
.track.playing .t-num  { color: var(--rebel); }

/* Visible feedback when a click is queued because the SoundCloud widget
   is still hydrating. Pulses until the queued click fires. */
.track.loading .t-play {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
  animation: trackPulse 1s ease-in-out infinite;
}
@keyframes trackPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(201, 169, 97, 0); }
}

/* --------- Pull quotes --------- */
.quotes-section {
  text-align: center;
}
.quotes-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  margin-top: 3rem;
}
@media (min-width: 760px) {
  .quotes-grid { grid-template-columns: 1fr 1fr; }
}
.quote-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink-2);
  border: 1px solid rgba(243,227,193,0.08);
  border-left: 2px solid var(--rebel);
  border-radius: var(--radius-card);
  text-align: left;
  transition: transform var(--transition), border-color var(--transition);
}
.quote-card:hover {
  transform: translateY(-2px);
  border-left-color: var(--gold);
}
.quote-card blockquote {
  font-size: 1.1rem;
  line-height: 1.5;
}

/* --------- Cast / Creative cards --------- */
.cast-grid, .role-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 2.5rem;
}

.role-card {
  padding: 1.4rem 1.4rem 1.6rem;
  background: var(--ink-2);
  border: 1px solid rgba(243,227,193,0.07);
  border-radius: var(--radius-card);
  transition: all var(--transition);
}
.role-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.role-card .name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.role-card .voice {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
  display: block;
}
.role-card .desc { font-size: 0.95rem; color: var(--whisper); line-height: 1.55; }

.creative-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  list-style: none;
  padding: 0;
}
.creative-list li {
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  border-left: 1px solid rgba(201,169,97,0.4);
  background: linear-gradient(90deg, rgba(201,169,97,0.04), transparent);
}
.creative-list .role {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.4rem;
}
.creative-list .person {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--cream);
  letter-spacing: 0.04em;
}

/* --------- Wide single-photo figure --------- */
.photo-wide {
  margin: 0;
  max-width: 1200px;
  margin-inline: auto;
}
.photo-wide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card);
  border: 1px solid rgba(243,227,193,0.08);
}
.photo-wide figcaption {
  margin-top: 0.85rem;
  text-align: center;
  font-family: var(--font-quill);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--whisper);
  letter-spacing: 0.02em;
}

/* Full-bleed photo that emerges from the inner-hero above it.
   The image's top fades from transparent (revealing the hero behind)
   to fully opaque, and a negative margin pulls it up into the hero's
   bottom padding so the seam disappears. */
.photo-bleed {
  background: var(--ink);
  padding: 0 0 clamp(2rem, 5vw, 4rem);
  margin: 0;
}
.inner-hero:has(+ .photo-bleed) { border-bottom: 0; }
.photo-bleed .photo-wide.bleed-top {
  max-width: none;
  margin: 0;
}
.photo-wide.bleed-top img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  border: 0;
  margin-top: clamp(-9rem, -8vw, -4rem);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
}
.photo-wide.bleed-top figcaption {
  max-width: 1200px;
  margin: 1rem auto 0;
  padding: 0 var(--gutter);
}

/* --------- Education / outreach panel --------- */
.education-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
  margin-top: 2.5rem;
}
@media (min-width: 880px) {
  .education-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
.education-poster {
  max-width: 420px;
  margin-inline: auto;
}
.education-poster a {
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(201,169,97,0.25);
  transition: transform var(--transition), border-color var(--transition);
}
.education-poster a:hover {
  transform: translateY(-2px);
  border-color: rgba(201,169,97,0.55);
}
.education-poster img {
  width: 100%;
  height: auto;
  display: block;
}
.education-copy ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
.education-copy ul li {
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: 0.85rem;
  line-height: 1.55;
  color: var(--whisper);
}
.education-copy ul li::before {
  content: "♦";
  position: absolute;
  left: 0; top: 0.05em;
  color: var(--gold);
  font-size: 0.8rem;
}
.education-copy ul li strong { color: var(--cream); }

/* --------- Creative-team bio cards --------- */
.bio-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  margin-top: 3rem;
}
@media (min-width: 720px) {
  .bio-grid { grid-template-columns: repeat(2, 1fr); }
}
.bio-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.5rem;
  background: var(--ink-2);
  border: 1px solid rgba(243,227,193,0.08);
  border-radius: var(--radius-card);
  transition: border-color var(--transition), transform var(--transition);
}
.bio-card:hover {
  border-color: rgba(201,169,97,0.35);
  transform: translateY(-2px);
}
@media (min-width: 720px) {
  .bio-card { grid-template-columns: 140px 1fr; }
}
.bio-card .bio-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #1a1208;
  border: 2px solid rgba(201,169,97,0.25);
}
.bio-card .bio-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.bio-card .bio-role {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.4rem;
}
.bio-card .bio-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--cream);
  letter-spacing: 0.03em;
  margin: 0 0 0.75rem;
  line-height: 1.15;
}
.bio-card .bio-text {
  color: var(--whisper);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}
.bio-card .bio-text + .bio-text { margin-top: 0.75rem; }

/* Standalone portrait for the writer/lead bio (Segalla on /cast).
   Sits centered above the eyebrow on the parchment block. */
.bio-portrait {
  margin: 0 auto 2rem;
  width: clamp(180px, 28vw, 240px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #1a1208;
  border: 3px solid var(--gold-deep, #7a5a1f);
  box-shadow: 0 18px 36px -18px rgba(0,0,0,0.4);
}
.bio-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* --------- Barrel Sponsor featured callout --------- */
.barrel-callout {
  margin-top: 3rem;
  padding: 2rem;
  background: linear-gradient(180deg, var(--ink-2), rgba(195,59,50,0.07));
  border: 1px solid rgba(201,169,97,0.35);
  border-radius: var(--radius-card);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  position: relative;
}
@media (min-width: 900px) {
  .barrel-callout { grid-template-columns: 1.1fr 1fr; padding: 2.5rem; }
}
.barrel-callout::before {
  content: "Limited · 4 Slots";
  position: absolute;
  top: -10px; left: 2rem;
  background: var(--rebel);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 2px;
  white-space: nowrap;
}
.barrel-callout .barrel-image {
  border-radius: 6px;
  overflow: hidden;
  background: #1a1208;
  border: 1px solid rgba(201,169,97,0.2);
  max-width: 420px;
  margin-inline: auto;
}
.barrel-callout .barrel-image img {
  width: 100%; height: auto; display: block;
}
.barrel-callout .barrel-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  color: var(--cream);
  margin: 0 0 0.5rem;
  letter-spacing: 0.04em;
}
.barrel-callout .barrel-amount {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--rebel);
  font-weight: 700;
  margin: 0 0 0.4rem;
}
.barrel-callout .barrel-deadline {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}
.barrel-callout ul {
  list-style: none;
  padding: 0; margin: 0 0 1.25rem;
  font-size: 0.95rem;
}
.barrel-callout ul li {
  padding-left: 1.2rem;
  position: relative;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: var(--whisper);
}
.barrel-callout ul li::before {
  content: "♦";
  position: absolute;
  left: 0; top: 0.05em;
  color: var(--gold);
  font-size: 0.7rem;
}

/* --------- Sponsorship tiers --------- */
.tier-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 3rem;
}
@media (min-width: 700px)  { .tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tier-grid { grid-template-columns: repeat(5, 1fr); } }

.tier {
  padding: 2rem 1.5rem;
  background: var(--ink-2);
  border: 1px solid rgba(243,227,193,0.08);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--transition);
}
.tier:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 30px 60px -30px rgba(201,169,97,0.3);
}
.tier-name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.tier-amount {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--rebel);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.tier-meta {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
  min-height: 1em;
}
.tier ul {
  list-style: none;
  padding: 0; margin: 0;
  font-size: 0.92rem;
  flex: 1;
}
.tier ul li {
  padding-left: 1.2rem;
  position: relative;
  margin-bottom: 0.6rem;
  line-height: 1.45;
  color: var(--whisper);
}
.tier ul li::before {
  content: "♦";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--gold);
  font-size: 0.7rem;
}
.tier.featured {
  border-color: var(--rebel);
  background: linear-gradient(180deg, var(--ink-2), rgba(195,59,50,0.06));
}
.tier.featured::before {
  content: "Limited Edition";
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--rebel);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 2px;
  white-space: nowrap;
}

/* Tea chest counter */
.chest-counter {
  margin: 3rem auto 0;
  text-align: center;
  max-width: 32rem;
}
.chest-progress {
  width: 100%;
  height: 8px;
  background: var(--ink-2);
  border: 1px solid rgba(243,227,193,0.1);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 1rem;
}
.chest-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--rebel), var(--gold));
  width: 0;
  transition: width 1.6s ease;
}
.chest-count {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--cream);
}
.chest-count .of {
  color: var(--whisper-2);
  font-size: 0.45em;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-left: 0.4rem;
  vertical-align: middle;
  font-family: var(--font-ui);
  font-weight: 500;
}

/* --------- Tickets close-out section --------- */
.tickets-close {
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(195,59,50,0.18), transparent 60%),
    var(--ink);
  border-block: 1px solid rgba(243,227,193,0.08);
}
.tickets-close .display {
  font-size: var(--fs-display-l);
  margin-bottom: 1.5rem;
}
.tickets-close .hero-dates { margin-bottom: 0.4rem; }

/* --------- Footer --------- */
.site-footer {
  background: #060606;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) 2rem;
  border-top: 1px solid rgba(243,227,193,0.06);
  color: var(--whisper-2);
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: var(--container);
  margin-inline: auto;
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer-brand img { width: 220px; max-width: 100%; margin-bottom: 1.25rem; }
.footer-brand p { line-height: 1.6; }

.footer h4 {
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 0.65rem; }
.footer ul a {
  color: var(--whisper-2);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  transition: color var(--transition-fast);
}
.footer ul a:hover { color: var(--cream); }

.social-row {
  display: flex;
  gap: 0.85rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(243,227,193,0.18);
  border-radius: 50%;
  color: var(--whisper-2);
  transition: all var(--transition-fast);
}
.social-row a:hover { color: var(--rebel); border-color: var(--rebel); transform: translateY(-2px); }
.social-row svg { width: 18px; height: 18px; }

.footer-bottom {
  max-width: var(--container);
  margin: 3.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(243,227,193,0.06);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--whisper-2);
  font-family: var(--font-ui);
  letter-spacing: 0.05em;
}
.footer-bottom a { color: var(--whisper-2); transition: color var(--transition-fast); }
.footer-bottom a:hover { color: var(--cream); }

/* --------- Inner-page hero (smaller) --------- */
.inner-hero {
  position: relative;
  padding: 9rem var(--gutter) 4rem;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(195,59,50,0.16), transparent 55%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
  border-bottom: 1px solid rgba(243,227,193,0.06);
}
.inner-hero h1 {
  font-size: var(--fs-display-l);
  margin-bottom: 0.5rem;
}
.inner-hero p { font-family: var(--font-quill); font-style: italic; font-size: 1.15rem; color: var(--whisper); }

/* --------- Prose body --------- */
.prose {
  width: var(--container-prose);
  margin-inline: auto;
}
.prose p { font-size: var(--fs-body-lg); }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }

/* --------- Photo strip --------- */
.photo-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 3rem;
}
@media (min-width: 700px)  { .photo-strip { grid-template-columns: 2fr 1fr; } }
@media (min-width: 1000px) { .photo-strip { grid-template-columns: 2fr 1fr 1fr; } }
.photo-strip .photo-frame { aspect-ratio: 3/2; }

/* --------- Forms --------- */
.form {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
  max-width: 36rem;
  margin-inline: auto;
}
.form label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.form input, .form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--ink-2);
  border: 1px solid rgba(243,227,193,0.15);
  border-radius: var(--radius);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--transition-fast);
}
.form input:focus, .form textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.form textarea { min-height: 8rem; resize: vertical; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form button { justify-self: start; }

/* --------- Reveal on scroll --------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* --------- Skip link --------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 1rem;
  background: var(--cream);
  color: var(--ink);
  padding: 0.7rem 1rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 200;
}
.skip:focus { left: 1rem; }

/* --------- Reduced motion --------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-bg { animation: none; }
  .reveal,
  .hero-tagline, .hero-skyline, .hero-wordmark, .hero-subtitle,
  .hero-teacup, .hero-meta, .hero-cta, .hero-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Safety net: if for any reason the hero animations don't fire,
   ensure content is visible within a few seconds. The .loaded class
   is added to <body> by main.js shortly after page load. */
body.loaded .hero-tagline,
body.loaded .hero-skyline,
body.loaded .hero-wordmark,
body.loaded .hero-subtitle,
body.loaded .hero-teacup,
body.loaded .hero-meta,
body.loaded .hero-cta,
body.loaded .hero-scroll {
  opacity: 1;
}

/* --------- Mobile hero scaling (per Jim's review) --------- */
@media (max-width: 640px) {
  .hero-tagline {
    /* bigger on phones — overrides the desktop clamp */
    font-size: 1.6rem;
  }
  .hero-wordmark {
    /* allow the wordmark to fill more of the narrow viewport with
       narrower side margins, capped at the desktop max */
    width: min(94vw, 480px);
  }
  .hero-subtitle {
    font-weight: 700;
    font-size: 1.3rem;
  }
  /* leave .hero-teacup width unchanged per Jim */
}

/* --------- Helpers --------- */
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }
.row-cta { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top: 2.25rem; }
.dim { color: var(--whisper-2); }