/* ==========================================================================
   The Seasons of Scale — Illustrated Edition
   Page layout system. Built on tokens.css (brand vars + @font-face).

   Resolution independence: every .page is a size container (container-type:size).
   .page-inner sets font-size in cqw (1 cqw = 1% of page width). All child type is
   in em and layout in %, so the SAME design scales pixel-perfectly at any StPageFlip
   render size on the web AND at 8.5in in print. Design reference width = 816px
   (8.5in @ 96dpi): base 1.9608cqw = 16px there.
   ========================================================================== */

:root{
  --bone:        #FDFBF6;
  --bone-cool:   #F4F1EB;
  --ink-soft:    rgba(26,32,44,0.72);
  --gutter-pad:  9%;
}

/* ---- the page box ------------------------------------------------------- */
.page{
  position: relative;
  width: 816px; height: 1056px;          /* design size; StPageFlip overrides on web */
  background: var(--bone);
  overflow: hidden;
  container-type: size;                   /* establishes cqw/cqh for children */
  color: var(--ink);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.page * { box-sizing: border-box; }

.page-art{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
.page-scrim{ position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scrim--bottom{ background: linear-gradient(to top, rgba(15,36,64,0.86) 0%, rgba(15,36,64,0.55) 26%, rgba(15,36,64,0.10) 52%, rgba(15,36,64,0) 70%); }
.scrim--soft-light{ background: radial-gradient(120% 80% at 50% 52%, rgba(253,251,246,0.92) 0%, rgba(253,251,246,0.74) 42%, rgba(253,251,246,0.30) 72%, rgba(253,251,246,0) 100%); }
.scrim--center-dark{ background:
  radial-gradient(96% 52% at 50% 50%, rgba(8,18,36,0.80) 0%, rgba(8,18,36,0.55) 42%, rgba(8,18,36,0.12) 78%, rgba(8,18,36,0) 100%); }

.page-inner{
  position: absolute; inset: 0; z-index: 2;
  font-size: 1.9608cqw;                   /* = 16px at 816px width; everything below in em/% */
  display: flex; flex-direction: column;
}

/* ---- shared type -------------------------------------------------------- */
.kicker{
  font-family: var(--font-sans); font-weight: 600;
  font-size: 0.66em; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--red);
}
.ch-title{
  font-family: var(--font-display); font-weight: 600;
  font-size: 2.55em; line-height: 1.07; letter-spacing: -0.015em;
  text-wrap: balance;
}
.ch-rule{ width: 3.4em; height: 0.14em; border-radius: 1px; }

.verse{ font-family: var(--font-text); }
.verse p{
  font-size: 1.16em; line-height: 1.5; letter-spacing: -0.003em;
  margin: 0 0 1.05em 0; text-wrap: pretty;
  font-feature-settings: 'onum' 1, 'liga' 1, 'kern' 1;
}
.verse p:last-child{ margin-bottom: 0; }
.verse em{ font-style: italic; }

.folio{
  font-family: var(--font-mono); font-size: 0.62em; letter-spacing: 0.04em;
}
.page-chrome{ position: absolute; bottom: 4.2%; left: var(--gutter-pad); right: var(--gutter-pad);
  display: flex; align-items: center; justify-content: space-between; z-index: 3; }
.chrome-mark{ font-family: var(--font-sans); font-weight: 700; font-size: 0.5em; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-30); }

/* ============================ ARCHETYPES ================================= */

/* ---- COVER -------------------------------------------------------------- */
.page--cover .page-inner{ justify-content: flex-end; }
.page--cover .cover-block{ padding: 0 var(--gutter-pad) 11% var(--gutter-pad); color: var(--bone); }
.page--cover .cover-eyebrow{ font-family: var(--font-sans); font-weight: 600; font-size: 0.62em; letter-spacing: 0.30em; text-transform: uppercase; color: rgba(253,251,246,0.82); margin-bottom: 1.1em; }
.page--cover .cover-title{ font-family: var(--font-display); font-weight: 600; font-size: 3.5em; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; text-shadow: 0 0.04em 0.5em rgba(10,22,42,0.45); }
.page--cover .cover-sub{ font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.32em; margin-top: 0.7em; color: rgba(253,251,246,0.95); }
.page--cover .cover-logo{ height: 1.5em; margin-top: 1.8em; opacity: 0.95; }

/* ---- TITLE PAGE --------------------------------------------------------- */
.page--title{ background: var(--bone); }
.page--title .page-inner{ align-items: center; justify-content: center; text-align: center; padding: 0 14%; }
.page--title .title-main{ font-family: var(--font-display); font-weight: 600; font-size: 3.0em; line-height: 1.04; letter-spacing: -0.02em; color: var(--navy); text-wrap: balance; }
.page--title .title-sub{ font-family: var(--font-display); font-style: italic; font-size: 1.25em; color: var(--ink-70); margin-top: 0.9em; }
.page--title .title-author{ font-family: var(--font-sans); font-size: 0.82em; letter-spacing: 0.04em; color: var(--ink-90); margin-top: 2.6em; }
.page--title .title-author small{ display:block; font-size: 0.86em; color: var(--ink-55); margin-top: 0.4em; letter-spacing: 0.02em; }
.page--title .title-logo{ height: 1.7em; margin-top: 3.2em; }
.page--title .title-mark-img{ position:absolute; top:0; left:0; width:100%; height:38%; object-fit: cover; object-position: top center; z-index:0; opacity: 0.92; }

/* ---- TABLE OF CONTENTS -------------------------------------------------- */
.page--toc .toc-band{ position:absolute; top:0; left:0; width:100%; height:22%; object-fit: cover; z-index:0; }
.page--toc .page-inner{ padding: 27% var(--gutter-pad) 8%; }
.page--toc .toc-head{ font-family: var(--font-sans); font-weight: 700; font-size: 0.66em; letter-spacing: 0.26em; text-transform: uppercase; color: var(--red); margin-bottom: 1.6em; }
.toc-list{ list-style: none; margin: 0; padding: 0; }
.toc-list li{ display: flex; align-items: baseline; gap: 0.6em; padding: 0.46em 0; border-bottom: 1px solid var(--rule-soft); }
.toc-num{ font-family: var(--font-mono); font-size: 0.72em; color: var(--red); min-width: 2.1em; }
.toc-link{ font-family: var(--font-display); font-size: 1.04em; color: var(--navy); cursor: pointer; flex: 1; }
.toc-link:hover{ color: var(--red); }
.toc-season{ font-family: var(--font-sans); font-size: 0.58em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-30); }

