/* ==========================================================================
   The Holiness Institute — main stylesheet
   Palette and type drawn from the Institute's logo and diagrams:
   deep navy, gold, warm cream, Sacred-Heart red.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL — see assets/fonts/OFL.txt) ------ */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-v21-latin-500italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/eb-garamond-v32-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/eb-garamond-v32-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/eb-garamond-v32-latin-600.woff2') format('woff2');
}

/* ---------- Design tokens ------------------------------------------------ */

:root {
  --navy:        #1b2a4a;
  --navy-deep:   #14213d;
  --ink:         #2b2b27;
  --cream:       #faf6ee;
  --cream-deep:  #f3ecdd;
  /* --gold is decorative only: rules, ornaments, large numerals.
     Text smaller than 24px must use --gold-text (4.5:1 on cream). */
  --gold:        #b08d3e;
  --gold-bright: #c9a227;
  --gold-text:   #7d6326;
  --red:         #7a1f1f;

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;

  --measure: 70ch;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.75rem;
  --space-5: 3rem;
  --space-6: 5rem;
}

/* ---------- Base ---------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

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

/* Subliminal warmth: a barely-perceptible candlelight that brightens from
   above and warms toward the edges. A viewport-fixed layer behind all content
   (iOS-safe, unlike background-attachment: fixed); --cream is the fallback. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(135% 105% at 50% -8%,
    #fefbf4 0%, #faf6ee 44%, #f4ebda 100%);
}

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

a {
  color: var(--navy);
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
a:hover { text-decoration-color: var(--gold-bright); }

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* Ink-on-gold (~4.6:1) instead of the former cream-on-gold (~2.9:1). */
::selection { background: var(--gold); color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

h1 { font-size: clamp(2.1rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-top: var(--space-5); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); margin-top: var(--space-4); }

p { margin: 0 0 1.4em; }

hr {
  border: 0;
  border-top: 1px solid var(--gold);
  width: 4rem;
  margin: var(--space-5) auto;
}

/* Fleuron divider for major spiritual transitions: a small ornament flanked
   by short gold rules. Use <div class="fleuron" role="presentation">✦</div>;
   add .sacred to tint the ornament Sacred-Heart red. The flanking rules carry
   the divider even if the glyph is unavailable. */
.fleuron {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-5) auto;
  color: var(--gold);
  font-size: 1.05rem;
  line-height: 1;
}
.fleuron::before,
.fleuron::after {
  content: '';
  width: 3.25rem;
  border-top: 1px solid var(--gold);
  opacity: 0.85;
}
.fleuron.sacred { color: var(--red); }

/* Illuminated initial — a quiet nod to the manuscript tradition (rubricated
   chapter initials). Apply .drop-cap to a section's opening paragraph only;
   never to a one-line paragraph or one that opens with a quotation mark. */
.prose .drop-cap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.1em;
  line-height: 0.8;
  padding: 0.08em 0.14em 0 0;
  color: var(--red);
}

/* Illuminated pull-quote: a line lifted verbatim from the surrounding prose,
   set large between paragraphs. Decorative repetition — always mark the
   element aria-hidden="true" so screen readers hear the text once. */
.pull-quote {
  max-width: 30rem;
  margin: var(--space-5) auto;
  text-align: center;
}
.pull-quote::before {
  content: '✦';
  display: block;
  color: var(--gold);
  font-size: 0.85rem;
  line-height: 1;
  margin: 0 auto var(--space-3);
}
.pull-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.45;
  color: var(--navy);
  margin: 0;
}

/* ---------- Utility ------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -4rem;
  z-index: 100;
  background: var(--navy);
  color: var(--cream);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  transition: top 0.2s ease;
}
.skip-link:focus { top: var(--space-3); }

.kicker {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.14em;
  color: var(--gold-text);
  font-size: 0.95rem;
  margin-bottom: var(--space-2);
}

.center { text-align: center; }

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

.wrap {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.prose {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

main { display: block; }

.section { padding-block: var(--space-5); }

/* ---------- Scripture, quotes, prayers ------------------------------------ */

