/* ==========================================================================
   THE REVELATION COMMENTARY — design tokens
   Palette and type drawn directly from the Volume I cover: deep midnight
   navy grounds, restrained antique gold, warm ivory/parchment for the
   large display type, generous quiet space around everything.
   ========================================================================== */

:root {
  /* color */
  --navy-950: #060b16;   /* footer / deepest ground */
  --navy-900: #0a1220;   /* primary page background */
  --navy-800: #101c30;   /* alternating section ground, panels */
  --navy-700: #1a2b47;   /* hairline borders on dark */
  --gold-500: #b3893f;   /* deep gold, hover / pressed */
  --gold-400: #c9a463;   /* primary gold accent — rules, labels, links */
  --gold-300: #dfc186;   /* brighter gold — emphasis, hover text */
  --ivory-100: #f2ecdd;  /* parchment — headline type on dark grounds */
  --ivory-200: #e7dfc9;  /* secondary parchment tone */
  --ink-100: #d9dee6;    /* body copy on dark backgrounds */
  --ink-300: #aab4c2;    /* muted / secondary copy on dark backgrounds */

  /* type */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body: "EB Garamond", Georgia, "Times New Roman", serif;

  /* layout */
  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --radius: 2px; /* almost square — this is a book, not a SaaS card */
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- scroll reveal ----------
   IntersectionObserver (see main.js) adds .is-visible once; nothing
   re-hides on scroll back out. Reduced motion shows everything at once. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-group > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-group.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.09s; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.18s; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.27s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .divider.reveal::before,
  .divider.reveal::after { transform: scaleX(1) !important; transition: none !important; }
  .divider.reveal svg { opacity: 1 !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--ink-100);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ivory-100);
  margin: 0;
  font-weight: 500;
  line-height: 1.1;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }

section { padding-block: var(--section-y); }
.section-alt { background: var(--navy-800); }

/* visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
}

/* ---------- skip link (accessibility) ----------
   Off-screen until keyboard-focused, then docked at the top-left. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  z-index: 100;
  background: var(--gold-400);
  color: var(--navy-950);
  padding: 0.6rem 1.1rem;
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: var(--radius);
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
}

/* ---------- eyebrow / kicker ---------- */
.kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--gold-400);
  margin-bottom: 0.9rem;
}

/* ---------- ornamental divider ----------
   Reuses the cover's thin gold rule + center flourish motif. Used to open
   or close a section rather than as decoration between every block. */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: min(220px, 60%);
  margin-block: 1.4rem;
}
.divider.centered { margin-inline: auto; }
.divider::before,
.divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold-400) 50%, transparent);
}
.divider svg { flex-shrink: 0; }

/* selected major transitions: the rule grows outward from the center
   ornament as the section enters view, instead of just appearing */
.divider::before { transform-origin: right center; }
.divider::after { transform-origin: left center; }
.divider.reveal::before,
.divider.reveal::after {
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.3, 0.1, 0.2, 1);
}
.divider.reveal svg {
  opacity: 0;
  transition: opacity 0.5s ease 0.45s;
}
.divider.reveal.is-visible::before,
.divider.reveal.is-visible::after { transform: scaleX(1); }
.divider.reveal.is-visible svg { opacity: 1; }

/* ---------- pull statement ----------
   A single sentence given room to breathe — used sparingly, at moments
   the copy itself marks as pivotal. */
.pull-statement {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-style: italic;
  color: var(--ivory-100);
  text-align: center;
  max-width: 44ch;
  margin: 0 auto clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1.4;
}
.pull-statement::before,
.pull-statement::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--gold-400);
  margin: 0 auto 1.1rem;
}
.pull-statement::after { margin: 1.1rem auto 0; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(6, 11, 22, 0.88);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--navy-700);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.75rem;
  gap: 1.5rem;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--ivory-100);
  text-decoration: none;
  white-space: nowrap;
}
.brand strong { color: var(--gold-300); font-weight: 500; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--navy-700);
  color: var(--ivory-100);
  padding: 0.5rem 0.7rem;
  font-size: 1rem;
  cursor: pointer;
}

.primary-nav ul {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.primary-nav a {
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  color: var(--ink-100);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--gold-300); border-color: var(--gold-400); }

@media (max-width: 859px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.4rem; }
  .primary-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--navy-900);
    border-bottom: 1px solid var(--navy-700);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
  }
  .primary-nav.open { max-height: 24rem; }
  .primary-nav ul { flex-direction: column; gap: 0; padding: 0.5rem var(--gutter) 1.25rem; }
  .primary-nav a { display: block; padding-block: 0.7rem; border-bottom: 1px solid var(--navy-700); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 0.85rem 1.7rem;
  border: 1px solid var(--gold-400);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary {
  background: var(--gold-400);
  color: var(--navy-950);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--gold-300); border-color: var(--gold-300); }
.btn-secondary {
  background: transparent;
  color: var(--ivory-100);
}
.btn-secondary:hover, .btn-secondary:focus-visible { border-color: var(--gold-300); color: var(--gold-300); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* retailer buttons: same family, deliberately inert until real links exist */
.retailer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}
.retailer-pill {
  border: 1px solid var(--navy-700);
  color: var(--ink-300);
  padding: 0.65rem 1.25rem;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  cursor: default;
  user-select: none;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 8vw, 6rem);
}
/* restrained celestial atmosphere, derived from the cover's own visual
   language — sparse static points of light plus a soft gold haze behind
   where the book sits. No motion; this is texture, not an effect. */
