/* ==========================================================================
   CAELUM — Christian Apostolate for Evangelization in Lunar and Universal
   Ministry. Stylesheet for the static HTML site.

   No build step, no framework. Edit this file directly.

   CONTENTS
     1. Brand constants      fixed hues that never change
     2. Theme tokens         light and dark; everything else references these
     3. Typography rule      serif for headings, blockquotes, and scripture;
                             sans-serif for all other text
     4. Reset and base
     5. Page transitions
     6. Layout, chrome, components
     7. Breakpoints, motion, print
   ========================================================================== */

/* ------------------------------------------------- 1. Brand constants --- */

:root {
  --navy: #011b3b;
  --gold: #c49440;
  --gold-radiant: #d39e44;
  --mission-red: #c3151c;
  --crimson-shadow: #6f1728;

  /* Type families.
     Cinzel      — major headings (h1, h2). Roman, ecclesial, institutional.
     Cormorant   — smaller headings, blockquotes, and scripture.
     Inter       — all body copy, navigation, labels, and controls. */
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;

  --page: 72rem;
}

/* ---------------------------------------------------- 2. Theme tokens --- */

/*
  Light theme. The page background is a soft warm parchment rather than a
  bright white: at full brightness in a dim room, near-white backgrounds glare.
  Text sits near 12:1 against it, which is comfortably past WCAG AAA without
  being a harsh black-on-white.
*/
:root {
  --bg: #efe9e1; /* page */
  --bg-alt: #e6dfd4; /* banded sections */
  --surface: #f5f1ea; /* cards and panels */
  --field: #fbf9f5; /* form inputs */

  --text: #1b2333; /* body copy */
  --text-soft: #3d4557; /* secondary copy */
  --text-faint: #5c6475; /* captions and help text */

  --band: #04162f; /* navy feature sections */
  --band-text: #ece7e0; /* text on navy */
  --band-soft: #c4c8d1; /* secondary text on navy */
  --band-faint: #949aa6; /* captions on navy */

  --line: rgba(27, 35, 51, 0.16);
  --line-gold: rgba(196, 148, 64, 0.4);
  --gold-ink: #785519; /* gold text on light backgrounds; clears AA at small sizes
                          on the page, card, and banded backgrounds alike */
  --focus: #011b3b;    /* focus ring on light backgrounds */
  --shadow: 0 1px 2px rgba(1, 27, 59, 0.05);

  /* Aliases kept so inline styles in the HTML stay theme-aware. */
  --navy-shadow: var(--text);
  --warm-white: var(--band-text);
  --lunar-silver: var(--band-soft);
  --crater-silver: var(--band-faint);
  --cool-gray: var(--band-faint);

  color-scheme: light;
}

/*
  Dark theme. Deep navy rather than neutral black, so the palette stays the
  brand's. Text is a warm off-white (never #fff) to cut halation on dark.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070e1a;
    --bg-alt: #0b1526;
    --surface: #101c2f;
    --field: #16233a;

    --text: #dcd7d0;
    --text-soft: #b6bcc7;
    --text-faint: #949ba8;

    --band: #0c1728;
    --band-text: #e4dfd8;
    --band-soft: #b6bcc7;
    --band-faint: #8f96a3;

    --line: rgba(220, 215, 208, 0.14);
    --line-gold: rgba(211, 158, 68, 0.35);
    --gold-ink: #d9a957;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --focus: #d39e44;  /* the page itself is dark, so gold reads well */

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #070e1a;
  --bg-alt: #0b1526;
  --surface: #101c2f;
  --field: #16233a;

  --text: #dcd7d0;
  --text-soft: #b6bcc7;
  --text-faint: #949ba8;

  --band: #0c1728;
  --band-text: #e4dfd8;
  --band-soft: #b6bcc7;
  --band-faint: #8f96a3;

  --line: rgba(220, 215, 208, 0.14);
  --line-gold: rgba(211, 158, 68, 0.35);
  --gold-ink: #d9a957;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --focus: #d39e44;

  color-scheme: dark;
}

/* ----------------------------------------------------- 3. Reset, base --- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem; /* 17px — a touch larger for sustained reading */
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Typography rule ---------------------------------------------------
   Serif is reserved for headings, blockquotes, and scripture.
   Everything else — body copy, ledes, lists, labels, buttons — is sans.
   ---------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
  color: inherit;
}

/* Major headings: Cinzel. */
h1,
h2 {
  font-family: var(--display);
  letter-spacing: 0.015em;
}

/* Smaller headings: Cormorant, which stays legible at subhead sizes where
   Cinzel begins to feel tight. Still serif. */
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.005em;
}

blockquote {
  margin: 0;
  font-family: var(--serif);
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
}

strong {
  font-weight: 600;
}

/*
  Focus indicator.

  Gold reads beautifully on the navy bands but sits at only 2:1 against the
  light parchment background — well under the 3:1 WCAG requires of focus
  indicators. So --focus is a token: navy by default, and overridden to gold
  by any dark-background region below. Custom properties inherit, so every
  focusable descendant of a navy section picks up the gold ring automatically.
*/
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--gold);
  color: #011b3b;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: first focusable element, off-screen until focused, then
   plainly visible above everything with a high-contrast outline. */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  transform: translateY(-150%);
  background: var(--gold);
  color: #011b3b;
  padding: 0.7rem 1.25rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: transform 0.18s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #011b3b;
  outline-offset: 2px;
}

/* Focusing <main> after the skip link should not draw a stray ring. */
main:focus {
  outline: none;
}

/* Dark-background regions: gold rings, which contrast strongly on navy. */
.tone-navy,
.site-header,
.site-footer,
.prayer {
  --focus: #d39e44;
}

