/* =====================================================================
   BALLAST MEMORIAL — www.ballastmemorial.org
   Stylesheet

   Structure of this file:
     1.  Design tokens (colours, type, spacing)
     2.  Base / reset
     3.  Accessibility helpers (skip link, focus rings, visually-hidden)
     4.  Buttons
     5.  Header / navigation
     6.  The 3D scroll canvas + static fallback
     7.  Story chapters
     8.  Partners (UVI + VICCC)
     9.  Donate band
     10. Newsletter form
     11. Modal
     12. Footer
     13. Motion, responsive + print

   Colour choices come from design.md (Ballast Memorial brand guide) and
   every text/background pair in here has been checked against WCAG 2.1 AA
   (4.5:1 for body text, 3:1 for large text and UI borders).
   ===================================================================== */

/* =====================================================================
   1. DESIGN TOKENS
   ===================================================================== */
:root {
  /* Brand palette — straight from design.md */
  --baltic-slate:   #1C242B;  /* primary base   */
  --ballast-clay:   #B85A3D;  /* accent primary */
  --fjord-mist:     #D4DCDA;  /* supporting     */
  --submerged-rust: #7F3E2B;  /* deep accent    */
  --paper-sand:     #F5F2EB;  /* light text     */

  /* Ballast Clay, taken down ~6% in luminance. Visually the same colour,
     but it lets a Paper Sand label sit on it at 4.54:1 — the brand tone
     at full strength only reaches 4.11:1, just under the AA threshold.
     Use --ballast-clay for decoration, --clay-deep whenever text sits on it. */
  --clay-deep:      #AD5539;
  --clay-deep-hover:#9C4C34;

  /* Derived surfaces (dark theme is the default per design.md §6) */
  --surface-abyss:  #0D1417;  /* page background, below Baltic Slate  */
  --surface:        #141C22;  /* section background                   */
  --surface-raised: #1C242B;  /* cards, raised panels                 */
  --surface-high:   #263038;  /* hover / input fields                 */
  /* 0.42 alpha, not a faint hairline: panel and card edges clear 3:1
     against their background, per WCAG 1.4.11 (non-text contrast). */
  --hairline:       rgba(212, 220, 218, 0.42);
  --hairline-solid: #7E8C93;

  /* Text — all verified against --surface-abyss / --surface */
  --text:           #F5F2EB;  /* 15.6:1 on --surface-abyss  */
  --text-muted:     #C2CBCE;  /* 10.2:1 on --surface-abyss  */
  --text-quiet:     #9BA7AC;  /*  6.3:1 on --surface-abyss  */
  --accent-text:    #E08A66;  /* lightened clay, 7.1:1 on --surface-abyss */

  /* Type */
  --font-display: "Newsreader", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Spacing */
  --gutter: 1.5rem;
  --margin-mobile: 1.25rem;
  --margin-desktop: 4rem;
  --max-width: 76rem;
  --measure: 40rem;          /* comfortable reading line length */

  /* Shape — generous, consistent rounding across every interactive element */
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =====================================================================
   2. BASE / RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Offset anchor jumps so headings don't hide behind the fixed header */
  scroll-padding-top: 6.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--surface-abyss);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px base — easier to read than 16 */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(3rem, 13vw, 8.5rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); }
h3 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); }
h4 { font-size: 1.2rem; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-text); }
a:hover { color: var(--paper-sand); }

::selection { background: var(--ballast-clay); color: var(--paper-sand); }

/* Shared shell for centred content */
.shell {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}
@media (min-width: 60rem) {
  .shell { padding-inline: var(--margin-desktop); }
}

/* Small monospace chapter label — "01 / POINT OF DEPARTURE" */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fjord-mist);
  margin: 0 0 1.25rem;
  display: inline-block;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ballast-clay);
}

.lede {
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  line-height: 1.6;
  color: var(--text-muted);
}

/* =====================================================================
   3. ACCESSIBILITY HELPERS
   ===================================================================== */

/* Skip link — first focusable thing on the page */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 200;
  background: var(--paper-sand);
  color: var(--baltic-slate);
  padding: 1rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; color: var(--baltic-slate); }

/* One consistent, high-contrast focus ring everywhere. Uses :focus-visible
   so it appears for keyboard users without adding rings on mouse clicks.

   It is a TWO-TONE ring on purpose: a light outline sitting 3px away from
   the element, with a dark band filling that gap. That way the indicator
   stays visible whether the thing being focused is dark (a text link) or
   light (the cream "Donate Now" button) — a single light ring would vanish
   against a light button, which is a common WCAG 2.4.11 failure. */
:focus-visible {
  outline: 3px solid var(--paper-sand);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--surface-abyss);
  border-radius: var(--radius-sm);
}
/* Safety net for browsers without :focus-visible support */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus {
    outline: 3px solid var(--paper-sand);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--surface-abyss);
  }
}

