/* ==========================================================================
   The Seasons of Scale — Illustrated Edition · layout system v2
   Magazine/book spreads: both facing pages designed + colorful, text stacked,
   season-accent color carries the type. Built on tokens.css.

   Resolution independence: every .page is a size container; .page-inner sets
   font-size in cqw (1cqw = 1% of page width). Children use em/%, so the design
   scales pixel-perfectly at any flipbook size and at 8.5in in print.
   Design ref width = 816px (8.5in@96dpi); base 3.0cqw = 24.5px there.
   ========================================================================== */

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

/* per-season accent palette (drives drop caps, rules, accent lines, quotes) */
.season-winter{ --accent:#C05621; --accent-deep:#9C4318; --accent-soft:#F4E5D8; }
.season-spring{ --accent:#2F855A; --accent-deep:#236647; --accent-soft:#DEEBE3; }
.season-summer{ --accent:#B7791F; --accent-deep:#8F5E16; --accent-soft:#F3E8CF; }
.season-autumn{ --accent:#2C7A7B; --accent-deep:#1F5C5D; --accent-soft:#D8E7E7; }
.season-turn  { --accent:#C53030; --accent-deep:#9B2620; --accent-soft:#F5DEDE; }

/* ---- page box ----------------------------------------------------------- */
.page{
  position: relative;
  width: 816px; height: 1056px;            /* design size; StPageFlip overrides on web */
  background: var(--bone);
  overflow: hidden;
  container-type: size;
  color: var(--ink);
  --accent: #1A365D; --accent-soft:#E2E8F0; --accent-deep:#0F2440;  /* fallback */
  -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.88) 0%, rgba(15,36,64,0.58) 28%, rgba(15,36,64,0.12) 54%, rgba(15,36,64,0) 72%); }
.scrim--soft-light{ background:
  linear-gradient(to right, rgba(253,251,246,0.86) 0%, rgba(253,251,246,0.66) 42%, rgba(253,251,246,0.40) 72%, rgba(253,251,246,0.18) 100%); }
.scrim--page{ background: radial-gradient(125% 90% at 50% 50%, rgba(253,251,246,0.90) 0%, rgba(253,251,246,0.74) 48%, rgba(253,251,246,0.42) 80%, rgba(253,251,246,0.18) 100%); }
.scrim--center-dark{ background: radial-gradient(96% 54% at 50% 50%, rgba(8,18,36,0.80) 0%, rgba(8,18,36,0.52) 44%, rgba(8,18,36,0.10) 80%, rgba(8,18,36,0) 100%); }

.page-inner{ position:absolute; inset:0; z-index:2; font-size: 3.0cqw; display:flex; flex-direction:column; }

/* gutter / center-fold shadow on the spine edge of each page (toned down in portrait by the viewer) */
.page::after{ content:""; position:absolute; top:0; bottom:0; width:7%; z-index:6; pointer-events:none; opacity:0; transition:opacity .2s; }
.page[data-side="verso"]::after{ right:0; background: linear-gradient(to left, rgba(20,18,14,0.30), rgba(20,18,14,0) 100%); }
.page[data-side="recto"]::after{ left:0;  background: linear-gradient(to right, rgba(20,18,14,0.30), rgba(20,18,14,0) 100%); }
body[data-orient="landscape"] .page::after{ opacity:1; }

/* ---- shared type -------------------------------------------------------- */
.kicker{ font-family:var(--font-sans); font-weight:600; font-size:0.60em; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent-deep); }
.ch-title{ font-family:var(--font-display); font-weight:600; font-size:2.5em; line-height:1.05; letter-spacing:-0.015em; color:var(--navy); text-wrap:balance; }
.ch-rule{ width:2.6em; height:0.13em; border-radius:1px; background:var(--accent); margin:0.55em 0 0.7em; }

.verse{ font-family:var(--font-text); }
.verse p{ font-size:1.0em; line-height:1.34; letter-spacing:-0.003em; color:var(--ink-90); margin:0 0 0.34em 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; }
/* a small gap where the source had a stanza break */
.verse p.stanza-gap{ margin-top:0.85em; }
/* short staccato lines pop in the season accent */
.verse p.accent{ color:var(--accent-deep); font-weight:600; font-size:1.12em; letter-spacing:0.005em; margin-bottom:0.30em; }
/* opening line of a chapter: larger, navy, with a colored drop cap */
.verse p.lead{ font-size:1.18em; line-height:1.3; color:var(--navy); }
.verse p.dropcap::first-letter{ float:left; font-family:var(--font-display); font-weight:700; color:var(--accent);
  font-size:3.1em; line-height:0.78; padding:0.04em 0.10em 0 0; }
/* inline pull-quote panel woven into the text */
.pullq{ margin:0.7em 0 0.7em; padding:0.5em 0.55em 0.5em 0.8em; border-left:0.18em solid var(--accent);
  background:var(--accent-soft); border-radius:0 0.2em 0.2em 0;
  font-family:var(--font-display); font-style:italic; font-weight:500; font-size:1.34em; line-height:1.24; color:var(--navy); text-wrap:balance; }
.pullq sup{ font-size:0.62em; }

/* folio (page number) in the outer bottom corner */
.folio{ position:absolute; bottom:4.2%; z-index:7; font-family:var(--font-mono); font-size:0.62em; letter-spacing:0.08em; color:var(--ink-70); }
.page[data-side="recto"] .folio{ right:var(--pad-x); }
.page[data-side="verso"] .folio{ left:var(--pad-x); }
.folio .glyph{ color:var(--accent); }
/* light folio over dark art pages */
.page--openerart .folio, .page--spread-right .folio{ color:rgba(253,251,246,0.85); }
.page--openerart .folio .glyph{ color:rgba(253,251,246,0.7); }

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

/* COVER (hard) */
.page--cover .page-inner{ justify-content:flex-end; }
.page--cover .cover-block{ padding:0 var(--pad-x) 11%; color:var(--bone); }
.page--cover .cover-eyebrow{ font-family:var(--font-sans); font-weight:600; font-size:0.58em; letter-spacing:0.30em; text-transform:uppercase; color:rgba(253,251,246,0.82); margin-bottom:1.0em; }
.page--cover .cover-title{ font-family:var(--font-display); font-weight:600; font-size:3.3em; 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-size:1.25em; margin-top:0.6em; color:rgba(253,251,246,0.95); }
.page--cover .cover-logo{ height:1.4em; margin-top:1.6em; opacity:0.95; }

/* TITLE */
.page--title .page-inner{ align-items:center; justify-content:center; text-align:center; padding:0 13%; }
.page--title .title-mark-img{ position:absolute; top:0; left:0; width:100%; height:36%; object-fit:cover; object-position:top center; z-index:0; }
.page--title .title-main{ font-family:var(--font-display); font-weight:600; font-size:2.9em; 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.18em; color:var(--ink-70); margin-top:0.8em; }
.page--title .title-author{ font-family:var(--font-sans); font-size:0.74em; letter-spacing:0.05em; color:var(--ink-90); margin-top:2.4em; }
.page--title .title-author small{ display:block; font-size:0.86em; color:var(--ink-55); margin-top:0.35em; }
.page--title .title-logo{ height:1.5em; margin-top:2.8em; }

/* TABLE OF CONTENTS */
.page--toc .toc-band{ position:absolute; top:0; left:0; width:100%; height:20%; object-fit:cover; z-index:0; }
.page--toc .page-inner{ padding:25% var(--pad-x) 8%; }
.page--toc .toc-head{ font-family:var(--font-sans); font-weight:700; font-size:0.62em; letter-spacing:0.26em; text-transform:uppercase; color:var(--red); margin-bottom:1.3em; }
.toc-list{ list-style:none; margin:0; padding:0; }
.toc-list li{ display:flex; align-items:baseline; gap:0.55em; padding:0.40em 0; border-bottom:1px solid var(--rule-soft); }
.toc-dot{ width:0.5em; height:0.5em; border-radius:50%; flex:none; align-self:center; }
.toc-link{ font-family:var(--font-display); font-size:1.0em; color:var(--navy); cursor:pointer; flex:1; }
.toc-link:hover{ color:var(--red); }
.toc-pg{ font-family:var(--font-mono); font-size:0.72em; color:var(--ink-55); }

/* CHAPTER OPENER — ART (verso/left) */
.page--openerart .page-inner{ justify-content:flex-end; }
.page--openerart .oa-block{ padding:0 var(--pad-x) 11%; color:var(--bone); }
.page--openerart .oa-num{ font-family:var(--font-display); font-weight:300; font-size:5.2em; line-height:0.9; color:var(--bone); opacity:0.96; text-shadow:0 0.03em 0.5em rgba(10,22,42,0.5); }
.page--openerart .oa-kicker{ font-family:var(--font-sans); font-weight:600; font-size:0.62em; letter-spacing:0.26em; text-transform:uppercase; color:rgba(253,251,246,0.92); margin-top:0.5em; }

/* CHAPTER OPENER — TITLE + TEXT (recto/right) */
.page--openertext .page-inner{ justify-content:flex-start; padding:9% var(--pad-x) 7%; }
.page--openertext .kicker{ margin-bottom:0.5em; }
.page--openertext .verse{ margin-top:0.9em; }

/* TEXT PAGE (both sides) — light seasonal art behind a soft scrim */
.page--text .page-inner{ justify-content:flex-start; padding:8% var(--pad-x) 7%; }
.page--text.center .page-inner{ justify-content:center; }

/* SPREAD (two pages share one wide image) */
.page--spread-left .page-art{ position:absolute; left:0; width:200%; object-position:left center; }
.page--spread-right .page-art{ position:absolute; right:0; left:auto; width:200%; object-position:right center; }
.spread-line{ position:absolute; z-index:3; bottom:11%; left:8%; right:8%; text-align:center;
  font-family:var(--font-display); font-style:italic; font-size:1.9em; line-height:1.2; color:var(--bone);
  text-shadow:0 0 0.9em rgba(8,18,36,0.95), 0 0.12em 0.4em rgba(8,18,36,0.9); text-wrap:balance; }

/* BREATHER (chapter close / parity) — a centered pull-quote on light art */
.page--breather .page-inner{ align-items:center; justify-content:center; text-align:center; padding:0 14%; }
.page--breather .bq{ position:relative; z-index:3; font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:2.0em; line-height:1.24; color:var(--navy); text-wrap:balance; }
.page--breather .bq sup{ font-size:0.62em; }
.page--breather .bq.is-emphasis{ font-style:normal; font-weight:700; font-size:2.4em; }
.page--breather .bflour{ position:relative; z-index:3; width:2.4em; height:0.12em; background:var(--accent); margin:0 auto 0.9em; box-shadow:0 0 0.5em rgba(8,18,36,0.5); }
.page--breather .bflour.bot{ margin:0.9em auto 0; }
.page--breather .interlude-word{ position:relative; z-index:3; font-family:var(--font-sans); font-weight:600;
  font-size:1.05em; letter-spacing:0.46em; text-transform:uppercase; color:var(--bone); text-indent:0.46em;
  text-shadow:0 0.04em 0.5em rgba(8,18,36,0.7); }
.page--breather .folio{ color:rgba(253,251,246,0.82); }
.page--breather .folio .glyph{ color:rgba(253,251,246,0.7); }

/* COLOPHON / BACK (hard) */
.page--colophon{ background:var(--navy-deep); color:var(--bone); }
.page--colophon .page-inner{ justify-content:flex-end; align-items:center; text-align:center; padding:0 16% 13%; }
.page--colophon .colo-deer{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0.07; z-index:0; }
.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.92em; color:rgba(253,251,246,0.82); margin-top:0.35em; }
.page--colophon .colo-meta{ font-family:var(--font-sans); font-size:0.58em; line-height:1.8; letter-spacing:0.04em; color:rgba(253,251,246,0.7); margin-top:1.5em; }
.page--colophon .colo-logo{ height:1.3em; margin-top:1.6em; opacity:0.95; }