/* ------------------------------------------------ 4. Page transitions --- */

/*
  Cross-document view transitions. Supported browsers fade between pages
  natively; others simply navigate as before, with the load-in animation
  below standing in.
*/
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fade-out 0.22s ease both;
}

::view-transition-new(root) {
  animation: fade-in 0.32s ease both;
}

/* The sticky header is carried across the transition so it does not blink. */
.site-header {
  view-transition-name: site-header;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Fallback for browsers without view transitions. */
@supports not (view-transition-name: none) {
  main {
    animation: rise-in 0.4s ease both;
  }
}

/* Anchor targets clear the sticky header. */
[id] {
  scroll-margin-top: 5.5rem;
}

/* ------------------------------------------------------------ Layout --- */

main {
  flex: 1;
}

.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.wrap-narrow {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.wrap-mid {
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

section {
  padding-block: 4rem;
}

.gold-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    rgba(196, 148, 64, 0) 0%,
    rgba(196, 148, 64, 0.8) 50%,
    rgba(196, 148, 64, 0) 100%
  );
}

.rule-short {
  max-width: 8rem;
  background: linear-gradient(
    90deg,
    rgba(196, 148, 64, 0.85) 0%,
    rgba(196, 148, 64, 0) 100%
  );
}

.tone-navy {
  background: var(--band);
  color: var(--band-text);
  position: relative;
  overflow: hidden;
}

.tone-silver {
  background: var(--bg-alt);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold-ink);
  margin-bottom: 0.9rem;
}

.tone-navy .eyebrow {
  color: var(--gold-radiant);
}

/* Lede: introductory body copy. Sans-serif, set larger and lighter. */
.lede {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.72;
  color: var(--text-soft);
  max-width: 44rem;
}

.tone-navy .lede {
  color: var(--band-soft);
}

.prose p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-soft);
}

.prose p + p {
  margin-top: 1.15rem;
}

/* Decorative starfield, drawn in CSS so there is no extra asset to load. */
.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(1.1px 1.1px at 6% 18%, #f1ede9 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 13% 62%, #f1ede9 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 19% 33%, #f1ede9 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 27% 78%, #f1ede9 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 34% 12%, #f1ede9 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 41% 47%, #f1ede9 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 48% 84%, #f1ede9 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 56% 22%, #f1ede9 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 63% 58%, #f1ede9 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 71% 15%, #f1ede9 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 78% 71%, #f1ede9 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 84% 38%, #f1ede9 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 91% 66%, #f1ede9 50%, transparent 51%),
    radial-gradient(0.9px 0.9px at 96% 26%, #f1ede9 50%, transparent 51%);
  background-repeat: no-repeat;
}

.orbital {
  display: block;
  margin-inline: auto;
  max-width: 100%;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--band) 96%, transparent);
  border-bottom: 1px solid var(--line-gold);
  backdrop-filter: blur(8px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--band-text);
}

.brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

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

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

.brand-tag {
  display: none;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--band-faint);
  margin-top: 0.2rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-desktop {
  display: none;
}

.nav-desktop ul {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

/* Concise labels plus nowrap keep the bar on a single line down to the
   1024px breakpoint, below which the mobile menu takes over. */
.nav-desktop a {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--band-soft);
  text-decoration: none;
  border-radius: 2px;
  transition: color 0.2s;
}

.nav-desktop a:hover {
  color: var(--gold-radiant);
}

.nav-desktop a[aria-current="page"] {
  color: var(--gold-radiant);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.icon-btn,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--line-gold);
  color: var(--gold-radiant);
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.5rem 0.7rem;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.icon-btn:hover,
.menu-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Theme toggle. Shows the icon AND the word for the mode it will switch to,
   so its purpose is legible without hovering or guessing. */
.theme-toggle {
  gap: 0.4rem;
}

.theme-toggle svg {
  display: block;
}

.theme-toggle-text {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.icon-sun,
.theme-label-light {
  display: none;
}

:root[data-theme="dark"] .icon-sun,
:root[data-theme="dark"] .theme-label-light {
  display: block;
}

:root[data-theme="dark"] .icon-moon,
:root[data-theme="dark"] .theme-label-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun,
  :root:not([data-theme="light"]) .theme-label-light {
    display: block;
  }
  :root:not([data-theme="light"]) .icon-moon,
  :root:not([data-theme="light"]) .theme-label-dark {
    display: none;
  }
}

/* The toggle's word label is hidden on the narrowest screens, where the
   header must stay compact; the accessible name still carries it. */
@media (max-width: 400px) {
  .theme-toggle-text {
    display: none;
  }
}

.nav-mobile {
  border-top: 1px solid var(--line-gold);
  background: var(--band);
}

.nav-mobile[hidden] {
  display: none;
}

.nav-mobile li + li {
  border-top: 1px solid var(--line);
}

.nav-mobile a {
  display: block;
  padding: 0.85rem 0;
  font-size: 0.95rem;
  color: var(--band-soft);
  text-decoration: none;
}

.nav-mobile a[aria-current="page"] {
  color: var(--gold-radiant);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
    transform 0.15s;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--gold);
  color: #011b3b;
}

.btn-primary:hover {
  background: var(--gold-radiant);
}

.btn-secondary {
  border-color: var(--gold);
  color: var(--gold-radiant);
  background: transparent;
}

.btn-secondary:hover {
  background: var(--gold);
  color: #011b3b;
}

.btn-dark {
  background: var(--band);
  color: var(--band-text);
  border-color: var(--band);
}

.btn-dark:hover {
  opacity: 0.88;
}