.epigraph {
  text-align: center;
  max-width: 38rem;
  margin: var(--space-5) auto;
  padding-inline: var(--space-3);
}

.epigraph p,
.epigraph blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 var(--space-2);
}

.epigraph cite,
.quote cite {
  font-family: var(--font-body);
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  color: var(--gold-text);
}

.epigraph::before,
.epigraph::after {
  content: '';
  display: block;
  width: 3rem;
  border-top: 1px solid var(--gold);
  margin: var(--space-3) auto;
}

/* (An older, simpler .fleuron block lived here; it silently overrode the
   flanked divider defined above, so the flanking gold rules never rendered.
   Removed — the earlier definition is the intended one.) */

/* Scripture / direct divine speech. Reserved for the Lord's own words at
   section thresholds — lifted, centered, and marked by a small red cross,
   so His voice reads as sacred rather than as an ordinary pull-quote. */
.quote {
  text-align: center;
  max-width: 34rem;
  margin: var(--space-3) auto var(--space-5);
  padding: 0;
  border: 0;
  font-style: normal;
}
.quote::before {
  content: '\2020'; /* dagger-cross — widely supported in serif faces */
  display: block;
  color: var(--red);
  font-size: 1.1rem;
  line-height: 1;
  margin: 0 auto var(--space-3);
}
.quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.5;
  color: var(--navy);
  margin: 0;
}
.quote cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  color: var(--gold-text);
  margin-top: var(--space-2);
}

.prayer {
  background: var(--cream-deep);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  /* A faint inner glow of gold light, so the prayer reads as illuminated. */
  box-shadow: inset 0 0 38px rgb(176 141 62 / 0.13);
  padding: var(--space-6) var(--space-4);
  margin: var(--space-5) 0;
  text-align: center;
}
.prayer::before {
  content: '✣';
  display: block;
  color: var(--red);
  font-size: 1.3rem;
  margin-bottom: var(--space-3);
}
.prayer p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.75;
  color: var(--navy);
  max-width: 36rem;
  margin: 0 auto var(--space-3);
}
.prayer p:last-child { margin-bottom: 0; }

/* ---------- Doors / cards -------------------------------------------------- */

.doors {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-5);
}
@media (min-width: 760px) {
  .doors { grid-template-columns: repeat(3, 1fr); }
}

.door {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  background: var(--cream-deep);
  border: 1px solid var(--gold);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.door:hover, .door:focus-visible {
  border-color: var(--gold-bright);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgb(27 42 74 / 0.10);
}
.door:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgb(27 42 74 / 0.08);
}

/* Icon medallion — a gold-ringed disc of candlelight, echoing the logo. */
.door-icon {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: var(--space-1);
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--cream);
  box-shadow: inset 0 0 14px rgb(176 141 62 / 0.10);
  color: var(--navy);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.door-icon svg { width: 2.15rem; height: 2.15rem; display: block; }
.door:hover .door-icon, .door:focus-visible .door-icon {
  border-color: var(--gold-bright);
  box-shadow: inset 0 0 20px rgb(176 141 62 / 0.20);
}

.door .door-label {
  font-variant: small-caps;
  letter-spacing: 0.16em;
  color: var(--navy);
  font-size: 1.3rem;
  line-height: 1.1;
}

.door .door-desc {
  display: block;
  font-style: italic;
  color: var(--ink);
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  max-width: 18rem;
}

/* Numbered path cards on hub pages */
.path-list {
  list-style: none;
  counter-reset: pathstep;
  margin: var(--space-4) 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.path-list li { counter-increment: pathstep; }
.path-list a {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
  background: var(--cream-deep);
  border: 1px solid var(--gold);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.path-list a:hover, .path-list a:focus-visible {
  border-color: var(--gold-bright);
  transform: translateY(-2px);
}
.path-list a:active { transform: translateY(0); }
.path-list a::before {
  content: counter(pathstep);
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold); /* large numeral: decorative-size gold is permitted */
  line-height: 1;
}
.path-list .path-title {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--navy);
  font-size: 1.1rem;
  display: block;
}
.path-list .path-note {
  display: block;
  font-style: italic;
  font-size: 1rem;
  margin-top: var(--space-1);
}

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

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-size: 1.05rem;
  color: var(--cream);
  background: var(--navy);
  border: 1px solid var(--gold);
  padding: 0.8rem 2.6rem;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--navy-deep);
  border-color: var(--gold-bright);
}
.btn:active { transform: translateY(1px); }

