/* Self-hosted fonts (no external requests). Paths are relative so the site works anywhere. */
@font-face { font-family: 'Lora'; src: url('../fonts/lora-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Harmony of Faith: colors come from the logo (navy #05203E and gold #C58F37). */
:root {
  --navy: #05203e;
  --navy-deep: #031a33;
  --mist: #e8eef5;
  --ink: #1a2433;
  --paper: #ffffff;
  --white: #ffffff;
  --gold: #c58f37;
  --gold-deep: #8a6321;
  --gold-ink: #05203e;
  --muted: #4e5d70;
  --line: rgba(5, 32, 62, 0.14);

  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --max: 1120px;
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --radius: 10px;
  --shadow: 0 10px 30px rgba(3, 22, 44, 0.14);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  /* room for the mobile CTA bar */
  padding-bottom: 4.5rem;
}

@media (min-width: 900px) { body { padding-bottom: 0; } }

img, svg, video { max-width: 100%; display: block; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--navy-deep); }

h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0 0 0.6em; color: var(--navy); font-weight: 600; }
h1 { font-size: clamp(2.8rem, 8vw, 5.2rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4.5vw, 2.9rem); }
h3 { font-size: 1.6rem; }
p { margin: 0 0 1.1em; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 720px; }
.section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.section--mist { background: var(--mist); }
.section--dark { background: var(--navy-deep); color: var(--paper); }
.section--dark h2, .section--dark h3 { color: var(--paper); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-deep);
  margin: 0 0 0.9rem;
}
.lede { font-size: 1.25rem; color: var(--muted); }