.btn-outline {
  border-color: var(--line);
  color: var(--text);
  background: transparent;
}

.btn-outline:hover {
  background: var(--band);
  color: var(--band-text);
  border-color: var(--band);
}

/* Tertiary action: clearly available, clearly subordinate to the other two. */
.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--band-soft);
  text-decoration: underline;
  text-decoration-color: var(--line-gold);
  text-underline-offset: 6px;
}

.btn-quiet:hover {
  color: var(--gold-radiant);
  text-decoration-color: var(--gold-radiant);
}

.btn-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.5rem;
}

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

/*
  Hero.

  Sized so the whole identity — seal, wordmark, full name, h1, motto,
  supporting sentence, and the primary action — fits within a laptop's first
  viewport without scrolling. Padding is deliberately modest; the spacing
  between related elements does the work instead.
*/
.hero {
  /* Tight enough that seal, heading, motto, supporting line, and both buttons
     all sit within the first viewport beneath the header. */
  padding-block: 2.25rem 2.75rem;
  text-align: center;
}

.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Reduced ~18% from its previous size. Decorative here (alt=""), because the
   heading beneath it states the identity in live text. */
.hero-seal {
  width: 115px;
  height: 115px;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
}

/* The dominant element in the region.
   Held to exactly two lines from 480px up, where 44 characters fit readably.
   Below that it wraps naturally rather than shrinking to an unreadable size. */
.hero h1 {
  margin-top: 1.5rem;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--band-text);
  text-wrap: balance;
}

@media (min-width: 480px) {
  .hero h1 {
    font-size: 1.7rem;
  }

  .hero h1 span {
    display: block;
  }
}

.hero-motto {
  margin-top: 1.1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--gold-radiant);
}

.hero-support {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--band-soft);
  max-width: 54ch;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1.6rem;
  width: 100%;
  max-width: 22rem;
}

/* Subordinate to the two buttons: a text link, not a third button. */
.hero-tertiary {
  margin-top: 1.1rem;
  font-size: 0.92rem;
}

.hero-tertiary a {
  color: var(--band-soft);
  text-decoration: underline;
  text-decoration-color: var(--line-gold);
  text-underline-offset: 5px;
}

.hero-tertiary a:hover {
  color: var(--gold-radiant);
  text-decoration-color: var(--gold-radiant);
}

.page-hero {
  padding-block: 4.5rem;
}

.page-hero-inner {
  position: relative;
  max-width: 56rem;
  margin-inline: auto;
}

.page-hero h1 {
  font-size: 1.9rem;
}

.page-hero .gold-rule {
  margin-block: 1.75rem;
  max-width: 22rem;
}

/* --------------------------------------------------------- Why CAELUM --- */

.why-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.why-text h2 {
  font-size: 1.6rem;
  line-height: 1.25;
  max-width: 18ch;
}

.why-body {
  margin-top: 2rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 62ch;
}

.why-visual {
  display: flex;
  justify-content: center;
}

/* Line-drawn lunar horizon. Inherits the text colour so it reads correctly in
   both themes; the orbital arc keeps its gold. */
.horizon {
  width: 100%;
  max-width: 24rem;
  height: auto;
  color: var(--text-faint);
}

/* ------------------------------------------ Founding-document pages --- */

/*
  Used by the Mission page. The intent is a document, not a landing page:
  a compact introduction rather than a hero, prose held to a comfortable
  measure, and clear air between sections.
*/

.page-intro {
  position: relative;
  overflow: hidden;
  background: var(--band);
  color: var(--band-text);
  padding-block: 3rem 2.75rem;
}

.page-intro-inner {
  position: relative;
}

.page-intro h1 {
  font-size: 2rem;
  line-height: 1.2;
  color: var(--band-text);
}

.page-intro-lede {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--band-soft);
  max-width: 62ch;
}

/* Prose column: 768px, the low end of the 760–840px range. The container
   holds the section furniture (headings, rules, panels); the paragraphs
   themselves are capped in `ch` below so the measure lands at roughly
   65–75 characters rather than the ~92 a full 832px column would give. */
.wrap-doc {
  max-width: 48rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.doc-section {
  padding-block: 3.5rem;
}

.doc-section h2 {
  font-size: 1.5rem;
  line-height: 1.25;
}

.doc-lead {
  margin-top: 2rem;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text);
  max-width: 62ch;
}

.tone-navy .doc-lead {
  color: var(--band-text);
}

.doc-body {
  margin-top: 1.4rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 62ch;
}

.tone-navy .doc-body {
  color: var(--band-soft);
}

/* Secondary label beneath a section heading. */
.section-subtitle {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--gold-ink);
}

.section-lede {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 62ch;
}

/* --- In-page contents ------------------------------------------------- */

.section-nav {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  padding-block: 0.85rem;
}

/* Scrolls horizontally on narrow screens instead of forcing the page wide. */
.section-nav ul {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.15rem;
}

.section-nav a {
  display: block;
  white-space: nowrap;
  padding: 0.4rem 0.75rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.section-nav a:hover {
  color: var(--text);
  border-bottom-color: var(--gold);
}

/* --- Mission and Vision panels ---------------------------------------- */

.statement-panels {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.25rem;
}

.statement-panel {
  border: 1px solid var(--line-gold);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  background: var(--surface);
  padding: 1.75rem;
}

.statement-panel h3 {
  font-size: 1.25rem;
  color: var(--text);
}

.statement-panel p {
  margin-top: 1rem;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text);
}

/* --- Authority and scope ---------------------------------------------- */

/* Weightier than ordinary prose because it is the page's central
   qualification — but sober: no alert colouring, no warning icon. */
