/* ============================================================
   THE PILGRIMAGE — the study Bible as a chronological
   choose-your-path book, designed print-first at large format.

   Print target: A3 portrait (297 × 420 mm), one .spread per page.
   Inspiration: the Hungry Minds large-format school — dense,
   generous, plate-and-diagram rich. Screen rendering is a faithful
   preview: cream pages floating on the rodeo's navy ground.

   Art plan (v1): every plate is an SVG stand-in that names the real
   public-domain artwork it holds space for (figure.plate[data-replace]).
   Every diagram is SVG now, to be re-drawn by hand by a single
   illustrator (figure.diagram[data-illustrator="hand-draw"]).
   ============================================================ */

:root{
  --pg-paper:#f6f0e2;         /* cream stock */
  --pg-paper-2:#efe6d2;       /* deeper cream for panels */
  --pg-ink:#241f18;           /* warm black ink */
  --pg-ink-soft:#5a5245;
  --pg-line:#c9bda2;
  --pg-gold:#a3722a;          /* print-safe versions of the rodeo kit */
  --pg-blue:#1f5e8c;
  --pg-purple:#6b3fa0;
  --pg-red:#8c2f2f;           /* rubrication — choices & section numbers */
  --era-accent:var(--pg-gold);/* each .spread overrides via style="" */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --caps:600 11px/1.4 var(--serif);
}

/* ---------- the page ---------- */
.spread{
  position:relative;
  background:var(--pg-paper);
  color:var(--pg-ink);
  font:16px/1.55 var(--serif);
  padding:16mm 14mm 18mm;
  box-sizing:border-box;
  break-after:page;
  page-break-after:always;
  border-top:6mm solid var(--era-accent);
}
.spread a{color:inherit}

/* ---------- era header ---------- */
.era-band{display:flex;align-items:baseline;gap:14px;
  border-bottom:2px solid var(--pg-ink);padding-bottom:6px;margin-bottom:4px}
.era-no{font-size:34px;font-weight:700;color:var(--era-accent);letter-spacing:2px}
.era-years{font:var(--caps);letter-spacing:3px;text-transform:uppercase;color:var(--pg-ink-soft)}
.era-traditions{margin-left:auto;font:var(--caps);letter-spacing:2px;text-transform:uppercase;
  color:var(--era-accent);text-align:right}
.spread-head h2{font-size:42px;line-height:1.05;margin:10px 0 8px;letter-spacing:-.5px}
.era-lede{font-size:18.5px;line-height:1.5;color:var(--pg-ink-soft);
  max-width:70%;margin:0 0 14px;font-style:italic}

/* ---------- passages (the numbered sections) ---------- */
.passage{margin:14px 0 18px;max-width:100%}
.passage h3{font-size:21px;margin:0 0 6px;border-bottom:1px solid var(--pg-line);padding-bottom:4px}
.sno{color:var(--pg-red);font-weight:700;margin-right:8px}
.passage p{margin:8px 0;text-align:justify;hyphens:auto}
.passage.ending{background:var(--pg-paper-2);border:1px solid var(--era-accent);
  padding:12px 16px;border-radius:2px}
.passage.ending h3{border-bottom-color:var(--era-accent)}

/* verbatim scripture — the corpus rule: quote, cite, let disagreements stand */
blockquote.verse{margin:10px 0 10px 14px;padding:6px 0 6px 14px;
  border-left:3px solid var(--era-accent);font-size:16.5px;line-height:1.6}
blockquote.verse footer.cite{font:var(--caps);font-size:11.5px;letter-spacing:1px;
  text-transform:uppercase;color:var(--pg-ink-soft);margin-top:6px;font-style:normal}
.disagree{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.disagree blockquote.verse{margin-left:0}

/* ---------- the choices (rubricated, print-first) ---------- */
nav.choices{margin:10px 0 4px;border:1.5px solid var(--pg-red);border-radius:2px;
  padding:8px 12px;background:rgba(140,47,47,.045)}
nav.choices .choices-k{font:var(--caps);letter-spacing:2.5px;text-transform:uppercase;
  color:var(--pg-red);display:block;margin-bottom:4px}
a.choice{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:5px 2px;text-decoration:none;border-bottom:1px dotted var(--pg-line)}
a.choice:last-child{border-bottom:0}
a.choice b{font-weight:600}
a.choice .turn{white-space:nowrap;color:var(--pg-red);font-weight:700;font-variant:small-caps}
@media screen{a.choice:hover b{color:var(--pg-red)}}

/* ---------- plates (public-domain artwork stand-ins) ---------- */
figure.plate{margin:14px 0;break-inside:avoid;page-break-inside:avoid}
figure.plate svg{display:block;width:100%;height:auto;background:var(--pg-paper-2);
  border:1px solid var(--pg-ink);box-shadow:0 0 0 4px var(--pg-paper),0 0 0 5px var(--pg-line)}
figure.plate figcaption, figure.diagram figcaption{
  font:var(--caps);font-size:11.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--pg-ink-soft);margin-top:7px;line-height:1.5}
figure.plate figcaption b, figure.diagram figcaption b{color:var(--era-accent);letter-spacing:2px}
figure.plate figcaption i{font-style:italic;text-transform:none;letter-spacing:0;
  font-size:12.5px;color:var(--pg-ink)}

/* ---------- diagrams (SVG now, hand-drawn later) ---------- */
figure.diagram{margin:14px 0;break-inside:avoid;page-break-inside:avoid}
figure.diagram svg{display:block;width:100%;height:auto}

/* ---------- layout helpers ---------- */
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:0 10mm}
.cols-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 8mm}
.span-2{grid-column:span 2}
.margin-note{font-size:13px;line-height:1.45;color:var(--pg-ink-soft);
  border-top:2px solid var(--era-accent);padding-top:5px;margin:10px 0}
.folio{position:absolute;bottom:7mm;left:0;right:0;display:flex;
  justify-content:space-between;padding:0 14mm;font:var(--caps);
  letter-spacing:3px;text-transform:uppercase;color:var(--pg-ink-soft)}

/* ---------- print ---------- */
@page{size:297mm 420mm;margin:0}
@media print{
  body{background:#fff !important;margin:0;padding:0}
  .spread{width:297mm;min-height:420mm;margin:0;box-shadow:none}
  .web-only{display:none !important}
  a.choice{color:inherit}
}

/* ---------- screen preview ---------- */
@media screen{
  body.pilgrimage-body{background:#0a0c12;margin:0;padding:28px 0 60px}
  .spread{width:min(1060px,94vw);min-height:calc(min(1060px,94vw)*1.414);
    margin:0 auto 34px;box-shadow:0 8px 40px rgba(0,0,0,.55)}
  .web-nav{width:min(1060px,94vw);margin:0 auto 22px;color:#8b97a8;
    font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
  .web-nav a{color:#5cc8ff;text-decoration:none}
  .web-nav a:hover{text-decoration:underline}
}
@media screen and (max-width:720px){
  .cols-2,.cols-3,.disagree{grid-template-columns:1fr}
  .era-lede{max-width:100%}
  .spread{padding:6mm 5mm 12mm}
}