/* ==========================================================================
   Camerata Bulgarica — design system
   "Paper, Ink & Bulgarian Rose" (mockup v3, approved)
   Source of visual truth: design-reference/mockup-v3-approved.html
   Token values: docs/plans/2026-07-10-camerata-website-design.md

   One file, no build step, no external imports. All ~12 pages share this.

   Breakpoints are per-component (nav 900px; section collapses 880/820/720px),
   matching the approved mockup — intentional, not a global scale.

   Contents
     1.  Tokens
     2.  Reset / base
     3.  Typography helpers (.wrap, .label, headings)
     4.  Header / nav (desktop + dual-mechanism mobile menu)
     5.  Buttons
     6.  Hero
     7.  Marquee
     8.  Sections (about, concerts, directors, support, listen)
     9.  Scroll reveals
     10. Forms
     11. Footer
     12. Utilities & accessibility
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  color-scheme: light;                       /* native widgets match the paper theme */

  /* Palette — values are authoritative per the design doc */
  --paper: #FBF8F2;                          /* page background */
  --paper-deep: #F3EEE3;                     /* alternate section background */
  --ink: #16130F;                            /* text; dark sections */
  --red: #A32035;                            /* THE accent — Bulgarian rose */
  --red-deep: #85182A;                       /* hover state for red */
  --amber: #B97B3D;                          /* reserved; tiny doses only */

  /* Derived tokens (from the mockup) */
  --ink-dim: rgba(22, 19, 15, 0.62);
  --ink-faint: rgba(22, 19, 15, 0.4);
  --white: #FBF8F2;                          /* "white" on dark = paper */
  --white-dim: rgba(251, 248, 242, 0.66);
  --rule: rgba(22, 19, 15, 0.14);            /* hairline dividers on paper */

  /* Type stacks — system/local fonts only, no imports */
  --serif: "Didot", "Bodoni 72", "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}


/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchored sections land below the fixed header */
  scroll-padding-top: 5.5rem;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ==========================================================================
   3. TYPOGRAPHY HELPERS
   ========================================================================== */

/* Page gutter / measure */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 5vw; }

/* Letter-spaced uppercase kicker label; .no = red section number ("01").
   Also usable on headings (<h3 class="label">) for outline-correct block
   titles — the explicit sans stack overrides the h1–h3 serif rule. */