/* ---- CHAPTER OPENER (full-bleed art + title) --------------------------- */
.page--opener .page-inner{ justify-content: flex-end; }
.page--opener .opener-block{ padding: 0 var(--gutter-pad) 12% var(--gutter-pad); color: var(--bone); }
.page--opener .kicker{ color: rgba(253,251,246,0.92); }
.page--opener .ch-title{ color: var(--bone); text-shadow: 0 0.03em 0.45em rgba(10,22,42,0.5); margin-top: 0.55em; }
.page--opener .ch-rule{ margin-top: 0.9em; }
.page--opener .ch-num{ font-family: var(--font-mono); font-size: 0.7em; color: rgba(253,251,246,0.7); }

/* ---- VERSE OVER ATMOSPHERIC ART (light bg, dark text) ------------------ */
.page--verse-art .page-inner,
.page--verse-paper .page-inner{ justify-content: center; padding: 12% var(--gutter-pad); }
.page--verse-art .verse,
.page--verse-paper .verse{ position: relative; z-index: 2; max-width: 84%; }
.page--verse-art .verse p,
.page--verse-paper .verse p{ color: var(--ink-90); }
.page--verse-paper{ background: var(--bone); }
.page--verse-paper .corner-buck{ position:absolute; bottom:5%; right:7%; width:8%; opacity:0.16; z-index:1; }

/* opening line of a chapter's body gets a drop-style lift */
.verse .lead-line{ font-size: 1.5em; line-height: 1.32; color: var(--navy); font-style: italic; }

/* ---- PULL (dark art + one big line) ------------------------------------ */
.page--pull .page-inner{ align-items: center; justify-content: center; text-align: center; padding: 0 13%; }
.page--pull.pull-low .page-inner{ justify-content: flex-end; padding-bottom: 15%; }
.pull-line{ position: relative; z-index: 2; font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: 2.35em; line-height: 1.22; color: var(--bone); letter-spacing: -0.01em; text-wrap: balance;
  text-shadow: 0 0 0.9em rgba(8,18,36,0.95), 0 0 2.2em rgba(8,18,36,0.85), 0 0.12em 0.4em rgba(8,18,36,0.9); }
.pull-line.is-emphasis{ font-style: normal; font-weight: 700; font-size: 2.75em; }
.pull-line sup{ font-size: 0.62em; }
.page--pull .pull-flour{ position:absolute; z-index:2; left:50%; transform:translateX(-50%); width:2.6em; height:0.12em; background: var(--red); }
.page--pull .pull-flour.top{ top: 31%; } .page--pull .pull-flour.bot{ bottom: 31%; }

/* ---- SPREAD (two pages share one wide image) --------------------------- */
.page--spread-left .page-art{ object-position: left center; width: 200%; }
.page--spread-right .page-art{ object-position: right center; width: 200%; right:0; left:auto; }
.page--spread-right .page-art{ position:absolute; }
.page--spread-left  .page-art{ position:absolute; left:0; }
.spread-line{ position:absolute; z-index:2; bottom: 11%; left: 8%; right: 8%; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: 2.0em; line-height: 1.2; color: var(--bone);
  text-shadow: 0 0.03em 0.5em rgba(10,22,42,0.6); text-wrap: balance; }

/* ---- COLOPHON / BACK ---------------------------------------------------- */
.page--colophon{ background: var(--navy-deep); color: var(--bone); }
.page--colophon .page-art{ opacity: 0.96; }
.page--colophon .page-inner{ justify-content: flex-end; align-items: center; text-align: center; padding: 0 16% 13%; }
.page--colophon .colo-title{ font-family: var(--font-display); font-weight: 600; font-size: 1.5em; color: var(--bone); }
.page--colophon .colo-sub{ font-family: var(--font-display); font-style: italic; font-size: 0.95em; color: rgba(253,251,246,0.82); margin-top: 0.4em; }
.page--colophon .colo-meta{ font-family: var(--font-sans); font-size: 0.62em; line-height: 1.8; letter-spacing: 0.04em; color: rgba(253,251,246,0.7); margin-top: 1.6em; }
.page--colophon .colo-logo{ height: 1.4em; margin-top: 1.8em; opacity: 0.95; }
.page--colophon .colo-deer{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; opacity:0.07; z-index:0; }

/* hard cover/back shadow handled by StPageFlip; nothing here */