.hero::before,
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(242, 236, 221, 0.55), transparent 60%),
    radial-gradient(1px 1px at 24% 66%, rgba(242, 236, 221, 0.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 12%, rgba(242, 236, 221, 0.45), transparent 60%),
    radial-gradient(1px 1px at 52% 78%, rgba(242, 236, 221, 0.3), transparent 60%),
    radial-gradient(1.5px 1.5px at 65% 28%, rgba(242, 236, 221, 0.4), transparent 60%),
    radial-gradient(1px 1px at 83% 58%, rgba(242, 236, 221, 0.3), transparent 60%),
    radial-gradient(1.5px 1.5px at 91% 18%, rgba(242, 236, 221, 0.4), transparent 60%),
    radial-gradient(1100px 640px at 76% 42%, rgba(201, 164, 99, 0.12), transparent 68%);
}
.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.85fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.hero-cover { margin-top: 0.35rem; }
.hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  letter-spacing: 0.01em;
}
.hero .subhead {
  font-family: var(--font-display);
  color: var(--gold-300);
  font-size: 1.3rem;
  margin-top: 0.6rem;
  letter-spacing: 0.02em;
}
.hero .lede {
  margin-top: 1.5rem;
  color: var(--ink-100);
  max-width: 52ch;
}
.hero .lede + .lede { margin-top: 0.85rem; }
.hero-cover {
  position: relative;
  justify-self: center;
  perspective: 1000px;
}
.hero-cover picture,
.hero-cover img {
  width: 100%;
  height: auto;
  max-width: 360px;
}
.hero-cover img {
  box-shadow:
    0 0 0 1px var(--navy-700),
    0 30px 60px -20px rgba(0, 0, 0, 0.65),
    0 0 90px -10px rgba(201, 164, 99, 0.18);
  transition: transform 0.35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.hero-cover::after {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(201, 164, 99, 0.2), transparent 72%);
}
/* pointer-driven sheen — set via --shine-x/--shine-y in main.js,
   desktop pointer devices only (see the (hover:hover) guard below) */
.hero-cover .cover-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 30%), rgba(255, 255, 255, 0.16), transparent 55%);
  mix-blend-mode: screen;
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .hero-cover:hover .cover-shine { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cover img { transition: none !important; transform: none !important; }
  .hero-cover .cover-shine { display: none; }
}

@media (max-width: 880px) {
  .hero .container { grid-template-columns: 1fr; text-align: left; }
  .hero-cover { justify-self: start; order: -1; margin-bottom: 1.75rem; margin-top: 0; }
  .hero-cover img { max-width: clamp(168px, 32vw, 240px); }
}

/* ---------- scripture blockquote ----------
   A visual pause from surrounding prose: generous space, a restrained
   oversized quotation mark, and an elegant reference treatment. */
blockquote.scripture {
  position: relative;
  margin: 0;
  padding: 2rem clamp(1.6rem, 4vw, 2.6rem) 2rem clamp(2.5rem, 6vw, 3.6rem);
  border-left: 2px solid var(--gold-400);
  background: linear-gradient(180deg, rgba(201, 164, 99, 0.08), rgba(201, 164, 99, 0.02) 75%);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-style: italic;
  color: var(--ivory-200);
  line-height: 1.55;
}
blockquote.scripture::before {
  content: "\201C";
  position: absolute;
  top: 0.55rem;
  left: 0.45rem;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--gold-500);
  opacity: 0.55;
}
blockquote.scripture cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--gold-400);
}

/* ---------- generic section heading ---------- */
.section-head { margin-bottom: 2.6rem; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.section-head p { color: var(--ink-300); margin-top: 0.9rem; }

/* two-column text section (Why Another Commentary, Volume I feature, etc.) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- "Why Another Commentary" composition ----------
   Heading, pull statement, and the two-column body all share one
   narrower, centered measure so the section reads as a single
   composition instead of three independently aligned pieces. */
.why-composition {
  max-width: 840px;
  margin-inline: auto;
}
.centered-head {
  margin-inline: auto;
  text-align: center;
}
.why-split {
  gap: 3rem; /* deliberate, fixed center gap rather than a fluid one */
}
/* top-align the opening prose with the first line of the Isaiah
   quotation beside it — the blockquote's own padding-top (2rem) sets
   the target; nothing about .scripture itself changes. */
.why-split > div:first-child { padding-top: 2rem; }
@media (max-width: 860px) {
  .why-split > div:first-child { padding-top: 0; }
}

/* ---------- principles grid (The Approach) ---------- */
.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem 3rem;
  margin-top: 2.4rem;
}
@media (max-width: 700px) { .principles { grid-template-columns: 1fr; } }
.principle {
  border-top: 1px solid var(--navy-700);
  padding-top: 1.1rem;
  transition: transform 0.35s ease, border-color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}
.principle h3 {
  font-size: 1.25rem;
  color: var(--ivory-100);
  margin-bottom: 0.55rem;
  transition: color 0.35s ease;
}
.principle p { color: var(--ink-300); }
.principle:hover,
.principle:focus-visible {
  transform: translateY(-5px);
  border-top-color: var(--gold-300);
  background: linear-gradient(180deg, rgba(201, 164, 99, 0.06), transparent 75%);
  outline: none;
}
.principle:hover h3,
.principle:focus-visible h3 { color: var(--gold-300); }
.principle:focus-visible { box-shadow: 0 0 0 2px var(--gold-300); }

/* ---------- Volume I feature ----------
   Extra top space, a soft ground transition, and a divider mark this as
   the homepage's chapter turn rather than another section in the scroll. */
#volume-i {
  padding-top: calc(var(--section-y) * 1.35);
  background: linear-gradient(180deg, var(--navy-900), var(--navy-800) 20%);
}
.volume-card {
  border: 1px solid var(--navy-700);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: linear-gradient(180deg, rgba(201, 164, 99, 0.05), transparent 40%);
}
.volume-tag {
  display: inline-block;
  border: 1px solid var(--gold-400);
  color: var(--gold-300);
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  padding: 0.3rem 0.9rem;
  margin-bottom: 1.2rem;
}
.volume-card h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.volume-card .volume-subtitle {
  font-family: var(--font-display);
  color: var(--gold-300);
  font-size: 1.15rem;
  margin-top: 0.4rem;
}
.volume-status {
  margin-top: 1.6rem;
  font-family: var(--font-display);
  color: var(--gold-300);
  letter-spacing: 0.04em;
  font-size: 1.05rem;
}

