/* ==========================================================================
   Corinth Baptist Church — Chilhowee, Missouri
   A single stylesheet. Colors and spacing all flow from the tokens below,
   so changing the palette is a one-place edit.
   ========================================================================== */

:root {
  /* Palette — warm earth tones. The old scheme was navy and cool grey,
     which read crisp but cold; everything here is pulled toward wood,
     wheat and lamplight so the page feels lived-in rather than clinical.
     Variable names kept from the old scheme so markup did not have to
     churn: --navy is now the deep bark brown, --brass the warm amber. */
  --navy:        #3b2a1e;  /* bark    */
  --navy-soft:   #52402f;  /* saddle  */
  --navy-deep:   #2a1d14;  /* espresso*/
  --cream:       #fbf5ea;  /* linen — the page ground */
  --sand:        #f5eadb;  /* one step deeper, for alternating bands */
  --ivory:       #f2e6d2;  /* wheat   */
  --card:        #fffdf8;  /* warm off-white, never pure white */
  --brass:       #b07a35;  /* amber   */
  --brass-light: #e0b876;  /* lamplight */
  --clay:        #a8553a;  /* barn red, used sparingly */
  --ink:         #33261b;
  --body:        #574839;
  --muted:       #8b7862;
  --rule:        #e6d8c0;
  --white:       #ffffff;

  /* Warm-tinted shadows. Blue-grey shadows are what make a warm palette
     still feel cold, so these are all brown. */
  --shadow-sm: 0 10px 24px -18px rgba(59, 42, 30, .55);
  --shadow-md: 0 22px 46px -30px rgba(59, 42, 30, .5);

  /* Type */
  --display: "Lora", "Iowan Old Style", Georgia, serif;
  --sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --wrap: 1140px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 6px;
  --header-h: 76px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- reset -- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A whisper of paper grain over the whole page. This is what stops large
   flat fills reading as screen-flat; at 3% it is felt more than seen.
   Pointer-events off so it never intercepts a click. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
address { font-style: normal; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-color: rgba(176, 122, 53, .5); text-underline-offset: 3px; }
a:hover { color: var(--brass); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: rgba(176, 122, 53, .12);
  padding: .12em .4em;
  border-radius: 3px;
}

:focus-visible {
  outline: 2.5px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy);
  color: var(--white);
  padding: .75rem 1.25rem;
  font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; color: var(--white); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -------------------------------------------------------------- header -- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
}

.site-header.is-stuck {
  background: rgba(251, 245, 234, .95);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 var(--rule), 0 8px 28px -22px rgba(59, 42, 30, .5);
  height: 66px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: var(--white);
  transition: color .35s var(--ease);
}
.site-header.is-stuck .brand { color: var(--navy); }

.brand-mark { width: 26px; height: 33px; flex: none; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }

.brand-name {
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: .005em;
}

.brand-sub {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
  font-weight: 500;
  margin-top: .12em;
}

.primary-nav { display: flex; align-items: center; gap: 2rem; }

.primary-nav a {
  color: var(--white);
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  letter-spacing: .01em;
  position: relative;
  padding: .35rem 0;
  transition: color .3s var(--ease);
}
.site-header.is-stuck .primary-nav a { color: var(--navy); }

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.primary-nav a:hover::after { transform: scaleX(1); }
.primary-nav a:hover { color: var(--brass-light); }
.site-header.is-stuck .primary-nav a:hover { color: var(--brass); }

.primary-nav .nav-cta {
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--radius);
  padding: .5rem 1.15rem;
  transition: all .3s var(--ease);
}
.primary-nav .nav-cta::after { display: none; }
.primary-nav .nav-cta:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--white);
}
.site-header.is-stuck .nav-cta { border-color: rgba(59, 42, 30, .28); }
.site-header.is-stuck .nav-cta:hover { color: var(--white); border-color: var(--brass); }

