/* ==========================================================================
   United With Christ Church — Auburn, NY
   Single stylesheet. No build step, no preprocessor.

   Warm white ground, hairline rules bounding every block, deep crimson
   accent, high-contrast serif display. Nothing floats.

   Things you may want to change are marked with a comment beginning
   "EDIT:". Search this file for that word.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Palette — six values.
     Contrast, checked against WCAG 2.1 AA:
       --ink     on --paper   15.6:1
       --muted   on --paper    5.9:1
       --crimson on --paper    8.3:1   (safe as text, not only as a fill)
       #FFF      on --crimson  8.9:1   */
  --paper:   #FDFBF7;   /* page ground */
  --panel:   #F3EEE6;   /* the one step down, for alternating blocks */
  --ink:     #17140F;   /* body and headline text */
  --crimson: #8E1B24;   /* the single accent */
  --muted:   #6B6157;   /* secondary text */
  --line:    #DCD3C6;   /* hairlines */

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1340px;
  --gutter: clamp(16px, 3.4vw, 40px);
  --band: clamp(40px, 5vw, 74px);

  /* EDIT: the big photo at the top of the home page.
     Save your picture into the assets folder as hero.jpg and this needs no
     change. This same photo also stands in for any other picture you have
     not added yet. */
  --hero-image: url("../assets/hero.jpg");
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body);
  /* 17px base. The congregation skews older — this never goes below 17px. */
  font-size: 1.0625rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, iframe, svg { max-width: 100%; }
img { display: block; height: auto; border: 0; }
figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; margin: 0; }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--crimson); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
/* On crimson and on photos, a crimson ring would vanish. */
.five :focus-visible, .hero :focus-visible, .plate :focus-visible,
.pagehead :focus-visible, .foot :focus-visible { outline-color: #FFF; }

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--crimson); color: #FFF; padding: 12px 20px;
  font-weight: 700; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* Visible to screen readers, invisible on screen. Used where a section needs
   a heading for the document outline but the design shows a label instead. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

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

.eyebrow {
  font-size: .625rem; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; margin: 0; color: var(--crimson);
}

/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 30px; border: 1px solid currentColor;
  font-family: var(--font-body); font-size: .625rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  text-align: center; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--ink:hover { background: transparent; color: var(--ink); }