/* cover + copy composition inside the Volume I section:
   two columns sharing one center axis, cover centered in its column */
.volume-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.volume-cover {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 300px;
}
.volume-cover::after {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(201, 164, 99, 0.15), transparent 72%);
}
.volume-cover img {
  width: 100%;
  height: auto;
  box-shadow:
    0 0 0 1px var(--navy-700),
    0 20px 45px -18px rgba(0, 0, 0, 0.6),
    0 0 60px -12px rgba(201, 164, 99, 0.16);
}
.volume-intro-copy .volume-lead { margin-top: 1.3rem; max-width: 46ch; color: var(--ink-100); }
.volume-intro-copy .volume-status { margin-top: 1.2rem; }
.volume-intro-copy .btn-row { margin-top: 1.1rem; }
/* the longer explanatory copy, set apart beneath the main composition */
.volume-details {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--navy-700);
}
@media (max-width: 760px) {
  .volume-intro { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .volume-cover { max-width: clamp(170px, 46vw, 240px); }
}

/* ---------- study resource flip cards ----------
   Front shows the graphic (once supplied); back reveals title,
   description, and a future "Explore This Resource" action. Built so
   real charts/maps are never cropped — object-fit: contain, never cover. */
.resource-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* minmax(0,…) stops card min-heights widening the track */
  gap: 2rem;
  margin-top: 2.4rem;
}
/* Wide screens: the two landscape graphics stack on the left; the
   portrait Thyatira chart gets the full-height right column so its
   proportions are preserved and its thumbnail stays legible. */
@media (min-width: 900px) {
  .resource-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .flip-card--portrait { grid-column: 2; grid-row: 1 / span 2; }
}

.flip-card {
  position: relative;
  width: 100%;
  max-width: 620px;
  justify-self: center;
  aspect-ratio: 3 / 2.3;   /* landscape graphic + title bar */
  min-height: 320px;       /* room for the back-face text on narrow screens */
  perspective: 1400px;
  cursor: pointer;
  border-radius: var(--radius);
}
.flip-card--portrait {
  aspect-ratio: 0.623;     /* 2:3 graphic + title bar */
  min-height: 0;
  max-width: 460px;
}
@media (min-width: 900px) {
  .flip-card { max-width: none; justify-self: stretch; }
  .flip-card--portrait { max-width: none; }
  /* the landscape cards share the portrait card's height exactly, so the
     two columns end on the same line */
  .flip-card:not(.flip-card--portrait) { aspect-ratio: auto; min-height: 0; }
}
.flip-card-inner {
  position: absolute;
  inset: 0;
  transition: transform 0.7s cubic-bezier(0.4, 0.15, 0.2, 1);
  transform-style: preserve-3d;
}
.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
}
.flip-card:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 4px; }

.flip-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--navy-700);
  background: var(--navy-800);
}
.flip-card-back {
  transform: rotateY(180deg);
  border-color: var(--gold-500);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  justify-content: center;
  background: linear-gradient(180deg, rgba(201, 164, 99, 0.07), var(--navy-800) 55%);
}
.flip-card-back h3 { font-size: 1.2rem; margin-bottom: 0.7rem; }
.flip-card-back p { color: var(--ink-300); font-size: 0.97rem; line-height: 1.6; }
.flip-card-back .resource-link { margin-top: 1.1rem; align-self: flex-start; }

.resource-media {
  flex: 1;
  min-height: 0;
  border-bottom: 1px solid var(--navy-700);
  background: var(--navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.resource-media picture { display: block; width: 100%; height: 100%; }
.resource-media img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* never crop a chart or map */
}
.resource-media .media-placeholder {
  color: var(--ink-300);
  font-family: var(--font-display);
  font-size: 0.92rem;
  text-align: center;
  padding: 1rem;
}
.flip-card-front-title { padding: 1rem 1.3rem; }
.flip-card-front-title h3 {
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--ink-100);
  letter-spacing: 0.01em;
}

.resource-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--gold-400);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-500);
}
.resource-link:hover, .resource-link:focus-visible { color: var(--gold-300); border-color: var(--gold-300); }

/* reduced motion: a rotation becomes a plain crossfade */
@media (prefers-reduced-motion: reduce) {
  .flip-card-inner { transition: none; transform: none !important; }
  .flip-card-face {
    transform: none;
    backface-visibility: visible;
    transition: opacity 0.25s ease;
  }
  .flip-card-front { opacity: 1; z-index: 2; }
  .flip-card-back { opacity: 0; z-index: 1; }
  .flip-card.is-flipped .flip-card-front { opacity: 0; z-index: 1; }
  .flip-card.is-flipped .flip-card-back { opacity: 1; z-index: 2; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .flip-card:not(.is-flipped):hover .flip-card-front { opacity: 0; z-index: 1; }
  .flip-card:not(.is-flipped):hover .flip-card-back { opacity: 1; z-index: 2; }
}

/* ---------- about author ----------
   .author-photo is a self-contained, removable block: delete it entirely
   (and add "no-photo" to .about-block) if no photograph is used at launch —
   the text column below reads as a complete, intentional layout on its own. */
.about-block { display: grid; grid-template-columns: 0.4fr 0.6fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about-block.no-photo { grid-template-columns: 1fr; max-width: var(--measure); }
@media (max-width: 760px) { .about-block { grid-template-columns: 1fr; } }
.author-frame {
  border: 1px solid var(--navy-700);
  border-top: 2px solid var(--gold-400);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-300);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  background: var(--navy-800);
  text-align: center;
  padding: 1.5rem;
}

/* ---------- follow / retailers ---------- */
.follow-note { color: var(--ink-300); }

/* ---------- contact ---------- */
.contact-email {
  display: inline-block;
  margin-top: 1.3rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold-300);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-500);
}
.contact-email:hover, .contact-email:focus-visible { color: var(--gold-300); border-color: var(--gold-300); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--navy-950);
  border-top: 1px solid var(--navy-700);
  padding-block: 3rem 2.4rem;
  color: var(--ink-300);
  font-size: 0.9rem;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2rem;
}
.footer-brand { font-family: var(--font-display); color: var(--ivory-200); font-size: 1.05rem; }
.footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 0; padding: 0; }
.footer-nav a { text-decoration: none; color: var(--ink-300); }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--gold-300); }
.footer-legal {
  border-top: 1px solid var(--navy-700);
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
}