.authority-panel {
  margin-top: 2.25rem;
  background: var(--band);
  color: var(--band-text);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  padding: 2rem 1.75rem;
}

.authority-panel p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--band-text);
}

.authority-panel p + p {
  margin-top: 1.25rem;
  color: var(--band-soft);
}

/* --- Whom CAELUM serves ----------------------------------------------- */

.served-list {
  margin-top: 2.25rem;
}

.served-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-soft);
  break-inside: avoid;
}

.served-list li + li {
  margin-top: 1rem;
}

/* Four-pointed star bullet, echoing the Gospel stars on the seal.
   Decorative only — the list is a real <ul>, so structure is not
   carried by the ornament. */
.served-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  background-color: var(--gold);
  -webkit-mask: radial-gradient(circle at 0 0, transparent 70%, #000 71%) 0 0 /
      50% 50% no-repeat,
    radial-gradient(circle at 100% 0, transparent 70%, #000 71%) 100% 0 / 50% 50%
      no-repeat,
    radial-gradient(circle at 0 100%, transparent 70%, #000 71%) 0 100% / 50%
      50% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 70%, #000 71%) 100% 100% /
      50% 50% no-repeat;
  mask: radial-gradient(circle at 0 0, transparent 70%, #000 71%) 0 0 / 50% 50%
      no-repeat,
    radial-gradient(circle at 100% 0, transparent 70%, #000 71%) 100% 0 / 50% 50%
      no-repeat,
    radial-gradient(circle at 0 100%, transparent 70%, #000 71%) 0 100% / 50%
      50% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 70%, #000 71%) 100% 100% /
      50% 50% no-repeat;
}

/* --- Closing transition ----------------------------------------------- */

.closing-quiet {
  background: var(--bg-alt);
}

.closing-quiet h2 {
  font-size: 1.45rem;
}

/* ------------------------------------------------------------- Cards --- */

.grid {
  display: grid;
  gap: 1.5rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-gold);
  border-radius: 3px;
  padding: 1.75rem;
  box-shadow: var(--shadow);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(1, 27, 59, 0.1);
}

.card-plain {
  border-color: var(--line);
}

.card h2,
.card h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--text);
  margin-top: 1.25rem;
}

.card p {
  margin-top: 0.9rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-soft);
}

.card .icon {
  color: var(--gold-ink);
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.card-numeral {
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}

/* Lead paragraph inside an initiative card. Sans, but heavier than the
   supporting detail beneath it. */
.card-lead {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--text);
}

.status {
  display: inline-block;
  margin-top: 1.5rem;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border: 1px solid;
  border-radius: 2px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.status-draft {
  border-color: var(--gold);
  background: rgba(196, 148, 64, 0.16);
  color: var(--gold-ink);
}

.status-development {
  border-color: var(--line);
  background: transparent;
  color: var(--text-soft);
}

.status-future {
  border-color: var(--line);
  background: transparent;
  color: var(--text-faint);
}

.card-fill {
  flex: 1;
}


.in-brief h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-ink);
  margin-bottom: 1.25rem;
}

/* Motto set apart as a contemplative block. */
.motto-panel {
  margin-top: 2.5rem;
  padding: 2rem 1.75rem;
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
  text-align: center;
}

.motto-panel-latin {
  font-family: var(--display);
  font-size: 1.6rem;
  font-style: italic;
  line-height: 1.3;
  color: var(--gold-ink);
}

.motto-panel-english {
  margin-top: 1rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--text);
}

.motto-panel-cite {
  margin-top: 0.75rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* Operating principles. Restrained rules rather than heavy cards. */
.principle-grid {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.25rem;
}

.principle-card {
  border-top: 2px solid var(--gold);
  padding-top: 1.25rem;
}

.principle-card h3 {
  font-size: 1.3rem;
  color: var(--text);
}

.principle-card p {
  margin-top: 0.85rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-soft);
}

/* --- The seal ---------------------------------------------------------- */

.seal-intro {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.seal-figure {
  display: flex;
  justify-content: center;
}

/* object-fit keeps the seal square and undistorted at every width. */
.seal-figure img {
  width: min(300px, 70vw);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
}

.seal-key {
  margin-top: 3rem;
  border: 1px solid var(--line-gold);
  border-radius: 3px;
  padding: 1.75rem;
  background: rgba(0, 0, 0, 0.18);
}

.seal-key h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-radiant);
}

.seal-key-list {
  list-style: none;
  counter-reset: k;
  margin-top: 1.25rem;
  display: grid;
  gap: 0.6rem;
}

.seal-key-list li {
  counter-increment: k;
  position: relative;
  padding-left: 2.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--band-soft);
}

.seal-key-list li::before {
  content: counter(k);
  position: absolute;
  left: 0;
  width: 1.5rem;
  text-align: right;
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--gold-radiant);
}

.seal-detail {
  max-width: 52rem;
  margin: 3rem auto 0;
}

.seal-element + .seal-element {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.seal-element h3 {
  font-size: 1.35rem;
  color: var(--band-text);
}

.seal-element p {
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--band-soft);
}

.seal-scripture {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--gold-radiant);
}

.seal-conclusion {
  border-top: 2px solid var(--gold) !important;
}

.seal-conclusion p {
  color: var(--band-text);
}

/* Closing invocation beneath the patron cards. */
.christ-king {
  margin-top: 2.5rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}

/* ---------------------------------------------------------- Chaplaincy --- */

.sub-heading {
  margin-top: 2.5rem;
  font-size: 1.3rem;
  color: var(--text);
}

.tone-navy .sub-heading {
  color: var(--band-text);
}