/* mobile toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 9px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle-bar {
  height: 1.8px;
  width: 100%;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .25s var(--ease), background .35s var(--ease);
}
.site-header.is-stuck .nav-toggle-bar { background: var(--navy); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: var(--navy); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 4rem) 0 clamp(4rem, 9vw, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* The photograph sits behind everything; the veil above it carries the
   warmth and buys back enough contrast for the text to stay legible.
   object-position favours the right so the building stays in frame while
   the copy occupies the open sky on the left. */
/* object-position matters more than it looks: the image is 16:9 and the
   hero is taller than that, so cover() crops the sides. At 68% the sun
   fell outside the crop entirely. 42% brings it back into frame. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 52%;
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Tuned by solving for contrast against the actual image rather than by
     eye. The brightest pixels behind the copy are pure white, and at this
     warm veil colour white text needs alpha .62 to clear 4.5:1 — so .66
     across the text zone leaves headroom while letting far more of the
     sunset through than the .93 it started at. Falls away to .18 on the
     right so the sky and steeple keep their glow.
     The text-shadow further down is the insurance on top of this. */
  background:
    linear-gradient(100deg,
      rgba(58, 36, 16, .70) 0%,
      rgba(58, 36, 16, .67) 30%,
      rgba(60, 38, 18, .64) 50%,
      rgba(64, 42, 22, .46) 66%,
      rgba(70, 48, 28, .24) 85%,
      rgba(70, 48, 28, .16) 100%),
    linear-gradient(180deg,
      rgba(42, 29, 20, .34) 0%,
      transparent 26%,
      transparent 66%,
      rgba(42, 29, 20, .46) 100%);
}

/* A soft warm shadow under everything in the hero. With the veil lifted
   to let the sunset through, this is what keeps the copy readable over
   the bright patches without darkening the picture any further. */
.hero-inner {
  position: relative;
  z-index: 1;
  color: var(--white);
  text-shadow:
    0 1px 2px rgba(38, 24, 10, .55),
    0 2px 12px rgba(38, 24, 10, .45);
}

.hero-eyebrow {
  font-size: .74rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  /* Deliberately near-white rather than the page's amber: the mid-tone
     amber would have forced the veil back to .83 alpha to stay legible,
     which is exactly the sunlight we are trying to keep. */
  color: #fff8eb;
  font-weight: 600;
  margin-bottom: 1.35rem;
}

.hero-title {
  font-size: clamp(3.1rem, 8.4vw, 6rem);
  font-weight: 500;
  line-height: .98;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.hero-lede {
  max-width: 34rem;
  font-size: clamp(1.06rem, 1.9vw, 1.22rem);
  line-height: 1.72;
  color: rgba(255, 255, 255, .90);
  font-weight: 300;
  margin-bottom: 2.6rem;
}

.hero-times {
  display: inline-flex;
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: 1.6rem clamp(1.6rem, 4vw, 2.4rem);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 2.4rem;
  flex-wrap: wrap;
}

.hero-time { display: flex; flex-direction: column; gap: .3rem; }

.hero-time-label {
  font-size: .7rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: #fff8eb;  /* see .hero-eyebrow — mid-tone amber costs too much veil */
  font-weight: 600;
}

.hero-time-clock {
  font-family: var(--display);
  font-size: clamp(2.05rem, 4.6vw, 2.75rem);
  font-weight: 500;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.01em;
}
.hero-time-clock .ampm { font-size: .48em; letter-spacing: .04em; opacity: .8; }

.hero-time-note {
  font-size: .87rem;
  color: rgba(255, 255, 255, .80);
  font-weight: 300;
}

.hero-time-divider { width: 1px; background: rgba(255, 255, 255, .18); }

.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .92rem 1.9rem;
  border-radius: var(--radius);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .3s var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--brass);
  color: var(--white);
  border-color: var(--brass);
}
.btn-primary:hover {
  background: #a37f3f;
  border-color: #a37f3f;
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgba(176, 122, 53, .9);
}

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .38);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--white);
  color: var(--white);
}

