/* ==========================================================================
   Remnant Community Fellowship
   Palette: "Crimson Frame" — crimson carries the header, the hero, and the
   banded sections; white, near-black and sand sit on top of it. Colour
   values sampled from creekwoodchurch.com.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------
     PALETTE
     To switch schemes, replace only the values in this block; nothing
     else in the file hard-codes a colour except the hero gradient
     (see .hero) and the shadow tints.
     --------------------------------------------------------------- */
  --crimson:      #c9364b;   /* header, hero, banded sections */
  --crimson-deep: #a82a3c;   /* hovers, edges */
  /* Tints used for text sitting ON crimson. Kept this light deliberately:
     at #ffdfe3 the hero tagline and page subtitles fell to 4.11 against the
     crimson, under the 4.5 minimum for text this size. */
  --crimson-pale: #ffeef0;
  --ink:          #232324;   /* headings, buttons, footer */
  --ink-mid:      #55555a;   /* body copy on light grounds */
  --ink-soft:     #6f6f74;   /* captions, quiet metadata */
  --cream:        #ffffff;   /* page ground */
  --sand:         #f2ede6;   /* banded light sections */
  --line:         #e6e1d9;
  --white:        #ffffff;

  --serif: "Bitter", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1080px;
  --pad: 1.25rem;
  --radius: 10px;
  --shadow: 0 2px 4px rgba(35, 35, 36, .06), 0 8px 24px rgba(35, 35, 36, .10);
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  line-height: 1.2;
  margin: 0 0 .6em;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); }
h3 { font-size: 1.25rem; }

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

a { color: var(--crimson); }
a:hover { color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--crimson);
  outline-offset: 3px;
  border-radius: 3px;
}
/* On the crimson header and bands, a crimson focus ring would vanish. */
.site-header :focus-visible,
.hero :focus-visible,
.page-head :focus-visible,
.section--band :focus-visible,
.site-footer :focus-visible { outline-color: var(--white); }

/* --- Small utilities ----------------------------------------------------- */

/* Visible to screen readers, not to the eye. Used for headings that keep the
   document outline intact where the design does not call for a visible one. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stack-top { margin-top: 2rem; }
.measure { max-width: 34rem; }
.text-sm { font-size: .92rem; }
.text-note { font-size: .87rem; color: var(--ink-soft); }
.text-note--spaced { margin-top: .75rem; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.narrow { max-width: 44rem; }

.section { padding-block: clamp(3rem, 8vw, 5rem); }
.section--sand { background: var(--sand); }

/* The crimson band. Content sits on top of it in white cards. Kept under
   the old .section--dark name as well so existing markup keeps working. */
.section--dark,
.section--band { background: var(--crimson); color: var(--white); }
.section--dark h2, .section--dark h3,
.section--band h2, .section--band h3 { color: var(--white); }
.section--dark a, .section--band a { color: var(--white); }
.section--dark .card, .section--band .card { border-color: var(--crimson-deep); color: var(--ink); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .8rem;
  font-weight: 600;
  color: var(--crimson);
  margin-bottom: .5rem;
}
.section--dark .eyebrow, .section--band .eyebrow { color: var(--white); }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--white);
  padding: .75rem 1.25rem; z-index: 100;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  padding: .8rem 1.6rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--ink); color: var(--white); }
.btn--primary:hover { background: var(--crimson-deep); color: var(--white); }
.btn--ghost { border-color: currentColor; color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
/* On crimson grounds the ghost button goes white. */
.hero .btn--ghost,
.section--dark .btn--ghost,
.section--band .btn--ghost { color: var(--white); }
.hero .btn--ghost:hover,
.section--dark .btn--ghost:hover,
.section--band .btn--ghost:hover { background: var(--white); color: var(--crimson); border-color: var(--white); }


/* --- Verse bar ---------------------------------------------------------- */
/* The church's verse, above the nav on every page. Deliberately not sticky:
   it scrolls away and only the nav bar sticks, so it costs no vertical space
   once someone starts reading. */

.verse-bar {
  background: var(--ink);
  color: #d7cec1;
  text-align: center;
}
.verse-bar p {
  margin: 0;
  padding-block: .6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: .88rem;
  line-height: 1.5;
}
.verse-bar cite {
  font-family: var(--sans);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--crimson-pale);
  margin-left: .5rem;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .verse-bar p { font-size: .8rem; padding-block: .5rem; }
  .verse-bar cite { display: block; margin-left: 0; margin-top: .15rem; }
}