/* A centered row of buttons; wraps to a stacked column with breathing room. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-block: var(--space-4);
  padding-inline: var(--space-3);
}

.continue-block {
  text-align: center;
  margin: var(--space-6) 0 var(--space-5);
}
.continue-block .quiet-link {
  display: block;
  margin-top: var(--space-4);
  font-size: 0.98rem;
  font-style: italic;
}

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

.site-header {
  border-bottom: 1px solid var(--cream-deep);
  background: var(--cream);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}
.brand img { width: 54px; height: 54px; }
.brand .brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--navy);
  letter-spacing: 0.02em;
}

/* Minimal header (thresholds, notion page) */
.site-header.minimal { border-bottom: 0; }
.site-header.minimal .wrap { justify-content: center; }

.nav-toggle {
  display: none;
  font-family: var(--font-body);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-size: 1rem;
  background: none;
  border: 1px solid var(--gold);
  color: var(--navy);
  padding: 0.35rem 1rem;
  cursor: pointer;
}

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding: 0;
}
.site-nav a {
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: 1rem;
  text-decoration: none;
  color: var(--navy);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.site-nav a:hover { border-bottom-color: var(--gold-bright); }
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--gold);
  color: var(--gold-text);
}

@media (max-width: 850px) {
  .nav-toggle { display: inline-block; }
  .site-nav {
    display: none;
    width: 100%;
  }
  .site-nav.open { display: block; }
  .site-nav ul {
    flex-direction: column;
    gap: 0;
    background: var(--navy);
    margin-top: var(--space-3);
  }
  .site-nav a {
    display: block;
    color: var(--cream);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgb(250 246 238 / 0.1);
  }
  .site-nav a[aria-current="page"] { color: var(--gold-bright); }
}

/* No-JS fallback nav */
.noscript-nav {
  font-size: 0.95rem;
  text-align: center;
  padding: var(--space-2);
  background: var(--cream-deep);
}

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

.site-footer {
  background-color: var(--navy-deep);
  /* a faint warmth gathering at the top edge, like reflected candlelight */
  background-image: radial-gradient(120% 150% at 50% 0%,
    #1d2f52 0%, var(--navy-deep) 60%);
  border-top: 1px solid rgb(176 141 62 / 0.45);
  color: var(--cream);
  margin-top: var(--space-6);
  padding: var(--space-5) 0 var(--space-4);
}
.site-footer a { color: var(--cream); text-decoration-color: var(--gold); }
/* The columns size to their content and center as a group — so the footer
   sits centered like the rest of the site's chrome (motto, epigraphs,
   captions) — while headings and links stay left-aligned within each list. */
.site-footer .footer-cols {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  justify-content: center;
}
@media (min-width: 700px) {
  .site-footer .footer-cols {
    grid-template-columns: repeat(3, auto);
    column-gap: clamp(2.5rem, 8vw, 7rem);
  }
}
.site-footer h2 {
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--gold-bright);
  margin: 0 0 var(--space-2);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-1); }
.site-footer .footer-motto {
  text-align: center;
  border-top: 1px solid rgb(250 246 238 / 0.15);
  padding-top: var(--space-4);
}
.site-footer .footer-motto p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  margin-bottom: var(--space-1);
}
.site-footer .footer-fine {
  font-size: 0.9rem;
  opacity: 0.8;
  text-align: center;
  margin: var(--space-2) 0 0;
}

.site-footer.minimal { padding: var(--space-4) 0; }
.site-footer.minimal .footer-cols { display: none; }
/* Minimal footer is a single quiet sign-off line — no divider above it. */
.site-footer.minimal .footer-motto { border-top: 0; padding-top: 0; }