/* on light sections the ghost button needs dark ink */
.section .btn-ghost { color: var(--navy); border-color: rgba(59, 42, 30, .3); }
.section .btn-ghost:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* ------------------------------------------------------------ sections -- */

.section { padding: clamp(4.5rem, 10vw, 7.5rem) 0; }
.section-cream { background: var(--sand); }
.section-navy { background: var(--navy); color: rgba(255, 255, 255, .8); }
.section-navy .section-title { color: var(--white); }
.section-navy .section-lede { color: rgba(255, 255, 255, .76); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.75rem, 6vw, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
  margin-bottom: .9rem;
}

.section-title {
  font-size: clamp(2.05rem, 4.6vw, 3.1rem);
  font-weight: 500;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}

.section-lede {
  font-size: clamp(1.02rem, 1.7vw, 1.16rem);
  color: var(--muted);
  font-weight: 300;
  line-height: 1.75;
}
.section-head.center .section-lede { margin-inline: auto; }

/* --------------------------------------------------------------- cards -- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 2.35rem 2rem 2.25rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(176, 122, 53, .45);
  box-shadow: 0 22px 46px -32px rgba(59, 42, 30, .55);
}

.card-feature {
  background: var(--navy);
  border-color: var(--navy);
  color: rgba(255, 255, 255, .8);
}
.card-feature .card-title { color: var(--white); }
.card-feature .card-time { color: var(--brass-light); }
.card-feature .card-icon { color: var(--brass-light); border-color: rgba(224, 184, 118, .35); }

.card-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--brass);
  margin-bottom: 1.5rem;
}
.card-icon svg { width: 22px; height: 22px; }

.card-time {
  font-size: .73rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
  margin-bottom: .5rem;
}

.card-title { font-size: 1.62rem; font-weight: 600; margin-bottom: .7rem; }

.card-body { font-size: .98rem; line-height: 1.72; margin: 0; }

/* --------------------------------------------------------------- split -- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
.split-reverse .split-media { order: 2; }

.split-body .section-title { margin-bottom: 1.2rem; }

.check-list {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}

.check-list li {
  position: relative;
  padding-left: 2rem;
  font-size: .99rem;
  line-height: 1.65;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 11px;
  height: 6px;
  border-left: 1.8px solid var(--brass);
  border-bottom: 1.8px solid var(--brass);
  transform: rotate(-45deg);
}

.check-list strong { color: var(--ink); font-weight: 600; }

.muted-note {
  font-size: .93rem;
  color: var(--muted);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

/* -------------------------------------------------- photos & placeholders */

/* Used once real photographs replace the placeholders below.
   See images/PHOTOS-NEEDED.md */
.split-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
}
.split-photo.tall { aspect-ratio: 3 / 4; }

.photo-placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  text-align: center;
  padding: 2rem;
  border: 1.5px dashed rgba(176, 122, 53, .5);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(176, 122, 53, .045) 0 12px,
      transparent 12px 24px
    ),
    var(--ivory);
  color: var(--brass);
}
.photo-placeholder.tall { aspect-ratio: 3 / 4; }
.photo-placeholder svg { width: 42px; height: 42px; opacity: .8; margin-bottom: .35rem; }

.photo-placeholder-title {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}

.photo-placeholder-note {
  font-size: .82rem;
  color: var(--muted);
  margin: 0;
}

/* ------------------------------------------------------------ beliefs -- */

.belief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2.25rem 2.5rem;
}

.belief { padding-top: 1.5rem; border-top: 1px solid rgba(224, 184, 118, .32); }

.belief h3 {
  font-size: 1.42rem;
  color: var(--white);
  font-weight: 600;
  margin-bottom: .6rem;
}

.belief p {
  font-size: .96rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, .72);
  font-weight: 300;
  margin: 0;
}

/* ------------------------------------------------------------ timeline -- */