.label {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.label .no { color: var(--red); margin-right: 0.9em; }

/* Editorial headline pattern: high-contrast serif, normal weight,
   <em> for the italic (often red) emphasis word. Components size
   their own headings with clamp(); this sets the shared voice. */
h1, h2, h3, h4 { font-weight: 400; }
h1, h2, h3 { font-family: var(--serif); }
h1 em, h2 em, h3 em { font-style: italic; }

/* Unclassed links in page content (prose, notes, FAQ answers) take the
   accent — never browser default blue. Component links (.btn, .sec-link,
   .card, .feature …) style themselves via their class. */
main a:not([class]) {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.25s;
}
main a:not([class]):hover { color: var(--red-deep); }
/* On dark bands red fails contrast (2.5:1 on ink) — use paper instead. */
.support a:not([class]),
.cta-band a:not([class]) { color: var(--white); }
.support a:not([class]):hover,
.cta-band a:not([class]):hover { color: var(--white-dim); }


/* ==========================================================================
   4. HEADER / NAV
   --------------------------------------------------------------------------
   Desktop (above 900px): wordmark left, inline link list right — unchanged
   from the mockup.

   Mobile (900px and below): the link list becomes a full-width paper panel that
   slides down from under the header bar. TWO open/close mechanisms ship,
   so the menu works with and without JavaScript:

     1. PRIMARY (JS on) — <button class="nav-btn" aria-expanded="false"
        aria-controls="site-nav"> in the header bar; main.js toggles the
        .nav-open class on <header> (and aria-expanded). Fully keyboard
        accessible. Hidden when JS is absent: html:not(.js) .nav-btn.

     2. FALLBACK (no JS) — <input type="checkbox" id="nav-toggle"
        class="nav-check"> immediately followed by
        <label class="nav-check-label" for="nav-toggle"> (order matters:
        the CSS uses `#nav-toggle:checked ~ nav` and `.nav-check + label`
        sibling selectors, so input, label and <nav> must all be children
        of .nav, with the input before both). The checkbox itself is
        visually hidden but focusable, so keyboard users can Tab to it and
        press Space even without JS. Hidden when JS is present:
        html.js .nav-check-label (+ its input).

   Expected markup:

     <header>
       <div class="nav">
         <a class="wordmark" href="/">…inline monogram SVG… Camerata <em>Bulgarica</em></a>
         <input class="nav-check" type="checkbox" id="nav-toggle">
         <label class="nav-check-label" for="nav-toggle">
           <span class="nav-ico" aria-hidden="true"></span>
           <span class="visually-hidden">Menu</span>
         </label>
         <button class="nav-btn" aria-expanded="false" aria-controls="site-nav">
           <span class="nav-ico" aria-hidden="true"></span>
           <span class="visually-hidden">Menu</span>
         </button>
         <nav id="site-nav"><ul>…<li><a class="btn-support" …></li></ul></nav>
       </div>
     </header>
   ========================================================================== */

header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  background: rgba(251, 248, 242, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.nav {
  max-width: 1240px; margin: 0 auto; padding: 1.05rem 5vw;
  display: flex; align-items: center; justify-content: space-between;
}

/* Wordmark — cropped monogram SVG (inlined so currentColor recolors it:
   ink on paper, paper on ink) next to the "Camerata Bulgarica" text. */
.wordmark {
  color: var(--ink); text-decoration: none;
  font-family: var(--serif);
  font-size: 1.12rem; letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 0.8rem;
}
.wordmark em { font-style: italic; color: var(--red); }
.wordmark svg { height: 2.2rem; width: auto; color: var(--ink); }
/* Raster monogram fallback (mockup pattern), kept for safety */
.wordmark .mark { width: 2.15rem; height: 2.15rem; border-radius: 2px; object-fit: cover; }

/* Desktop link list (scoped to the header so future navs, e.g. breadcrumbs,
   don't inherit it). The Support pill keeps the shared typography but gets
   its colors from .btn-support, hence the :not() on the color rules. */
header nav ul { display: flex; gap: 2.2rem; list-style: none; align-items: center; }
header nav a {
  text-decoration: none;
  font-size: 0.68rem; font-weight: 450;
  letter-spacing: 0.2em; text-transform: uppercase;
  transition: color 0.25s;
}
header nav a:not(.btn-support) { color: var(--ink-dim); }
header nav a:not(.btn-support):hover { color: var(--red); }

/* --- Mobile menu controls (hidden on desktop) --------------------------- */

/* The no-JS checkbox: visually hidden, still focusable for keyboard use */
.nav-check {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.nav-btn, .nav-check-label {
  display: none;                     /* shown < 900px */
  align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;   /* comfortable tap target */
  border: 0; background: none; cursor: pointer;
  color: var(--ink);
}

/* Hamburger icon: middle bar + ::before/::after bars; morphs to an X */
.nav-ico {
  position: relative; display: block;
  width: 1.35rem; height: 2px;
  background: currentColor;
  transition: background 0.2s;
}
.nav-ico::before, .nav-ico::after {
  content: ""; position: absolute; left: 0;
  width: 100%; height: 2px; background: currentColor;
  transition: transform 0.25s, top 0.25s;
}
.nav-ico::before { top: -0.42rem; }
.nav-ico::after  { top:  0.42rem; }

/* Open state — X icon (both mechanisms) */
header.nav-open .nav-ico,
.nav-check:checked ~ .nav-check-label .nav-ico { background: transparent; }
header.nav-open .nav-ico::before,
.nav-check:checked ~ .nav-check-label .nav-ico::before { top: 0; transform: rotate(45deg); }
header.nav-open .nav-ico::after,
.nav-check:checked ~ .nav-check-label .nav-ico::after  { top: 0; transform: rotate(-45deg); }

/* Focus ring for the keyboard-focused hidden checkbox lands on its label */
.nav-check:focus-visible + .nav-check-label {
  outline: 2px solid var(--red); outline-offset: 2px;
}

/* --- Breakpoint: collapse to panel below 900px --------------------------- */
@media (max-width: 900px) {
  .nav-btn, .nav-check-label { display: inline-flex; }

  /* The nav becomes a full-width paper panel sliding down from the bar.
     Positioned against <header> (fixed = containing block). */
  .nav nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height 0.35s ease, visibility 0s linear 0.35s;
  }
  header.nav-open .nav nav,
  .nav-check:checked ~ nav {
    /* Cap to the space under the header bar (~4.4rem: 2 x 1.05rem padding
       + 2.2rem monogram + border; 5rem keeps a little slack) and let the
       panel itself scroll, so every link stays reachable on
       short/landscape screens */
    max-height: calc(100svh - 5rem);
    overflow-y: auto;
    visibility: visible;
    transition: max-height 0.35s ease;
  }

  .nav nav ul {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.6rem 5vw 1.8rem;
  }
  .nav nav li { border-bottom: 1px solid var(--rule); }
  .nav nav li:last-child { border-bottom: 0; }
  .nav nav a {
    display: block;
    padding: 1rem 0.2rem;
    font-size: 0.78rem;
  }
  .nav nav .btn-support {
    display: inline-block;
    margin-top: 1.2rem;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav nav, .nav-ico, .nav-ico::before, .nav-ico::after { transition: none; }
}

/* --- JS / no-JS gating (must come after the rules above) ----------------- */
/* main.js adds class="js" to <html> as its first act. */
html.js .nav-check,
html.js .nav-check-label { display: none; }        /* JS on → button only  */
html:not(.js) .nav-btn { display: none; }          /* JS off → checkbox only */


/* ==========================================================================
   5. BUTTONS
   --------------------------------------------------------------------------
   Rounded pills. Red solid = primary; thin outline = secondary
   (-light on dark grounds, -dark on paper). Works on <a> and <button>.
   ========================================================================== */

.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 1rem 2rem;
  border: 1px solid transparent;      /* keeps solid + ghost the same size */
  border-radius: 100px;
  background: none;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
  white-space: nowrap;
}
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-deep); }
.btn-ghost-light { border-color: rgba(251, 248, 242, 0.5); color: var(--white); }
.btn-ghost-light:hover { border-color: var(--white); background: rgba(251, 248, 242, 0.1); }
.btn-ghost-dark { border-color: rgba(22, 19, 15, 0.35); color: var(--ink); }
.btn-ghost-dark:hover { border-color: var(--red); color: var(--red); }