.btn--crimson { background: var(--crimson); border-color: var(--crimson); color: #FFF; }
.btn--crimson:hover { background: transparent; color: var(--crimson); }
.btn--light { color: #FFF; background: transparent; }
.btn--light:hover { background: #FFF; color: var(--ink); }

/* --------------------------------------------------------------------------
   4. HEADER + FACT STRIP
   The nav markup is byte-identical on every page; the current page is marked
   by js/main.js from the URL, so the copies can never drift apart.
   -------------------------------------------------------------------------- */

.bar { border-bottom: 1px solid var(--line); background: var(--paper); }
.bar__in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-block: 12px; }
.brand { display: inline-block; text-decoration: none; }
.brand img { width: 54px; }
.brand__fallback { display: none; font-family: var(--font-display); font-size: 1.125rem; letter-spacing: .04em; text-transform: uppercase; }
.brand--textonly img { display: none; }
.brand--textonly .brand__fallback { display: inline-block; }

.nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(10px,1.8vw,24px); list-style: none; margin: 0; padding: 0; }
.nav-link {
  font-size: .625rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav-link:hover { color: var(--crimson); }
.nav-link.is-current { border-bottom-color: var(--crimson); }
.nav-give { background: var(--crimson); color: #FFF; padding: 8px 18px; border-bottom: 0; }
.nav-give:hover { background: var(--ink); color: #FFF; }
.nav-give.is-current { border-bottom: 0; }

/* Social icons in the header, sitting to the right of the menu. */
.bar__social { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.bar__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; color: var(--ink);
  transition: color .18s ease;
}
.bar__social a:hover { color: var(--crimson); }
.bar__social svg { width: 17px; height: 17px; fill: currentColor; display: block; }

.strap { border-bottom: 1px solid var(--line); background: var(--panel); }
.strap__in { display: grid; grid-template-columns: repeat(2,1fr); }
@media (min-width: 800px) { .strap__in { grid-template-columns: repeat(4,1fr); } }
.strap__cell { padding: 12px var(--gutter); border-left: 1px solid var(--line); }
.strap__cell:first-child { border-left: 0; }
@media (max-width: 799px) { .strap__cell:nth-child(odd) { border-left: 0; } }
.strap__k { font-size: .5625rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; }
.strap__v { font-family: var(--font-display); font-size: 1.0625rem; margin: 0; }

/* --------------------------------------------------------------------------
   5. HERO (home page)
   -------------------------------------------------------------------------- */

.hero { position: relative; border-bottom: 1px solid var(--line); }
.hero__img { position: relative; min-height: clamp(460px, 76svh, 780px); background: var(--ink); }
.hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
/* Two dark layers over the photo. Taking a pure-white pixel as the worst
   case, the middle of the frame sits near 70% coverage, which puts white
   text above 4.5:1 for the small print and far above it for the headline. */
.hero__img::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 88% 70% at 50% 52%, rgba(18,14,10,.42) 0%, rgba(18,14,10,.16) 66%, rgba(18,14,10,0) 100%),
    linear-gradient(0deg, rgba(18,14,10,.46), rgba(18,14,10,.46));
}
.hero__over {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #FFF; padding: var(--band) var(--gutter);
}
.hero__over .eyebrow { color: #FFF; opacity: .88; margin-bottom: 16px; }
.hero__title { font-size: clamp(2.25rem, 7vw, 5.5rem); line-height: .98; text-transform: uppercase; margin: 0 0 12px; max-width: 15ch; text-wrap: balance; }
.hero__sub { font-family: var(--font-display); font-style: italic; font-size: clamp(1.125rem,2.4vw,1.75rem); margin: 0 0 26px; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* --------------------------------------------------------------------------
   6. PAGE HEAD (inner pages) — the crimson block, no photo
   -------------------------------------------------------------------------- */

.pagehead { background: var(--crimson); color: #FFF; text-align: center; padding: var(--band) var(--gutter); border-bottom: 1px solid var(--line); }
.pagehead .eyebrow { color: rgba(255,255,255,.78); margin-bottom: 16px; }
.pagehead h1 { font-size: clamp(1.875rem, 5vw, 3.75rem); line-height: 1.04; text-transform: uppercase; max-width: 22ch; margin: 0 auto 14px; text-wrap: balance; }
.pagehead__note { font-family: var(--font-display); font-style: italic; font-size: clamp(1rem,2vw,1.375rem); margin: 0; opacity: .92; }

/* --------------------------------------------------------------------------
   7. WELCOME — text beside a photo, crimson card overlapping
   -------------------------------------------------------------------------- */

.welcome { border-bottom: 1px solid var(--line); }
.welcome__in { display: grid; grid-template-columns: 1fr; }
@media (min-width: 960px) { .welcome__in { grid-template-columns: 1fr 1fr; } }
.welcome__text { padding: var(--band) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.welcome__text .eyebrow { margin-bottom: 16px; }
.welcome__text h2 { font-size: clamp(1.875rem, 4vw, 3.125rem); line-height: 1.06; text-transform: uppercase; margin: 0 0 20px; max-width: 16ch; text-wrap: balance; }
.welcome__text h2 em { font-style: italic; text-transform: none; color: var(--crimson); }
.welcome__text p { color: var(--muted); max-width: 46ch; }
.welcome__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.welcome__media { position: relative; min-height: 380px; overflow: hidden; }
.welcome__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The overlapping card. Carries real information, not decoration. */
.pin { position: absolute; left: 0; bottom: 0; z-index: 2; background: var(--crimson); color: #FFF; padding: 20px clamp(20px,3vw,30px); max-width: 19rem; }
.pin__k { font-size: .5625rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; opacity: .8; margin: 0 0 6px; }
.pin__v { font-family: var(--font-display); font-size: clamp(1.125rem,2vw,1.5rem); line-height: 1.3; margin: 0; }

/* --------------------------------------------------------------------------
   8. RHYTHM — the two service times as a track
   -------------------------------------------------------------------------- */

.rhythm { background: var(--panel); border-bottom: 1px solid var(--line); }
.rhythm__head { padding: var(--band) var(--gutter) 6px; }
.rhythm__head h2 { font-size: clamp(1.625rem,3.4vw,2.5rem); text-transform: uppercase; margin-top: 8px; }
.rhythm__track { display: grid; grid-template-columns: 1fr; padding-bottom: var(--band); }
@media (min-width: 820px) { .rhythm__track { grid-template-columns: 1fr 1fr; } }
.stop { position: relative; padding: 28px var(--gutter) 0; border-top: 1px solid var(--line); margin-top: 26px; }
@media (min-width: 820px) { .stop + .stop { border-left: 1px solid var(--line); } }
.stop::before { content: ""; position: absolute; top: -6px; left: var(--gutter); width: 11px; height: 11px; border-radius: 50%; background: var(--crimson); }
.stop__t { font-family: var(--font-display); font-size: clamp(2rem,4.6vw,3.25rem); line-height: 1; margin: 0 0 6px; }
.stop__l { font-size: .6875rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--crimson); margin: 0 0 12px; }
.stop__d { color: var(--muted); font-size: .9375rem; margin: 0; max-width: 42ch; }

/* --------------------------------------------------------------------------
   9. FIVE-FOLD — full-bleed crimson row
   -------------------------------------------------------------------------- */

.five { background: var(--crimson); color: #FFF; }
.five__head { padding: var(--band) var(--gutter) 22px; border-bottom: 1px solid rgba(255,255,255,.2); }
.five__head .eyebrow { color: rgba(255,255,255,.75); }
.five__head h2 { font-size: clamp(1.625rem,3.4vw,2.5rem); text-transform: uppercase; margin-top: 8px; }
.five__row { display: grid; grid-template-columns: 1fr; }
@media (min-width: 620px) { .five__row { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px) { .five__row { grid-template-columns: repeat(5,1fr); } }
.five__cell { padding: clamp(22px,2.6vw,32px) var(--gutter); border-top: 1px solid rgba(255,255,255,.2); }
@media (min-width: 620px) { .five__cell:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.2); } }
@media (min-width: 1040px) {
  .five__cell { border-top: 0; border-right: 1px solid rgba(255,255,255,.2) !important; }
  .five__cell:last-child { border-right: 0 !important; }
}
.five__n { font-family: var(--font-display); font-size: 1rem; opacity: .62; margin: 0 0 10px; }
.five__t { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; }
.five__d { font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0; }
.five__foot { padding: 20px var(--gutter); border-top: 1px solid rgba(255,255,255,.2); }
.five__foot a { font-size: .625rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 3px; }

/* --------------------------------------------------------------------------
   10. PLATE — a line of scripture over a darkened photo
   -------------------------------------------------------------------------- */

.plate { position: relative; border-bottom: 1px solid var(--line); background: var(--ink); }
.plate img { width: 100%; height: clamp(320px,44vw,540px); object-fit: cover; object-position: center 38%; }
.plate__over {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  color: #FFF; padding: var(--band) var(--gutter);
  /* Heavy enough that white type clears AA over the brightest pixel here. */
  background: linear-gradient(0deg, rgba(18,14,10,.66), rgba(18,14,10,.52));
}
.plate__over blockquote p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.375rem,3.4vw,2.5rem); line-height: 1.34; max-width: 24ch; margin: 0 auto 16px; text-wrap: balance; }
.plate__over cite { font-style: normal; font-size: .625rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; opacity: .86; }

/* --------------------------------------------------------------------------
   11. PANELS — two ruled cells side by side
   -------------------------------------------------------------------------- */

.visit { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--line); }
@media (min-width: 880px) { .visit { grid-template-columns: 1fr 1fr; } }
.panel { padding: var(--band) var(--gutter); border-bottom: 1px solid var(--line); }
.panel:last-child { border-bottom: 0; }
@media (min-width: 880px) {
  .panel { border-bottom: 0; }
  .panel + .panel { border-left: 1px solid var(--line); }
}
.panel--tint { background: var(--panel); }
.panel__n { font-family: var(--font-display); font-size: 1rem; color: var(--crimson); margin: 0 0 10px; }
.panel h2 { font-size: clamp(1.5rem,3vw,2.125rem); text-transform: uppercase; margin: 0 0 16px; }
.panel p { color: var(--muted); max-width: 48ch; }
.panel__media { margin-top: 22px; }
.panel__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }

/* --------------------------------------------------------------------------
   12. FIND US — map beside a ruled detail list
   -------------------------------------------------------------------------- */

.find { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--line); }
@media (min-width: 940px) { .find { grid-template-columns: 1fr 1fr; } }
.find__map { min-height: 340px; background: var(--panel); }
.find__map iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; filter: grayscale(1) contrast(1.05); }
.find__detail { padding: var(--band) var(--gutter); }
.find__detail h2 { font-size: clamp(1.5rem,3vw,2.125rem); text-transform: uppercase; margin: 8px 0 20px; }
.dl { display: grid; grid-template-columns: 1fr; }
.dl__row { display: grid; grid-template-columns: 1fr; gap: 2px; padding-block: 13px; border-top: 1px solid var(--line); }
@media (min-width: 520px) { .dl__row { grid-template-columns: 7rem 1fr; gap: 14px; align-items: baseline; } }
.dl__row:last-child { border-bottom: 1px solid var(--line); }
.dl__k { font-size: .5625rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin: 0; }
.dl__v { margin: 0; }
.dl__v a { text-decoration: none; border-bottom: 1px solid transparent; }
.dl__v a:hover { border-bottom-color: var(--crimson); }
.find__detail .btn { margin-top: 22px; }

