/* ──────────────────────────────────────────────────────────────────
   book-gr.css — golden-ratio layout overlay.
   Loaded AFTER book-ui.css. Does NOT touch font-size (book-engine.css
   sets those — production fonts stay verbatim). What this DOES do:

     1. Force every spread page (.face / .page-half) into a vertical
        flex column: page-head pinned top, page-foot pinned bottom,
        content fills the middle.

     2. Inside .content, distribute children with a φ-rhythm —
        a top spacer of weight 1 and a bottom spacer of weight φ (1.618)
        push the visual block toward the upper-third / golden anchor.
        This is the classic book-page composition.

     3. Spacing between sibling content elements (eyebrow → title →
        script → body) follows the Fibonacci sequence (5/8/13/21/34/55).

     4. Body line-height = φ. Body max-width = 38ch. Card paddings
        rebuilt on Fibonacci scale.

   To opt OUT of golden-anchoring on a specific spread, give .content
   the class `content-top` (sticks to top) or `content-center`
   (true center).
   ────────────────────────────────────────────────────────────────── */

:root {
  /* Fibonacci spacing */
  --sp-1:  5px;
  --sp-2:  8px;
  --sp-3: 13px;
  --sp-4: 21px;
  --sp-5: 34px;
  --sp-6: 55px;
  --sp-7: 89px;

  /* Golden split */
  --phi:       1.618;
  --gr-minor:  38.2%;
  --gr-major:  61.8%;
}

/* ─────────── PAGE COLUMN ─────────── */
.face,
.page-half {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.face > .page-head,
.page-half > .page-head { flex: 0 0 auto !important; }
.face > .page-foot,
.page-half > .page-foot { flex: 0 0 auto !important; margin-top: auto !important; }
.face > .content,
.page-half > .content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* ─────────── CONTENT BLOCK: fills page from top with breath at top ─────────── */
.face .content,
.page-half .content {
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  padding-top: 4% !important;
  padding-bottom: 0 !important;
}
/* drop the previous golden-anchor spacers — they leave too much bottom empty */
.face .content::before,
.face .content::after,
.page-half .content::before,
.page-half .content::after { content: none !important; }

/* Per-spread opt-outs */
.face .content-top,
.page-half .content-top { padding-top: 0 !important; }
.face .content-center,
.page-half .content-center { justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.face .content-bottom > *:first-child,
.page-half .content-bottom > *:first-child { margin-top: auto !important; }

/* Cover pages — opt out entirely */
.face > .cover-face,
.page-half > .cover-face { flex: 1 1 auto !important; }

/* ─────────────────── BODY READABILITY ─────────────────── */
.content .body,
.content p.body {
  line-height: var(--phi) !important;
  max-width: 38ch;
  text-wrap: pretty;
}
.content .title,
.content h2.title,
.content h3.title { text-wrap: balance; }

/* ─────────────────── FIBONACCI VERTICAL RHYTHM ─────────────────── */
.content .mono + .title,
.content .mono.accent + .title { margin-top: var(--sp-3) !important; }
.content .title + .sub-script,
.content .title + .script { margin-top: var(--sp-2) !important; }
.content .title + .body,
.content .sub-script + .body,
.content .script + .body,
.content .mono + .body { margin-top: var(--sp-5) !important; }
.content .body + .body { margin-top: var(--sp-4) !important; }

/* card spacing on Fibonacci */
.card { padding: var(--sp-4) var(--sp-5) !important; }
.card.dark { padding: var(--sp-4) var(--sp-5) !important; }
.card .title { margin-bottom: var(--sp-3) !important; }

/* roles grid */
.roles { gap: var(--sp-4) !important; }
.roles .col { padding: var(--sp-4) var(--sp-5) !important; }

/* head/foot rules */
.page-head { padding-bottom: var(--sp-3) !important; margin-bottom: 0 !important; }
.page-foot { padding-top: var(--sp-3) !important; margin-top: var(--sp-5) !important; }

/* tables — Fibonacci row padding */
.content table th,
.content table td { padding: var(--sp-3) 0 !important; }

/* opt-in 38.2 / 61.8 split layout */
.gr-split         { display: grid !important; grid-template-columns: var(--gr-minor) var(--gr-major) !important; gap: var(--sp-5) !important; }
.gr-split-reverse { display: grid !important; grid-template-columns: var(--gr-major) var(--gr-minor) !important; gap: var(--sp-5) !important; }