/* ==========================================================================
   Editorial layer (October 2026 design review).
   Loaded LAST on the public pages (not certificate, admin or
   reset-password); assets/css/editorial-pages.css follows it with the
   inner-page details.

   Owner rules: no colour changes - every colour here is an existing variable
   from styles.css (or onyx rgb 12,40,31 at an alpha, as styles.css already
   does). The 019 whole-block transitions (block rise-ins and brush wipes) stay.

   What it changes: type scale, spacing, layout, borders, radii, shadows and
   motion. What it removes: the ornament layers (grain, torn edges, heading
   flourishes, double hairline frames, drop caps) and the bouncy easing.
   styles.css and renaissance.css are left untouched (tests pin their text).
   ========================================================================== */

:root {
  --ed-font-title: "Fraunces", Georgia, "Times New Roman", serif;   /* titles 20-28px: Cormorant is too thin there */
  --ed-fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
  --ed-fs-h1: clamp(2.5rem, 1.5rem + 3.6vw, 4.25rem);
  --ed-fs-h2: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  --ed-fs-h3: clamp(1.375rem, 1.2rem + .55vw, 1.625rem);
  --ed-fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --ed-fs-meta: .875rem;
  --ed-fs-stat: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  --ed-fs-quote: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem);
  --ed-section: clamp(3.5rem, 2rem + 4.5vw, 6.5rem);
  --ed-section-tight: clamp(3rem, 2rem + 3vw, 5rem);
  --ed-head-gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --ed-grid-gap: clamp(1rem, .5rem + 1.5vw, 2rem);
  --ed-r-card: 12px;
  --ed-r-ctl: 6px;
  --ed-sh-1: 0 1px 2px rgba(12, 40, 31, .06), 0 4px 14px rgba(12, 40, 31, .05);
  --ed-sh-2: 0 10px 30px rgba(12, 40, 31, .12);
  --ed-scrim: linear-gradient(to top, rgba(12, 40, 31, .78) 0%, rgba(12, 40, 31, .38) 42%, rgba(12, 40, 31, 0) 72%);
  --ed-dur-fast: 160ms;
  --ed-dur: 280ms;
  --ed-dur-slow: 560ms;
  --ed-ease: cubic-bezier(.16, 1, .3, 1);
  --rn-bounce: cubic-bezier(.16, 1, .3, 1);   /* the overshoot easing is retired */
}
html { scroll-padding-top: calc(var(--navbar-h, 76px) + 16px); }   /* focus and anchors never hide under the sticky header */

/* ==========================================================================
   P2. Ornament layers off (grain, torn edges, flourishes, frames, drop caps)
   ========================================================================== */
body:not(#ed) :is(.section, .section--tint, .impact-strip, .news-band, .card, .quote-card, .overlap-card,
  .form-card, .news-card, .job-card) { background-image: none; }
