/* ==========================================================================
   The Secret I Carried to Church — shared stylesheet
   Palette: warm paper, deep ink, weathered stone. Quiet, reverent, readable.
   ========================================================================== */

:root {
  /* Light (default) — parchment, walnut ink, the dress's dusty plum */
  --paper:        #f8f4ee;
  --paper-raised: #ffffff;
  --paper-sunk:   #f0e9df;
  --ink:          #2b211b;
  --ink-soft:     #57483d;
  --ink-muted:    #756456;
  --rule:         #e3d8c9;
  --rule-strong:  #cdbca6;
  --stone:        #7b5f80;
  --bronze:       #a8763a;
  --focus:        #7b5f80;

  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body:    "Lora", Georgia, "Times New Roman", serif;
  --font-ui:      ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --measure: 34rem;          /* reading column */
  --measure-wide: 52rem;     /* page furniture */
  --reader-scale: 1;         /* toggled by reader.js */

  --step--1: clamp(0.85rem, 0.82rem + 0.15vw, 0.94rem);
  --step-0:  calc(clamp(1.06rem, 1rem + 0.3vw, 1.19rem) * var(--reader-scale));
  --step-1:  clamp(1.3rem, 1.2rem + 0.5vw, 1.55rem);
  --step-2:  clamp(1.7rem, 1.5rem + 1vw, 2.3rem);
  --step-3:  clamp(2.2rem, 1.8rem + 2.2vw, 3.6rem);
}

/* Dark — the chapel after the lights go down */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #17110d;
    --paper-raised: #1f1813;
    --paper-sunk:   #120d0a;
    --ink:          #f0e6d9;
    --ink-soft:     #d3c5b4;
    --ink-muted:    #9c8b79;
    --rule:         #322620;
    --rule-strong:  #4a382d;
    --stone:        #c4a6c9;
    --bronze:       #d9a75f;
    --focus:        #c4a6c9;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:        #17110d;
  --paper-raised: #1f1813;
  --paper-sunk:   #120d0a;
  --ink:          #f0e6d9;
  --ink-soft:     #d3c5b4;
  --ink-muted:    #9c8b79;
  --rule:         #322620;
  --rule-strong:  #4a382d;
  --stone:        #c4a6c9;
  --bronze:       #d9a75f;
  --focus:        #c4a6c9;
  color-scheme: dark;
}

/* --------------------------------------------------------------- base --- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--rule-strong);
  transition: text-decoration-color 160ms ease, color 160ms ease;
}
a:hover { text-decoration-color: var(--stone); color: var(--stone); }

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

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

hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.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;
}

/* ------------------------------------------------------------ layout --- */

.shell {
  width: min(100% - 2.5rem, var(--measure-wide));
  margin-inline: auto;
}
.shell--reading {
  width: min(100% - 2.5rem, var(--measure));
  margin-inline: auto;
}

/* --------------------------------------------------------- site head --- */

.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-head__inner {
  width: min(100% - 2.5rem, var(--measure-wide));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  flex-wrap: wrap;
  padding-block: 0.6rem;
}
.site-head__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}
.site-head__title:hover { color: var(--stone); }
.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem 1.25rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  letter-spacing: 0.03em;
}
/* Chapter pages carry an extra reader button; tighten the gaps so the row
   still fits a 320px phone rather than pushing past the edge. */
@media (max-width: 26rem) {
  .site-nav { gap: 0.5rem 0.85rem; }
  .reader-tools button { padding: 0.28rem 0.55rem; letter-spacing: 0.04em; }
}
.site-nav a { color: var(--ink-muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }

.reader-tools { display: flex; gap: 0.35rem; }
.reader-tools button {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.reader-tools button:hover { border-color: var(--rule-strong); color: var(--ink); }

/* ------------------------------------------------- reading progress --- */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: transparent;
  z-index: 50;
  pointer-events: none;
}
.progress__bar {
  height: 100%;
  width: 0;
  background: var(--stone);
  opacity: 0.75;
}

/* ------------------------------------------------------------- hero --- */

.hero {
  padding: clamp(3rem, 9vh, 6rem) 0 clamp(3rem, 8vh, 5rem);
  border-bottom: 1px solid var(--rule);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__cover {
  margin: 0;
  max-width: 22rem;
  justify-self: end;
  width: 100%;
}
.hero__cover img {
  width: 100%;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(43, 33, 27, 0.14),
    0 12px 28px -8px rgba(43, 33, 27, 0.34),
    0 30px 60px -20px rgba(43, 33, 27, 0.28);
}
:root[data-theme="dark"] .hero__cover img,
:root:not([data-theme="light"]) .hero__cover img {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 14px 34px -8px rgba(0, 0, 0, 0.65);
}
.hero__text { max-width: 26rem; }

@media (max-width: 46rem) {
  .hero__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero__cover { justify-self: center; max-width: 16rem; }
  .hero__text { max-width: 30rem; }
  .hero__rule { margin-inline: auto; }
}

.hero__kicker {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.6rem;
}
.hero__title {
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.04;
  margin: 0;
}
.hero__byline {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 1.8rem 0 0;
}
.hero__rule {
  width: 3rem;
  height: 1px;
  background: var(--rule-strong);
  margin: 2rem 0;
  border: 0;
}
.hero__standfirst {
  font-size: var(--step-1);
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 2rem;
}

/* Primary call to action */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.85rem 1.6rem;
  border-radius: 2px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

/* --------------------------------------------------------- epigraph --- */

/* The verse carries its own hard line breaks, so its longest line
   ("my shield and the horn of my salvation, my stronghold.") must fit the box
   or the line wraps and strands a word on its own. That line measures ~19.9x
   the font size, so the type is sized against the CONTAINER width, not the
   viewport: at 4.4cqw the longest line lands at ~88% of the box at any width.
   Note text-wrap: balance alone does not solve this - balancing does not reach
   across a forced <br>, so each verse line still orphans on its own. */
.epigraph {
  margin: clamp(3rem, 8vh, 5rem) auto;
  max-width: 33rem;
  text-align: center;
  container-type: inline-size;
}
.epigraph blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 0.94rem + 0.55vw, 1.25rem); /* fallback: no cq units */
  font-size: clamp(0.95rem, 4.4cqw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: balance;
}
/* Below ~304px the type would have to shrink past legibility to keep the verse
   lines intact, so drop the poetic breaks and let it flow as balanced prose
   rather than stranding "stronghold." on a line by itself. */
@container (max-width: 19rem) {
  .epigraph blockquote br { display: none; }
}
.epigraph cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------ prose --- */

.prose p {
  margin: 0 0 1.55em;
}
.prose p.lede::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.06em 0.09em 0 0;
  color: var(--ink);
}
.prose em { font-style: italic; }

