/* Palette tokens also colour the protected reading surfaces. */
:root,
:root[data-theme="cinnabar"] {
  color-scheme: light;
  --paper: #e8e2d5;
  --paper-light: #f4eee2;
  --paper-rgb: 232, 226, 213;
  --ink: #282c29;
  --body-ink: #3e423c;
  --caption-ink: #4c5047;
  --muted: #625d53;
  --red: #78352b;
  --gold: #9a7845;
  --line: rgba(83, 69, 47, .25);
  --on-accent: #f4eee2;
  --accent-hover: #5f2922;
  --accent-soft: #9a78451c;
  --header-surface: #f4eee2f7;
  --faith-bg: #29312e;
  --faith-surface: #242b28;
  --faith-text: #e6ddcb;
  --faith-muted: #cebfa5;
  --faith-line: #5e6357;
  --visit-bg: #78352b;
  --visit-text: #fff0d7;
  --visit-muted: #deccb0;
  --visit-line: #ab7060;
  --footer-bg: #242925;
  --footer-text: #c6baa5;
  --footer-title: #e5d9c3;
  --footer-line: #53574a;
  --wash-filter: grayscale(.82);
  --wash-blend: multiply;
  --hero-wash: .86;
  --story-wash: .68;
  --history-wash: .64;
  --faith-wash: .35;
  --community-wash: .58;
}

:root[data-theme="jade"] {
  --paper: #dce5d9;
  --paper-light: #edf2e9;
  --paper-rgb: 220, 229, 217;
  --ink: #263d35;
  --body-ink: #263d35;
  --caption-ink: #40594d;
  --muted: #51685d;
  --red: #315f50;
  --gold: #817342;
  --line: rgba(49, 95, 80, .26);
  --on-accent: #edf2e9;
  --accent-hover: #244a3e;
  --accent-soft: #315f5015;
  --header-surface: #edf2e9f7;
  --faith-bg: #243d35;
  --faith-surface: #20362f;
  --faith-text: #e4ecdf;
  --faith-muted: #c4d6c5;
  --faith-line: #607969;
  --visit-bg: #284e46;
  --visit-text: #edf2e9;
  --visit-muted: #d0dfcf;
  --visit-line: #6c8c7c;
  --footer-bg: #1c3029;
  --footer-text: #c4d6c5;
  --footer-title: #e4ecdf;
  --footer-line: #516b5b;
  --wash-filter: grayscale(1) sepia(.16) hue-rotate(65deg);
}

:root[data-theme="night"] {
  color-scheme: dark;
  --paper: #192522;
  --paper-light: #293532;
  --paper-rgb: 25, 37, 34;
  --ink: #eee4ce;
  --body-ink: #eee4ce;
  --caption-ink: #d7cdb6;
  --muted: #c0b49a;
  --red: #cfad70;
  --gold: #b79b68;
  --line: rgba(207, 173, 112, .30);
  --on-accent: #192522;
  --accent-hover: #e1c48e;
  --accent-soft: #cfad701c;
  --header-surface: #202d29f7;
  --faith-bg: #121d1a;
  --faith-surface: #182722;
  --faith-text: #eee4ce;
  --faith-muted: #c0b49a;
  --faith-line: #6f745f;
  --visit-bg: #322b21;
  --visit-text: #eee4ce;
  --visit-muted: #d2bd98;
  --visit-line: #786646;
  --footer-bg: #111a17;
  --footer-text: #c0b49a;
  --footer-title: #eee4ce;
  --footer-line: #595849;
  --wash-filter: grayscale(1) invert(1);
  --wash-blend: screen;
  --hero-wash: .42;
  --story-wash: .32;
  --history-wash: .32;
  --faith-wash: .28;
  --community-wash: .30;
}

/* Chapters fill the viewport while the text retains its original reading width. */
:is(.story, .history, .community).section-wrap {
  max-width: none;
  width: 100%;
  padding-inline: max(42px, calc((100% - 1196px) / 2));
}
.layered-scene > .ink-backdrop {
  inset: 0;
  filter: var(--wash-filter);
  mix-blend-mode: var(--wash-blend);
  mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
}
.hero > .ink-backdrop { opacity: var(--hero-wash); }
.story > .ink-backdrop { opacity: var(--story-wash); background-position: 45% 57%; }
.history > .ink-backdrop { opacity: var(--history-wash); background-position: 70% center; }
.community > .ink-backdrop { opacity: var(--community-wash); background-position: 70% center; }
.faith > .ink-backdrop {
  opacity: var(--faith-wash);
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
}
.hero::before {
  background: linear-gradient(90deg, rgba(var(--paper-rgb), .62), rgba(var(--paper-rgb), .28) 23%, transparent 48%);
}