.visually-hidden {
  position: absolute !important;
  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;
}

/* =====================================================================
   4. BUTTONS
   Generous padding, clear rounded corners, and a minimum 48px hit area
   so they clear the WCAG 2.5.5 / 2.5.8 target-size guidance on touch.
   ===================================================================== */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;

  min-height: 52px;
  padding: 0.95rem 2rem;
  border-radius: var(--radius);
  border: 2px solid var(--btn-border);

  background: var(--btn-bg);
  color: var(--btn-fg);

  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;

  cursor: pointer;
  transition: background-color 0.22s var(--ease),
              border-color 0.22s var(--ease),
              color 0.22s var(--ease),
              transform 0.12s var(--ease);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Primary — Ballast Clay fill with a Paper Sand label.
   4.54:1 for the label, and 3.66:1 for the button against the page, so it
   clears AA for text and 1.4.11 for the control's own boundary. */
.btn-primary {
  --btn-bg: var(--clay-deep);
  --btn-fg: var(--paper-sand);
  --btn-border: var(--clay-deep);
}
.btn-primary:hover { --btn-bg: var(--clay-deep-hover); --btn-border: var(--clay-deep-hover); }

/* Secondary — light fill for use on top of imagery or clay panels */
.btn-secondary {
  --btn-bg: var(--paper-sand);
  --btn-fg: #1A2127;
  --btn-border: var(--paper-sand);
}
.btn-secondary:hover { --btn-bg: #FFFFFF; --btn-border: #FFFFFF; }

/* Outline — quieter action. Border is 2px and light enough to clear the
   3:1 non-text contrast requirement. */
.btn-outline {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--fjord-mist);
}
.btn-outline:hover { --btn-bg: rgba(212, 220, 218, 0.14); }

.btn-lg { min-height: 60px; padding: 1.15rem 2.5rem; font-size: 0.875rem; }
.btn-block { width: 100%; }

/* Buttons wrap onto their own lines on narrow screens instead of squashing */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}
@media (max-width: 30rem) {
  .btn-row .btn { width: 100%; }
}

/* =====================================================================
   5. HEADER / NAVIGATION
   ===================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(13, 20, 23, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.header-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 0.875rem var(--margin-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 60rem) {
  .header-inner { padding-inline: var(--margin-desktop); }
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  color: var(--text);
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
}
.brand:hover { color: var(--text); }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

.main-nav { display: none; }
@media (min-width: 62rem) {
  .main-nav { display: block; }
}
.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}
.main-nav a {
  display: flex;
  align-items: center;
  /* 44px tall minimum — comfortably clears WCAG 2.5.8 target size and
     matches the 2.5.5 (AAA) recommendation too. */
  min-height: 44px;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.main-nav a:hover { background: rgba(212, 220, 218, 0.12); color: var(--paper-sand); }
.main-nav a[aria-current="true"] { color: var(--paper-sand); background: rgba(212, 220, 218, 0.1); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.btn-nav { min-height: 48px; padding: 0.75rem 1.5rem; }

/* Mobile menu toggle + drawer */
.nav-toggle { display: inline-flex; }
@media (min-width: 62rem) { .nav-toggle { display: none; } }
.nav-toggle-bars { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }

.mobile-nav {
  border-top: 1px solid var(--hairline);
  background: rgba(13, 20, 23, 0.97);
  padding: 0.75rem var(--margin-mobile) 1.5rem;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.mobile-nav a {
  display: block;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
}
.mobile-nav a:hover { background: rgba(212, 220, 218, 0.12); color: var(--paper-sand); }

/* =====================================================================
   6. THE 3D SCROLL CANVAS + STATIC FALLBACK

   The canvas sits behind everything and is purely decorative — every word
   on this page is real HTML in normal document flow, so keyboard users,
   screen readers, page zoom and "find on page" all keep working exactly
   as they would on an ordinary page.
   ===================================================================== */
.scroll-world {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;   /* never steals clicks or focus */
}
.scroll-world canvas { display: block; width: 100%; height: 100%; }

/* Static replacement used on low-power devices and whenever the visitor
   has asked their system to reduce motion. */
.scroll-world-fallback {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--surface-abyss);
  background-image:
    linear-gradient(rgba(13, 20, 23, 0.82), rgba(13, 20, 23, 0.94)),
    url("../images/memorial-aerial-sunset.webp");
  background-size: cover;
  background-position: center;
}

/* Everything else stacks above the canvas */
.page { position: relative; z-index: 1; }

/* =====================================================================
   7. STORY CHAPTERS
   ===================================================================== */

/* ---- Hero ---- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 9rem 0 6rem;
}
.hero-inner { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--margin-mobile); }
@media (min-width: 60rem) { .hero-inner { padding-inline: var(--margin-desktop); } }

.hero h1 {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  /* The tracking adds space on the right of the last letter — pull it back
     so the word optically aligns with the text beneath it. */
  margin-right: -0.16em;
}
.hero-sub {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--fjord-mist);
  max-width: 30ch;
  margin-bottom: 1.75rem;
}
.hero-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin-bottom: 2rem;
}
.hero-lede { max-width: 46ch; }