/* Centered row of buttons (CTA bands and similar) */
.btn-row {
  margin-top: 2.5rem;
  display: flex; gap: 1rem;
  justify-content: center; flex-wrap: wrap;
}

/* Header pill ("Support us") — sized to sit in the nav link row.
   Nav link colors skip it via :not(.btn-support), so no !important needed. */
.btn-support, .btn-support:hover {
  color: var(--paper);
}
.btn-support {
  background: var(--red);
  padding: 0.62rem 1.45rem;
  border-radius: 100px;
  transition: background 0.25s;
}
.btn-support:hover { background: var(--red-deep); }


/* ==========================================================================
   6. HERO
   --------------------------------------------------------------------------
   Full-viewport photo, dark tint, headline pinned to the bottom.
   The photo is set PER PAGE on the .bg element, e.g.
     <div class="bg" style="background-image:url('/assets/img/arc-stage-wide.jpg')"></div>
   Position/size/repeat live here so the inline style carries only the image.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  color: var(--white);
  /* Fallback ground so white text stays readable while the photo
     loads (or if a page forgets to set one) */
  background-color: var(--ink);
  overflow: hidden;
}
.hero .bg {
  position: absolute; inset: 0;
  background-position: center 22%;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero .tint {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(12, 9, 6, 0.82) 0%, rgba(12, 9, 6, 0.22) 48%, rgba(12, 9, 6, 0.18) 100%);
}
.hero .wrap { position: relative; width: 100%; padding-top: 11rem; padding-bottom: 5rem; }
.hero .kicker {
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--white-dim);
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.6rem;
}
.hero .kicker::before { content: ""; width: 3rem; height: 1px; background: var(--red); flex: none; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 8.5vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  max-width: 14ch;
}
.hero h1 em { font-style: italic; font-weight: 300; }
.hero .below {
  margin-top: 2.6rem;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 3rem; flex-wrap: wrap;
}
.hero p.lede { max-width: 44ch; font-size: 1rem; color: var(--white-dim); }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Shorter hero for interior pages (opt-in) */
.hero-short { min-height: 62svh; }


