/* ═══════════════════════════════════════
   DYNAMIC ISLAND NAV — shared across all pages
   Collapsed: compact icon row, tap to navigate instantly.
   Long-press: raises + expands to reveal labels and the theme toggle.
   ═══════════════════════════════════════ */

/* ─── HEADER THEME TOGGLE (always visible, desktop + mobile) ─── */
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: var(--surface, rgba(0,0,0,0.06));
  border: 1px solid var(--border-soft, rgba(0,0,0,0.1));
  border-radius: 50%;
  color: var(--page-text, #1A1A1A);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}
.header-theme-toggle:hover { transform: scale(1.06); }
.header-theme-toggle:active { transform: scale(0.94); }
.header-theme-toggle svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.header-theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .header-theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .header-theme-toggle .icon-moon { display: inline-flex; }

.island-nav {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 2px;
  background: linear-gradient(155deg, #d7d9de 0%, #aeb1b8 45%, #8c8f97 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 8px 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: width 0.42s cubic-bezier(0.34,1.56,0.64,1),
              padding 0.42s cubic-bezier(0.34,1.56,0.64,1),
              border-radius 0.4s ease,
              transform 0.3s ease;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

[data-theme="dark"] .island-nav {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 12px 34px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.3);
}

.island-nav.pressed { transform: translateX(-50%) scale(0.97); }

.island-handle {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: rgba(0,0,0,0.22);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.island-nav.expanded .island-handle { opacity: 1; }

.island-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  color: #3a3b40;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 7px 11px;
  border-radius: 20px;
  transition: color 0.25s ease, background 0.25s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.island-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  transition: transform 0.2s ease;
}

.island-btn.current { color: var(--maroon); }

.island-btn:active svg { transform: scale(0.88); }

.island-label {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  white-space: nowrap;
}

.island-nav.expanded .island-label {
  max-height: 14px;
  opacity: 1;
}

/* theme toggle — only appears once expanded */
.island-theme-row {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease, margin 0.4s ease;
  display: flex;
  align-items: center;
}

.island-nav.expanded .island-theme-row {
  max-width: 90px;
  opacity: 1;
  margin-left: 4px;
}

.island-theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.1);
  border: none;
  border-radius: 18px;
  padding: 8px 12px;
  color: #3a3b40;
  cursor: pointer;
  white-space: nowrap;
}

.island-theme-toggle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.island-theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .island-theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .island-theme-toggle .icon-moon { display: inline-flex; }

@media (min-width: 901px) {
  .island-nav { display: none; } /* desktop keeps the top nav; island is a mobile/touch pattern */
}

@media (prefers-reduced-motion: reduce) {
  .island-nav, .island-label, .island-theme-row { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   VINTAGE CINEMATIC LAYER — global, all pages
   Loaded before each page's inline <style>, so selectors are
   html-prefixed to win specificity without touching markup.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. PALETTE: aged paper (light) / aged celluloid (dark) ── */
html:root {
  --page-bg: #F4EFE6;          /* warm paper, not bleached white */
  --page-text: #2B2320;        /* soft ink, not pure black */
  --surface: #EBE4D8;
  --surface-2: #FBF8F2;
  --border-soft: rgba(43,35,32,0.11);
  --header-bg: rgba(244,239,230,0.94);
  --gray: #6E6259;
  --gold: #B8914B;
  --gold-light: #D8B571;
}

html[data-theme="dark"]:root,
html[data-theme="dark"] {
  --page-bg: #14100E;
  --page-text: #E8DFD2;        /* aged cream */
  --surface: #1B1613;
  --surface-2: #211A16;
  --border-soft: rgba(232,223,210,0.10);
  --header-bg: rgba(20,16,14,0.93);
  --gray: #9A8D80;
  --gold: #D8B571;
  --gold-light: #EBCE95;
}

/* ── 2. FILM GRAIN + VIGNETTE (non-blocking overlays) ── */
html body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.3'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body::after { opacity: 0.6; }

html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 8999;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(40,28,20,0.16) 100%);
}
html[data-theme="dark"]::before {
  background: radial-gradient(ellipse at 50% 45%, transparent 46%, rgba(0,0,0,0.55) 100%);
}