/* --------------------------------------------------------------------------
   13. CLOSING CALL
   -------------------------------------------------------------------------- */

.call { text-align: center; padding: var(--band) var(--gutter); border-bottom: 1px solid var(--line); }
.call img { width: 54px; margin: 0 auto 14px; }
.call h2 { font-size: clamp(1.5rem,4vw,2.875rem); line-height: 1.16; text-transform: uppercase; max-width: 20ch; margin: 0 auto 20px; text-wrap: balance; }
.call em { font-style: italic; text-transform: none; color: var(--crimson); }

/* --------------------------------------------------------------------------
   14. PROSE, LISTS AND ARTICLES (inner pages)
   -------------------------------------------------------------------------- */

.prose { padding: var(--band) var(--gutter); border-bottom: 1px solid var(--line); }
.prose--tint { background: var(--panel); }
.prose__in { max-width: 64ch; margin-inline: auto; }
.prose h2 { font-size: clamp(1.625rem,3.4vw,2.5rem); text-transform: uppercase; margin: 8px 0 18px; }
.prose p { color: var(--muted); }

.link-arrow {
  display: inline-block; margin-top: .6em;
  font-size: .625rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; text-decoration: none; color: var(--crimson);
  border-bottom: 1px solid var(--crimson); padding-bottom: 4px;
  transition: opacity .18s ease;
}
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { opacity: .68; }