.timeline {
  display: grid;
  gap: 0;
  max-width: 52rem;
  margin-bottom: 3.5rem;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 1.5rem;
  padding-bottom: 2.1rem;
}
.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 1.65rem;
  bottom: -.35rem;
  width: 1px;
  background: linear-gradient(to bottom, rgba(176, 122, 53, .5), rgba(176, 122, 53, .12));
}
.timeline-item:last-child::before { display: none; }

.timeline-marker {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--brass);
  background: var(--sand);  /* matches the band the timeline sits on */
  margin: .6rem auto 0;
  grid-column: 1;
}

/* Real years now, so give them the weight of a date rather than a label.
   Scoped through .timeline-content so it outranks the `.timeline-content p`
   body rule further down, which would otherwise reset the size. */
.timeline-content p.timeline-date {
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: .06em;
  color: var(--brass);
  font-weight: 600;
  margin-bottom: .2rem;
}

.timeline-content h3 {
  font-size: 1.38rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

.timeline-content p { font-size: .99rem; }

.timeline-content p.timeline-flag {
  display: inline-block;
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
  padding: .32rem .8rem;
  background: rgba(176, 122, 53, .1);
  border-left: 2px solid rgba(176, 122, 53, .55);
  border-radius: 0 3px 3px 0;
  margin-top: .35rem;
}

/* ------------------------------------------------------------- callout -- */

.callout {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: clamp(1.85rem, 4vw, 2.6rem);
  max-width: 52rem;
}

.callout-title {
  font-size: 1.55rem;
  font-weight: 600;
  margin-bottom: .85rem;
}

.callout p { font-size: .99rem; }

/* ------------------------------------------------------------- contact -- */

.contact-block {
  display: grid;
  gap: 0;
  margin: 2rem 0;
  border-top: 1px solid var(--rule);
}

.contact-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.contact-label {
  font-size: .71rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
  padding-top: .28em;
}

.contact-value { margin: 0; font-size: 1.01rem; color: var(--ink); line-height: 1.62; }

/* -------------------------------------------------------------- footer -- */

.site-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .62);
  padding-top: clamp(3.5rem, 8vw, 5rem);
  font-size: .94rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.footer-brand .brand-mark { width: 28px; height: 35px; color: var(--brass-light); margin-bottom: 1rem; }

.footer-name {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--white);
  font-weight: 600;
  margin-bottom: .35rem;
}

.footer-tag { color: rgba(255, 255, 255, .5); font-size: .93rem; font-style: italic; }

.footer-col h4 {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-light);
  font-weight: 600;
  margin-bottom: 1.1rem;
  font-family: var(--sans);
}

.footer-col p, .footer-col address { margin: 0 0 .6rem; line-height: 1.72; }

.footer-col nav { display: grid; gap: .55rem; }

.footer-col a { color: rgba(255, 255, 255, .62); text-decoration: none; transition: color .25s var(--ease); }
.footer-col a:hover { color: var(--brass-light); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem;
  padding-top: 1.6rem;
  padding-bottom: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .84rem;
  color: rgba(255, 255, 255, .42);
}
.footer-base p { margin: 0; }

/* --------------------------------------------------------- responsive -- */

@media (max-width: 940px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.25rem; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .primary-nav {
    position: fixed;
    inset: 0 0 auto 0;
    top: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--header-h) + 1rem) var(--gutter) 2rem;
    background: var(--cream);
    box-shadow: 0 20px 44px -26px rgba(59, 42, 30, .6);
    transform: translateY(-102%);
    transition: transform .4s var(--ease);
    visibility: hidden;
  }
  .primary-nav.is-open { transform: translateY(0); visibility: visible; }

  .primary-nav a {
    color: var(--navy);
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 1.06rem;
  }
  .primary-nav a::after { display: none; }

  .primary-nav .nav-cta {
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 1rem 0;
    color: var(--brass);
    font-weight: 600;
  }
  .primary-nav .nav-cta:hover { background: none; color: var(--brass); }

  /* keep the burger visible against the open cream panel */
  .site-header:has(.primary-nav.is-open) { background: rgba(250, 247, 241, .98); }
  .site-header:has(.primary-nav.is-open) .brand { color: var(--navy); }

  .split { grid-template-columns: 1fr; }
  .split-reverse .split-media { order: 0; }
  .photo-placeholder, .photo-placeholder.tall { aspect-ratio: 4 / 3; }
}

