/* The selected rice-paper and cinnabar palette, including reading surfaces. */
:root {
  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;
}

/* 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); }

/* The temple's Facebook shortcut remains visible beside the mobile menu. */
.header-facebook {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: #0866ff;
  border: 1px solid var(--line);
}
.header-facebook svg { display: block; }
.header-facebook:hover { background: rgba(8, 102, 255, .07); border-color: currentColor; }
.header-facebook:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@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; }
}
@media (max-width: 380px) {
  :is(.story, .history, .community).section-wrap { padding-inline: 20px; }
}