/* utility */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }


/* ---------- full-size graphic viewer (lightbox) ----------
   Opened from the "View Full Graphic" link on each card's back face.
   Lives outside the cards, so card hover/flip state never touches it. */
html.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: #050914;
  animation: lightbox-in 0.2s ease;
}
.lightbox[hidden] { display: none; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.25rem;
  padding: 0.7rem var(--gutter);
  border-bottom: 1px solid var(--navy-700);
  background: var(--navy-950);
}
.lightbox-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ivory-100);
  line-height: 1.2;
  flex: 1 1 14rem;
}
.lightbox-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.lightbox-controls button {
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.8rem;
  background: transparent;
  color: var(--ivory-100);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lightbox-controls button:hover { border-color: var(--gold-400); color: var(--gold-300); }
.lightbox-controls button:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }
.lightbox-controls .lightbox-close {
  border-color: var(--gold-400);
  background: var(--gold-400);
  color: var(--navy-950);
  margin-left: 0.5rem;
}
.lightbox-controls .lightbox-close:hover { background: var(--gold-300); color: var(--navy-950); }
.lightbox-zoom {
  min-width: 3.4rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-300);
}

.lightbox-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: auto;
  touch-action: none;       /* pan and pinch are handled in main.js */
  overscroll-behavior: contain;
  cursor: default;
}
.lightbox-viewport.is-zoomed { cursor: grab; }
.lightbox-viewport.is-dragging { cursor: grabbing; }
.lightbox-viewport:focus-visible { outline: 2px solid var(--gold-300); outline-offset: -4px; }
.lightbox-img {
  flex-shrink: 0;
  margin: auto;             /* centers when smaller than the viewport, scrolls when larger */
  max-width: none;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox.is-loading .lightbox-img { visibility: hidden; }
.lightbox-status {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: var(--font-display);
  color: var(--ink-300);
}
.lightbox.is-loading .lightbox-status { display: flex; }
.lightbox-hint {
  margin: 0;
  padding: 0.5rem var(--gutter);
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-300);
  border-top: 1px solid var(--navy-700);
  background: var(--navy-950);
}
@media (max-width: 560px) {
  .lightbox-bar { padding-block: 0.55rem; gap: 0.4rem; }
  .lightbox-title { flex-basis: 100%; font-size: 1.02rem; }
  .lightbox-controls { gap: 0.3rem; width: 100%; }
  .lightbox-controls button { min-width: 2.5rem; padding: 0.3rem 0.55rem; font-size: 0.86rem; }
  .lightbox-zoom { min-width: 2.7rem; font-size: 0.8rem; }
  .lightbox-controls .lightbox-close { margin-left: auto; }
  .lightbox-hint { display: none; }
}


/* ==========================================================================
   VOLUME I PAGE (volume-i.html)
   Everything below is additive. The page reuses the homepage's tokens,
   hero, scripture blocks, buttons, retailer pills, and full-graphic viewer.
   ========================================================================== */

/* utility: visually hidden, still announced by screen readers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* current page in the primary navigation */
.primary-nav a[aria-current="page"] { color: var(--gold-300); border-color: var(--gold-400); }

/* ---------- breadcrumb (the way back to the homepage) ---------- */
.breadcrumb {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin-inline: auto;
  padding: 1.5rem var(--gutter) 0;
  font-size: 0.88rem;
  color: var(--ink-300);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.55rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.55rem; color: var(--navy-700); }
.breadcrumb a { text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--gold-300); border-color: var(--gold-400); }
.breadcrumb [aria-current="page"] { color: var(--ivory-200); }

/* ---------- Volume hero: book cover on the left, copy on the right ---------- */
.hero--volume { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); }
@media (min-width: 881px) {
  .hero--volume .container { grid-template-columns: 0.8fr 1.1fr; align-items: center; }
  .hero--volume .hero-cover { order: -1; margin-top: 0; }
}
.hero--volume .kicker { letter-spacing: 0.1em; }
.hero--volume .volume-tag { margin-bottom: 1rem; }
.hero--volume h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); }
.hero--volume .subhead { margin-top: 0.5rem; }
.volume-byline {
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.22em;
  color: var(--ivory-200);
}
.hero--volume .lede { margin-top: 1.4rem; }
.hero--volume .volume-status { margin-top: 1.5rem; }
.hero--volume .btn-row { margin-top: 1.2rem; }
@media (max-width: 880px) {
  .hero--volume .hero-cover { justify-self: center; margin-bottom: 1.5rem; }
  .hero--volume .hero-cover img { max-width: clamp(190px, 52vw, 280px); }
}