/* Skip link */
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--gold-ink); padding: 0.6rem 1rem; z-index: 200; font-family: var(--sans); }
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn--gold { background: var(--gold); color: var(--gold-ink); }
.btn--gold:hover { background: #d9a54f; color: var(--gold-ink); }
.btn--navy { background: var(--navy); color: var(--paper); }
.btn--navy:hover { background: var(--navy-deep); color: var(--paper); }
.btn--outline { border-color: currentColor; color: var(--navy); background: transparent; }
.btn--outline:hover { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.btn--outline-light { border-color: var(--white); color: var(--navy); background: var(--white); }
.btn--outline-light:hover { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.btn--sm { padding: 0.55rem 1.05rem; font-size: 0.85rem; }

/* Pre-sale "notify me" ticket button. Both labels sit in one grid cell so the
   button keeps the width of the longer one and does not jump on hover.
   Gold to navy is a big light-to-dark change, and the words change too, so
   color is never the only signal. */
.btn--notify { display: inline-grid; }
.btn--notify .lbl-a, .btn--notify .lbl-b { grid-area: 1 / 1; text-align: center; }
.btn--notify .lbl-b { visibility: hidden; }
.btn--notify:hover, .btn--notify:focus-visible { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.btn--notify:hover .lbl-a, .btn--notify:focus-visible .lbl-a { visibility: hidden; }
.btn--notify:hover .lbl-b, .btn--notify:focus-visible .lbl-b { visibility: visible; }
/* Touch screens have no hover, so show the notify wording all the time. */
@media (hover: none) {
  .btn--notify .lbl-a { visibility: hidden; }
  .btn--notify .lbl-b { visibility: visible; }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--white); color: var(--navy); border-bottom: 1px solid var(--line); box-shadow: 0 2px 12px rgba(5, 32, 62, 0.06); }
.site-header .container { display: flex; align-items: center; gap: 1.25rem; min-height: 64px; }
.brand { font-family: var(--display); font-size: 1.55rem; font-weight: 600; color: var(--navy); text-decoration: none; letter-spacing: 0.01em; margin-right: auto; white-space: nowrap;  display: inline-flex; align-items: center; gap: 0.7rem; }
.brand:hover { color: var(--gold-deep); }
.nav { display: none; gap: 1.4rem; align-items: center; }
.nav a { font-family: var(--sans); font-size: 0.92rem; color: rgba(5, 32, 62, 0.78); text-decoration: none; padding: 0.3rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--navy); }
.nav a[aria-current='page'] { color: var(--navy); border-bottom-color: var(--gold); }
.header-cta { display: none; gap: 0.6rem; }
.menu-toggle { background: none; border: 1px solid rgba(5, 32, 62, 0.35); color: var(--navy); border-radius: 8px; padding: 0.45rem 0.8rem; font-family: var(--sans); font-size: 0.85rem; cursor: pointer; }
.mobile-menu { display: none; background: var(--white); border-top: 1px solid var(--line); }
.mobile-menu.is-open { display: block; }
.mobile-menu a { display: block; padding: 0.9rem var(--gutter); color: var(--navy); text-decoration: none; font-family: var(--sans); border-bottom: 1px solid var(--line); }
.mobile-menu a[aria-current='page'] { color: var(--gold-deep); }

@media (min-width: 900px) {
  .nav, .header-cta { display: flex; }
  .menu-toggle, .mobile-menu { display: none !important; }
}

/* Persistent mobile CTA bar (Tickets + Donate on every page) */
.cta-bar { position: fixed; inset: auto 0 0 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 0.65rem var(--gutter) calc(0.65rem + env(safe-area-inset-bottom)); background: rgba(3, 22, 44,0.96); backdrop-filter: blur(6px); border-top: 1px solid rgba(249,249,249,0.1); }
@media (min-width: 900px) { .cta-bar { display: none; } }

/* Hero */
.hero { background: radial-gradient(900px 500px at 78% 12%, rgba(197, 143, 55,0.22), transparent 60%), linear-gradient(160deg, #021a33 0%, var(--navy-deep) 55%, var(--navy) 120%); color: var(--paper); padding-block: clamp(2.5rem, 7vw, 5rem); }
.hero h1 { color: var(--paper); margin-bottom: 0.25em; }
.hero .eyebrow, .section--dark .eyebrow, .calendar-box .eyebrow, .donate-band .eyebrow, .voice-feature .eyebrow { color: var(--gold); }
.hero p { color: rgba(249,249,249,0.86); font-size: 1.18rem; }
.hero-grid { display: grid; gap: 2.2rem; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; } }
.hero-meta { font-family: var(--sans); font-size: 0.88rem; color: rgba(249, 249, 249, 0.75); margin-top: 1.4rem; }

/* Click-to-load video: no player code or third-party requests until pressed */
.lite-yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: #000 center / cover no-repeat; box-shadow: var(--shadow); }
.lite-yt::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.05) 55%); transition: background 0.2s; }
.lite-yt:hover::after { background: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0)); }
.lite-yt .play { position: absolute; z-index: 1; top: 50%; left: 50%; translate: -50% -50%; width: 78px; height: 78px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; box-shadow: 0 6px 24px rgba(0,0,0,0.4); transition: transform 0.15s; }
.lite-yt:hover .play { transform: scale(1.08); }
.lite-yt .play svg { width: 30px; height: 30px; margin-left: 4px; fill: var(--gold-ink); }
.lite-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }

.clip-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Cards */
.grid-2 { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-3 { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: 0 2px 10px rgba(3, 22, 44,0.05); }
.card h3 { margin-bottom: 0.3em; }
.card p:last-child { margin-bottom: 0; }

.event-card { display: flex; flex-direction: column; gap: 0.2rem; border-top: 5px solid var(--navy); }
.event-city { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); margin: 0; }
.event-date { font-family: var(--display); font-size: 2rem; font-weight: 600; line-height: 1.15; color: var(--navy); margin: 0.2rem 0 0; }
.event-line { margin: 0; color: var(--muted); font-size: 1rem; }
.event-tba { font-family: var(--display); font-size: 1.7rem; color: var(--navy); margin: 0.3rem 0 0; }
.event-card .btn-row { margin-top: 1.1rem; }

.preview-banner { background: #fff3cd; color: #5c4400; font-family: var(--sans); font-size: 0.88rem; text-align: center; padding: 0.55rem var(--gutter); border-bottom: 1px solid #e6cf85; }

/* Timeline (rehearsals) */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; gap: 0.15rem 1.2rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .timeline li { grid-template-columns: 15rem 1fr; } }
.timeline .when { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; color: var(--navy); }

/* Calendar box */
.calendar-box { background: var(--navy-deep); color: var(--paper); border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 2.2rem); display: grid; gap: 1.2rem; }
.calendar-box h2 { color: var(--paper); font-size: 2rem; margin: 0; }
.calendar-box p { color: rgba(249,249,249,0.8); margin: 0; }
.calendar-box .fine { font-family: var(--sans); font-size: 0.82rem; color: rgba(249,249,249,0.6); }