/* ==========================================================================
   7. MARQUEE
   --------------------------------------------------------------------------
   Black band of venue names in italic serif, red asterisk separators.
   Pure CSS animation; the track content is duplicated once in the markup so
   translateX(-50%) loops seamlessly. Frozen under reduced motion.
   ========================================================================== */

.marquee {
  background: var(--ink); color: var(--paper);
  overflow: hidden; white-space: nowrap;
  padding: 1.05rem 0;
  border-top: 1px solid rgba(251, 248, 242, 0.08);
}
.marquee .track {
  display: inline-block;
  animation: slide 38s linear infinite;
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee span {
  font-family: var(--serif); font-style: italic;
  font-size: 1.02rem; color: var(--white-dim);
  padding: 0 2.6rem; position: relative;
}
.marquee span::after {
  content: "✳"; position: absolute; right: -0.55rem; top: 0.05rem;
  font-size: 0.7rem; color: var(--red); font-style: normal;
}
@media (prefers-reduced-motion: reduce) {
  .marquee .track { animation: none; }
}


/* ==========================================================================
   8. SECTIONS
   ========================================================================== */

section { padding: 7rem 0; }

/* Shared section header: big serif title + arrow link, baseline-aligned */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  margin-bottom: 3.4rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.sec-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.05;
}
.sec-link {
  color: var(--ink); text-decoration: none;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.7rem;
  transition: color 0.25s;
  white-space: nowrap;
}
.sec-link::after { content: "→"; color: var(--red); font-size: 0.9rem; }
.sec-link:hover { color: var(--red); }

/* --- Cols: responsive block columns (about philosophy, bookings pillars) -- */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 3rem 4rem;
}
.cols p { color: var(--ink-dim); margin-top: 1.2rem; }

/* --- About: editorial overlap ------------------------------------------- */
.about .wrap {
  display: grid; grid-template-columns: 7fr 5fr;
  gap: 5rem; align-items: center;
}
.about .label { display: block; margin-bottom: 1.6rem; }
.about h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.12;
}
.about h2 em { font-style: italic; color: var(--red); }
.about p { color: var(--ink-dim); margin-top: 1.6rem; font-size: 0.99rem; max-width: 52ch; }
.about .btn { margin-top: 2.4rem; }
.about .pics { position: relative; padding-bottom: 4.5rem; }
.about .pics img { border-radius: 2px; }
.about .pics .p1 {
  width: 84%; aspect-ratio: 4 / 3.4; object-fit: cover;
  box-shadow: 0 24px 60px -24px rgba(22, 19, 15, 0.45);
}
.about .pics .p2 {
  position: absolute; right: 0; bottom: 0;
  width: 52%; aspect-ratio: 1; object-fit: cover;
  border: 6px solid var(--paper);
  box-shadow: 0 24px 60px -24px rgba(22, 19, 15, 0.5);
}
@media (max-width: 880px) {
  .about .wrap { grid-template-columns: 1fr; gap: 3.6rem; }
}

/* --- Concerts: black feature card + ledger event rows -------------------- */
.concerts { background: var(--paper-deep); }

.feature {
  display: grid; grid-template-columns: 5fr 6fr;
  background: var(--ink); color: var(--white);
  border-radius: 3px; overflow: hidden;
  text-decoration: none;
  margin-bottom: 0.9rem;
  transition: transform 0.3s;
}
.feature:hover { transform: translateY(-3px); }
.feature img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; }
.feature .body { padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
.feature .tag {
  font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--red); font-weight: 600;
  filter: brightness(1.5);   /* lifts the red to readable contrast on ink */
  margin-bottom: 1.4rem;
}
.feature .date {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  line-height: 1;
}
.feature .date span { font-style: italic; font-size: 0.5em; color: var(--white-dim); margin-left: 0.4rem; }
.feature h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-top: 1rem; }
.feature .venue { color: var(--white-dim); font-size: 0.85rem; margin-top: 0.5rem; }
.feature .btn { margin-top: 2rem; align-self: flex-start; }
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; }
  .feature img { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature { transition: none; }
  .feature:hover { transform: none; }
}