/* publisher-style details strip beneath the hero */
.book-facts-band {
  background: var(--navy-950);
  border-block: 1px solid var(--navy-700);
  padding-block: 1.6rem;
}
.book-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem 2rem;
  margin: 0;
}
.book-facts div { border-left: 1px solid var(--navy-700); padding-left: 1rem; }
.book-facts dt { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400); }
.book-facts dd { margin: 0.25rem 0 0; font-family: var(--font-display); font-size: 1.15rem; color: var(--ivory-100); line-height: 1.25; }
@media (max-width: 860px) { .book-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Seven Churches timeline ---------- */
.ages-section { background: var(--navy-800); --ages-bg: var(--navy-800); }
.ages-intro { max-width: 60ch; margin-inline: auto; text-align: center; }
.ages-intro p { color: var(--ink-300); margin-top: 0.9rem; }

.ages { --node: 2.75rem; margin-top: 2.6rem; }

/* framing caption above the track: Pentecost ... Return of Christ */
.ages-span {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  color: var(--gold-400);
}
.ages-span .ages-span-mid { color: var(--ink-300); }

.ages-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
/* the track: a hairline between the first and last node, with a gold
   portion that extends to the selected church */
.ages-tabs::before,
.ages-tabs::after {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2);
  left: calc(100% / 14);
  height: 1px;
}
.ages-tabs::before { right: calc(100% / 14); background: var(--navy-700); }
.ages-tabs::after {
  width: calc((100% - 100% / 7) * var(--p, 0));
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  transition: width 0.5s ease;
}

.age-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.2rem 0.7rem;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.age-tab:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }
.age-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  background: var(--ages-bg, var(--navy-800));
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--gold-300);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.age-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--ivory-200);
  transition: color 0.3s ease;
}
.age-dates { font-size: 0.82rem; line-height: 1.3; color: var(--ink-300); }

.age-tab:hover .age-node { border-color: var(--gold-300); color: var(--ivory-100); }
.age-tab:hover .age-name { color: var(--gold-300); }
.age-tab[aria-selected="true"] .age-node {
  background: var(--gold-400);
  border-color: var(--gold-300);
  color: var(--navy-950);
  box-shadow: 0 0 0 6px rgba(201, 164, 99, 0.16), 0 0 26px rgba(201, 164, 99, 0.28);
}
.age-tab[aria-selected="true"] .age-name { color: var(--gold-300); }
.age-tab[aria-selected="true"] .age-dates { color: var(--ivory-200); }

/* mid widths: numbered nodes with names; small screens: numbered nodes only
   (names and dates stay in the accessible name, and the panel below always
   shows the full title, so nothing is lost and nothing scrolls sideways) */
@media (max-width: 859px) { .age-dates { display: none; } .age-name { font-size: 0.92rem; } }
@media (max-width: 559px) {
  .ages { --node: 2.75rem; }            /* 44px nodes */
  .age-tab { padding-inline: 0; min-width: 44px; min-height: 44px; }
  .age-name {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .ages-span { font-size: 0.82rem; letter-spacing: 0.04em; }
  .ages-span .ages-span-mid { display: none; }
}

/* panels: all seven share one grid cell, so the box is always as tall as the
   tallest and the page never jumps when the selection changes */
.ages-panels { display: grid; margin-top: 1.4rem; }
.age-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1.6rem clamp(2rem, 5vw, 3.5rem);
  align-items: start;
  align-content: start; /* panels are stretched to the tallest one; keep content at the top */
  padding: clamp(1.5rem, 4vw, 2.6rem);
  border: 1px solid var(--navy-700);
  background: linear-gradient(180deg, rgba(201, 164, 99, 0.06), rgba(201, 164, 99, 0.01) 70%), var(--navy-900);
}
.ages.is-enhanced .age-panel {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.ages.is-enhanced .age-panel.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease 0.05s, visibility 0s;
}
/* without JavaScript every panel simply shows, stacked */
.ages:not(.is-enhanced) .ages-panels { display: block; }
.ages:not(.is-enhanced) .age-panel { margin-bottom: 1.4rem; }
.ages:not(.is-enhanced) .ages-tabs,
.ages:not(.is-enhanced) .ages-nav,
.ages:not(.is-enhanced) .ages-span { display: none; }

.age-eyebrow { margin: 0 0 0.7rem; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-300); }
.age-panel h3 { font-size: clamp(2rem, 4vw, 2.7rem); }
.age-title { margin: 0.5rem 0 0; font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-300); line-height: 1.25; }
.age-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.age-meta li {
  border: 1px solid var(--navy-700);
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--ivory-200);
}
.age-meta li.age-dates-chip { border-color: var(--gold-500); color: var(--gold-300); }
.age-body > p { color: var(--ink-100); }
.age-body blockquote.scripture { margin-top: 1.5rem; }
blockquote.scripture--compact { font-size: 1.3rem; padding: 1.5rem clamp(1.4rem, 3vw, 2rem) 1.4rem clamp(2.4rem, 5vw, 3.2rem); }
@media (max-width: 760px) { .age-panel { grid-template-columns: minmax(0, 1fr); } }

/* previous / next */
.ages-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.age-step {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.7rem 1.3rem;
  background: transparent;
  border: 1px solid var(--gold-400);
  border-radius: var(--radius);
  color: var(--ivory-100);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.age-step[data-ages-next] { text-align: right; align-items: flex-end; }
.age-step .step-label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400); }
.age-step .step-name { font-family: var(--font-display); font-size: 1.15rem; }
.age-step:hover, .age-step:focus-visible { border-color: var(--gold-300); color: var(--gold-300); }
.age-step:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }
.age-step[aria-disabled="true"] { opacity: 0.35; cursor: default; border-color: var(--navy-700); color: var(--ink-300); }
.age-step[aria-disabled="true"]:hover { border-color: var(--navy-700); color: var(--ink-300); }
@media (max-width: 480px) { .age-step { flex: 1; padding-inline: 0.9rem; } }

/* note on the prophetic framework, beneath the timeline */
.framework-note { max-width: 62ch; margin: clamp(3rem, 6vw, 4.5rem) auto 0; text-align: left; }
.framework-note .divider { margin-top: 0; }
.framework-note h3 { text-align: center; font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 1.2rem; }