.site-header { background: var(--header-surface); }
.brand-seal, .nav-visit, .faith-tabs button[aria-selected="true"] { color: var(--on-accent); }
.nav-visit:hover { background: var(--accent-hover); color: var(--on-accent) !important; }
.text-link:hover { color: var(--accent-hover); }
.hero-copy::before, .story-copy::before, .community-copy::before,
.history .chapter-heading::before { background: var(--paper-light); }
.hero-description, .story-copy > p:not(.lead), .community-intro p:not(.lead),
.community-stories p, .faith-copy > p, .timeline-entry p { color: var(--body-ink); }
.hero-location, .section-label, .archival-photo figcaption,
.community-stories time, .history-footnote { color: var(--caption-ink); }
.section-label, .archival-photo figcaption, .hero-route, .community-stories,
.history .section-intro > p, .history-footnote { background: var(--paper-light); }
.timeline-era { color: var(--muted); }
.faith { background: var(--faith-bg); }
.faith .section-intro > h2::before, .faith .section-intro > p::before,
.faith .section-label { background: var(--faith-bg); }
.faith .chapter-heading, .faith .section-intro > p, .faith .section-label,
.faith-figure figcaption { color: var(--faith-text); }
.faith .section-label > span { color: var(--faith-muted); border-color: var(--gold); }
.faith-figure figcaption { background: var(--faith-surface); border-color: var(--faith-line); }
.faith-figure figcaption a:hover { color: var(--faith-text); }
.faith-tabs button:hover { background: var(--accent-soft); color: var(--red); }
.faith-tabs button[aria-selected="true"]:hover { background: var(--accent-hover); color: var(--on-accent); }
.visit { background: var(--visit-bg); color: var(--visit-text); }
.visit .section-label { background: var(--visit-bg); color: var(--visit-muted); }
.visit .section-label > span { border-color: var(--gold); color: var(--visit-muted); }
.visit .chapter-heading { color: var(--visit-text); }
.visit-intro, .visit-information dt, .visit-information > p { color: var(--visit-muted); }
.visit-information dl > div { border-color: var(--visit-line); }
.visit-button { color: var(--red); }
.visit-button:hover { background: var(--paper-light); color: var(--ink); }
.site-footer { background: var(--footer-bg); color: var(--footer-text); }
.footer-brand { color: var(--footer-title); }
.footer-main { border-color: var(--footer-line); }
.back-top { border-color: var(--gold); }
.site-footer a:hover { color: var(--footer-title); }

/* A persistent, compact selector permits comparison at the current scroll position. */
.theme-switcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 24px);
  padding: 5px 8px 5px 12px;
  background: var(--paper-light);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 4px 22px #00000020;
}
.theme-switcher-label { font: 12px/1.5 var(--serif); color: var(--muted); white-space: nowrap; }
.theme-options { display: flex; gap: 3px; }
.theme-options button {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid transparent;
  background: transparent;
  font: 13px/1.5 var(--serif);
  white-space: nowrap;
}
.theme-options button:hover { background: var(--accent-soft); }
.theme-options button[aria-pressed="true"] { border-color: var(--red); color: var(--red); }
.theme-options button:focus-visible { outline-offset: -3px; }
.theme-swatch { width: 10px; height: 10px; border: 1px solid #00000030; flex-shrink: 0; }
.swatch-cinnabar { background: #78352b; }
.swatch-jade { background: #315f50; }
.swatch-night { background: #cfad70; }
.site-footer { padding-bottom: 100px; }

@media (max-width: 1080px) {
  :is(.story, .history, .community).section-wrap { padding-inline: 32px; }
}
@media (max-width: 760px) {
  :is(.story, .history, .community).section-wrap { padding-inline: 23px; }
  .hero::before {
    background: linear-gradient(180deg, rgba(var(--paper-rgb), .80), rgba(var(--paper-rgb), .48) 40%, transparent 72%);
  }
  .layered-scene > .ink-backdrop { background-position: center; }
  .story > .ink-backdrop { background-position: 38% center; }
  .theme-switcher { right: 12px; bottom: 12px; gap: 7px; padding: 4px 5px 4px 9px; }
  .theme-options { gap: 2px; }
  .theme-options button { font-size: 12px; gap: 5px; padding-inline: 7px; }
  .theme-swatch { width: 9px; height: 9px; }
}
@media (max-width: 380px) {
  :is(.story, .history, .community).section-wrap { padding-inline: 20px; }
  .theme-switcher { gap: 5px; padding-left: 7px; }
  .theme-options button { padding-inline: 5px; gap: 4px; }
}