.scroll-cue {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 3.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.scroll-cue::before {
  content: "";
  width: 2.5rem; height: 1px;
  background: var(--fjord-mist);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ---- Generic chapter ---- */
.chapter {
  padding: clamp(5rem, 12vh, 9rem) 0;
  position: relative;
}
.chapter-panel {
  background: rgba(20, 28, 34, 0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 5vw, 3.5rem);
}

.chapter-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .chapter-grid { grid-template-columns: 1fr 1fr; }
  .chapter-grid.is-reversed .chapter-media { order: -1; }
}

.chapter-media { margin: 0; }
.chapter-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
}
.chapter-media figcaption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text-quiet);
  margin-top: 0.9rem;
  line-height: 1.5;
}

/* Pull quote */
.pull-quote {
  margin: 2.5rem 0 0;
  padding: 1.75rem 2rem;
  border-left: 4px solid var(--ballast-clay);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(184, 90, 61, 0.10);
}
.pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--paper-sand);
  margin: 0;
}
.pull-quote footer {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 1rem;
}

/* Three-up reference photo strip */
.strip {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: var(--gutter);
}
@media (min-width: 48rem) { .strip { grid-template-columns: repeat(3, 1fr); } }
.strip figure { margin: 0; }
.strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
}
.strip figcaption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-quiet);
  margin-top: 0.8rem;
}

/* Feature cards */
.card-grid {
  display: grid;
  gap: var(--gutter);
  margin-top: 3rem;
}
@media (min-width: 48rem) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: rgba(28, 36, 43, 0.92);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.card:hover { border-color: rgba(212, 220, 218, 0.5); transform: translateY(-3px); }
.card h3 { font-size: 1.25rem; margin-bottom: 0.65rem; }
.card p { font-size: 0.9375rem; color: var(--text-muted); margin: 0; }
.card-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-text);
  display: block;
  margin-bottom: 1.25rem;
}

/* Facts strip */
.fact-list {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.fact-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  color: var(--text-muted);
}
.fact-list li::before {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  margin-top: 0.55rem;
  border-radius: 3px;
  background: var(--ballast-clay);
}

/* The QR chapter gets a wider, centred treatment */
.chapter-center { text-align: center; }
.chapter-center p,
.chapter-center .lede { margin-inline: auto; }
.chapter-center .eyebrow { display: inline-block; }

.qr-figure {
  margin: 3rem auto 0;
  max-width: 30rem;
}
.qr-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
}

/* =====================================================================
   8. PARTNERS (University of the Virgin Islands + VICCC)
   ===================================================================== */
.partners { padding: clamp(4rem, 10vh, 7rem) 0; }

.partner-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.75rem;
}
@media (min-width: 52rem) { .partner-grid { grid-template-columns: 1fr 1fr; } }

.partner-card {
  background: rgba(28, 36, 43, 0.94);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
}
.partner-mark {
  background: var(--paper-sand);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 84px;
  margin-bottom: 1.5rem;
}
.partner-mark img { max-height: 60px; width: auto; }
.footer-mark--transparent {
  background: none;
  padding: 0;
}
.partner-card h3 { margin-bottom: 0.35rem; }
.partner-role {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1.15rem;
}
.partner-card p { font-size: 0.9688rem; color: var(--text-muted); }
.partner-card .btn { margin-top: auto; align-self: flex-start; }
.partner-card .btn-row { margin-top: 1.75rem; }

/* =====================================================================
   9. DONATE BAND
   ===================================================================== */
.donate-band {
  background: var(--submerged-rust);
  border-radius: var(--radius-xl);
  padding: clamp(2.25rem, 6vw, 4rem);
  display: grid;
  gap: 2rem;
  align-items: center;
  margin-bottom: 4rem;
}
@media (min-width: 60rem) {
  .donate-band { grid-template-columns: 1.6fr auto; }
}
.donate-band h2 { color: var(--paper-sand); }
/* #F5F2EB on #7F3E2B measures 8.9:1 */
.donate-band p { color: var(--paper-sand); }
.donate-band .eyebrow { color: var(--paper-sand); border-bottom-color: var(--paper-sand); }

.donate-tiers {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.donate-tiers li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--paper-sand);
  background: rgba(245, 242, 235, 0.16);
  /* 0.58 alpha, not 0.45 — the pill outline needs 3:1 against the rust
     band behind it to satisfy WCAG 1.4.11. */
  border: 1px solid rgba(245, 242, 235, 0.58);
  border-radius: var(--radius);
  padding: 0.7rem 1.1rem;
}