/* ---------- What readers will study ---------- */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
  background: var(--navy-700);
  border: 1px solid var(--navy-700);
}
.topic { background: var(--navy-900); padding: 1.9rem 1.7rem 2rem; transition: background-color 0.35s ease; }
.topic::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin-bottom: 1.1rem;
  background: var(--gold-400);
  transition: width 0.4s ease;
}
.topic h3 { font-size: 1.35rem; line-height: 1.2; }
.topic:hover { background: linear-gradient(180deg, rgba(201, 164, 99, 0.07), var(--navy-900) 85%); }
.topic:hover::before { width: 60px; }
@media (max-width: 719px) { .topic-grid { grid-template-columns: minmax(0, 1fr); } .topic { padding-block: 1.4rem; } }

/* ---------- Study Companion and visual resources ---------- */
.companion {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: 2.4rem;
}
@media (max-width: 859px) { .companion { grid-template-columns: minmax(0, 1fr); } }
.companion-list { list-style: none; margin: 0; padding: 0; }
.companion-list li { padding: 1.3rem 0; border-top: 1px solid var(--navy-700); }
.companion-list li:last-child { border-bottom: 1px solid var(--navy-700); }
.companion-list h3 { font-size: 1.22rem; margin-bottom: 0.4rem; }
.companion-list p { color: var(--ink-300); }
.companion-list .resource-link { margin-top: 0.7rem; }
.study-figures { display: grid; gap: 1.5rem; }
.study-figure {
  display: block;
  border: 1px solid var(--navy-700);
  background: var(--navy-900);
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.study-figure:hover, .study-figure:focus-visible { border-color: var(--gold-400); transform: translateY(-3px); }
.study-figure:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }
.study-figure-media { display: block; aspect-ratio: 3 / 2; border-bottom: 1px solid var(--navy-700); }
.study-figure-media picture { display: block; width: 100%; height: 100%; }
.study-figure-media img { width: 100%; height: 100%; object-fit: contain; } /* never crop a chart or map */
.study-figure-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem; padding: 0.85rem 1.1rem; }
.study-figure-cap .t { font-family: var(--font-display); font-size: 1.05rem; color: var(--ivory-100); }
.study-figure-cap .v { font-size: 0.86rem; color: var(--gold-400); border-bottom: 1px solid var(--gold-500); align-self: center; }

/* ---------- Read a Sample ----------
   Inactive until the edited excerpt is supplied (see the comment in
   volume-i.html for how to switch it on). */
.sample-panel {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.4rem);
  border: 1px solid var(--navy-700);
  border-top: 2px solid var(--gold-400);
  background: linear-gradient(180deg, rgba(201, 164, 99, 0.05), transparent 65%);
  text-align: center;
}
.sample-panel h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.sample-panel p { color: var(--ink-300); max-width: 52ch; margin-inline: auto; margin-top: 0.9rem; }
.sample-status {
  display: inline-block;
  margin-top: 1.6rem;
  padding: 0.65rem 1.4rem;
  border: 1px solid var(--navy-700);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--gold-300);
  cursor: default;
}
/* ready for the real excerpt */
.sample-excerpt { max-width: 62ch; margin: 2rem auto 0; text-align: left; font-size: 1.12rem; line-height: 1.75; color: var(--ink-100); }
.sample-excerpt h3 { margin-bottom: 1rem; font-size: 1.5rem; }

/* ---------- Availability ---------- */
.availability-note { max-width: 62ch; margin-inline: auto; color: var(--ink-300); }
.availability .volume-status { margin-top: 1.6rem; }
.availability .btn-row { justify-content: center; margin-top: 2.4rem; }

.age-quote-label { margin: 1.4rem 0 0.2rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400); }
.age-quote-label + blockquote.scripture { margin-top: 0.7rem; }
.ages-intro h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.sample-panel h2, .availability h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }


/* ==========================================================================
   VOLUME I PAGE: layout refinement
   One underlying grid. Wide content uses .container (1180px). Centered,
   reading-width compositions use .reading-width (840px). Text blocks use
   the 62ch measure. Section spacing is tightened for this page only.
   ========================================================================== */
.page-volume, .page-home, .page-inner { --section-y: clamp(3.25rem, 6.5vw, 5.25rem); --reading: 840px; }
.reading-width { max-width: var(--reading); margin-inline: auto; }

/* About This Volume: sits directly under the hero, hairline-ruled */
.volume-overview { padding-top: 0; }
.volume-overview-inner { padding-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--navy-700); }
.volume-overview-inner h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 1.2rem; }
.overview-split { gap: 1.2rem clamp(2rem, 5vw, 3.5rem); }
.overview-split p { margin: 0; color: var(--ink-100); }

/* sample panel shares the reading width */
.page-volume .sample-panel { max-width: var(--reading); }

/* timeline information panel: fit the content, not the whitespace.
   (All seven panels still share the height of the tallest, so the page and
   the Previous/Next buttons never move when the selection changes.) */