/* Donate band */
.donate-band { background: var(--navy); color: var(--paper); padding-block: clamp(2.2rem, 6vw, 3.4rem); }
.donate-band .container { display: grid; gap: 1.2rem; align-items: center; }
@media (min-width: 760px) { .donate-band .container { grid-template-columns: 1fr auto; } }
.donate-band h2 { color: var(--paper); font-size: 2.1rem; margin-bottom: 0.25em; }
.donate-band p { margin: 0; color: rgba(249,249,249,0.85); }

/* Footer */
.site-footer { background: var(--navy-deep); color: rgba(249,249,249,0.78); padding-block: 3rem 2rem; font-family: var(--sans); font-size: 0.9rem; }
.site-footer a { color: var(--paper); }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-grid h4 { margin: 0 0 0.7rem; color: var(--gold); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.footer-legal { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid rgba(249,249,249,0.12); font-size: 0.8rem; color: rgba(249,249,249,0.55); }

.page-head { background: var(--mist); padding-block: clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); margin-bottom: 0.2em; }
.page-head .lede { margin: 0; max-width: 40rem; }

.soon { border: 2px dashed var(--line); border-radius: var(--radius); padding: 2rem; text-align: center; color: var(--muted); background: rgba(255,255,255,0.5); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .lite-yt .play { transition: none; }
}

[hidden] { display: none !important; }
button.btn { font-family: var(--sans); }
.event-card .btn-row .btn { flex: 0 0 auto; }
[data-city-card] > .card { height: 100%; }

/* added for original wording */
.social { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(249, 249, 249, 0.12); border: 1px solid rgba(249, 249, 249, 0.5); color: var(--paper); transition: background 0.15s, color 0.15s; }
.social a:hover { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.social svg { width: 20px; height: 20px; fill: currentColor; }
.instruments { columns: 1; margin: 0 0 1.5rem; padding-left: 1.2rem; }
@media (min-width: 640px) { .instruments { columns: 2; column-gap: 2.5rem; } }
.instruments li { break-inside: avoid; margin-bottom: 0.4rem; }
.footer-org { margin: 0; line-height: 1.7; }

.brand img { width: auto; height: 44px; flex: none; }


.intro-sub { font-family: var(--display); font-size: 1.7rem; font-weight: 600; color: var(--navy); margin: -0.3em 0 0.8em; line-height: 1.2; }
.social--light { margin: 0 0 1rem; }
.social--light a { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.social--light a:hover { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }

/* Terms of Use and Privacy Policy pages */
.legal h2 { font-size: 1.6rem; margin: 2rem 0 0.5rem; }
.legal ul { padding-left: 1.3rem; margin: 0 0 1rem; }
.legal li { margin-bottom: 0.5rem; }

/* "Join Us" dropdown (desktop) and its indented link in the phone menu */
.nav-drop { position: relative; }
.nav-drop.is-current > a { color: var(--navy); border-bottom-color: var(--gold); }
.nav-drop__menu { display: none; position: absolute; top: 100%; left: -0.9rem; min-width: 14rem; padding: 0.5rem 0; background: var(--white); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(5, 32, 62, 0.12); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,0.35); }
.nav-drop:hover .nav-drop__menu, .nav-drop:focus-within .nav-drop__menu { display: block; }
.nav-drop__menu a { display: block; padding: 0.6rem 1.1rem; border-bottom: 0; white-space: nowrap; }
.nav-drop__menu a:hover { background: rgba(5, 32, 62, 0.06); }
.nav-drop__menu a[aria-current='page'] { color: var(--gold-deep); border-bottom: 0; }
.mobile-menu a.sub { padding-left: calc(var(--gutter) + 1.2rem); font-size: 0.95rem; color: var(--muted); }

/* Announcement banner above the header */
.announce { position: relative; background: var(--navy); color: var(--paper); font-family: var(--sans); font-size: 0.9rem; border-bottom: 1px solid rgba(249,249,249,0.15); }
.announce .container { padding-right: 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 1.2rem; padding-block: 0.6rem; text-align: center; }
.announce p { margin: 0; }
.announce-when { display: inline-block; opacity: 0.9; }
.announce-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 0.9rem; }
.announce-dial { color: var(--paper); font-size: 0.82rem; }