/* =====================================================================
   10. NEWSLETTER FORM
   ===================================================================== */
.newsletter { padding-bottom: clamp(5rem, 12vh, 8rem); }

.newsletter-inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 60rem) { .newsletter-inner { grid-template-columns: 1fr 1fr; } }

.newsletter-form { display: grid; gap: 1.5rem; max-width: 32rem; }

.form-row { display: grid; gap: 0.55rem; }
.form-row label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.form-row .optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-quiet); }
.form-row .required { color: var(--accent-text); }

.newsletter-form input[type="text"],
.newsletter-form input[type="email"] {
  min-height: 56px;
  padding: 0.9rem 1.15rem;
  border-radius: var(--radius);
  border: 2px solid var(--hairline-solid);
  background: var(--surface-raised);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.newsletter-form input::placeholder { color: var(--text-quiet); }
.newsletter-form input:hover { border-color: var(--fjord-mist); }
.newsletter-form input:focus { border-color: var(--paper-sand); background: var(--surface-high); }
.newsletter-form input[aria-invalid="true"] { border-color: #FF9E8C; }

.field-error {
  font-size: 0.9375rem;
  color: #FF9E8C;              /* 7.4:1 on --surface-abyss */
  margin: 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.field-error::before { content: "\26A0"; font-size: 1rem; }

.form-status { font-size: 0.9375rem; margin: 0; min-height: 1.5em; }
.form-status.success { color: #8FE0B0; }   /* 10.6:1 on --surface-abyss */
.form-status.error   { color: #FF9E8C; }

.privacy-note { font-size: 0.875rem; color: var(--text-quiet); margin: 0; }

/* =====================================================================
   11. MODAL (confirmation dialog)
   ===================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(8, 12, 14, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.modal-overlay[hidden] { display: none; }

.modal {
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  max-width: 30rem;
  width: 100%;
  position: relative;
}
.modal h2 { font-size: 1.75rem; }
.modal p { color: var(--text-muted); }
.modal .btn { margin-top: 1.75rem; }
.modal .btn-row .btn { margin-top: 0; }
.modal .btn-row { margin-top: 1.75rem; }

.modal-close {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  width: 48px; height: 48px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.modal-close:hover { background: var(--surface-high); color: var(--paper-sand); }

/* =====================================================================
   12. FOOTER
   ===================================================================== */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding: clamp(3rem, 8vh, 5rem) 0 0;
}
.footer-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
  display: grid;
  gap: 2.75rem;
}
@media (min-width: 60rem) {
  .footer-inner { grid-template-columns: 1.5fr 1fr 1fr; padding-inline: var(--margin-desktop); }
}

.footer-marks { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.footer-mark {
  background: var(--paper-sand);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  display: inline-flex;
  align-items: center;
  min-height: 68px;
}
.footer-mark img { max-height: 44px; width: auto; }

.footer-org { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 0.4rem; }
.footer-sub { font-size: 0.9375rem; color: var(--text-quiet); margin: 0; }

.site-footer h3 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fjord-mist);
  margin-bottom: 1.1rem;
}
.site-footer address { font-style: normal; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.9; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.site-footer ul a,
.site-footer address a,
.footer-link-btn {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  margin-left: -0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9375rem;
}
.site-footer ul a:hover,
.site-footer address a:hover,
.footer-link-btn:hover { background: rgba(212, 220, 218, 0.12); color: var(--paper-sand); }

.footer-link-btn {
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.footer-bottom {
  margin-top: 3.5rem;
  border-top: 1px solid var(--hairline);
  padding: 1.75rem var(--margin-mobile);
}
.footer-bottom .shell { display: grid; gap: 0.5rem; padding: 0; }
@media (min-width: 60rem) {
  .footer-bottom { padding-inline: var(--margin-desktop); }
  .footer-bottom .shell { grid-template-columns: 1fr auto; align-items: center; }
}
.footer-bottom p {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--text-quiet);
  margin: 0;
  max-width: none;
}

/* =====================================================================
   13. MOTION, RESPONSIVE + PRINT
   ===================================================================== */

/* Gentle scroll-triggered reveal. JS adds .is-visible; if JS never runs,
   or motion is reduced, everything is simply visible from the start. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

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

/* Honour a stated preference for more contrast */
@media (prefers-contrast: more) {
  :root {
    --text-muted: #E9EDEE;
    --text-quiet: #D3DADD;
    --hairline: rgba(212, 220, 218, 0.55);
    --hairline-solid: #8FA0A8;
  }
  .chapter-panel, .card, .partner-card { background: #10171C; }
}

@media print {
  .scroll-world, .scroll-world-fallback, .site-header, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .chapter-panel, .card, .partner-card, .donate-band { background: none; border: 1px solid #999; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}