/* A restrained pull quote: present, but never dominating the section. */
.quiet-quote {
  margin-top: 2rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--gold);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
  max-width: 46rem;
}

/* Two balanced panels. The second carries no alarm styling: what CAELUM
   cannot do is stated with the same dignity as what it can. */
.compare-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.25rem;
}

.compare-panel {
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 3px;
  background: var(--surface);
  padding: 1.75rem;
}

.compare-panel-limit {
  border-top-color: var(--crimson-shadow);
}

.compare-panel h3 {
  font-size: 1.25rem;
  color: var(--text);
  margin-bottom: 1.25rem;
}

/* Neutral bullet for the limiting column — a rule, not a red alert dot. */
.dotted-neutral li::before {
  background: var(--text-faint);
  border-radius: 1px;
  height: 2px;
  width: 10px;
  margin-top: 0.85em;
}

.inset-note {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 68ch;
}

.inset-note-dark {
  background: rgba(0, 0, 0, 0.22);
  color: var(--band-soft);
}


.question-list li {
  counter-increment: q;
  position: relative;
  padding-left: 3rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-soft);
}

.question-list li::before {
  content: counter(q);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 2rem;
  text-align: right;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold-ink);
}

.related-link {
  margin-top: 2.25rem;
}

.related-link a {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gold-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.related-link a:hover {
  color: var(--text);
}

/* Related publication, shown without a read link because it is unpublished. */
.related-essay {
  margin-top: 2.5rem;
  border: 1px solid var(--line-gold);
  border-radius: 3px;
  padding: 1.75rem;
  background: rgba(0, 0, 0, 0.18);
}

.related-essay-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-radiant);
}

.related-essay h3 {
  margin-top: 0.75rem;
  font-size: 1.35rem;
  color: var(--band-text);
}

.related-essay-desc {
  margin-top: 0.9rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--band-soft);
  max-width: 66ch;
}

.related-essay .status {
  margin-top: 1.25rem;
  border-color: var(--line-gold);
  color: var(--band-soft);
  background: transparent;
}


.ref-group {
  border-left: 2px solid var(--line-gold);
  padding-left: 1.25rem;
}

.ref-group h3 {
  font-size: 1.2rem;
  color: var(--text);
}

.ref-group ul {
  margin-top: 0.75rem;
}

.ref-group li {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-soft);
}

.ref-group li + li {
  margin-top: 0.4rem;
}

.security-notice {
  margin-top: 2rem;
  border: 1px solid var(--line-gold);
  border-radius: 3px;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.2);
}

.security-notice h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-radiant);
}

.security-notice p {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--band-text);
  max-width: 72ch;
}

/* -------------------------------------------------------- Publications --- */

.publications-body {
  padding-block: 3.5rem;
}

.series + .series {
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: 1px solid var(--line);
}

.series-head h2 {
  font-size: 1.6rem;
}

.series-subtitle {
  margin-top: 0.4rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--gold-ink);
}

.series-blurb {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 68ch;
}

.series-spec {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-faint);
}

.pub-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.pub-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  background: var(--surface);
  padding: 1.75rem;
}

.pub-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.pub-series {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-ink);
}

.pub-card h3 {
  margin-top: 0.9rem;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--text);
}

.pub-summary {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 68ch;
}

.pub-length {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--text-faint);
}

.pub-note {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-faint);
  max-width: 68ch;
}


.proposed-heading {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}

.proposed-list {
  margin-top: 1rem;
  display: grid;
  gap: 0.6rem;
}

.proposed-list li {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--text-soft);
}

.proposed-note {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* Status labels — each is text, never colour alone. */
.status-published {
  border-color: var(--gold);
  background: rgba(196, 148, 64, 0.16);
  color: var(--gold-ink);
}

.status-forthcoming {
  border-color: var(--gold);
  background: transparent;
  color: var(--gold-ink);
}

.status-review,
.status-draft {
  border-color: var(--line);
  background: transparent;
  color: var(--text-soft);
}

.status-development {
  border-color: var(--line);
  background: transparent;
  color: var(--text-soft);
}

.status-proposed {
  border-color: var(--line);
  background: transparent;
  color: var(--text-faint);
}

.status {
  margin-top: 0;
}

/* --- Editorial standards ---------------------------------------------- */

.review-notice {
  margin-top: 2rem;
  border-left: 3px solid var(--gold);
  background: var(--band);
  color: var(--band-text);
  border-radius: 3px;
  padding: 1.75rem;
}

.review-notice p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--band-text);
  max-width: 72ch;
}

.review-notice p + p {
  margin-top: 1.1rem;
  color: var(--band-soft);
}

.status-key {
  margin-top: 2.5rem;
}

.status-key h3 {
  font-size: 1.2rem;
  color: var(--text);
}

.status-key dl {
  margin: 1.25rem 0 0;
}

.status-key dl > div + div {
  margin-top: 0.75rem;
}

.status-key dt {
  display: inline;
  font-weight: 600;
  color: var(--text);
}

.status-key dt::after {
  content: " — ";
  color: var(--text-faint);
}

.status-key dd {
  display: inline;
  margin: 0;
  color: var(--text-soft);
}

/* Two side-by-side lists (Write for CAELUM). */
.two-lists {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.25rem;
}

.two-lists h3 {
  font-size: 1.25rem;
  color: var(--text);
  margin-bottom: 1.25rem;
}

/* --------------------------------------------------------- Initiatives --- */

/* Tighter intro so Initiative I comes into view quickly. */
.page-intro-tight {
  padding-block: 2.5rem 3rem;
}

.page-summary {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--band-soft);
  max-width: 62ch;
}