/* ---------- Landing page ----------------------------------------------------- */

.landing main {
  max-width: 44rem;
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) 0;
  text-align: center;
}
/* The Sacred Heart is the institute's center — let it anchor the landing,
   resting within a soft fall of gold light. */
.landing .landing-logo-halo {
  display: inline-block;
  margin: var(--space-4) auto var(--space-2);
  padding: clamp(18px, 3vw, 30px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%,
    rgb(201 162 39 / 0.18) 0%,
    rgb(201 162 39 / 0.05) 52%,
    transparent 72%);
}
.landing .landing-logo {
  display: block;
  width: clamp(124px, 19vw, 172px);
  height: auto;
  margin: 0;
}
.landing .landing-title {
  /* An h1 for document structure, rendered as the quiet small-caps line it
     has always been (body face, not the display face). */
  font-family: var(--font-body);
  font-variant: small-caps;
  letter-spacing: 0.22em;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--navy);
  font-weight: 500;
  margin-bottom: 0;
}
.landing .landing-sub {
  font-variant: small-caps;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--gold-text);
  margin-top: var(--space-1);
}

.questions {
  list-style: none;
  margin: var(--space-5) auto;
  padding: 0;
  max-width: 36rem;
}
.questions li {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  line-height: 1.5;
  color: var(--navy);
  padding: var(--space-3) 0;
}
.questions li + li { border-top: 1px solid var(--cream-deep); }

.landing .landing-prose {
  text-align: left;
  margin-block: var(--space-5);
}

.landing .ways-heading {
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-size: 1.1rem;
  color: var(--gold-text);
  margin-top: var(--space-5);
}

.quiet-link { font-size: 0.98rem; }

/* Closing gateway to the foundational "notion" essay. Understated per the
   author's wish that it not dominate the landing — but deliberate, not hidden. */
.landing-coda {
  text-align: center;
  margin: var(--space-5) auto var(--space-6);
}
.landing-coda .coda-kicker {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-size: 0.92rem;
  color: var(--gold-text);
  margin-bottom: var(--space-2);
}
.landing-coda .coda-link {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  line-height: 1.3;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.landing-coda .coda-link:hover,
.landing-coda .coda-link:focus-visible {
  color: var(--gold-text);
  border-bottom-color: var(--gold-bright);
}

/* ---------- Threshold pages ---------------------------------------------------- */

.threshold main {
  padding-top: var(--space-4);
}
.threshold .prose { font-size: 1.22rem; line-height: 1.75; }

/* ---------- Essay pages ----------------------------------------------------------- */

.essay-layout {
  display: grid;
  gap: var(--space-5);
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 1100px) {
  .essay-layout {
    grid-template-columns: minmax(0, 1fr) 16rem;
  }
}

.essay-toc-rail { display: none; }
@media (min-width: 1100px) {
  .essay-toc-rail { display: block; }
  .essay-toc-rail .toc-inner {
    position: sticky;
    top: var(--space-4);
    border-left: 1px solid var(--cream-deep);
    padding-left: var(--space-4);
  }
}
.essay-toc-rail h2 {
  font-family: var(--font-body);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
  color: var(--gold-text);
  margin: 0 0 var(--space-3);
}
.essay-toc-rail ul { list-style: none; margin: 0; padding: 0; }
.essay-toc-rail li { margin-bottom: var(--space-2); }
.essay-toc-rail a {
  text-decoration: none;
  font-size: 0.98rem;
  color: var(--ink);
  display: block;
  line-height: 1.4;
}
.essay-toc-rail a:hover { color: var(--navy); }
.essay-toc-rail a.active {
  color: var(--gold-text);
  font-weight: 600;
}

.toc-mobile {
  max-width: var(--measure);
  margin: var(--space-4) auto;
  padding-inline: var(--space-3);
}
@media (min-width: 1100px) { .toc-mobile { display: none; } }
.toc-mobile summary {
  font-variant: small-caps;
  letter-spacing: 0.14em;
  color: var(--navy);
  cursor: pointer;
  padding: var(--space-2) 0;
}
.toc-mobile ol {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
}
.toc-mobile li { margin-bottom: var(--space-1); }

.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--gold-bright);
  z-index: 90;
}