.section--tint::before, .section--tint::after { display: none; }
.section-head h2::after, .page-band h1::after { content: none; }
.page-band::before, .page-band::after { content: none; }
.rn-fx { display: none; }
.lead::first-letter, .rn-dropcap::first-letter { float: none; font: inherit; padding: 0; color: inherit; }
body:not(#ed) .hero { border-bottom: 0; }
body:not(#ed) :is(.card, .quote-card, .overlap-card, .form-card, .news-card, .job-card, .app-platform) { border-color: var(--line); }
.navbar { border-bottom-color: var(--line); }
/* The tiny blurred previews behind gallery photos cover the frame instead of tiling while a photo loads. */
img[src*="/opt/gallery-"] { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* ==========================================================================
   P3. Rhythm: generous, consistent vertical space
   ========================================================================== */
body:not(#ed) .section { padding-block: var(--ed-section); }
body:not(#ed) .section--tight { padding-block: var(--ed-section-tight); }
body:not(#ed) .section-head { margin-bottom: var(--ed-head-gap); gap: 24px; align-items: flex-end; }
body:not(#ed) .section-head:not(.section-head--center) { text-align: left; }
body:not(#ed) main :is(.grid, .news-list) { gap: var(--ed-grid-gap); }
body:not(#ed) main { line-height: 1.6; }

/* ==========================================================================
   P4. Type: calm oversized serif display, clean sans for reading
   (the Easy-to-read font switch still wins: it sets body.accessibility-font)
   ========================================================================== */
html body:not(.accessibility-font):not(#ren) .hero-title {
  font-size: var(--ed-fs-display); font-weight: 500; line-height: .98; letter-spacing: -.015em;
  max-width: 13ch; text-shadow: none; text-wrap: balance;
}
html body:not(.accessibility-font):not(#ren) .page-band h1 {
  font-size: var(--ed-fs-h1); font-weight: 500; line-height: 1.02; letter-spacing: -.015em; max-width: 18ch; text-wrap: balance;
}
html body:not(.accessibility-font):not(#ren) :is(.section-head h2, .head-title-row h2, .cta-band-body h2, .news-band h2) {
  font-size: var(--ed-fs-h2); font-weight: 500; line-height: 1.05; letter-spacing: -.012em; text-wrap: balance;
}
html body:not(.accessibility-font):not(#ren) :is(.card h3, .card-body h3, .icon-card h3, .team-card h3, .news-card h3,
  .story-body h3, .form-card h3, .pay-card h3, .events-panel h3, .campaign-card h3, .job-card h3, .app-faq__item h3) {
  font-family: var(--ed-font-title); font-weight: 600; font-size: var(--ed-fs-h3); line-height: 1.2; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
html body:not(.accessibility-font):not(#ren) :is(.page-band p, .hero-blurb, .section-head p, .lead) {
  font-size: var(--ed-fs-lead); line-height: 1.55;
}
html body:not(.accessibility-font):not(#ren) .section-head p { max-width: 56ch; }
html body:not(.accessibility-font):not(#ren) .quote-card blockquote {
  font-size: var(--ed-fs-quote); font-weight: 500; line-height: 1.2; text-wrap: balance;
}
html body:not(.accessibility-font):not(#ren) :is(.impact-stat strong, .fact strong) {
  font-family: var(--font-display); font-size: var(--ed-fs-stat); font-weight: 500; line-height: .95; font-variant-numeric: lining-nums;
}
html body:not(.accessibility-font):not(#ren) .brand-name { font-size: 1.75rem; font-weight: 600; }
html body:not(.accessibility-font):not(#ren) .hero-kicker {
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.25rem;
  letter-spacing: .01em; text-transform: none;
}
body:not(#ed) :is(.crumbs, .news-card__meta, .news-card__date, .topbar, .footer-legal) { font-size: var(--ed-fs-meta); }
body:not(#ed) .footer-cols h3 { font-family: var(--font); font-weight: 600; font-size: 1rem; color: var(--gold); letter-spacing: 0; }
body:not(#ed) .footer-cols :is(a, li) { font-size: .9375rem; }

/* ==========================================================================
   P5. Buttons, text links, form fields
   ========================================================================== */
body:not(#ed) :is(.btn, .action-btn) {
  min-height: 48px; min-width: 0; padding: 0 28px; gap: 8px;
  border-radius: var(--ed-r-ctl); border-width: 1.5px; border-style: solid;
  font-size: 1rem; line-height: 1.2; font-weight: 600; letter-spacing: 0; text-transform: none;
  white-space: normal; text-align: center;
  transition: transform var(--ed-dur-fast) var(--ed-ease), background-color var(--ed-dur-fast) ease,
    color var(--ed-dur-fast) ease, border-color var(--ed-dur-fast) ease;
}
body:not(#ed) :is(.btn, .action-btn) .icon { width: 1.1em; height: 1.1em; transition: transform var(--ed-dur-fast) var(--ed-ease); }
body:not(#ed) :is(.btn, .action-btn):hover { transform: translateY(-1px); box-shadow: var(--ed-sh-1); }
body:not(#ed) :is(.btn, .action-btn):active { transform: none; box-shadow: none; }
body:not(#ed) :is(.btn-gold, .btn--primary, .action-btn--money) { background: var(--gold); color: var(--onyx); border-color: var(--gold); }
body:not(#ed) :is(.btn-gold, .btn--primary, .action-btn--money):hover { background: var(--gold); color: var(--onyx); }
body:not(#ed) :is(.btn-gold, .btn--primary, .action-btn--money):hover .icon:last-child { transform: translateX(3px); }
body:not(#ed) .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
body:not(#ed) .btn-outline:hover { background: var(--paper-alt); color: var(--ink); border-color: var(--ink); }
body:not(#ed) :is(.btn-outline-light, .action-btn--volunteer) { background: transparent; color: var(--white); border-color: var(--white); }
body:not(#ed) :is(.btn-outline-light, .action-btn--volunteer):hover { background: var(--white); color: var(--onyx); border-color: var(--white); }
body:not(#ed) .btn-dark { background: var(--onyx); color: var(--white); border-color: var(--onyx); }
body:not(#ed) .btn-sm { min-height: 40px; padding: 0 18px; font-size: .9375rem; }
body:not(#ed) .btn-block { width: 100%; }

body:not(#ed) :is(.head-link, .card-link, .impact-link, .news-card__more) {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--pine-bright); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
body:not(#ed) :is(.head-link, .card-link, .impact-link, .news-card__more):hover { text-decoration-thickness: 2px; color: var(--pine); }
body:not(#ed) :is(.head-link, .card-link, .impact-link, .news-card__more) :is(.icon, span[aria-hidden]) {
  transition: transform var(--ed-dur-fast) var(--ed-ease);
}
body:not(#ed) :is(.head-link, .card-link, .impact-link, .news-card__more):hover :is(.icon, span[aria-hidden]) { transform: translateX(4px); }

body:not(#ed) :is(.field input, .field select, .field textarea, .news-form input) {
  min-height: 52px; padding: 14px 16px; font-size: 1rem;
  background-color: var(--cream-card); border: 1px solid var(--line-strong); border-radius: var(--ed-r-ctl);
}
body:not(#ed) .field textarea { min-height: 132px; }
body:not(#ed) :is(.field input, .field select, .field textarea, .news-form input):hover { border-color: var(--ink-soft); }
body:not(#ed) :is(.field input, .field select, .field textarea, .news-form input):focus { border-color: var(--pine-bright); }
body:not(#ed) .form-card { border-radius: var(--ed-r-card); border: 1px solid var(--line); box-shadow: none; }

/* ==========================================================================
   P6. Home hero: the faces show, the type breathes
   ========================================================================== */
body:not(#ed) .hero-slides { min-height: max(var(--hero-need, 0px), clamp(540px, calc(100svh - 160px), 760px)); }   /* --hero-need: set by script.js from the tallest slide */
body:not(#ed) .hero-slide::after {
  /* Dark enough under the whole text column for 4.5:1 even over a white banner in the photo; clear beyond it. */
  background: linear-gradient(90deg, rgba(12, 40, 31, .88) 0%, rgba(12, 40, 31, .76) 45%, rgba(12, 40, 31, .35) 62%, rgba(12, 40, 31, 0) 78%),
    linear-gradient(0deg, rgba(12, 40, 31, .5), rgba(12, 40, 31, 0) 30%);
}
body:not(#ed) .hero-content .container { padding-top: 48px; padding-bottom: 112px; }
body:not(#ed) .hero-content .container > * { max-width: 600px; }
body:not(#ed) .hero-blurb { border-left: 0; padding-left: 0; max-width: 42ch; color: var(--text-on-dark); }
body:not(#ed) .hero-actions { gap: 12px; }
body:not(#ed) .hero-actions .action-btn--money { order: -1; }
body:not(#ed) .hero-float { display: none; }   /* the same numbers sit in the proof row just below */
body:not(#ed) .hero-ctrl { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: var(--white); }
body:not(#ed) .hero-ctrl:hover { background: rgba(255, 255, 255, .12); }
body:not(#ed) .hero-dots { display: flex; gap: 6px; }
body:not(#ed) .hero-dot {
  position: relative; width: 28px; height: 24px; padding: 0; border: 0; border-radius: 0; background: transparent;
}
body:not(#ed) .hero-dot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; translate: 0 -50%;
  background: rgba(255, 255, 255, .55);
}
body:not(#ed) .hero-dot[aria-current="true"]::before { background: var(--gold); }

/* Computers: an editorial split - the words on a solid panel, the photograph clear beside it (no shade over faces). */
@media (min-width: 1200px) {
  body:not(#ed) .hero-slides { background: var(--pine-dark); }
  body:not(#ed) .hero-slide img { inset: 0 0 0 44%; width: auto; height: 100%; object-position: 80% 35%; }
  body:not(#ed) .hero-slide::after {
    background: linear-gradient(90deg, var(--pine-dark) 44%, rgba(11, 43, 33, .55) 49%, rgba(11, 43, 33, 0) 58%);   /* --pine-dark at an alpha */
  }
  body:not(#ed) .hero-content .container > * { max-width: min(520px, 34vw); }
}
/* While the photographs crossfade, the outgoing words leave quickly so two headlines never overlap. */
body:not(#ed) .hero-slide:not(.is-active) .hero-content { opacity: 0; transition: opacity .2s ease; }
body:not(#ed) .hero-slide.is-active .hero-content { opacity: 1; transition: opacity .45s ease .25s; }

/* ==========================================================================
   P7. Proof row and ticker: one calm band instead of three heavy ones
   ========================================================================== */
body:not(#ed) .impact-strip { background-color: var(--paper); border-block: 1px solid var(--line); container-type: inline-size; }
body:not(#ed) .impact-strip::after { display: none; }
body:not(#ed) .impact-strip__inner { min-height: 0; padding-block: 40px; grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(120px, 1fr)) auto; gap: 32px; }
body:not(#ed) .impact-intro { border-right-color: var(--line-strong); }
body:not(#ed) .impact-intro .eyebrow { font-family: var(--font-display); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.25rem; font-weight: 500; color: var(--pine); }
body:not(#ed) .impact-intro .eyebrow::before { display: none; }
body:not(#ed) .impact-stat strong { color: var(--pine); }
body:not(#ed) .impact-stat { min-width: 0; }
body:not(#ed) .impact-stat span { overflow-wrap: anywhere; }
body:not(#ed) .impact-stat span { font-size: .9375rem; font-weight: 500; color: var(--ink-soft); }
body:not(#ed) .impact-stat + .impact-stat { border-left: 1px solid var(--line-strong); padding-left: 24px; }

/* Use the available reading width, including the accessibility text zoom. */
@container (max-width: 70rem) {
  body:not(#ed) .impact-strip__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
  body:not(#ed) .impact-intro { grid-column: 1 / -1; border-right: 0; padding-right: 0; }
  body:not(#ed) .impact-link { grid-column: 1 / -1; }
}

body:not(#ed) .ticker { background: var(--paper); color: var(--ink); border-block: 0; border-bottom: 1px solid var(--line); }
body:not(#ed) .ticker::after { background: var(--paper); }
body:not(#ed) .ticker__item { color: var(--ink-soft); letter-spacing: .08em; }
body:not(#ed) .ticker__item::after { background: var(--gold-deep); }
body:not(#ed) .ticker__toggle { background: var(--paper); color: var(--ink); border-color: var(--line-strong); border-radius: var(--ed-r-ctl); }
body:not(#ed) .ticker__toggle:hover { background: var(--paper-alt); }

/* ==========================================================================
   P9. Three card kinds and one chip style
   ========================================================================== */
/* One chip: green tint, pine text, hairline (category colours removed) */
body:not(#ed) .pill:not(.pill--dark) { background: var(--green-tint); color: var(--pine); border: 1px solid var(--line); }
body:not(#ed) .icon-chip { background: none; color: var(--pine); width: auto; height: auto; border: 0; border-radius: 0; align-self: flex-start; justify-content: flex-start; }
body:not(#ed) .icon-chip .icon { width: 32px; height: 32px; stroke-width: 1.75; }

/* 1. Story/photo cards: image first, text on the ground beneath it */
body:not(#ed) .news-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
body:not(#ed) .news-card:hover { transform: none; box-shadow: none; }
body:not(#ed) .news-card__media { border-radius: var(--ed-r-card); overflow: hidden; }
body:not(#ed) .news-card:hover .news-card__media img { transform: scale(1.03); }
body:not(#ed) .news-card__body { padding: 18px 0 0; gap: 10px; }
body:not(#ed) .news-card h3 a { color: var(--ink); text-decoration: none; }
body:not(#ed) .news-card h3 a:hover { color: var(--pine-bright); text-decoration: underline; text-underline-offset: 4px; }

body:not(#ed) .tile { border: 0; border-radius: var(--ed-r-card); box-shadow: none; }
body:not(#ed) .tile::after { background: var(--ed-scrim); }
body:not(#ed) .tile:hover img { transform: scale(1.03); }
body:not(#ed) .tile-caption { left: 20px; right: 20px; bottom: 18px; font-size: 1rem; font-weight: 600; transition: none; }
body:not(#ed) .tile:hover .tile-caption { transform: none; }


/* 2. Info cards */
body:not(#ed) :is(.card.icon-card, .objective, .contact-tile, .stat-card) {
  background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--ed-r-card); box-shadow: none;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}
body:not(#ed) .section--tint :is(.card.icon-card, .objective, .contact-tile, .stat-card) { background: var(--cream-card); }
body:not(#ed) :is(a.card, .card--hover):hover { transform: translateY(-2px); box-shadow: var(--ed-sh-2); }

body:not(#ed) .cert-promo { border-radius: var(--ed-r-card); box-shadow: none; }   /* dark promo keeps its own colours */

/* 3. Action cards ("give" choices): photo on top, dark body, one gold button */
body:not(#ed) .story-card {
  display: flex; flex-direction: column; align-items: stretch; min-height: 0;
  background: var(--pine-dark); border-radius: var(--ed-r-card); box-shadow: none;
}
body:not(#ed) .story-card::before { display: none; }
body:not(#ed) .story-card > img { position: static; aspect-ratio: 16 / 10; height: auto; flex: none; border-radius: 0; }
body:not(#ed) .story-body { display: flex; flex-direction: column; flex: 1; padding: 28px 28px 30px; }
body:not(#ed) .story-body hr { display: none; }
body:not(#ed) .story-body p { font-size: 1rem; flex: 1; }
body:not(#ed) .story-body .btn { width: 100%; justify-content: center; }

/* ==========================================================================
   P10. Home page sections
   ========================================================================== */
/* Care in the home: photo-led cards in the carousel, the next one peeking */
body:not(#ed) #servicesTrack { grid-auto-columns: clamp(260px, 26vw, 360px); gap: var(--ed-grid-gap); }
body:not(#ed) #servicesTrack .icon-card {
  min-height: 0;
  padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; color: var(--ink); gap: 10px;
  justify-content: flex-start;
}
body:not(#ed) #servicesTrack .icon-card::before { display: none; }
body:not(#ed) #servicesTrack .card-photo {
  position: static; inset: auto; z-index: auto; aspect-ratio: 4 / 5; height: auto; margin-bottom: 8px;
  border-radius: var(--ed-r-card); background-color: var(--onyx);
}
html body:not(.accessibility-font):not(#ren) #servicesTrack .icon-card h3,
body.accessibility-font #servicesTrack .icon-card h3 { color: var(--ink); }
body:not(#ed) #servicesTrack .icon-card p { color: var(--ink-soft); font-size: 1rem; }

/* Moments: an asymmetric mosaic instead of four equal tiles */
@media (min-width: 981px) {
  body:not(#ed) #moments .grid--4 { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(240px, 25vw, 360px); gap: 24px; }
  body:not(#ed) #moments .grid--4 > .tile { aspect-ratio: auto; height: 100%; }
  body:not(#ed) #moments .grid--4 > .tile:nth-child(4n + 1), body:not(#ed) #moments .grid--4 > .tile:nth-child(4n + 4) { grid-column: span 7; }
  body:not(#ed) #moments .grid--4 > .tile:nth-child(4n + 2), body:not(#ed) #moments .grid--4 > .tile:nth-child(4n + 3) { grid-column: span 5; }
}
@media (max-width: 980px) {
  body:not(#ed) #moments .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body:not(#ed) #moments .grid--4 > .tile:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
  body:not(#ed) #moments .grid--4 > .tile:not(:first-child) { aspect-ratio: 4 / 5; }
}

/* News & events: a lead story, two beside it, and the events panel */
@media (min-width: 981px) {
  body:not(#ed) .news-layout { grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr); gap: clamp(24px, 3vw, 48px); }
  body:not(#ed) .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:not(#ed) .news-list > .news-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 55fr 45fr; gap: 28px; align-items: center; }
  body:not(#ed) .news-list > .news-card:first-child .news-card__media { aspect-ratio: 4 / 3; }
  body:not(#ed) .news-list > .news-card:first-child .news-card__body { padding-top: 0; }
}
body:not(#ed) .events-panel { top: calc(var(--navbar-h, 76px) + 40px); padding: 32px; background: var(--onyx); border-radius: var(--ed-r-card); box-shadow: none; }

/* Why we exist: two quotations as columns, no card chrome */
body:not(#ed) #why-we-exist .quote-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 8px clamp(8px, 3vw, 40px); }
@media (min-width: 761px) {
  body:not(#ed) #why-we-exist .grid--2 > .quote-card + .quote-card { border-left: 1px solid var(--line-strong); }
}
body:not(#ed) #why-we-exist .quote-card .icon { width: 40px; height: 40px; color: var(--gold-deep); }
body:not(#ed) .values .pill--soft { background: transparent; border: 1px solid var(--line); color: var(--ink); }
body:not(#ed) .values .pill--soft .icon { color: var(--pine); }

/* Partners: a quiet list of names, not boxes */
body:not(#ed) .partner { background: transparent; border: 0; border-radius: 0; padding: 10px 22px; color: var(--ink); font-weight: 600; }
body:not(#ed) .partner + .partner, body:not(#ed) .u-contents > .partner { border-left: 1px solid var(--line); }

/* Volunteer band: photo beside a dark panel */
@media (min-width: 761px) {
  body:not(#ed) .cta-band { display: grid; grid-template-columns: 45fr 55fr; align-items: stretch; background: var(--onyx); border-radius: var(--ed-r-card); box-shadow: none; }
  body:not(#ed) .cta-band > img { position: static; inset: auto; height: 100%; min-height: 360px; }
  body:not(#ed) .cta-band-body { text-align: left; padding: clamp(40px, 5vw, 72px); align-self: center; }
  body:not(#ed) .cta-band-body p { margin-left: 0; }
  body:not(#ed) .cta-band-actions { justify-content: flex-start; }
}
@media (max-width: 760px) {
  body:not(#ed) .cta-band { display: flex; flex-direction: column; background: var(--onyx); border-radius: var(--ed-r-card); box-shadow: none; }
  body:not(#ed) .cta-band > img { position: static; aspect-ratio: 16 / 10; height: auto; }
}
body:not(#ed) .cta-band::before { display: none; }

/* ==========================================================================
   P11. Header, chapter index, newsletter, footer
   ========================================================================== */
body:not(#ed) .navbar { background: var(--cream-card); }
body:not(#ed) .site-header.is-scrolled { box-shadow: var(--ed-sh-1); }
@media (min-width: 981px) {
  body:not(#ed) .main-nav a {
    position: relative; padding: 10px 14px; border-radius: 0; background: transparent; box-shadow: none; font-weight: 600;
  }
  body:not(#ed) .main-nav a::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--gold);
    transform: scaleX(0); transform-origin: left center; transition: transform 200ms var(--ed-ease);
  }
  body:not(#ed) .main-nav a:hover { background: transparent; color: var(--pine); }
  body:not(#ed) .main-nav a:hover::after, body:not(#ed) .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
  body:not(#ed) .main-nav a[aria-current="page"] { background: transparent; box-shadow: none; color: var(--pine); }
}

/* Chapter index: small dots, no box */
body:not(#ed) .rn-chapters ol { background: none; border: 0; padding: 8px 4px; }
body:not(#ed) .rn-chapters ol::before { background: var(--line-strong); }
body:not(#ed) .rn-chapters a { width: 28px; height: 28px; border-color: var(--line-strong); font-size: .6875rem; transition: background-color var(--ed-dur) ease; }
body:not(#ed) .rn-chapters a:hover, body:not(#ed) .rn-chapters a:focus-visible, body:not(#ed) .rn-chapters a[aria-current="true"] { transform: none; }
body:not(#ed) .rn-chapters .rn-ch-name { border-color: var(--line); border-radius: var(--ed-r-ctl); box-shadow: var(--ed-sh-1); transition: opacity var(--ed-dur) ease; }
/* The fixed index needs a clear outer gutter beside the reading column. */
@media (max-width: 1479px) {
  body:not(#ed) .rn-chapters { display: none; }
}
@media (min-width: 641px) {
  body:not(#ed) .hero-controls { bottom: 80px; }
}
@media (max-width: 1199px) {
  body:not(#ed) .hero-kicker {
    width: fit-content; padding: 6px 10px; border-radius: var(--ed-r-ctl);
    background: var(--pine-dark); color: var(--gold);
  }
}

/* Newsletter: the first row of the footer, not a gold slab */
body:not(#ed) .site-footer:has(.news-band) { margin-top: 0; background: var(--onyx); }   /* the simple footers (privacy, 404) stay light */
body:not(#ed) .news-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 24px 48px;
  background: transparent; color: var(--text-on-dark); box-shadow: none; border-radius: 0; text-align: left;
  padding: clamp(48px, 5vw, 64px) 0; border-bottom: 1px solid rgba(201, 215, 207, .18);
}
html body:not(.accessibility-font):not(#ren) .news-band h2, body.accessibility-font .news-band h2 { color: var(--white); margin: 0; }
body:not(#ed) .news-band > h2, body:not(#ed) .news-band > p { grid-column: 1; }
body:not(#ed) .news-band > .news-form { grid-column: 2; grid-row: 1 / span 2; }
body:not(#ed) .news-band p { color: var(--text-on-dark-soft); margin: 8px 0 0; }
body:not(#ed) .news-band .news-form { margin: 0; max-width: none; justify-content: flex-start; }
body:not(#ed) .news-band .news-form input { border-color: transparent; }
body:not(#ed) .news-band .news-form .btn { background: var(--gold); color: var(--onyx); border-color: var(--gold); }
body:not(#ed) .footer-main { padding-top: 48px; }
body:not(#ed) .footer-cols a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  body:not(#ed) .news-band { grid-template-columns: 1fr; }
  body:not(#ed) .news-band > .news-form { grid-column: 1; grid-row: auto; }
}

/* ==========================================================================
   P13. Motion: one calm language (the 019 block rise-ins and wipes stay)
   ========================================================================== */
.reveal { --ease-out: var(--ed-ease); }
body:not(#ed) .tile-caption { transition: none; }
html.rn-js .rn-par:not(.hero-slide) > img { will-change: auto; }

/* ==========================================================================
   Phones (<= 640px)
   ========================================================================== */
@media (max-width: 640px) {
  body:not(#ed) .hero-slides { min-height: min(calc(100svh - 120px), 700px); }
  body:not(#ed) .hero-content .container { padding-top: 32px; padding-bottom: 96px; }
  /* On a phone the text spans the full width, so the shade rises from the bottom instead. */
  body:not(#ed) .hero-slide::after {
    background: linear-gradient(0deg, rgba(12, 40, 31, .92) 0%, rgba(12, 40, 31, .8) 55%, rgba(12, 40, 31, .4) 85%, rgba(12, 40, 31, .25) 100%);
  }
  body:not(#ed) .hero-actions { flex-direction: column; align-items: stretch; }
  body:not(#ed) .hero-actions :is(.btn, .action-btn) { width: 100%; justify-content: center; }
  body:not(#ed) .impact-strip__inner { grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr)); gap: 20px 12px; padding-block: 28px; }
  body:not(#ed) .impact-intro { grid-column: 1 / -1; border-right: 0; padding-right: 0; }
  body:not(#ed) .impact-stat { padding-top: 12px; border-top: 1px solid var(--line-strong); }
  body:not(#ed) .impact-stat + .impact-stat { padding-left: 0; border-left: 0; }
  body:not(#ed) .impact-link { grid-column: 1 / -1; }
  html body:not(.accessibility-font):not(#ren) .impact-stat strong { font-size: 2.25rem; }
  body:not(#ed) #servicesTrack { grid-auto-columns: 82%; }
  body:not(#ed) .section-head { flex-wrap: wrap; }
  body:not(#ed) .story-body { padding: 24px; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Final polish: reading rhythm, quieter partners band, shorter phone pages
   ========================================================================== */
body:not(#ed) main p { text-wrap: pretty; }
body:not(#ed) .quote-card blockquote { hanging-punctuation: first last; }
body:not(#ed) #partners { padding-block: var(--ed-section-tight); }
body:not(#ed) .story-card > img { transition: scale var(--ed-dur-slow) var(--ed-ease); }
body:not(#ed) .story-card:hover > img { scale: 1.03; }
body:not(#ed) .story-card { overflow: hidden; }

@media (max-width: 640px) {
  /* News and the three ways to give become swipeable rows instead of long stacks */
  body:not(#ed) .news-list, body:not(#ed) #give .grid--3 {
    display: grid; grid-auto-flow: column; grid-auto-columns: 85%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    gap: 14px; padding-bottom: 10px; scrollbar-width: thin;
  }
  body:not(#ed) .news-list > *, body:not(#ed) #give .grid--3 > * { scroll-snap-align: start; }
  /* Footer links two-up */
  body:not(#ed) .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  body:not(#ed) .footer-cols > :last-child { grid-column: 1 / -1; }
  body:not(#ed) .footer-brand { padding-bottom: 18px; }
}

/* ==========================================================================
   Owner, 3 Oct 2026: on the HOME page and the GALLERY the photographs themselves
   no longer move - no drift while scrolling, no zoom, no blurry-to-sharp focus
   pull while loading. The blocks around them keep their transitions (rise-ins,
   wipes), and every other page (About and the rest) is unchanged.
   ========================================================================== */
html:is(:has(.hero-slides), :has(.album-grid)) body:not(#ed) .hero-slide img { translate: none !important; }
html:is(:has(.hero-slides), :has(.album-grid)) .rn-par > img { scale: 1 !important; translate: none !important; will-change: auto !important; }
html:is(:has(.hero-slides), :has(.album-grid)) body:not(#ed) main img { transition: none !important; }
html:is(:has(.hero-slides), :has(.album-grid)) body:not(#ed) main :is(.tile, .news-card, .story-card, .card, .card-media):hover img { transform: none !important; scale: none !important; }
html:is(:has(.hero-slides), :has(.album-grid)) body:not(#ed) main img[src*="/opt/gallery-"] { background-image: none !important; }

/* ==========================================================================
   Owner, 3 Oct 2026: "on the phone it feels too zoomed in" - the fixed header
   (118px) and the floating buttons covered over a quarter of the screen.
   Phones: the green top bar scrolls away (only the slimmer logo bar stays,
   about 60px) and the accessibility button becomes a round icon (its name is
   unchanged for screen readers). Computers: with the chat open, its controls
   sit at the top right of the chat window, where a minimise button belongs.
   ========================================================================== */
@media (max-width: 640px) {
  body:not(#ed) .site-header { top: -41px; }                       /* the 41px top bar slides away; the logo bar sticks */
  body:not(#ed) .navbar .container { min-height: 60px; gap: 12px; }
  html body:not(.accessibility-font):not(#ren) .brand-name { font-size: 1.375rem; }
  body:not(#ed) .brand-tag { font-size: .75rem; }
  body:not(#ed) .brand-mark { width: 38px; height: 38px; }
  body:not(#ed) .accessibility-toggle {
    width: 52px; height: 52px; min-height: 52px; padding: 0; gap: 0; justify-content: center;
    border-radius: 50%; font-size: 0; line-height: 0;
  }
  body:not(#ed) .accessibility-toggle .accessibility-pic { width: 40px; height: 40px; flex-basis: 40px; }
  /* Hero: pause and the slide dots sit centred between the two corner buttons (the dots choose a slide). */
  body:not(#ed) .hero-controls .container { justify-content: center; }
  body:not(#ed) .hero-ctrl--plain { display: none; }
  body:not(#ed) .hero-dot { width: 24px; height: 32px; }
  body:not(#ed) .chat-widget:not(.is-open) { zoom: var(--accessibility-widget-scale, 1); }
}
@media (min-width: 641px) {
  body:not(#ed) .chat-widget.is-open .chat-panel { position: relative; right: auto; bottom: auto; }
  body:not(#ed) .chat-widget.is-open .chat-toolbar { position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0; }
  body:not(#ed) .chat-widget.is-open .chat-panel-head { padding-right: 168px; }
  body:not(#ed) .chat-widget.is-open .chat-tooltip { top: calc(100% + 8px); bottom: auto; }
}

/* ==========================================================================
   Reduce motion (system setting or the accessibility panel switch)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body:not(#ed) :is(.btn, .action-btn, .btn .icon, .action-btn .icon, .main-nav a::after, .head-link .icon, .card-link .icon) { transition: none; }
  body:not(#ed) :is(.btn, .action-btn):hover { transform: none; }
}
html.pref-motion body:not(#ed) :is(.btn, .action-btn, .btn .icon, .action-btn .icon, .main-nav a::after, .head-link .icon, .card-link .icon) { transition: none; }
html.pref-motion body:not(#ed) :is(.btn, .action-btn):hover { transform: none; }
html.pref-motion body:not(#ed) :is(.tile, .news-card, .team-card, .story-card) :is(img) { transition: none; }
html.pref-motion body:not(#ed) .story-card:hover > img { scale: none; }
html.pref-motion body:not(#ed) .hero-slide .hero-content { transition: none; }

@media print {
  body:not(#ed) .site-footer { background: none; }
}