.event {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 2.4rem; align-items: center;
  padding: 1.9rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  transition: background 0.25s;
}
.event:hover { background: rgba(163, 32, 53, 0.045); }
.event-date { display: flex; align-items: baseline; gap: 0.6rem; }
.event-date .day { font-family: var(--serif); font-size: 2.7rem; line-height: 1; }
.event-date .month { font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-dim); }
.event-info h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; }
.event-info .venue { font-size: 0.8rem; color: var(--ink-dim); margin-top: 0.2rem; }
.event .arr { font-size: 1.3rem; color: var(--red); transition: transform 0.25s; }
.event:hover .arr { transform: translateX(6px); }
@media (max-width: 720px) {
  .event { grid-template-columns: 90px 1fr auto; gap: 1.2rem; }
  .event-date .day { font-size: 2rem; }
}

/* --- Directors: portrait cards ------------------------------------------ */
.directors .grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem;
}
.card { text-decoration: none; color: inherit; }
.card figure { overflow: hidden; border-radius: 3px; }
.card img {
  width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: top;
  transition: transform 0.5s ease;
}
.card:hover img { transform: scale(1.03); }
.card .who { display: flex; align-items: baseline; justify-content: space-between; margin-top: 1.3rem; gap: 1rem; }
.card .who h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.card .who .role { font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); font-weight: 550; white-space: nowrap; }
@media (max-width: 720px) {
  .directors .grid { grid-template-columns: 1fr; }
  .card .who .role { white-space: normal; }   /* long roles may wrap on mobile */
}
@media (prefers-reduced-motion: reduce) {
  .card img { transition: none; }
  .card:hover img { transform: none; }
}

/* --- Profile: fuller person block (about, bookings) -----------------------
   Portrait + text side by side; stacks on narrow screens via auto-fit. */
.profile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2.5rem 4.5rem;
  align-items: center;
}
.profile + .profile { margin-top: 5rem; }
.profile img {
  aspect-ratio: 4 / 4.6; object-fit: cover; object-position: top;
  border-radius: 3px;
}
.profile h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-top: 1rem; }
.profile p { color: var(--ink-dim); margin-top: 1.1rem; max-width: 52ch; }

/* --- Support: black band + tier ledger ----------------------------------- */
.support { background: var(--ink); color: var(--white); }
.support .wrap {
  display: grid; grid-template-columns: 5fr 6fr; gap: 5rem;
}
.support .label { color: rgba(251, 248, 242, 0.5); display: block; margin-bottom: 1.6rem; }
.support .label .no { color: var(--red); filter: brightness(1.5); }  /* contrast on ink */
.support h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
  line-height: 1.1;
}
.support h2 em { font-style: italic; color: var(--red); filter: brightness(1.5); }
.support .intro p { color: var(--white-dim); margin-top: 1.6rem; font-size: 0.97rem; max-width: 44ch; }
.support .intro .btn { margin-top: 2.5rem; }
.tier-list { display: flex; flex-direction: column; }
.tier {
  display: grid; grid-template-columns: 1fr auto;
  gap: 0.4rem 2rem; align-items: baseline;
  padding: 1.55rem 0.2rem;
  border-bottom: 1px solid rgba(251, 248, 242, 0.14);
  transition: background 0.25s;
}
.tier:first-child { border-top: 1px solid rgba(251, 248, 242, 0.14); }
.tier:hover { background: rgba(251, 248, 242, 0.035); }
.tier .t-name { font-family: var(--serif); font-size: 1.35rem; }
.tier .t-amount { font-family: var(--serif); font-size: 1.35rem; font-style: italic; color: var(--white-dim); }
.tier .t-perk { grid-column: 1 / -1; font-size: 0.78rem; color: rgba(251, 248, 242, 0.48); }
@media (max-width: 880px) { .support .wrap { grid-template-columns: 1fr; gap: 3.4rem; } }