article section { scroll-margin-top: var(--space-5); }

.section-kicker {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--gold-text);
  margin: var(--space-6) 0 var(--space-1);
  text-align: center;
}
.section-kicker::after {
  content: '';
  display: block;
  width: 2.5rem;
  border-top: 1px solid var(--gold);
  margin: var(--space-2) auto 0;
}
article section h2 {
  text-align: center;
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

/* ---------- Principle numerals (About page) ------------------------------------------ */

.principle-num {
  font-family: var(--font-display);
  color: var(--gold); /* large decorative numeral */
  font-size: 1.6em;
  margin-right: 0.4rem;
}

/* ---------- About page: John Paul's Rule callout ------------------------------------ */

.jp-rule {
  background: var(--cream-deep);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  box-shadow: inset 0 0 38px rgb(176 141 62 / 0.13);
  padding: var(--space-4) var(--space-4) var(--space-4);
  margin-block: var(--space-5);
  text-align: center;
}
.jp-rule-title {
  font-family: var(--font-body);
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-size: 1.05rem;
  color: var(--gold-text);
  margin: 0 0 var(--space-3);
}
.jp-rule-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.jp-rule-lines li {
  padding: var(--space-2) 0;
}
.jp-rule-lines li + li { border-top: 1px solid rgb(176 141 62 / 0.3); }
.jp-rule-text {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  color: var(--navy);
  line-height: 1.4;
}
.jp-rule-lines cite {
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  color: var(--gold-text);
}

/* ---------- Expandable cards (shared: principles, bios) ------------------------------ */

.principle-cards,
.bio-cards {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-4);
}

.principle-card,
.bio-card {
  background: var(--cream-deep);
  border: 1px solid var(--gold);
}
.principle-card summary,
.bio-card summary {
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  list-style: none;
  position: relative;
  transition: background 0.2s ease;
}
.principle-card summary::-webkit-details-marker,
.bio-card summary::-webkit-details-marker { display: none; }
.principle-card summary::after,
.bio-card summary::after {
  content: '+';
  position: absolute;
  right: var(--space-4);
  top: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
}
.principle-card[open] summary::after,
.bio-card[open] summary::after { content: '−'; }
.principle-card summary:hover,
.bio-card summary:hover { background: rgb(176 141 62 / 0.08); }
.principle-card > p,
.bio-card > p {
  padding: 0 var(--space-4) var(--space-4);
  margin: 0;
}

.principle-card .principle-head,
.bio-card .bio-name {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--navy);
  font-size: 1.15rem;
}
.principle-card .principle-line,
.bio-card .bio-line {
  display: block;
  font-style: italic;
  font-size: 1rem;
  margin-top: var(--space-1);
  padding-right: var(--space-4);
}
.bio-card .bio-role {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 0.92rem;
  color: var(--gold-text);
  margin-top: 2px;
}

/* ---------- About page: Consecration → Mission flow strip ---------------------------- */

.flow-figure { margin-block: var(--space-5); }
.flow-strip {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
}
.flow-strip li {
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--navy);
  background: var(--cream-deep);
  border: 1px solid var(--gold);
  padding: var(--space-2) var(--space-4);
}
/* Connector arrows trail each box (except the last), centered in the flex gap.
   If the strip wraps, a row ends "… →", which reads as a continuation, and the
   next row starts cleanly — no stray arrow at a line start. */
.flow-strip li { position: relative; }
.flow-strip li:not(:last-child)::after {
  content: '→';
  position: absolute;
  left: 100%;
  top: 50%;
  width: var(--space-3);
  text-align: center;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1;
}
/* Narrow screens: one column, arrows turn downward between boxes. */
@media (max-width: 540px) {
  .flow-strip { flex-direction: column; gap: var(--space-4); }
  .flow-strip li:not(:last-child)::after {
    content: '↓';
    left: 50%;
    top: calc(100% + 0.45rem);
    width: auto;
    transform: translateX(-50%);
  }
}
/* Inside a narrow measure (the Holiness essay column), four boxes can't sit on
   one line — .flow-column opts a strip into the vertical form at any width. */