.announce-close { position: absolute; top: 50%; right: 0.6rem; translate: 0 -50%; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: var(--paper); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.announce-close:hover { background: rgba(249,249,249,0.18); }

/* Performer Resources */
.embed-card { background: var(--mist); border-radius: var(--radius); padding: 1.4rem; }
.embed-card iframe { display: block; }
.embed-note { margin: 0.8rem 0 0; font-size: 0.9rem; color: var(--muted); }
.resource-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
#schedules h4 { margin: 1.2rem 0 0.4rem; }

/* "Follow along" band with labeled social icons, placed above the donate band */
.follow { background: var(--paper); padding-block: 2.6rem; text-align: center; border-top: 1px solid var(--line); }
.follow h2 { margin-bottom: 0.25rem; }
.follow p { margin: 0 0 1.2rem; color: var(--muted); }
.follow-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.follow-links a { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.3rem; border-radius: 999px; background: var(--navy); color: var(--paper); font-family: var(--sans); font-weight: 600; text-decoration: none; transition: background 0.15s, color 0.15s; }
.follow-links a:hover { background: var(--gold); color: var(--gold-ink); }
.follow-links svg { width: 22px; height: 22px; fill: currentColor; }
.site-footer .footer-grid .social { margin-top: 1rem; }
.embed-card .spotify { border: 0; border-radius: 12px; }

/* Instrument outline tiles (Performer Resources). Each is a link to that part's PDF. */
.inst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.9rem; margin: 1.4rem 0; }
.inst { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem 0.5rem 0.8rem; border-radius: var(--radius); color: var(--navy); text-decoration: none; font-family: var(--sans); font-weight: 600; font-size: 0.92rem; text-align: center; transition: background 0.15s, transform 0.15s, box-shadow 0.15s; }
.inst svg { width: 84px; height: 84px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.inst:hover, .inst:focus-visible { background: var(--white); color: var(--navy-deep); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(5, 32, 62, 0.15); }
.inst:hover span, .inst:focus-visible span { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .inst { transition: none; } }

/* Pull quote (Home impact, Past performances) */
.quote { margin: 0; padding: 1.4rem 1.6rem; border-left: 4px solid var(--gold); background: rgba(255,255,255,0.6); border-radius: 0 var(--radius) var(--radius) 0; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--display); font-size: 1.45rem; line-height: 1.35; margin: 0 0 0.6rem; color: var(--ink); }
.quote figcaption { font-family: var(--sans); font-size: 0.88rem; color: var(--muted); }
.section--dark .quote { background: rgba(249,249,249,0.06); }
.section--dark .quote blockquote p { color: var(--paper); }
.section--dark .quote figcaption { color: rgba(249,249,249,0.7); }
#past .quote { margin-top: 1.6rem; max-width: 40rem; }
.past .when { font-weight: 700; }

/* Home hero: full-cast photo as a wide background, darkened so the text stays readable */
.hero--photo { background: linear-gradient(90deg, rgba(3, 22, 44,0.9) 0%, rgba(3, 22, 44,0.72) 45%, rgba(3, 22, 44,0.2) 100%), url('../photos/full-cast-on-stage.jpg') center 50% / cover no-repeat; min-height: 26rem; display: flex; align-items: center; padding-block: clamp(3rem, 8vw, 6rem); }
.hero--photo .hero-grid { width: 100%; }
@media (max-width: 899px) { .hero--photo { background: linear-gradient(180deg, rgba(3, 22, 44,0.82), rgba(3, 22, 44,0.72)), url('../photos/full-cast-on-stage.jpg') center 50% / cover no-repeat; min-height: 0; } }