/* --- CTA band: centered variant of the dark .support band -----------------
   Use as <section class="support cta-band">. Must follow the .support rules
   so the block display wins over the .support grid. */
.cta-band .wrap { display: block; max-width: 46rem; text-align: center; }
.cta-band p { color: var(--white-dim); margin-top: 1.6rem; }

/* --- Listen: photo with play button -------------------------------------- */
.listen .wrap {
  display: grid; grid-template-columns: 6fr 5fr; gap: 5rem; align-items: center;
}
.listen figure { position: relative; border-radius: 3px; overflow: hidden; }
.listen img { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; }
.listen figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12, 9, 6, 0.35), transparent 45%);
}
.listen .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 5.2rem; height: 5.2rem; border-radius: 50%;
  background: rgba(251, 248, 242, 0.94);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
  transition: transform 0.25s, background 0.25s;
}
.listen figure:hover .play { transform: translate(-50%, -50%) scale(1.07); background: var(--paper); }
.listen .play::after {
  content: ""; margin-left: 5px;
  border-left: 1.15rem solid var(--red);
  border-top: 0.7rem solid transparent;
  border-bottom: 0.7rem solid transparent;
}
.listen .label { display: block; margin-bottom: 1.5rem; }
.listen h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; }
.listen h2 em { font-style: italic; color: var(--red); }
.listen p { color: var(--ink-dim); margin-top: 1.5rem; max-width: 46ch; font-size: 0.97rem; }
.listen .btn { margin-top: 2.3rem; }
@media (max-width: 880px) { .listen .wrap { grid-template-columns: 1fr; gap: 3rem; } }

/* --- FAQ: hairline ledger of native <details> rows (paper ground) ---------
   <div class="faq"> <details><summary>Q</summary><div class="a"><p>A</p>
   </div></details> … </div>. No JS: disclosure is the platform's. */
.faq { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary {
  list-style: none;                    /* hide the default marker… */
  cursor: pointer;
  position: relative;
  font-family: var(--serif);
  font-size: 1.25rem;
  padding: 1.35rem 2.6rem 1.35rem 0.2rem;
  transition: color 0.25s;
}
.faq summary::-webkit-details-marker { display: none; }   /* …everywhere */
.faq summary:hover { color: var(--red); }
.faq summary::after {                  /* + / − state glyph (decorative:
                                          the alt-text syntax empties its
                                          accessible name; the plain
                                          declaration is the fallback) */
  content: "+";
  content: "+" / "";
  position: absolute; right: 0.5rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans); font-size: 1.15rem; font-weight: 300;
  color: var(--red);
}
.faq details[open] summary::after { content: "−"; content: "−" / ""; }
.faq .a { padding: 0 0.2rem 1.7rem; }
.faq .a p { color: var(--ink-dim); font-size: 0.95rem; max-width: 62ch; }
.faq .a p + p { margin-top: 0.8rem; }

/* --- Logo strip: dark band of production marks + venue names (bookings) ---
   <section class="logo-strip"> with .label rows, a .logos flex row of
   white-on-black marks, and a .names italic serif line. A .label directly
   after the .logos row starts the second labeled row. */
.logo-strip { background: var(--ink); color: var(--white); text-align: center; }
.logo-strip .label { color: rgba(251, 248, 242, 0.5); display: block; margin: 0 0 2.4rem; }
.logo-strip .logos + .label { margin: 3.5rem 0 1.2rem; }
.logo-strip .logos { display: flex; align-items: center; justify-content: center; gap: 3.5rem; flex-wrap: wrap; }
.logo-strip .logos img { height: 5rem; width: auto; }
.logo-strip .names { font-family: var(--serif); font-style: italic; color: var(--white-dim); font-size: 1.02rem; }


/* ==========================================================================
   9. SCROLL REVEALS
   --------------------------------------------------------------------------
   Progressive enhancement. Without JS every .reveal is simply visible.
   main.js adds class="js" to <html>, then an IntersectionObserver adds
   .visible as elements enter the viewport. Disabled under reduced motion.
   ========================================================================== */