.flow-figure.flow-column .flow-strip { flex-direction: column; gap: var(--space-4); }
.flow-figure.flow-column .flow-strip li:not(:last-child)::after {
  content: '↓';
  left: 50%;
  top: calc(100% + 0.45rem);
  width: auto;
  transform: translateX(-50%);
}
.flow-caption {
  text-align: center;
  font-style: italic;
  font-size: 1.02rem;
}
.flow-more { margin-top: var(--space-2); }

/* ---------- About page: Holiness Planning wheel -------------------------------------- */

.planning-figure {
  margin: var(--space-6) auto;
  max-width: 56rem;
  padding-inline: var(--space-3);
}
.planning-grid {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 700px) {
  .planning-grid { grid-template-columns: repeat(2, 1fr); }
  .planning-center { grid-column: 1 / -1; }
}
.planning-center {
  text-align: center;
  background: var(--navy);
  border: 2px solid var(--gold);
  padding: var(--space-4);
}
.planning-center-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--cream);
  letter-spacing: 0.06em;
}
.planning-center-sub {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
  color: var(--gold-bright);
  margin-top: var(--space-1);
}
.planning-s {
  background: var(--cream-deep);
  border: 1px solid var(--gold);
}
.planning-s summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: var(--space-3) var(--space-4);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  color: var(--navy);
  font-size: 1.1rem;
  transition: background 0.2s ease;
}
.planning-s summary::-webkit-details-marker { display: none; }
.planning-s summary::after {
  content: '+';
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold);
}
.planning-s[open] summary::after { content: '−'; }
.planning-s summary:hover { background: rgb(176 141 62 / 0.08); }
.planning-s p {
  padding: 0 var(--space-4) var(--space-4);
  margin: 0;
  font-style: italic;
  font-size: 1.02rem;
}

/* ---------- About page: sacramental decline strip ------------------------------------ */

.decline-figure {
  margin: var(--space-5) auto;
  max-width: 56rem;
  padding-inline: var(--space-3);
}
.decline-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--gold);
}
@media (min-width: 620px) {
  .decline-strip { grid-template-columns: 4fr 6fr 3fr; }
}
.decline-region {
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-left: 1px solid var(--gold);
  background: linear-gradient(to bottom, rgb(176 141 62 / 0.10), transparent 75%);
}
.decline-region:last-child { border-right: 1px solid var(--gold); }
.decline-years {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--navy);
  line-height: 1.1;
}
.decline-label {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 0.92rem;
  color: var(--gold-text);
  margin-top: var(--space-1);
}
.decline-cta { margin-top: var(--space-4); }

/* ---------- Retreats page: the closing cry ------------------------------------------- */

.abba-cry {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  color: var(--navy);
  margin-block: var(--space-4);
}

/* ---------- Draft notice ------------------------------------------------------------ */

.draft-notice {
  max-width: var(--measure);
  margin: var(--space-3) auto;
  padding: var(--space-2) var(--space-3);
  background: var(--cream-deep);
  border-left: 2px solid var(--gold);
  font-size: 0.95rem;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--gold-text);
}

/* ---------- Reveal animations (enhancement only, gated on html.js) ------------------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
html.js .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;
  }
  html.js .reveal { opacity: 1; transform: none; }
}

/* ---------- FAQ page (July 10, 2026) ---------------------------------------------------- */
/* Question headings and the small "Go deeper" links after some answers. */

[data-page="faq"] .prose h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--navy);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}
[data-page="faq"] .prose h3:first-child { margin-top: var(--space-3); }
.faq-deeper { margin-top: var(--space-1); }
.faq-deeper .quiet-link { font-size: 0.9rem; }

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

@media print {
  .site-header, .site-footer, .progress-bar, .essay-toc-rail, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
}