/* Verse repeated in the footer, under the tagline. */
.footer-verse {
  margin-top: 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: .92rem;
  color: #d7cec1;
}
.footer-verse cite {
  font-family: var(--sans);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--crimson-pale);
}

/* --- Header / nav ------------------------------------------------------- */

.site-header {
  background: var(--crimson);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  transition: min-height .25s ease;
}
/* Once the page scrolls, the bar condenses and gives reading room back. */
.site-header.is-scrolled .wrap { min-height: 56px; }
.site-header.is-scrolled .brand .mark { width: 30px; }
.site-header.is-scrolled .brand-name span { opacity: 0; }
.site-header .brand .mark { transition: width .25s ease; }
.site-header .brand-name span { transition: opacity .2s ease; }
.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--white);
}
.brand .mark { width: 38px; height: auto; flex: none; }
.brand-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.15;
}
.brand-name span {
  display: block;
  font-size: .72rem;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* Kept near-opaque: at a lower value this drops below a readable
     contrast against the crimson. */
  color: rgba(255, 255, 255, .85);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, .55);
  color: var(--white);
  font: inherit;
  font-size: .9rem;
  padding: .45rem .8rem;
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--white); background: rgba(0, 0, 0, .12); }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.site-nav a {
  display: block;
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  padding: .6rem .25rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: rgba(255, 255, 255, .5); }
/* The current page is marked by the rule, not by a colour change — every
   nav link stays full white so all of them stay legible on the crimson. */
.site-nav a[aria-current="page"] { border-bottom-color: var(--white); }

/* Below the breakpoint the nav is a panel under the bar, opened by the button. */
@media (max-width: 767px) {
  .site-nav {
    display: none;
    width: 100%;
    order: 3;
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding-block: .5rem 1rem;
  }
  .site-nav.is-open { display: block; }
  .site-header .wrap { flex-wrap: wrap; padding-block: .5rem; gap: .75rem; }
  /* Keep the wordmark and the Menu button on one row on narrow screens. */
  .brand { min-width: 0; flex: 1; }
  .brand-name { font-size: .88rem; }
  .brand .mark { width: 32px; }
  .nav-toggle { flex: none; }
}
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .site-nav ul { flex-direction: row; gap: 1.5rem; }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, #c9364b 0%, #bd3145 55%, #a82a3c 100%);
}
/* The church mark, oversized and faint, standing in for a photograph until
   there is a landscape one. On its own layer so it can carry an opacity. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/logo-mark-512.png") no-repeat right -70px center / auto 135%;
  opacity: .20;
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  z-index: -2;
}
/* Scrim, painted only when a hero photo is actually present. */
.hero:has(.hero-photo)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(60, 12, 20, .55) 0%, rgba(40, 8, 14, .8) 100%);
}
.hero .wrap {
  position: relative;
  padding-block: clamp(4rem, 14vw, 8rem);
  max-width: 46rem;
  text-align: center;
}
.hero h1 { color: var(--white); text-shadow: 0 2px 12px rgba(70, 10, 20, .4); margin-bottom: .35em; }
.hero-tagline {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  color: var(--crimson-pale);
  letter-spacing: .02em;
  margin-bottom: 1.5rem;
}
.hero-when {
  display: inline-block;
  /* A darkening chip rather than a lightening one, so the small address
     line keeps its contrast against the crimson behind it. */
  background: rgba(0, 0, 0, .20);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--radius);
  padding: .9rem 1.4rem;
  margin-bottom: 1.75rem;
  font-size: 1.02rem;
}
.hero-when strong { display: block; font-size: 1.2rem; color: var(--crimson-pale); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* Slimmer head for interior pages (no photo). */
.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, #c9364b 0%, #bd3145 55%, #a82a3c 100%);
  color: var(--white);
  padding-block: clamp(2.5rem, 7vw, 4rem);
  text-align: center;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/logo-mark-512.png") no-repeat right -60px center / auto 150%;
  opacity: .18;
}
.page-head h1 { color: var(--white); margin-bottom: .3em; }
.page-head p {
  color: var(--crimson-pale);
  font-family: var(--serif);
  font-size: 1.15rem;
  max-width: 38rem;
  margin-inline: auto;
}