.reveal { opacity: 1; transform: none; }

html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
html.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1; transform: none; transition: none;
  }
}


/* ==========================================================================
   10. FORMS (contact / bookings / newsletter)
   --------------------------------------------------------------------------
   Paper ground, hairline ink borders, red focus. Field pattern:
     <div class="field"><label for="x">Name</label><input id="x" …></div>
   Two-column layout: <div class="form-grid">…fields…</div>
   Full-width fields inside the grid get class="field-full".
   ========================================================================== */

form label, .form-label {
  display: block;
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.55rem;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
textarea,
select {
  width: 100%;
  font: inherit; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-dim);      /* >= 3:1 against paper */
  border-radius: 2px;
  padding: 0.85rem 1.05rem;
  transition: border-color 0.25s;
}
textarea { min-height: 9rem; resize: vertical; }

input::placeholder, textarea::placeholder { color: var(--ink-dim); }

input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--red);
}

.field { margin-bottom: 1.5rem; }

.form-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 1.6rem;
}
.form-grid .field-full { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* --- Placeholder forms: disabled submit + interim note ---------------------
   Until a form provider is wired, submit buttons ship disabled with an
   explanatory .form-note beneath (index newsletter, bookings, contact). */
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.form-note { font-size: 0.78rem; color: var(--ink-dim); margin-top: 1.3rem; }

/* --- Frequency toggle (support page #giving-form) --------------------------
   <fieldset class="freq-toggle"> with a visually-hidden legend and radios;
   the <span> inside each label is the visible pill:
     <label><input type="radio" name="frequency" …><span>Monthly</span></label>
   Active state uses input:checked + span (no :has() needed, works
   everywhere); the keyboard focus ring lands on the span the same way.
   Like the .tier ledger above (§8), the colors are designed for the dark
   .support band — add a light variant before using it on paper grounds. */
.freq-toggle {
  border: 1px solid rgba(251, 248, 242, 0.35);
  border-radius: 100px;
  display: inline-flex;
  padding: 0.3rem;
  gap: 0.3rem;
  margin-bottom: 2.4rem;
}
.freq-toggle label {                   /* overrides the generic form label */
  display: inline-flex;
  margin-bottom: 0;
  cursor: pointer;
}
.freq-toggle input {                   /* visually hidden, still focusable */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.freq-toggle span {
  display: inline-block;
  padding: 0.62rem 1.5rem;
  border-radius: 100px;
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--white-dim);
  transition: background 0.25s, color 0.25s;
}
.freq-toggle label:hover input:not(:checked) + span { color: var(--white); }
.freq-toggle input:checked + span {
  background: var(--red);
  color: var(--white);
}
.freq-toggle input:focus-visible + span {
  outline: 2px solid var(--paper);     /* paper ring: dark-band component */
  outline-offset: 2px;
}
@media (forced-colors: active) {
  /* Windows High Contrast strips backgrounds — outline the active pill */
  .freq-toggle input:checked + span { outline: 2px solid; }
}

/* Text fields on the dark .support band: the §12 paper focus ring already
   wins on outline-color, but state it explicitly so it doesn't hinge on
   specificity math; keep the focused border paper too (red reads as muddy
   against ink around the field's edges). */
.support input:focus-visible,
.support textarea:focus-visible,
.support select:focus-visible {
  outline-color: var(--paper);
  border-color: var(--paper);
}

/* --- Giving form (support page): give button in the .tier ledger ----------
   Adds a third column to the §8 .tier grid for the per-tier give button;
   .t-perk keeps its full-width second row. */
#giving-form .tier { grid-template-columns: 1fr auto auto; }
#giving-form .give-btn {
  grid-row: 1; grid-column: 3;
  align-self: center;
  padding: 0.55rem 1.35rem;
  font-size: 0.6rem;
}
@media (max-width: 600px) {
  #giving-form .tier { grid-template-columns: 1fr auto; }
  #giving-form .give-btn {
    grid-row: auto; grid-column: 1 / -1;
    justify-self: start;
    margin-top: 0.6rem;
  }
}