/* Numbered statements (About) */
.rows { border-bottom: 1px solid var(--line); }
.rows__head { padding: var(--band) var(--gutter) 18px; }
.rows__head h2 { font-size: clamp(1.625rem,3.4vw,2.5rem); text-transform: uppercase; margin-top: 8px; }
.rows__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 12px;
  padding: 18px var(--gutter); border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
@media (min-width: 880px) { .row { grid-template-columns: 3rem 14rem 1fr; gap: 22px; align-items: baseline; } }
.row__n { font-family: var(--font-display); color: var(--crimson); margin: 0; }
.row__t { font-family: var(--font-display); font-size: 1.1875rem; text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.row__d { color: var(--muted); font-size: .9375rem; margin: 0; }
/* When a row has no separate term, let the text span the remaining columns. */
.row--wide .row__d { font-family: var(--font-display); font-size: clamp(1.0625rem,2vw,1.375rem); color: var(--ink); line-height: 1.4; }
@media (min-width: 880px) { .row--wide .row__d { grid-column: 2 / -1; } }

/* Statement of Faith articles */
.creed { border-bottom: 1px solid var(--line); }
.creed__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.creed__item { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 24px var(--gutter); border-bottom: 1px solid var(--line); }
.creed__item:last-child { border-bottom: 0; }
@media (min-width: 880px) { .creed__item { grid-template-columns: 3rem 15rem 1fr; gap: 24px; } }
.creed__n { font-family: var(--font-display); color: var(--crimson); margin: 0; }
.creed__t { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.creed__d { color: var(--muted); font-size: .9375rem; margin: 0; max-width: 66ch; }

/* --------------------------------------------------------------------------
   15. OPTIONAL PHOTO STRIP
   Every frame here is optional. js/main.js removes any whose picture is
   missing, and removes the whole strip if none have been added.
   -------------------------------------------------------------------------- */

.gallery { border-bottom: 1px solid var(--line); }
.gallery__head { padding: var(--band) var(--gutter) 20px; }
.gallery__head h2 { font-size: clamp(1.625rem,3.4vw,2.5rem); text-transform: uppercase; margin-top: 8px; }
/* auto-fit rather than a fixed four, so a strip still fills the row when one
   of its pictures has not been added and js/main.js has removed that frame. */
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); }
@media (min-width: 820px) { .gallery__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.gallery__grid figure { background: var(--paper); }
.gallery__grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */

.foot { background: var(--ink); color: rgba(253,251,247,.82); }
.foot__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .foot__grid { grid-template-columns: auto 1fr auto; align-items: center; } }
.foot__cell { padding: 22px var(--gutter); border-bottom: 1px solid rgba(253,251,247,.14); }
@media (min-width: 900px) { .foot__cell { border-bottom: 0; } .foot__cell + .foot__cell { border-left: 1px solid rgba(253,251,247,.14); } }
.foot img { width: 56px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0 0 10px; padding: 0; font-size: .625rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.foot__links a { text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.foot__links a:hover { border-bottom-color: rgba(253,251,247,.7); }
.foot__contact { font-style: normal; font-size: .8125rem; color: rgba(253,251,247,.7); margin: 0; }
.foot__contact a { text-decoration: none; }
.foot__contact a:hover { text-decoration: underline; }
.foot__contact .sep { padding-inline: 8px; opacity: .45; }
.foot__meta { font-size: .75rem; margin: 0; color: rgba(253,251,247,.58); }
.foot__social { display: flex; gap: 10px; list-style: none; margin: 0 0 12px; padding: 0; }
.foot__social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(253,251,247,.34); color: #FFF; transition: background-color .18s ease, color .18s ease; }
.foot__social a:hover { background: #FFF; color: var(--ink); }
.foot__social svg { width: 15px; height: 15px; fill: currentColor; display: block; }

/* Legal statement — full-width strip sitting under the three footer cells. */
.foot__legal { padding: 20px var(--gutter) 26px; border-top: 1px solid rgba(253,251,247,.14); }
.foot__legal-h { font-size: .625rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 10px; color: rgba(253,251,247,.72); }
.foot__legal p { font-size: .6875rem; line-height: 1.65; margin: 0 0 8px; max-width: 90ch; color: rgba(253,251,247,.52); }
.foot__legal p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   17. SCROLL REVEAL
   Only armed when JS is present (html.js), so content is never hidden from
   someone with JavaScript switched off.
   -------------------------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .nav-link, .link-arrow, .skip-link, .foot__links a, .foot__social a, .dl__v a { transition: none; }
}

/* --------------------------------------------------------------------------
   18. NARROW SCREENS
   Five nav items only, so the row wraps rather than hiding behind a
   hamburger. Fewer moving parts, nothing to open.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .bar__in { justify-content: center; gap: 12px; }
  .nav-list { justify-content: center; gap: 12px 16px; }
}
@media (max-width: 420px) {
  .nav-link { font-size: .5625rem; letter-spacing: .14em; }
  .nav-give { padding: 7px 14px; }
  /* Long email address must never push the page sideways at 320px. */
  .dl__v, .foot__contact { overflow-wrap: anywhere; }
  .foot__contact .sep { display: none; }
  .foot__contact a { display: block; margin-bottom: 4px; }
}

/* --------------------------------------------------------------------------
   19. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .bar, .hero__acts, .skip-link, .find__map, .foot__social, .gallery { display: none; }
  body { background: #FFF; color: #000; font-size: 12pt; }
  .hero__img { min-height: 0; }
  .hero__over { position: static; color: #000; padding: 16px 0; }
  .hero__img img, .plate img { display: none; }
  .plate__over { position: static; color: #000; background: none; padding: 16px 0; }
  .five, .pagehead, .call { background: #FFF; color: #000; }
  .five__t, .five__d, .five__n, .pagehead h1 { color: #000; }
  a { text-decoration: underline; }
}