/* --- Card grids --------------------------------------------------------- */

.grid { display: grid; gap: 1.25rem; }
@media (min-width: 600px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 600px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .4em; color: var(--ink); }
.card p { font-size: .97rem; color: var(--ink-mid); }

a.card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .15s ease, border-color .15s ease;
}
a.card:hover { border-color: var(--crimson); transform: translateY(-2px); }
a.card h3 { color: var(--ink); }
a.card .card-more { color: var(--crimson); font-weight: 600; font-size: .9rem; }

/* --- Media rows --------------------------------------------------------- */

.media { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 800px) {
  .media { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .media--wide-img { grid-template-columns: 1.15fr 1fr; }
}
.media figure { margin: 0; }
/* Both source photographs are portrait. Left unconstrained they tower over the
   text beside them, so cap their width and centre them in the column. */
.media figure.is-portrait { max-width: 440px; margin-inline: auto; }
.media figure.is-tall { max-width: 330px; margin-inline: auto; }
.media figure.is-portrait figcaption,
.media figure.is-tall figcaption { text-align: center; }
.media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.media figcaption { font-size: .87rem; color: var(--ink-soft); margin-top: .6rem; font-style: italic; }
.section--dark .media figcaption,
.section--band .media figcaption { color: var(--crimson-pale); }

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

.verse {
  border-left: 4px solid var(--crimson);
  padding: .25rem 0 .25rem 1.25rem;
  margin: 2rem 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--ink-mid);
}
.verse cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-top: .6rem;
}
.section--dark .verse, .section--band .verse { color: var(--white); border-color: var(--white); }
.section--dark .verse cite, .section--band .verse cite { color: var(--crimson-pale); }

/* --- Detail lists ------------------------------------------------------- */

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.facts strong {
  display: block;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--crimson);
}
.section--dark .facts strong, .section--band .facts strong { color: var(--white); }

/* --- Beliefs accordion -------------------------------------------------- */

.truths { margin-top: 2rem; border-top: 1px solid var(--line); }
.truth { border-bottom: 1px solid var(--line); }
/* Each toggle is wrapped in an h2 so the page keeps a real outline; the
   heading itself carries no styling of its own. */
.truth h2 { margin: 0; font-size: inherit; font-weight: inherit; }
.truth-toggle {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: .9rem;
  background: none;
  border: 0;
  padding: 1.15rem .25rem;
  font: inherit;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.08rem;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.truth-toggle:hover { color: var(--crimson); }
.truth-num {
  flex: none;
  width: 2rem;
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--crimson);
  font-weight: 700;
}
.truth-title { flex: 1; }
.truth-toggle .chev {
  flex: none;
  transition: transform .2s ease;
  color: var(--crimson);
  font-size: .75rem;
}
.truth-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Panels are open in the markup so the page works without JavaScript.
   script.js collapses them, then this animates the open/close by moving the
   grid row between 0fr and 1fr. `visibility` takes the closed panel out of
   the tab order and the screen-reader tree — it is delayed on close so the
   collapse is still visible, and instant on open. */
.truth-panel {
  display: grid;
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .3s ease, visibility 0s;
}
.truth-panel[data-open="false"] {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .3s ease, visibility 0s linear .3s;
}
.truth-panel > .truth-body { overflow: hidden; min-height: 0; }
/* Set while script.js does the initial collapse, so it happens instantly. */
.accordion-init .truth-panel { transition: none !important; }

/* Vertical padding here would stop the grid item collapsing past its own
   padding box — a closed panel would sit ~22px tall instead of 0, leaving a
   gap under all sixteen. Horizontal padding is safe; the bottom gap is a
   margin on the last child instead, which clips away with the content. */
.truth-body { padding: 0 .25rem 0 2.9rem; }
.truth-body > :last-child { margin-bottom: 1.4rem; }
.truth-body p { color: var(--ink-mid); }
.truth-refs { font-size: .87rem; color: var(--ink-soft); font-style: italic; }

/* --- Giving methods ----------------------------------------------------- */

.give-method { display: flex; flex-direction: column; }
.give-method p { flex: 1; }
.give-method .btn { align-self: flex-start; margin-top: .5rem; }
.disclosure {
  font-size: .9rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  margin-top: 2.5rem;
}