/* Custom amount (payment-inert until wiring — the email flow does the work) */
.custom-give { margin-top: 2.8rem; }
.custom-give label { color: var(--white-dim); }          /* dark-band label */
.custom-give .row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.custom-give input { max-width: 10rem; }
.custom-give .hint {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  color: var(--white-dim);
  max-width: 52ch;
}


/* ==========================================================================
   11. FOOTER
   --------------------------------------------------------------------------
   Black, mission line + monogram, link columns, giant ghosted wordmark.
   The giant line is intentionally wider than small screens; footer's
   overflow:hidden clips it — never allow it to create horizontal scroll.
   ========================================================================== */

footer {
  background: var(--ink); color: var(--white);
  padding: 5.5rem 0 2.5rem;
  overflow: hidden;
}
.foot-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem;
  padding-bottom: 4rem;
}
.foot-grid .mission {
  font-family: var(--serif); font-size: 1.35rem; font-style: italic;
  max-width: 24ch; line-height: 1.4;
}
.foot-grid .mission .fleuron { color: var(--red); font-style: normal; }
/* Inline logo SVG in the footer (currentColor → paper on ink) */
footer .wordmark-logo { display: block; margin-bottom: 1.4rem; }
footer .wordmark-logo svg { height: 5rem; width: auto; color: var(--paper); }
.foot-grid h4 {
  font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(251, 248, 242, 0.5); font-weight: 500; margin-bottom: 1.1rem;
}
.foot-grid ul { list-style: none; }
.foot-grid li { margin-bottom: 0.55rem; }
.foot-grid a { color: var(--white-dim); text-decoration: none; font-size: 0.85rem; transition: color 0.25s; }
.foot-grid a:hover { color: var(--white); }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr; gap: 2.4rem; } }

.giant {
  font-family: var(--serif);
  /* Sized so "Camerata Bulgarica" (~8.9em wide in the serif stack) always fits
     the .wrap content box — 9vw tracks the viewport below the 1240px wrap cap,
     7.2rem caps it above. Never clips. */
  font-size: clamp(1.9rem, 9vw, 7.2rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: rgba(251, 248, 242, 0.16);
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}
.giant em { font-style: italic; color: rgba(163, 32, 53, 0.5); }

.legal {
  display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  margin-top: 2.6rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(251, 248, 242, 0.1);
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(251, 248, 242, 0.5);
}


/* ==========================================================================
   12. UTILITIES & ACCESSIBILITY
   ========================================================================== */

/* Site-wide keyboard focus ring */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
/* On ink/photo grounds the red ring is near-invisible — use paper there.
   Descendants of .feature only: the card's OWN outline draws outside its
   border box onto the paper-deep .concerts background, where the global
   red ring is the readable choice. */
.hero :focus-visible,
.marquee :focus-visible,
.support :focus-visible,
footer :focus-visible,
.feature :focus-visible {
  outline-color: var(--paper);
}

/* Skip link: first element in <body>; hidden until keyboard-focused */
.skip-link {
  position: fixed; top: 0.7rem; left: 0.7rem; z-index: 100;
  background: var(--ink); color: var(--paper);
  text-decoration: none;
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.85rem 1.6rem; border-radius: 100px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Screen-reader-only content */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Interior pages without a hero: pad first block below the fixed header */
.offset-header { padding-top: 6.5rem; }


/* ==========================================================================
   PRINT
   --------------------------------------------------------------------------
   Reveals always visible, header in flow, marquee dropped, and the dark
   footer prints light (ink on transparent) to save ink.
   ========================================================================== */

@media print {
  .reveal { opacity: 1 !important; transform: none !important; }

  header {
    position: static;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-btn, .nav-check-label, .skip-link { display: none !important; }

  .marquee { display: none; }

  footer {
    background: transparent;
    color: var(--ink);
    border-top: 1px solid var(--rule);
  }
  .foot-grid h4, .legal { color: var(--ink-dim); }
  .foot-grid a { color: var(--ink); }
  footer .wordmark-logo svg { color: var(--ink); }
  .giant { color: var(--rule); }
  .giant em { color: rgba(163, 32, 53, 0.35); }
}