/* V21 — warm ivory, espresso and terracotta. One palette across every page. */
:root {
  --color-page: #f6f1e8;
  --color-surface: #eee4d6;
  --color-ink: #352b25;
  --color-secondary: #716155;
  --color-accent: #a44b34;
  --color-accent-hover: #853a28;
  --color-dark: #2c2521;
  --color-dark-raised: #44372f;
  --color-on-dark: #f6f1e8;
  --color-muted-on-dark: #cdbeb0;
  --color-border: rgba(53,43,37,.25);
  /* Compatibility roles for the established components. */
  --navy: var(--color-dark);
  --navy-2: var(--color-dark-raised);
  --cream: var(--color-page);
  --ink: var(--color-ink);
  --muted: var(--color-secondary);
  --line: var(--color-border);
  color-scheme: light;
}
html { scrollbar-color: #998574 var(--color-page); }
body { background: var(--color-page); color: var(--color-ink); }
::selection { background: var(--color-accent); color: var(--color-page); }
:focus-visible { outline-color: var(--color-accent); }
.skip-link { background: var(--color-accent); color: var(--color-page); }
.light { background: var(--color-page); color: var(--color-ink); }
.gallery-intro, .faq-section { background: var(--color-surface); }

/* A light navigation gives the photos an open top edge. */
.topbar,
.topbar.is-scrolled {
  background: rgba(246,241,232,.97);
  color: var(--color-ink);
  border-color: rgba(53,43,37,.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.topbar nav a::after { background: var(--color-accent); }
.nav-actions { border-left-color: rgba(53,43,37,.2); }
.menu-pill { background: var(--color-accent); color: var(--color-page); border: 1px solid var(--color-accent); }
.menu-pill:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.lang-toggle span, .lang-toggle i { color: var(--color-secondary); }
.lang-toggle span.active { color: var(--color-ink); }

/* Text stays pale on photography; overlays lose their blue cast. */
.hero, .page-hero, .event-detail-hero, .experience-editorial, .archive-cover { color: var(--color-on-dark); }
.home-page .hero-center { color: var(--color-on-dark); text-shadow: 0 2px 24px rgba(30,23,18,.25); }
.home-page .pane::after {
  background: linear-gradient(180deg, rgba(30,23,18,.16), rgba(30,23,18,.32) 43%, rgba(30,23,18,.16) 64%, rgba(30,23,18,.82));
}
.page-hero.photo::before {
  background: linear-gradient(180deg, rgba(30,23,18,.18), rgba(30,23,18,.64)), var(--bg) center var(--photo-y,42%)/cover no-repeat;
}
.event-detail-hero::before {
  background: linear-gradient(90deg, rgba(30,23,18,.76), rgba(30,23,18,.16)), var(--bg) center var(--photo-y,42%)/cover no-repeat;
}
.experience-editorial::before {
  background: linear-gradient(90deg, rgba(30,23,18,.74), rgba(30,23,18,.18)), var(--editorial-bg) center/cover no-repeat;
}
.special-editorial::before { background-position: center, center 75%; }
.experience-tag { color: var(--color-on-dark); }
.event-meta span { border-top-color: rgba(246,241,232,.65); }
.hero :focus-visible, .page-hero :focus-visible, .event-detail-hero :focus-visible,
.experience-editorial :focus-visible, .archive-cover :focus-visible { outline-color: var(--color-on-dark); }

/* The warm accent identifies routes into the program and collections. */
.home-upcoming .home-events-head h2 em,
.gallery-intro h1 em { color: var(--color-accent); }
.section-head p, .home-events-head p, .home-upcoming .home-events-head p,
.light .section-head p, .detail-copy p, .gallery-intro p,
.event-copy small, .event-copy p,
.home-upcoming .event-copy small, .home-upcoming .event-copy p,
.detail-card small, .ticket-status, .faq-list p, .location-card-count,
.album-toolbar { color: var(--color-secondary); }
.home-upcoming .event-list, .home-upcoming .event-row { border-color: var(--color-border); }
.home-upcoming .event-row:last-child { border: 0; }
.back, .home-upcoming .event-link { color: var(--color-accent); border-bottom-color: currentColor; }
.ticket-pill { background: var(--color-accent); color: var(--color-page); }
.ticket-pill:hover, .event-row:hover .ticket-pill { background: var(--color-accent-hover); }
.detail-card > span.ticket-pill { color: var(--color-secondary); background: transparent; }
.location-card-arrow { border-color: var(--color-accent); color: var(--color-accent); }
.location-card:hover .location-card-arrow,
.location-card:focus-visible .location-card-arrow { background: var(--color-accent); color: var(--color-page); }
.location-toolbar > a { color: var(--color-accent); border-bottom-color: currentColor; }
.location-toolbar .location-switch { border-bottom-color: transparent; }
.location-toolbar .location-switch:hover { border-bottom-color: currentColor; }
.album-toolbar > a { border-bottom-color: var(--color-secondary); }

/* The final photograph leads into one warm, dark sign-off. */
.home-page .archive-cover::before {
  background: linear-gradient(90deg, rgba(30,23,18,.62), rgba(30,23,18,.08) 75%),
    linear-gradient(0deg, rgba(44,37,33,.78), transparent 50%);
}
.home-page .archive-gallery-link { border-bottom-color: rgba(246,241,232,.7); }
.archive-cover-caption { color: var(--color-on-dark); }
.site-footer.editorial-footer {
  --muted: var(--color-muted-on-dark);
  --line: rgba(246,241,232,.24);
  background: var(--color-dark);
  color: var(--color-on-dark);
  border-top-color: rgba(246,241,232,.24);
}
.site-footer :focus-visible { outline-color: var(--color-on-dark); }
.footer-top:hover { color: var(--color-on-dark); }

/* The photo viewer retains a dark viewing environment in the same palette. */
.lightbox {
  --muted: var(--color-muted-on-dark);
  --line: rgba(246,241,232,.28);
  color-scheme: dark;
  background: #211c18;
  color: var(--color-on-dark);
}
.lightbox::backdrop { background: rgba(33,28,24,.94); }
.lightbox button { background: var(--color-dark-raised); border-color: rgba(246,241,232,.48); }
.lightbox button:hover { background: #5b473b; }
.lightbox :focus-visible { outline-color: var(--color-on-dark); }

@media (max-width: 640px) {
  .menu-pill { border: 1px solid var(--color-accent); background: var(--color-accent); }
  .page-hero.photo::before { background-position: center, center var(--photo-y,38%); }
  .home-page .archive-cover::before {
    background: linear-gradient(180deg, rgba(30,23,18,.66), rgba(30,23,18,.07) 50%, rgba(44,37,33,.82));
  }
}