/* Photo carousel (Join Us): swipe or use the arrow buttons, no autoplay */
.carousel { position: relative; }
.carousel-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 0.6rem; scrollbar-width: thin; }
.carousel-track:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.carousel-slide { flex: 0 0 82%; margin: 0; scroll-snap-align: start; }
@media (min-width: 640px) { .carousel-slide { flex-basis: calc((100% - 1rem) / 2); } }
@media (min-width: 960px) { .carousel-slide { flex-basis: calc((100% - 2rem) / 3); } }
.carousel-slide img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.carousel-btn { position: absolute; top: calc(50% - 0.3rem); transform: translateY(-50%); z-index: 2; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--navy); background: var(--white); color: var(--navy); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.carousel-btn[data-carousel-prev] { left: 0.5rem; }
.carousel-btn[data-carousel-next] { right: 0.5rem; }
@media (min-width: 1200px) { .carousel-btn[data-carousel-prev] { left: -1.4rem; } .carousel-btn[data-carousel-next] { right: -1.4rem; } }
.carousel-btn:hover { background: var(--navy); color: var(--paper); }
.carousel-btn:disabled { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }

/* Lamb of God story: text beside the photo on desktop, photo below on phones */
.story-split { display: grid; gap: 1.6rem; align-items: center; }
.story-split figure { margin: 0; }
.story-split img { display: block; width: 100%; border-radius: var(--radius); }
@media (min-width: 900px) { .story-split { grid-template-columns: 1.15fr 1fr; gap: 3rem; } }

/* ---------- Voices ---------- */
.voices-head { text-align: center; }
.voices-head .lede { margin-inline: auto; }
.voice-photo { display: block; width: 100%; height: auto; aspect-ratio: 328 / 536; object-fit: cover;
  filter: drop-shadow(2px 0 0 var(--gold)) drop-shadow(-2px 0 0 var(--gold)) drop-shadow(0 2px 0 var(--gold)) drop-shadow(0 -2px 0 var(--gold)); }
.voice-feature { padding-block: clamp(2.5rem, 6vw, 4.5rem); background: radial-gradient(800px 420px at 20% 30%, rgba(197, 143, 55,0.2), transparent 60%), linear-gradient(160deg, #021a33 0%, var(--navy-deep) 60%, var(--navy) 130%); }
.voice-feature-inner { margin: 0; display: grid; gap: 2rem; align-items: center; justify-items: center; text-align: center; }
.voice-photo--feature { width: min(220px, 55vw); }
.voice-feature blockquote { margin: 0; }
.voice-feature blockquote p { font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.18; color: var(--paper); margin: 0 0 1rem; max-width: 22ch; margin-inline: auto; }
.voice-feature figcaption { font-family: var(--sans); color: var(--gold); font-size: 0.98rem; }
@media (min-width: 800px) { .voice-feature-inner { grid-template-columns: auto 1fr; gap: 3.5rem; text-align: left; justify-items: start; } .voice-feature blockquote p { margin-inline: 0; max-width: 24ch; } .voice-photo--feature { width: 240px; } }

.voice-grid { columns: 1; column-gap: 1.6rem; }
@media (min-width: 700px) { .voice-grid { columns: 2; } }
@media (min-width: 1040px) { .voice-grid { columns: 3; } }
.voice-card { break-inside: avoid; margin: 0 0 1.6rem; background: var(--white); border-radius: var(--radius); padding: 1.6rem 1.5rem 1.7rem; box-shadow: 0 8px 26px rgba(5, 32, 62,0.12); text-align: center; position: relative; overflow: hidden; }
.voice-card::before { content: '\201C'; position: absolute; top: -0.45rem; right: 1rem; font-family: var(--display); font-size: 7rem; line-height: 1; color: var(--gold); opacity: 0.28; pointer-events: none; }
.voice-card .voice-photo { width: 150px; margin: 0 auto 1.1rem; }
.voice-card h3 { font-size: 1.75rem; margin: 0 0 0.15rem; }
.voice-role { font-family: var(--sans); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); margin: 0; }
.voice-prod { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); margin: 0.2rem 0 1.1rem; }
.voice-text { text-align: left; margin: 0; font-size: 1.02rem; line-height: 1.65; }
.voice-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.voice-more { margin-top: 0.9rem; font-family: var(--sans); font-weight: 600; font-size: 0.88rem; color: var(--navy); background: none; border: 0; border-bottom: 2px solid var(--gold); padding: 0.1rem 0; cursor: pointer; }
.voice-more:hover { color: var(--navy-deep); }