/* Single-line beats — the short standalone sentences that carry this book. */
.prose p.beat { margin: 0 0 1.2em; }
.prose p.verse { font-style: italic; color: var(--ink-soft); margin: 0 0 1.2em; }

.prose .break {
  text-align: center;
  color: var(--ink-muted);
  letter-spacing: 0.9em;
  margin: 2.6rem 0 2.4rem;
  font-size: var(--step--1);
}

/* ------------------------------------------------------- chapter head --- */

.chapter-head {
  padding: clamp(3.5rem, 10vh, 6rem) 0 0;
  text-align: center;
}
.chapter-head__number {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.4rem;
}
.chapter-head__title { font-size: var(--step-2); font-weight: 400; }
.chapter-head__rule {
  width: 2.5rem; height: 1px; border: 0;
  background: var(--rule-strong);
  margin: 2.2rem auto clamp(2.5rem, 6vh, 3.5rem);
}

/* ---------------------------------------------------------- sections --- */

.section {
  padding: clamp(3.5rem, 9vh, 6rem) 0;
  border-top: 1px solid var(--rule);
}
.section__title { font-size: var(--step-2); font-weight: 400; margin: 0 0 0.6rem; }
.section__intro { color: var(--ink-muted); max-width: 36rem; margin: 0 0 2.5rem; }

.toc { list-style: none; margin: 0; padding: 0; }
.toc li { border-top: 1px solid var(--rule); }
.toc li:last-child { border-bottom: 1px solid var(--rule); }
.toc a,
.toc .toc__pending {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 1.35rem 0.25rem;
  text-decoration: none;
  transition: background 160ms ease, padding 160ms ease;
}
.toc a:hover {
  background: var(--paper-sunk);
  padding-inline: 0.75rem;
  color: inherit;
}
.toc__num {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.toc__name { font-family: var(--font-display); font-size: var(--step-1); }
.toc__meta {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.toc .toc__pending, .toc .toc__pending .toc__name { color: var(--ink-muted); }

@media (max-width: 34rem) {
  .toc a, .toc .toc__pending { grid-template-columns: 1fr auto; }
  .toc__num { grid-column: 1 / -1; }
}

/* ------------------------------------------------------ content note --- */

.note {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.5rem 1.6rem;
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--ink-soft);
  font-family: var(--font-ui);
}
.note h2, .note h3 {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.7rem;
  font-weight: 600;
}
.note p { margin: 0 0 0.7rem; }
.note p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- faq --- */

.faq details { border-top: 1px solid var(--rule); padding: 1.25rem 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-1);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-ui); color: var(--ink-muted); font-size: 1rem; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > *:not(summary) { margin-top: 0.9rem; color: var(--ink-soft); }
.faq p { margin: 0 0 0.8rem; }
.faq p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------- pagination --- */

.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: clamp(3rem, 8vh, 5rem) 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: var(--step--1);
}
.chapter-nav a { text-decoration: none; color: var(--ink-muted); max-width: 45%; }
.chapter-nav a:hover { color: var(--ink); }
.chapter-nav__label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.chapter-nav__name { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.chapter-nav__next { text-align: right; margin-left: auto; }

/* ------------------------------------------------------------ footer --- */

.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: clamp(4rem, 10vh, 7rem);
  padding: 3rem 0;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.site-foot__inner {
  width: min(100% - 2.5rem, var(--measure-wide));
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.site-foot a { color: var(--ink-muted); }
.site-foot p { margin: 0 0 0.4rem; }

/* -------------------------------------------------------------- print --- */

@media print {
  .site-head, .site-foot, .progress, .chapter-nav, .reader-tools, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  .shell--reading { width: auto; }
  .prose p { orphans: 3; widows: 3; }
}