/* A status statement, not a warning: no red, no icon, no alert framing. */
.development-note {
  margin-top: 1.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--line-gold);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--band-soft);
  max-width: 68ch;
}

.initiatives-body {
  padding-block: 3.5rem;
}

.initiative-grid {
  display: grid;
  gap: 1.5rem;
}

.initiative {
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 3px;
  background: var(--surface);
  padding: 1.75rem;
  /* No glow, no large shadow, no hover animation: the whole card is not a
     link, so it should not behave like one. */
}

.initiative-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.initiative-icon {
  color: var(--gold-ink);
}

.initiative-numeral {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  /* Gold-ink rather than raw Mission Gold: #C49440 sits at only 2.4:1 on the
     light card and is genuinely hard to read. This keeps the numerals gold
     while clearing AA in both themes. */
  color: var(--gold-ink);
}

/* The numeral is aria-hidden; the accessible name carries "Initiative II: ..."
   as visually hidden text inside the heading instead. */
.initiative-title {
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.3;
  color: var(--text);
}

.initiative-fields {
  margin-top: 1.5rem;
}

.field-block + .field-block {
  margin-top: 1.25rem;
}

/* Short structural labels. Small and restrained — real text, never images. */
.field-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-ink);
}

.field-text {
  margin-top: 0.4rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 64ch;
}

/* Operating principle — given modest weight because it governs the rest. */
.initiative-principle {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--gold);
  background: var(--bg-alt);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--text);
}

/* Scope limits specific to a single initiative. */
.initiative-note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-faint);
  max-width: 64ch;
}

.initiative-links {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* Underlined, so links are distinguishable without relying on colour. */
.initiative-links a {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.initiative-links a:hover {
  color: var(--text);
}

/* --- Stage of development ---------------------------------------------- */

.stage-notice {
  margin-top: 2.5rem;
  border-left: 3px solid var(--gold);
  background: var(--band);
  color: var(--band-text);
  border-radius: 3px;
  padding: 2rem 1.75rem;
}

.stage-notice h2 {
  font-size: 1.25rem;
  color: var(--band-text);
}

.stage-notice p {
  margin-top: 1.1rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--band-soft);
  max-width: 72ch;
}

/* Secondary actions in a closing section: quieter than the primary button. */
.closing-secondary {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: var(--band-soft);
}

.closing-secondary a {
  color: var(--band-soft);
  text-decoration: underline;
  text-decoration-color: var(--line-gold);
  text-underline-offset: 5px;
}

.closing-secondary a:hover {
  color: var(--gold-radiant);
  text-decoration-color: var(--gold-radiant);
}

.closing-secondary .sep {
  padding-inline: 0.5rem;
  color: var(--band-faint);
}

/* ------------------------------------------------------------ Pillars --- */

.pillar-grid {
  margin-top: 3rem;
}

/* Equal visual weight across all four cards. */
.pillar-card {
  height: 100%;
}

.pillar-card h3 {
  font-size: 1.35rem;
}

/* The emphasis line is the scannable claim; it is set apart from the
   explanatory paragraph by family, weight, and a gold rule. */
.pillar-emphasis {
  margin-top: 0.85rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--text);
}

.pillar-body {
  margin-top: 1.1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-soft);
  flex: 1;
}

.pillar-link {
  margin-top: 1.5rem;
}

.pillar-link a {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.pillar-link a:hover {
  border-bottom-color: var(--gold-ink);
}

/* ------------------------------------------------------- Closing call --- */

.closing {
  text-align: center;
}

.closing-inner {
  position: relative;
}

.closing h2 {
  font-size: 1.7rem;
  line-height: 1.25;
  color: var(--band-text);
}

.closing-body {
  margin: 1.5rem auto 0;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--band-soft);
  max-width: 62ch;
}

.closing-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

.closing-actions .btn {
  width: 100%;
  max-width: 22rem;
}

/* -------------------------------------------------------------- Note --- */

.note {
  border-left: 4px solid var(--mission-red);
  background: var(--bg-alt);
  padding: 1.75rem;
  border-radius: 3px;
}

.note h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}

.note p {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-soft);
}

.panel {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.75rem;
  background: var(--surface);
}

.panel-silver {
  background: var(--bg-alt);
}

.panel-gold {
  border-color: var(--line-gold);
}

.panel-red {
  border-color: rgba(195, 21, 28, 0.35);
}

.panel h2,
.panel h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}

.dotted li {
  display: flex;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-soft);
}

.dotted li + li {
  margin-top: 0.75rem;
}

.dotted li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.65rem;
  border-radius: 50%;
  background: var(--gold);
}

.dotted-red li::before {
  background: var(--mission-red);
}

/* ------------------------------------------------------------- Motto --- */

/* Scripture and the motto: serif, per the typographic rule. */

.motto {
  text-align: center;
}

.motto-latin {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  color: var(--gold-radiant);
}

.motto-cite {
  font-family: var(--sans);
  margin-top: 1.1rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--band-faint);
}

.motto blockquote {
  margin: 1.4rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--band-text);
}

/* -------------------------------------------------------- Statements --- */

.statement + .statement {
  margin-top: 3.5rem;
}

.statement h2 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold-ink);
}

.statement .gold-rule {
  margin-top: 1rem;
  max-width: 8rem;
}

/* A formal declaration, not a quotation — so sans, set large and light. */
.statement p {
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.68;
  color: var(--text);
  max-width: 52rem;
}

.entry + .entry {
  margin-top: 3.5rem;
}

.entry h2 {
  font-size: 1.35rem;
  color: var(--text);
}

.entry .gold-rule {
  margin-top: 1rem;
  max-width: 6rem;
}

.entry .prose {
  margin-top: 1.25rem;
}