/* Voices: story pop-out (native dialog) with the portrait on the left */
.modal-open { overflow: hidden; }
.voice-modal { border: 0; padding: 0; border-radius: 18px; width: min(900px, calc(100vw - 2rem)); max-height: min(88vh, 760px); background: var(--white); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,0.5); overflow: hidden; }
.voice-modal[open] { display: block; animation: voice-pop 0.22s ease-out; }
.voice-modal::backdrop { background: rgba(3, 22, 44,0.72); backdrop-filter: blur(3px); }
@keyframes voice-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.voice-modal-close { position: absolute; top: 0.7rem; right: 0.8rem; z-index: 2; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--navy); background: var(--white); color: var(--navy); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.voice-modal-close:hover { background: var(--navy); color: var(--paper); }
.voice-modal-body { display: grid; gap: 1.2rem; padding: 2.4rem 1.6rem 1.8rem; max-height: min(88vh, 760px); overflow-y: auto; justify-items: center; text-align: center; background: linear-gradient(90deg, var(--mist) 0, var(--mist) 0) no-repeat; }
.voice-modal .voice-photo { width: min(170px, 46vw); }
.voice-modal-copy h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 0.2rem; padding-right: 0; }
.voice-modal-text { text-align: left; margin-top: 1rem; }
.voice-modal-text p { font-size: 1.08rem; line-height: 1.75; margin: 0; }
@media (min-width: 720px) {
  .voice-modal-body { grid-template-columns: 300px 1fr; gap: 2.6rem; align-items: start; justify-items: stretch; text-align: left; padding: 2.6rem 3rem 2.6rem 2.2rem; }
  .voice-modal-body { background: linear-gradient(90deg, var(--mist) 0, var(--mist) 340px, var(--white) 340px); }
  .voice-modal .voice-photo { width: 260px; margin: 0 auto; }
  .voice-modal-copy { max-height: calc(min(88vh, 760px) - 5.2rem); overflow-y: auto; padding-right: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) { .voice-modal[open] { animation: none; } }

/* Keep dropdown parents (Join Us, About) lined up with the plain menu links */
.nav-drop > a { display: block; }

.voice-card.is-clickable { cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.voice-card.is-clickable:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(5, 32, 62,0.2); }
@media (prefers-reduced-motion: reduce) { .voice-card.is-clickable { transition: none; } .voice-card.is-clickable:hover { transform: none; } }

/* Performer Resources: Listen and Orchestra Parts Samples side by side on desktop */
.resource-pair { display: grid; gap: 3rem; }
@media (min-width: 960px) { .resource-pair { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; } }

/* Performer Resources: 2026 schedules */
.sched-ask { margin-bottom: 1.8rem; }
.sched-grid { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 960px) { .sched-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.sched-card { background: var(--white); border-radius: var(--radius); border-top: 4px solid var(--navy); padding: 1.6rem 1.5rem 1.4rem; box-shadow: 0 8px 26px rgba(5, 32, 62,0.1); }
.sched-card h3 { font-size: 2rem; margin: 0 0 0.6rem; }
.sched-loc { font-size: 0.95rem; color: var(--muted); margin: 0 0 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.sched-card h4 { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); margin: 1.6rem 0 0.2rem; }
.sched-loc + h4 { margin-top: 0; }
.sched-list { list-style: none; margin: 0; padding: 0; }
.sched-row { display: grid; grid-template-columns: 4.6rem 1fr; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.sched-list .sched-row:last-child { border-bottom: 0; }
.sched-date { text-align: center; background: rgba(5, 32, 62,0.08); border-radius: 10px; padding: 0.35rem 0.2rem; align-self: start; }
.sched-date .dow { display: block; font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sched-date .md { display: block; font-variant-numeric: lining-nums; font-family: var(--display); font-size: 1.3rem; line-height: 1.15; color: var(--navy); font-weight: 600; }
.sched-info p { margin: 0; }
.sched-time { font-family: var(--sans); font-weight: 700; font-size: 0.88rem; color: var(--navy); }
.sched-what { font-size: 1.02rem; line-height: 1.4; }
.sched-tag { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.55rem; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font-family: var(--sans); font-size: 0.72rem; font-weight: 700; vertical-align: 0.1em; }
.sched-note { font-size: 0.93rem; color: var(--muted); }
.sched-where { font-size: 0.88rem; color: var(--muted); margin-top: 0.25rem; }
.sched-row.is-off .sched-date { background: transparent; border: 1px dashed var(--line); }
.sched-row.is-off .sched-what, .sched-row.is-off .sched-date .md { color: var(--muted); }

/* FAQ (Join page) */
.faq { margin-top: 1.2rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; padding: 1rem 2rem 1rem 0; font-family: var(--display); font-size: 1.35rem; font-weight: 600; color: var(--navy); list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 0.2rem; top: 0.7rem; font-size: 1.6rem; color: var(--gold-deep); }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { margin: 0 0 1.1rem; }

/* Home hero: let the headline sit on one line so the banner stays short */
@media (min-width: 900px) { .hero--photo .hero-grid { grid-template-columns: minmax(0, 44rem); } .hero--photo .hero-grid p:not(.eyebrow):not(.hero-meta) { max-width: 36rem; } }
@media (min-width: 900px) { .hero--photo { padding-block: 3.5rem; min-height: 0; } }

/* Schedules: collapsible per city on phones and tablets, always open side by side on desktop */
.sched-card > summary { list-style: none; cursor: default; }
.sched-card > summary::-webkit-details-marker { display: none; }
.sched-card > summary h3 { margin: 0 0 0.6rem; }
@media (max-width: 959px) {
  .sched-card > summary { cursor: pointer; position: relative; padding-right: 2.6rem; }
  .sched-card > summary h3 { margin: 0; padding: 0.15rem 0; }
  .sched-card > summary::after { content: '+'; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid var(--navy); display: grid; place-items: center; font-family: var(--sans); font-size: 1.4rem; line-height: 1; color: var(--navy); }
  .sched-card[open] > summary::after { content: '\2212'; }
  .sched-card > summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
  .sched-card[open] > summary { margin-bottom: 0.6rem; }
}

/* Performances: every show in one list */
.show-list { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.show-row { display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.6rem 1.2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.show-info p { margin: 0; }
.show-city { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.show-title { font-family: var(--display); font-size: 1.6rem; font-weight: 600; line-height: 1.2; color: var(--navy); }
.show-venue { color: var(--muted); font-size: 0.98rem; margin-top: 0.15rem !important; }
.show-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (min-width: 900px) {
  .show-row { grid-template-columns: 4.6rem 1fr auto; align-items: center; }
  .show-actions { grid-column: 3; justify-content: flex-end; }
}

/* City cards: one line per show date */
.event-dates { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.event-dates li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.event-dates li:last-child { border-bottom: 0; }
.event-dates .event-date { font-size: 1.6rem; margin: 0; }
.sched-print { margin: 0 0 0.9rem; font-family: var(--sans); font-size: 0.92rem; font-weight: 600; }

/* Logo mark on hover: the notes appear one at a time, then the gold tie is drawn across */
.brand-mark { display: inline-grid; flex: none; }
.brand-mark img { grid-area: 1 / 1; }
.brand.is-intro .bm-note-left, .brand:hover .bm-note-left, .brand:focus-visible .bm-note-left { animation: bm-note 0.35s ease-out both; }
.brand.is-intro .bm-note-right, .brand:hover .bm-note-right, .brand:focus-visible .bm-note-right { animation: bm-note 0.35s ease-out 0.25s both; }
.brand.is-intro .bm-swoosh, .brand:hover .bm-swoosh, .brand:focus-visible .bm-swoosh { animation: bm-draw 0.5s ease-in-out 0.55s both; }
@keyframes bm-note { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bm-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .brand.is-intro .brand-mark img, .brand:hover .brand-mark img, .brand:focus-visible .brand-mark img { animation: none; } }
/* Phones and tablets: wait one second before the page-load logo animation */
@media (hover: none), (max-width: 899px) {
  .brand.is-intro .bm-note-left { animation-delay: 1s; }
  .brand.is-intro .bm-note-right { animation-delay: 1.25s; }
  .brand.is-intro .bm-swoosh { animation-delay: 1.55s; }
}
.cal-sub-label { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--paper) !important; margin: 0 0 0.6rem !important; }
.calendar-box .cal-note { font-family: var(--sans); font-size: 0.92rem; color: var(--paper); border-left: 3px solid var(--gold); padding-left: 0.8rem; }