/* --- Contact form ------------------------------------------------------- */

.form-grid { display: grid; gap: 1.1rem; max-width: 34rem; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--crimson); }

.form-note {
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--crimson);
  border-left: 4px solid var(--crimson);
  font-size: .95rem;
  max-width: 34rem;
}

/* --- Footer ------------------------------------------------------------- */

/* Near-black, not crimson — after a page framed in red the eye needs
   somewhere to land. */
.site-footer {
  background: var(--ink);
  color: #d7cec1;
  padding-block: 3rem 2rem;
  font-size: .95rem;
}
.site-footer a { color: var(--white); }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-footer h3 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-family: var(--sans);
  color: var(--white);
  margin-bottom: .8rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .4rem; }
.site-footer address { font-style: normal; }
.footer-contact { margin-top: .8rem; }
.footer-brand { display: flex; align-items: center; gap: .7rem; color: var(--white); margin-bottom: .9rem; }
.footer-brand .mark { width: 52px; height: auto; flex: none; }
.footer-brand .brand-name { font-size: 1.15rem; }
.footer-tagline { font-family: var(--serif); color: #d7cec1; font-style: italic; }
.colophon {
  border-top: 1px solid #45454a;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: .85rem;
  color: #a9a49c;
}


/* --- Print -------------------------------------------------------------- */
/* People print directions and giving details. Strip the furniture, keep the
   facts, and spell out link targets. */

@media print {
  .verse-bar, .site-header, .nav-toggle, .site-nav,
  .hero::before, .page-head::before, .skip-link,
  .hero-actions, .form-grid, .form-note { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }

  .hero, .page-head, .section--dark, .section--band, .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
  .hero h1, .page-head h1, .hero-tagline, .page-head p,
  .section--dark h2, .section--band h2, .section--dark h3, .section--band h3,
  .site-footer h3, .footer-tagline, .footer-verse { color: #000 !important; }

  .hero, .page-head { padding-block: 1rem; }
  .section { padding-block: 1rem; }
  .card { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .media img { box-shadow: none; }

  /* Spell out where links actually go */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }

  /* Print all sixteen truths. The panels collapse via grid-template-rows and
     visibility now, not the [hidden] attribute, so both have to be undone. */
  .truth-panel,
  .truth-panel[data-open="false"] {
    grid-template-rows: 1fr !important;
    visibility: visible !important;
  }
  .truth-panel > .truth-body { overflow: visible !important; }
  .truth-toggle .chev { display: none; }
}


/* --- Scroll reveals ----------------------------------------------------- */
/* `js-reveal` is added to <html> by an inline script in the head, so these
   start hidden before the first paint rather than flashing in. script.js
   removes the class entirely when reveals cannot run or motion is reduced. */

/* The hidden state is selected structurally rather than by a class the script
   adds, so it applies while the page is being parsed. Adding the class from
   JavaScript instead would let the content paint at full opacity and then
   visibly fade OUT before fading in. JavaScript only ever adds .is-visible. */

.js-reveal .section .wrap > *:not(.grid):not(.media),
.js-reveal .section .wrap > .grid > *,
.js-reveal .section .wrap > .media > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}

.js-reveal .section .wrap > *.is-visible:not(.grid):not(.media),
.js-reveal .section .wrap > .grid > *.is-visible,
.js-reveal .section .wrap > .media > *.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Countdown ---------------------------------------------------------- */

.countdown {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .7rem 1.15rem;
  border-left: 4px solid var(--crimson);
  background: var(--white);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--ink);
  box-shadow: var(--shadow);
}

/* --- Map and directions -------------------------------------------------- */

.map-wrap { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 800px) {
  /* Map beside the address rather than a full-width band — at full width it
     dominated a section that is really about the welcome, not the geography. */
  .map-wrap { grid-template-columns: 1fr 1fr; align-items: start; }
}
.map-wrap > h3 { grid-column: 1 / -1; margin-bottom: 0; }

.map-embed {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 460px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--sand);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.map-details p { font-size: .97rem; color: var(--ink-mid); }
.map-details address { font-style: normal; margin-bottom: .9rem; }
.directions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.directions .btn { font-size: .92rem; padding: .65rem 1.15rem; }