@media (max-width: 700px) {
  /* On a narrow screen the copy runs the full width, so the sideways
     gradient would leave the right-hand ends of lines sitting on bright
     sky. Swap to an even, mostly vertical veil instead. */
  /* Phones crop hard: at this width only image x 32–52% is visible, so the
     sun itself is out of frame and the copy sits over bright sky the whole
     way down. Solved against that crop — .68 is the floor that keeps the
     small gold type at 4.7:1; anything lighter fails at the top. */
  .hero-veil {
    background:
      linear-gradient(180deg,
        rgba(56, 35, 16, .68) 0%,
        rgba(56, 35, 16, .68) 55%,
        rgba(52, 32, 14, .64) 82%,
        rgba(48, 30, 14, .60) 100%);
  }
  /* Keeping the building in frame beats keeping the sun: at this crop
     width the image cannot hold both. */
  .hero-photo { object-position: 40% 42%; }
}

@media (max-width: 620px) {
  .hero { min-height: auto; padding-bottom: clamp(7rem, 26vw, 10rem); }
  .hero-times { width: 100%; gap: 1.4rem; }
  .hero-time-divider { width: 100%; height: 1px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .contact-row { grid-template-columns: 1fr; gap: .3rem; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-base { flex-direction: column; }
}

/* ------------------------------------------------------- reveal on scroll */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .nav-toggle, .hero-scene, .hero-actions { display: none; }
  body { color: #000; }
  .hero-sky { background: none; }
  .hero-inner, .hero-title, .hero-lede, .hero-time-clock { color: #000; }
}

/* ------------------------------------------------------------------ faq -- */
/* Built on <details>/<summary> so the answers are in the DOM for crawlers
   and still work with JavaScript disabled. */

.faq {
  max-width: 52rem;
  border-top: 1px solid var(--rule);
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 600;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brass); }

/* Plus/minus drawn in CSS so there is no icon font or SVG to load. */
.faq-item summary::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  margin-left: auto;
  margin-top: .42em;
  background:
    linear-gradient(var(--brass), var(--brass)) center/13px 1.8px no-repeat,
    linear-gradient(var(--brass), var(--brass)) center/1.8px 13px no-repeat;
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after {
  transform: rotate(135deg);
  background:
    linear-gradient(var(--brass), var(--brass)) center/13px 1.8px no-repeat;
}

.faq-body {
  padding: 0 2.5rem 1.5rem 0;
  max-width: 44rem;
}
.faq-body p { font-size: 1rem; color: var(--body); margin: 0; }

@media (max-width: 620px) {
  /* The right inset exists to keep desktop line length comfortable; on a
     phone it just squeezes the answer into a column. */
  .faq-body { padding-right: 0; }
  .faq-item summary { font-size: 1.14rem; }
}

/* ------------------------------------------------- figures in the timeline */

.timeline-figure {
  margin: 1.5rem 0 0;
  max-width: 34rem;
}

.timeline-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
  background: var(--card);
}

.timeline-figure figcaption {
  margin-top: .75rem;
  font-size: .88rem;
  line-height: 1.62;
  color: var(--muted);
  font-style: italic;
  padding-left: .9rem;
  border-left: 2px solid rgba(176, 122, 53, .4);
}

/* -------------------------------------------------------------- map -- */

.map-embed {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
  /* Warm ground so the frame does not flash white before the map paints. */
  background: var(--ivory);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-note {
  margin-top: .8rem;
  font-size: .88rem;
  color: var(--muted);
}