@media (prefers-reduced-motion: reduce) {
  html body::after { opacity: 0.3; }
}

/* ── 3. SPLASH: matches the theme from the very first frame ── */
html .splash-container { background: #F4EFE6; }
html .splash-footer-text { color: #2B2320; }

html[data-theme="dark"] .splash-container { background: #14100E; }
html[data-theme="dark"] .splash-footer-text { color: #E8DFD2; opacity: 0.38; }

/* before JS sets data-theme, honour the OS preference so a dark-mode
   visitor never gets a white flash on load */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .splash-container { background: #14100E; }
  html:not([data-theme="light"]) .splash-footer-text { color: #E8DFD2; opacity: 0.38; }
}

/* ── 4. THE RED PROBLEM: maroon is illegible on black.
   Display numerals/headings get a warm ember gradient; small UI
   text gets a legible aged-copper. The red is never "brightened",
   it's graded up into gold the way warm film stock renders it. ── */
html[data-theme="dark"] .about-stat .num,
html[data-theme="dark"] .event-date .day,
html[data-theme="dark"] .events-teaser-date .day,
html[data-theme="dark"] .how-card .how-num,
html[data-theme="dark"] .stat-num,
html[data-theme="dark"] .meta-num {
  background: linear-gradient(135deg, #EBCE95 0%, #D98B6A 55%, #B8503F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme="dark"] .read-link,
html[data-theme="dark"] .section-link,
html[data-theme="dark"] .event-loc .status,
html[data-theme="dark"] .nav-link.current,
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .header.scrolled .nav-link:hover,
html[data-theme="dark"] .series-card .count,
html[data-theme="dark"] .contact-detail div {
  color: #D8A06A;
}

html[data-theme="dark"] .read-link svg,
html[data-theme="dark"] .section-link svg { stroke: #D8A06A; }
html[data-theme="dark"] .section-link { border-bottom-color: rgba(216,160,106,0.5); }

/* badges / chips: tinted plates rather than flat maroon-on-black */
html[data-theme="dark"] .pub-badge,
html[data-theme="dark"] .prog-cadence,
html[data-theme="dark"] .soc-badge,
html[data-theme="dark"] .foci-chip {
  background: rgba(216,160,106,0.13);
  color: #E4B786;
}

/* maroon structural accents (rules, bars, borders) warm to brass */
html[data-theme="dark"] .event-date,
html[data-theme="dark"] .events-teaser-date,
html[data-theme="dark"] .about-stat { border-left-color: #A8703C; }

html[data-theme="dark"] .prog-card::before,
html[data-theme="dark"] .series-card::before { background: linear-gradient(90deg, #D8B571, #B8503F); }

html[data-theme="dark"] .path-marker {
  border-color: #A8703C;
  color: #E4B786;
  background: var(--surface-2);
}

html[data-theme="dark"] .society-mark,
html[data-theme="dark"] .why-icon,
html[data-theme="dark"] .glow-card .badge { background: #4A1218; }

/* buttons keep their weight but stop looking like dried blood */
html[data-theme="dark"] .nav-cta,
html[data-theme="dark"] .form-submit,
html[data-theme="dark"] .hero-cta {
  background: linear-gradient(135deg, #7E1C22 0%, #5A1016 100%);
  border-color: #8E3A2E;
  color: #F6E8D2;
}
html[data-theme="dark"] .nav-cta:hover,
html[data-theme="dark"] .form-submit:hover {
  background: transparent;
  color: #E4B786;
}

/* ── 5. TYPE: letterpress weight, filmic tracking ── */
html .section-label,
html .page-hero-tag,
html .hero-tag,
html .happening-text {
  font-feature-settings: "liga" 1, "kern" 1;
}

html .section-title,
html .page-hero-title,
html .hero-title {
  text-rendering: optimizeLegibility;
}

html[data-theme="dark"] .section-title,
html[data-theme="dark"] .page-hero-title {
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}

html .section-label { color: var(--gold); }

/* a hairline brass rule under section labels — editorial/filmic */
html .section-label::after {
  content: '';
  display: block;
  width: 46px;
  height: 1px;
  margin-top: 9px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* ── 6. SURFACES: warm cards, aged edges, softer shadow ── */
html .pub-card,
html .prog-card,
html .why-card,
html .how-card,
html .glow-card,
html .pub-teaser-card,
html .soc-teaser-card,
html .join-form,
html .series-card {
  background: var(--surface-2);
  border-color: var(--border-soft);
  box-shadow: 0 1px 2px rgba(40,28,20,0.04);
}

html[data-theme="dark"] .pub-card,
html[data-theme="dark"] .prog-card,
html[data-theme="dark"] .why-card,
html[data-theme="dark"] .how-card,
html[data-theme="dark"] .pub-teaser-card,
html[data-theme="dark"] .soc-teaser-card,
html[data-theme="dark"] .join-form,
html[data-theme="dark"] .series-card {
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

html .pub-card:hover,
html .prog-card:hover,
html .why-card:hover,
html .pub-teaser-card:hover {
  box-shadow: 0 14px 34px rgba(40,28,20,0.10);
  border-color: rgba(184,145,75,0.4);
}
html[data-theme="dark"] .pub-card:hover,
html[data-theme="dark"] .prog-card:hover,
html[data-theme="dark"] .why-card:hover,
html[data-theme="dark"] .pub-teaser-card:hover {
  box-shadow: 0 14px 34px rgba(0,0,0,0.6);
  border-color: rgba(216,181,113,0.4);
}

/* photographs: warmed and slightly desaturated, like aged stock */
html .pub-card-image img,
html .gallery-item img,
html .lead-teaser-card img,
html .portrait-card img,
html .picnic-recap-media img,
html .featured-pub-image img {
  filter: sepia(0.16) saturate(0.9) contrast(1.03);
  transition: filter 0.5s ease, transform 0.5s ease;
}
html .pub-card:hover .pub-card-image img,
html .gallery-item:hover img,
html .lead-teaser-card:hover img { filter: sepia(0.04) saturate(1) contrast(1.03); }

html[data-theme="dark"] .pub-card-image img,
html[data-theme="dark"] .gallery-item img,
html[data-theme="dark"] .lead-teaser-card img,
html[data-theme="dark"] .portrait-card img,
html[data-theme="dark"] .picnic-recap-media img,
html[data-theme="dark"] .featured-pub-image img {
  filter: sepia(0.2) saturate(0.82) contrast(1.06) brightness(0.92);
}

/* ── 7. FORMS ── */
html .form-row input,
html .form-row select,
html .form-row textarea {
  background: var(--surface-2);
  color: var(--page-text);
  border-color: var(--border-soft);
}
html .form-row input:focus,
html .form-row select:focus,
html .form-row textarea:focus { border-color: var(--gold); }
html .form-row label { color: var(--page-text); }
html[data-theme="dark"] .form-row input::placeholder,
html[data-theme="dark"] .form-row textarea::placeholder { color: #7D7062; }

/* ── 8. FOOTER + BANNER: deepen into the film stock ── */
html .footer { background: #100C0A; }
html .footer strong { color: var(--gold-light); }

html .happening-banner {
  background: linear-gradient(90deg, #17100D 0%, #5A1016 50%, #17100D 100%);
}

/* ── 9. FILTER BAR ── */
html .filter-btn {
  background: transparent;
  color: var(--gray);
  border: 1px solid var(--border-soft);
}
html .filter-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #17100D;
}
html[data-theme="dark"] .filter-btn:hover { color: var(--gold-light); border-color: rgba(216,181,113,0.45); }

/* ── 10. SELECTION + SCROLLBAR ── */
html ::selection { background: rgba(184,145,75,0.32); color: inherit; }
html[data-theme="dark"] ::selection { background: rgba(216,181,113,0.3); }

html { scrollbar-color: var(--gold) transparent; }
html ::-webkit-scrollbar { width: 9px; height: 9px; }
html ::-webkit-scrollbar-track { background: transparent; }
html ::-webkit-scrollbar-thumb { background: rgba(184,145,75,0.5); border-radius: 6px; }
html ::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── 11. HERO: aged monochrome instead of cold grayscale ──
   The duotone stays monochrome, but split-toned warm — shadows in
   cool sepia, midtones bronze, highlights amber — so the hero
   matches the sepia grade on every other photo on the site.
   Grain + vignette already cover the hero via the fixed overlays. */
html .hero-duotone {
  background: linear-gradient(160deg, #241a10 0%, #4a3620 52%, #6b5033 100%);
  mix-blend-mode: color;
  opacity: 0.88;
}

html .hero-slide img {
  filter: sepia(0.3) saturate(0.78) contrast(1.07) brightness(0.95);
}

html[data-theme="dark"] .hero-slide img {
  filter: sepia(0.34) saturate(0.72) contrast(1.09) brightness(0.88);
}

/* warm the scrim so the fade-to-black at the bottom isn't a cold black */
html .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(18,13,10,0.42) 0%,
    rgba(18,13,10,0.10) 32%,
    rgba(18,13,10,0.22) 55%,
    rgba(16,12,10,0.94) 100%
  );
}

/* the shutter wipe and film strip pick up the same brass tone */
html .hero-shutter {
  background: linear-gradient(100deg, #1a120c 0%, #5A1016 48%, #B8914B 100%);
}
html .hero-sprocket { background-color: #17100D; }

/* projector warmth on the flicker frame — amber, not clinical white */
html .hero-flash { background: #F6E3C0; }


/* ═══════════════════════════════════════════════════════════
   ORDER OF PROGRAMME — modal triggered from the Happening Now banner
   ═══════════════════════════════════════════════════════════ */
.programme-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  padding: 3px 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #17100D;
  background: var(--gold, #C5A059);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.programme-btn svg { width: 10px; height: 10px; }
@media (max-width: 700px) { .programme-btn span.full { display: none; } }

.programme-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(10,6,4,0.82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.programme-modal.open { opacity: 1; pointer-events: all; }

.programme-card {
  background: linear-gradient(165deg, #2c0509 0%, #17100D 65%, #1c1108 100%);
  border: 1px solid rgba(197,160,89,0.3);
  border-radius: 16px;
  max-width: 560px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 36px 30px 28px;
  color: #F4EEE2;
  transform: scale(0.94) translateY(12px);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  position: relative;
}
.programme-modal.open .programme-card { transform: scale(1) translateY(0); }

.programme-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #F4EEE2;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.programme-close svg { width: 15px; height: 15px; }

.programme-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #D8B571;
  margin-bottom: 6px;
}
.programme-title {
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.programme-sub {
  font-size: 12.5px;
  color: rgba(244,238,226,0.6);
  margin-bottom: 8px;
}
.programme-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 12px;
  color: #D8B571;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.programme-meta span { display: flex; align-items: center; gap: 6px; }
.programme-meta svg { width: 13px; height: 13px; flex-shrink: 0; }

.programme-list { counter-reset: prog; list-style: none; }
.programme-list li {
  counter-increment: prog;
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(244,238,226,0.9);
}
.programme-list li:last-child { border-bottom: none; }
.programme-list li::before {
  content: counter(prog);
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(197,160,89,0.15);
  color: #D8B571;
  font-size: 10.5px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}