.age-panel {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 1.2rem clamp(1.75rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.age-eyebrow { margin-bottom: 0.5rem; }
.age-panel h3 { font-size: clamp(1.9rem, 3.4vw, 2.4rem); }
.age-title { margin-top: 0.4rem; font-size: 1.22rem; }
.age-meta { margin-top: 1rem; }
.age-quote-label { margin-top: 1.1rem; }
.age-body blockquote.scripture { margin-top: 0.6rem; }
.age-body > p { margin-bottom: 0; }
blockquote.scripture--compact { font-size: 1.2rem; line-height: 1.5; padding: 1.1rem 1.5rem 1.1rem clamp(2.3rem, 5vw, 3rem); }
blockquote.scripture--compact::before { top: 0.35rem; }
blockquote.scripture--compact cite { margin-top: 0.7rem; }
@media (max-width: 760px) { .age-panel { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

/* Previous / Next: equal, aligned to the panel's left and right edges */
.ages-nav { margin-top: 1rem; }
.age-step { flex: 0 1 15rem; }
@media (max-width: 480px) { .age-step { flex: 1 1 0; padding-inline: 0.8rem; } }

/* ---- layout refinement, second pass ---- */
.hero--volume .breadcrumb + .container { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
/* proportioned so both paragraphs run to a similar number of lines */
.overview-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 860px) { .overview-split { grid-template-columns: minmax(0, 1fr); } }
/* Previous sits flush left, Next flush right; both the same height */
.age-step[data-ages-prev] { text-align: left; align-items: flex-start; }
.age-step .step-name { min-height: 1.4em; }
/* homepage Volume I card: room between the chapter divider and the cover */
.volume-card > .divider { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
/* Study Companion: heading and list share the left column so both columns start on one line */
.companion { margin-top: 0; }
.companion-main .section-head { margin-bottom: 1.6rem; }
.companion-list p { margin-bottom: 0; }
@media (max-width: 760px) {
  .age-panel { padding: 1.15rem 1.1rem 1.25rem; gap: 0.9rem; }
  .age-panel h3 { font-size: 1.85rem; }
  .age-title { font-size: 1.12rem; }
  .age-meta { margin-top: 0.8rem; }
  .age-quote-label { margin-top: 0.9rem; }
  blockquote.scripture--compact { font-size: 1.1rem; padding: 0.9rem 1rem 0.9rem 2.3rem; }
  blockquote.scripture--compact::before { left: 0.35rem; font-size: 2.6rem; }
}
@media (max-width: 480px) {
  .hero--volume .btn-row .btn { width: 100%; }
}
@media (max-width: 860px) {
  .volume-details { gap: 1.1rem; }   /* stacked columns read as one even run of paragraphs */
}


/* ==========================================================================
   SITE RESTRUCTURE: homepage sections + the Commentary, Study Resources and
   About & Contact pages. Additive; reuses the tokens, scripture blocks,
   buttons, retailer pills, flip cards and viewer defined above.
   ========================================================================== */

/* section heading with a link on the right ("View all study resources") */
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}
.section-head--split p { max-width: 56ch; }
.section-head--split .resource-link { margin-top: 0; white-space: nowrap; }
.section-more { text-align: center; margin: 2.2rem 0 0; }
.section-more .resource-link { margin-top: 0; }

/* homepage study cards: three across on wide screens so the section stays short.
   (The Study Resources page uses the larger two-column arrangement.) */
@media (min-width: 1100px) {
  .resource-grid--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 0; }
  .resource-grid--row .flip-card,
  .resource-grid--row .flip-card--portrait {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1 / 1.08;
    min-height: 0;
    max-width: none;
  }
}

/* The Approach: four principles read as one row on wide screens */
@media (min-width: 1000px) {
  .principles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 0; }
}
.principle p { font-size: 0.98rem; line-height: 1.6; }

/* closing section: author | publication */
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.closing-col h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.closing-col > p { margin-top: 1rem; color: var(--ink-100); }
.closing-col .closing-name {
  margin: 0.8rem 0 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.22em;
  color: var(--ivory-200);
}
.closing-col .btn-row { margin-top: 1.5rem; }
.closing-col .retailer-row { margin-top: 1.4rem; }
@media (min-width: 861px) {
  .closing-col + .closing-col { border-left: 1px solid var(--navy-700); padding-left: clamp(2rem, 5vw, 4rem); }
}
@media (max-width: 860px) {
  .closing-grid { grid-template-columns: minmax(0, 1fr); }
  .closing-col + .closing-col { border-top: 1px solid var(--navy-700); padding-top: 2rem; }
}

/* ---------- inner-page header ---------- */
.page-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
}
.page-head > .container { position: relative; z-index: 1; }
.page-head .breadcrumb { padding-top: 0; padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.page-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
.page-head h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); letter-spacing: 0.01em; }
.page-head .kicker { letter-spacing: 0.1em; }
.page-head .lede { margin-top: 1.3rem; max-width: 58ch; color: var(--ink-100); }
.page-head .lede + .lede { margin-top: 0.8rem; }
.page-head .btn-row { margin-top: 1.6rem; }
@media (max-width: 860px) { .page-head-grid { grid-template-columns: minmax(0, 1fr); } }

/* "On this page" list */
.page-toc {
  padding: 1.2rem 1.4rem 1.3rem;
  border: 1px solid var(--navy-700);
  border-top: 2px solid var(--gold-400);
  background: linear-gradient(180deg, rgba(201, 164, 99, 0.05), transparent 70%);
}
.page-toc h2 { font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400); font-family: var(--font-body); font-weight: 400; margin-bottom: 0.7rem; }
.page-toc ol { list-style: none; margin: 0; padding: 0; }
.page-toc li + li { border-top: 1px solid var(--navy-700); }
.page-toc a { display: block; padding: 0.55rem 0; text-decoration: none; font-family: var(--font-display); font-size: 1.15rem; color: var(--ivory-200); transition: color 0.2s ease; }
.page-toc a:hover, .page-toc a:focus-visible { color: var(--gold-300); }