/* Pull statement. Sans by default; serif only when it is a real quotation. */
.pull {
  font-family: var(--sans);
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1.6;
  max-width: 46rem;
  margin: 0;
}

blockquote.pull {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.5;
}

/* ---------------------------------------- Patronal intercessions --- */

.patronal {
  background: var(--bg);
}

.patron-grid {
  margin-top: 3rem;
}

.patron-card {
  text-align: left;
}

.patron-mark-wrap {
  color: var(--gold-ink);
  display: block;
}

.patron-card h3 {
  margin-top: 1.25rem;
  font-size: 1.35rem;
  color: var(--text);
}

/* The nature of the patronage, kept visually subordinate to the name. */
.patron-role {
  margin-top: 0.5rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.55;
  color: var(--gold-ink);
}

.patron-body {
  margin-top: 1.1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-soft);
  flex: 1;
}

/* The invocation is prayer, so it is set in serif and marked off by a rule. */
.patron-invocation {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-gold);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
}

/* --- The prayer ------------------------------------------------------ */

.prayer {
  max-width: 760px;
  margin: 4rem auto 0;
  padding: 2.5rem 1.75rem;
  background: var(--band);
  color: var(--band-text);
  border: 1px solid var(--gold);
  border-radius: 3px;
  text-align: center;
}

.prayer-ornament {
  display: block;
  margin-inline: auto;
}

.prayer-title {
  margin-top: 1.25rem;
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--band-text);
}

.prayer-text {
  margin-top: 2rem;
  text-align: left;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--band-text);
}

.prayer-text p + p {
  margin-top: 1.4rem;
}

/* The closing doxology, set apart. */
.prayer-text p:last-child {
  margin-top: 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-gold);
}

.prayer-note {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-gold);
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--band-faint);
  text-align: left;
}

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

/*
  There is no form here any more. The old .form-grid / .field / .honeypot /
  .confirmation rules were removed with it — they styled a form that never
  transmitted anything. (.field-block, .field-label and .field-text are
  unrelated; they belong to the Initiatives page and remain in place.)
*/

.interim-card {
  border: 1px solid var(--line-gold);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  background: var(--surface);
  padding: 1.75rem;
}

.interim-card h2 {
  font-size: 1.5rem;
}

.interim-lead {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-soft);
}

/* The address is live selectable text, never an image or an obfuscated
   script-built string, so it can be read aloud and copied. */
.interim-address {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}

.interim-address a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.interim-address a:hover {
  color: var(--gold-ink);
}

/* Deliberately subordinate: present and readable, but not competing with the
   address above it. */
.interim-disclosure {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-faint);
}

/* --- Correspondence categories ----------------------------------------- */

.category-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.25rem;
}

.category-card {
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 3px;
  background: var(--surface);
  padding: 1.5rem;
}

.category-card h3 {
  font-size: 1.2rem;
  line-height: 1.35;
}

/* Underlined, so the link is identifiable without relying on colour. */
.category-card h3 a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.category-card h3 a:hover {
  color: var(--gold-ink);
  text-decoration-color: var(--gold);
}

.category-card p {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-soft);
}

.mail-note {
  margin-top: 1.75rem;
  font-size: 0.88rem;
  /* --text-faint measures 4.49:1 on the banded background, just under AA;
     --text-soft keeps this genuinely readable. */
  color: var(--text-soft);
}

/* Echoes a ?subject= topic back to the visitor. Built by script; hidden when
   absent. */
.topic-banner {
  margin-top: 2rem;
  border-left: 3px solid var(--gold);
  background: var(--surface);
  border-radius: 3px;
  padding: 1.5rem;
}

.topic-banner-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-ink);
}

.topic-banner-topic {
  margin-top: 0.5rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--text);
}

/* --- Before you write --------------------------------------------------- */

.before-block h3 {
  font-size: 1.25rem;
  color: var(--text);
}

.before-block p {
  margin-top: 0.9rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-soft);
}

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

.site-footer {
  background: var(--band);
  color: var(--band-soft);
  border-top: 1px solid var(--line-gold);
  padding-top: 3.5rem;
}

.footer-columns {
  display: grid;
  gap: 2.75rem;
}

.footer-seal {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.footer-brand-name {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.24em;
  color: var(--band-text);
  margin-top: 0.9rem;
}

/* Reduced tracking: the full name is far too long for wide letter-spacing. */
.footer-brand-full {
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--band-soft);
  margin-top: 0.4rem;
  max-width: 24rem;
}

.footer-brand-mission {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--band-soft);
  margin-top: 1rem;
  max-width: 30rem;
}

.site-footer h2 {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-radiant);
}

.footer-links {
  margin-top: 1rem;
}

.footer-links li + li {
  margin-top: 0.5rem;
}

.footer-links a {
  font-size: 0.95rem;
  color: var(--band-soft);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover,
.footer-links a[aria-current="page"] {
  color: var(--gold-radiant);
}

.footer-motto {
  margin-top: 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.35;
  color: var(--band-text);
}

.footer-motto-translation {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--band-soft);
}

.footer-motto-citation {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--band-faint);
}

/* Footer invocations. Present on every page, but deliberately quieter than
   the navigation and the motto above it, and above the disclaimer below. */
.footer-intercession {
  text-align: center;
  padding-bottom: 3.5rem;
}

.footer-intercession-heading {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-radiant);
  margin-bottom: 1.5rem;
}

.footer-intercession p {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--band-soft);
  max-width: 44rem;
  margin-inline: auto;
}

/* One invocation per line, with room to breathe, at every width. */
.footer-intercession p + p {
  margin-top: 0.9rem;
}

.footer-intercession-link {
  margin-top: 1.75rem;
}

.footer-intercession .footer-intercession-link a {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-radiant);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.footer-intercession .footer-intercession-link a:hover {
  border-bottom-color: var(--gold-radiant);
}

/* --- Footer bottom bar -------------------------------------------------
   The institutional disclaimer sits in its own band: subordinate to the
   footer above it, but at full body-text contrast and size. It is never
   dimmed to the point of being hard to read.
   ---------------------------------------------------------------------- */

.footer-bottom {
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
  padding-block: 1.5rem;
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-disclaimer {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--band-soft);
  max-width: 70ch;
}

.footer-copyright {
  font-size: 0.85rem;
  color: var(--band-faint);
  white-space: nowrap;
}

/* ------------------------------------------------------- Breakpoints --- */

@media (min-width: 640px) {
  .wrap,
  .wrap-narrow,
  .wrap-mid {
    padding-inline: 2rem;
  }

  .brand-tag {
    display: block;
  }

  .hero h1,
  .page-hero h1 {
    font-size: 2.4rem;
  }

  .hero-seal {
    width: 138px;
    height: 138px;
  }

  .hero h1 {
    font-size: 2.1rem;
  }

  .hero-actions,
  .closing-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: none;
    width: auto;
    gap: 0.85rem 1rem;
  }

  .closing-actions .btn {
    width: auto;
  }

  .btn-row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero .btn-row {
    justify-content: center;
  }

  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .motto-latin {
    font-size: 2rem;
  }

  .footer-bottom-inner {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
  }

  .list-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }

  .served-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }

  .served-list li + li {
    margin-top: 0;
  }

  .served-list li {
    margin-top: 1rem;
  }

  .statement-panels {
    gap: 1.75rem;
  }

  .authority-panel {
    padding: 2.25rem 2.25rem;
  }
}

@media (min-width: 768px) {
  section {
    padding-block: 6rem;
  }

  /* Desktop hero: ~76px top, ~88px bottom. Kept tight on purpose so the
     seal, name, heading, motto, supporting line, and primary action all
     land within the first viewport on a laptop. */
  .hero {
    padding-block: 3rem 3.5rem;
  }

  .page-hero {
    padding-block: 7rem;
  }

  .hero-seal {
    width: 155px;
    height: 155px;
  }

  .hero h1 {
    font-size: 2.9rem;
    margin-top: 1.75rem;
  }



  .hero-motto {
    font-size: 1.5rem;
  }

  .hero-support {
    font-size: 1.1rem;
  }

  .page-hero h1 {
    font-size: 3rem;
  }

  .page-hero .lede {
    font-size: 1.3rem;
  }

  .why-text h2 {
    font-size: 2rem;
  }

  .closing h2 {
    font-size: 2.1rem;
  }

  /* Founding-document rhythm: ~96px between major sections on tablet,
     ~112px on desktop (see the 1024px block). */
  .doc-section {
    padding-block: 5rem;
  }

  .page-intro {
    padding-block: 4rem 3.5rem;
  }

  /* ~72px top, ~76px bottom: about 22% less than the Mission intro. */
  .page-intro-tight {
    padding-block: 4.5rem 4.75rem;
  }

  .initiatives-body {
    padding-block: 5rem;
  }

  .page-intro h1 {
    font-size: 2.75rem;
  }

  .doc-section h2 {
    font-size: 1.9rem;
  }

  .closing-quiet h2 {
    font-size: 1.75rem;
  }

  .motto-latin {
    font-size: 2.4rem;
  }

  .motto blockquote {
    font-size: 1.75rem;
  }

  .pull {
    font-size: 1.6rem;
  }

  blockquote.pull {
    font-size: 2rem;
  }

  .statement p {
    font-size: 1.45rem;
  }

  .seal-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3rem;
  }

  .prayer {
    padding: 3.25rem 3rem;
  }

  .prayer-title {
    font-size: 1.45rem;
  }

  .prayer-text {
    font-size: 1.3rem;
  }

  .footer-intercession p {
    font-size: 1.2rem;
  }
}

@media (min-width: 1024px) {
  .nav-desktop {
    display: block;
  }

  .menu-toggle {
    display: none;
  }

  .nav-mobile {
    display: none !important;
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-2-lg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 3.5rem;
  }

  /* Statement column beside the drawn horizon. */
  .why-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 4rem;
  }

  /* Brand column wider than the two link columns. */
  .footer-columns {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
  }

  .doc-section {
    padding-block: 6rem; /* ~96px; with heading margins, ~112px apparent */
  }

  .statement-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Two columns; Initiative V spans the full width. DOM order is unchanged,
     so the reading order stays I – V. */
  .initiative-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
  }

  .initiative-wide {
    grid-column: 1 / -1;
  }

  .initiative {
    padding: 2rem;
  }

  .stage-notice {
    padding: 2.25rem;
  }

  .publications-body {
    padding-block: 5rem;
  }

  .pub-card {
    padding: 2rem;
  }


  .two-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.5rem;
  }

  .review-notice {
    padding: 2.25rem;
  }

  .compare-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compare-panel {
    padding: 2rem;
  }



  .seal-intro {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3.5rem;
  }

  .seal-key-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 2.5rem;
  }

  .principle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 3rem;
  }

  .seal-key {
    padding: 2.25rem;
  }

  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .interim-card {
    padding: 2.25rem;
  }
}

/* ------------------------------------------------------------ Motion --- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ------------------------------------------------------------- Print --- */

@media print {
  .site-header,
  .skip-link,
  .btn-row,
  .stars,
  .header-actions {
    display: none !important;
  }

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

  .tone-navy,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
}