/* ---------- editorial row: heading column | reading column ---------- */
.chapter {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.chapter-eyebrow { margin: 0 0 0.6rem; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400); }
.chapter-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.chapter-head .scripture { margin-top: 1.6rem; }
.chapter-body > p { color: var(--ink-100); }
.chapter-body h3 { font-size: 1.35rem; margin: 1.9rem 0 0.6rem; }
.chapter-body .resource-link { margin-top: 0.4rem; }
@media (max-width: 860px) { .chapter { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }
.chapter-aside {
  margin-top: 1.6rem;
  padding: 1.1rem 1.3rem 1.2rem;
  border: 1px solid var(--navy-700);
  border-left: 2px solid var(--gold-400);
  background: rgba(201, 164, 99, 0.04);
}
.chapter-aside p { margin: 0; color: var(--ink-100); }
.chapter-aside .resource-link { margin-top: 0.7rem; }

/* the seven prophetic series, as listed on the Prophetic Structure chart */
.series-list { list-style: none; margin: 1rem 0 1.2rem; padding: 0; border-top: 1px solid var(--navy-700); }
.series-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--navy-700); }
.series-list .s { font-family: var(--font-display); font-size: 1.15rem; color: var(--ivory-100); }
.series-list .r { font-size: 0.92rem; color: var(--ink-300); white-space: nowrap; }

/* small chart thumbnail that opens the full graphic */
.chapter-figure { margin-top: 1.6rem; }
.chapter-figure .study-figure { max-width: 520px; }

/* mini book card on the Commentary page */
.mini-book { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.1rem; align-items: center; margin-top: 1.6rem; padding: 1rem; border: 1px solid var(--navy-700); background: rgba(201, 164, 99, 0.04); }
.mini-book img { width: 100%; height: auto; box-shadow: 0 0 0 1px var(--navy-700), 0 10px 24px -10px rgba(0, 0, 0, 0.6); }
.mini-book p { margin: 0; }
.mini-book .mb-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--ivory-100); line-height: 1.2; }
.mini-book .mb-sub { color: var(--gold-300); font-family: var(--font-display); }
.mini-book .mb-status { margin-top: 0.4rem; font-family: var(--font-display); letter-spacing: 0.04em; color: var(--gold-300); }
.mini-book .resource-link { margin-top: 0.5rem; }

/* ---------- Study Resources page: featured graphics ---------- */
.resource-features { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: 2rem; }
.resource-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--navy-700);
}
.resource-feature--portrait { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.resource-feature-media {
  display: block;
  border: 1px solid var(--navy-700);
  background: var(--navy-900);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.resource-feature-media:hover { border-color: var(--gold-400); transform: translateY(-3px); }
.resource-feature-media img { display: block; width: 100%; height: auto; } /* natural proportions: never cropped */
.resource-feature--portrait .resource-feature-media { max-width: 440px; width: 100%; justify-self: center; }
.resource-feature-text h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.resource-feature-text p { margin-top: 0.8rem; color: var(--ink-100); }
.resource-feature-text .btn { margin-top: 1.4rem; }
@media (max-width: 860px) {
  .resource-feature, .resource-feature--portrait { grid-template-columns: minmax(0, 1fr); }
  .resource-feature--portrait .resource-feature-media { max-width: 360px; }
}

/* chips: symbol names, entry contents */
.chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.chip-list li { padding: 0.3rem 0.9rem; border: 1px solid var(--navy-700); font-family: var(--font-display); font-size: 1.08rem; color: var(--ivory-200); }
.chip-label { margin: 1.6rem 0 0; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400); }

/* panel for "more to come" and similar quiet notices */
.notice-panel { max-width: var(--reading); margin-inline: auto; padding: clamp(1.6rem, 4vw, 2.4rem); border: 1px solid var(--navy-700); border-top: 2px solid var(--gold-400); text-align: center; background: linear-gradient(180deg, rgba(201, 164, 99, 0.05), transparent 65%); }
.notice-panel h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.notice-panel p { max-width: 52ch; margin: 0.8rem auto 0; color: var(--ink-300); }

/* ---------- About & Contact ---------- */
.author-layout { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .author-layout { grid-template-columns: minmax(0, 1fr); } }
.author-card { padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--navy-700); border-top: 2px solid var(--gold-400); background: linear-gradient(180deg, rgba(201, 164, 99, 0.06), transparent 70%); text-align: center; }
.author-card .author-name { margin: 0; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.2em; color: var(--ivory-100); }
.author-card .author-role { margin: 0.5rem 0 0; font-size: 0.95rem; color: var(--ink-300); }
.author-card .author-book { width: min(150px, 46%); margin: 1.4rem auto 0; }
.author-card .author-book img { width: 100%; height: auto; box-shadow: 0 0 0 1px var(--navy-700), 0 16px 32px -14px rgba(0, 0, 0, 0.65); }
.author-card .author-status { margin: 1rem 0 0; font-family: var(--font-display); color: var(--gold-300); letter-spacing: 0.04em; }
.author-bio h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 1.2rem; }
.author-bio p { color: var(--ink-100); }
.contact-panel { max-width: var(--reading); margin-inline: auto; padding: clamp(2rem, 5vw, 3.2rem); border: 1px solid var(--navy-700); border-top: 2px solid var(--gold-400); text-align: center; background: linear-gradient(180deg, rgba(201, 164, 99, 0.05), transparent 65%); }
.contact-panel h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.contact-panel p { color: var(--ink-300); margin-top: 0.9rem; }
.contact-panel .contact-email { margin-top: 0.6rem; font-size: clamp(1.15rem, 3.6vw, 1.6rem); overflow-wrap: anywhere; }
.contact-panel .btn-row { justify-content: center; margin-top: 2rem; }
/* homepage closing section: retailer pills as a tidy 2x2 */
.closing-col .retailer-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; max-width: 26rem; }
.closing-col .retailer-pill { text-align: center; }

/* alignment: breadcrumb flush with the page heading; author columns share the .chapter grid */
.page-head .breadcrumb { padding-inline: 0; max-width: none; }
.author-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
@media (max-width: 860px) { .author-layout { grid-template-columns: minmax(0, 1fr); } }

/* comfortable touch targets for the menu button and footer links */
.nav-toggle { min-height: 44px; min-width: 44px; }
.footer-nav a { display: inline-block; padding-block: 0.5rem; }