/* =========================================================================
   FLIPBOOK — the book itself, wherever it appears.

   Split out of contents.css so the same book can live on its own page AND
   inside a modal on a lesson page. Every rule is scoped under .gbook, for two
   reasons that are not optional:

     collision  a lesson page already defines .page, .book, .ttl and .sub.
                Unscoped, this stylesheet would restyle the article.
     tokens     a lesson page has no --gold or --cream. The book carries its
                own, so it looks the same wherever it is dropped.

   .gbook            the readable list — what a crawler and a no-JS reader get
   .gbook.flip-on    the same markup after StPageFlip has taken it over

   The page chrome around it (top bar, footer, stage) stays in contents.css.
   Nothing here touches html, body or :root, so it is safe to load anywhere.
   ========================================================================= */

.gbook{
  --gold:#C9A227;
  --gold-soft:#E4C96B;
  --cream:#F4EDE0;
  --cream-dim:rgba(244,237,224,.68);
  --paper:#FBF6EA;
  --paper2:#F1E8D5;
  --paper-ink:#241C10;
  --paper-dim:#6B5C43;
  --line:rgba(244,237,224,.16);
  --serif:'Cormorant Garamond',Georgia,serif;
  --font-ui:'Syne',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Newsreader',Georgia,serif;
  --ease:cubic-bezier(.22,.9,.28,1);
}

/* =========================================================================
   DEFAULT — the readable list
   ========================================================================= */
.gbook .book{display:grid;gap:clamp(1rem,3vw,1.6rem);margin:0;padding:0}

/* Keep article-page spacing outside the book; only page-content supplies insets. */
.gbook .page{box-sizing:border-box;max-width:none;margin:0;padding:0;
  border:1px solid var(--line);border-radius:5px;overflow:hidden;
  background:linear-gradient(168deg,rgba(28,58,68,.5),rgba(12,28,34,.6))}
.gbook .page-content{padding:clamp(1.1rem,3.2vw,1.8rem)}

.gbook .page.cover{background:
  radial-gradient(120% 55% at 50% 106%, rgba(255,196,110,.2) 0%, transparent 62%),
  linear-gradient(168deg,#123C46 0%,#0D2C34 58%,#081E24 100%)}
.gbook .page.cover .page-content{text-align:center;padding:clamp(1.8rem,5vw,3rem)}

.gbook .orn{display:block;margin:0 auto .8rem;width:26px;height:16px}
.gbook .kick{display:block;font-family:var(--font-ui);font-weight:700;font-size:.66rem;
  letter-spacing:.22em;color:var(--gold);text-transform:uppercase}
/* the H1 holds the cover name, the rule and the search name; it adds no look of its own */
.gbook .ttl-h1{margin:0;font:inherit;color:inherit}
.gbook .ttl-h1 .ttl{display:block;text-wrap:balance}
.gbook .ttl-h1 .sep{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.gbook .ttl{margin:.5rem 0 0;font-family:var(--serif);font-weight:500;
  font-size:clamp(1.6rem,5.5vw,2.6rem);line-height:1.15;color:var(--cream)}
.gbook .div{display:block;width:2.4rem;height:1px;margin:.9rem auto;
  background:var(--gold);opacity:.7}
.gbook .sub{display:block;font-family:var(--font-ui);font-weight:700;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim)}
.gbook .band{display:block;width:min(14rem,70%);height:3px;margin:1.4rem auto .6rem;
  background:rgba(244,237,224,.16);border-radius:2px;overflow:hidden}
.gbook .band i{display:block;height:3px;background:var(--gold)}
.gbook .cfoot{display:block;font-family:var(--font-ui);font-weight:600;font-size:.7rem;
  color:var(--cream-dim)}
.gbook .turnhint{display:none}
.gbook .endnote{font-family:var(--serif);font-size:1.1rem;color:var(--cream-dim);margin:0}

/* ---------- what this book leaves you with ----------
   Its own page on a spread; folded onto the cover on a phone, where an
   extra turn before the chapters would cost more than it gives. */
.gbook .page.promise .page-content{gap:0;font-size:clamp(11px,calc(var(--page-h,650px) / 47),15px)}
/* a short window leaves a page too small for the whole promise: it scrolls,
   with the cut edge faded so it is visible that there is more below. */
.gbook.flip-on .page.promise .page-content{overflow-y:auto;scrollbar-width:thin}
.gbook .pr-kick{display:block;font-family:var(--font-ui);font-weight:700;font-size:.75em;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.gbook .pr-sum{margin:.7em 0 .9em;font-family:var(--serif);font-weight:500;
  font-size:1.5em;line-height:1.28;text-wrap:balance}
.gbook .pr-lead{margin:0 0 .45em;font-family:var(--font-ui);font-weight:700;font-size:.78em;
  letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.gbook .pr-know,.gbook .pr-diff{list-style:none;margin:0 0 1em;padding:0;
  font-family:var(--font-body);font-size:1em;line-height:1.45}
.gbook .pr-know li,.gbook .pr-diff li{position:relative;padding:0 0 .38rem 1.1rem}
.gbook .pr-know li::before{content:"";position:absolute;left:.05rem;top:.5em;width:.4rem;height:.22rem;
  border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}
.gbook .pr-diff li::before{content:"";position:absolute;left:.1rem;top:.62em;width:.3rem;height:.3rem;
  border-radius:50%;background:var(--gold);opacity:.75}
.gbook .pr-why{margin:0 0 1em;font-family:var(--serif);font-size:1.08em;line-height:1.5;opacity:.88}

/* the folded form, on the cover of a phone */
.gbook.flip-on .page.cover .page-content:has(.fold){padding-top:clamp(1rem,4vw,1.5rem);padding-bottom:clamp(1rem,4vw,1.5rem)}
.gbook .page.cover .page-content:has(.fold) .band{margin:1rem auto .5rem}

.gbook .pr-sum.fold{margin:1.1rem 0 .8rem;font-size:clamp(.95rem,4vw,1.08rem);line-height:1.35;color:var(--cream)}
.gbook .pr-lead.fold{color:var(--cream-dim);opacity:1}
.gbook .pr-know.fold{margin:0;text-align:left;font-size:.8rem;line-height:1.4;color:var(--cream-dim)}
.gbook .pr-know.fold li{padding-bottom:.32rem}
.gbook.flip-on .page.promise .page-content{justify-content:flex-start}

.gbook .ch-eyebrow{display:flex;align-items:center;gap:.6rem;font-family:var(--font-ui);
  font-weight:700;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold)}
.gbook .ch-eyebrow .rule{display:block;width:1.6rem;height:1px;background:var(--gold);opacity:.6}
.gbook .ch-title{margin:.5rem 0 .2rem;font-family:var(--serif);font-weight:500;
  font-size:clamp(1.25rem,3.6vw,1.7rem);line-height:1.2;color:var(--cream)}
.gbook .ch-count{margin:0 0 1rem;font-family:var(--font-ui);font-weight:600;
  font-size:.68rem;letter-spacing:.06em;color:var(--cream-dim)}

.gbook .toc{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.gbook .row a,.gbook .row>span{display:flex;align-items:baseline;gap:.7rem;
  padding:.55rem .7rem;border-radius:3px;text-decoration:none;color:var(--cream);
  border:1px solid transparent;transition:background .16s,border-color .16s}
.gbook .row a:hover,.gbook .row a:focus-visible{background:rgba(201,162,39,.1);
  border-color:rgba(201,162,39,.35)}
.gbook .row b{flex:none;font-family:var(--font-ui);font-weight:800;font-size:.72rem;
  color:var(--gold);font-variant-numeric:tabular-nums;min-width:1.5rem}
.gbook .row span:not(.soonlbl){flex:1;font-family:var(--body);font-size:.96rem;line-height:1.45}
.gbook .row .go{flex:none;font-style:normal;color:var(--gold);opacity:.55}
.gbook .row a:hover .go{opacity:1}
.gbook .row.soon>span{color:var(--cream-dim);opacity:.55;cursor:default}
.gbook .row.soon b{color:var(--cream-dim)}
.gbook .row .soonlbl{flex:none;font-style:normal;font-family:var(--font-ui);font-weight:700;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)}
.gbook .row.read b::after{content:'✓';margin-left:.3rem;color:var(--gold-soft)}

.gbook .page-number{margin-top:1.2rem;font-family:var(--font-ui);font-weight:700;
  font-size:.64rem;letter-spacing:.14em;color:var(--cream-dim);text-align:right}

/* =========================================================================
   .gbook.flip-on — StPageFlip has taken over
   ========================================================================= */
.gbook.flip-on .book{display:block;gap:0}

/* The window the book is seen through. A closed cover is a single page in one
   half of a spread; narrowing this and sliding the book behind it centres that
   page. The tint matches the cover so the hidden half never flashes pale. */
.gbook.flip-on .frame{position:relative;overflow:hidden;margin:0 auto;
  background:linear-gradient(168deg,#123C46,#081E24);
  box-shadow:0 45px 90px -25px rgba(0,0,0,.55), 0 18px 35px rgba(0,0,0,.25)}
.gbook.flip-on.settled .frame{transition:width .32s var(--ease)}
.gbook.flip-on.settled .book{transition:left .32s var(--ease)}

/* StPageFlip absolutely positions each .page and drives its own 3-D flip, so
   the list styling above has to stop applying to the sheet itself. */
.gbook.flip-on .page{border:0;border-radius:0;overflow:hidden;
  background:var(--paper);color:var(--paper-ink)}
.gbook.flip-on .page-content{height:100%;overflow:hidden;
  padding:clamp(1.2rem,3.4vw,2.2rem) clamp(1.1rem,3vw,2rem);
  display:flex;flex-direction:column;
  background:
    linear-gradient(180deg,rgba(180,150,90,.07),transparent 22%),
    linear-gradient(155deg,var(--paper) 0%,var(--paper2) 100%)}

/* the gutter shadow, so a spread reads as one bound book */
.gbook.flip-on .page.--left .page-content{box-shadow:inset -18px 0 26px -20px rgba(60,40,10,.65)}
.gbook.flip-on .page.--right .page-content{box-shadow:inset 18px 0 26px -20px rgba(60,40,10,.65)}

.gbook.flip-on .page.cover .page-content{
  justify-content:center;text-align:center;color:var(--cream);
  background:
    radial-gradient(120% 55% at 50% 106%, rgba(255,196,110,.26) 0%, transparent 62%),
    radial-gradient(90% 60% at 22% 4%, rgba(255,232,190,.16) 0%, transparent 55%),
    linear-gradient(168deg,#123C46 0%,#0D2C34 58%,#081E24 100%)}
.gbook.flip-on .page.cover .ttl{color:var(--cream)}
.gbook.flip-on .turnhint{display:block;margin-top:1.6rem;font-family:var(--font-ui);
  font-weight:700;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-soft);opacity:.8}

/* paper-side ink */
.gbook.flip-on .ch-eyebrow{color:#8A6A12}
.gbook.flip-on .ch-eyebrow .rule{background:#8A6A12}
.gbook.flip-on .ch-title{color:var(--paper-ink)}
.gbook.flip-on .ch-count{color:var(--paper-dim)}
.gbook.flip-on .toc{flex:1;align-content:start;overflow:auto}
.gbook.flip-on .row a,.gbook.flip-on .row>span{color:var(--paper-ink)}
.gbook.flip-on .row a:hover,.gbook.flip-on .row a:focus-visible{
  background:rgba(138,106,18,.1);border-color:rgba(138,106,18,.34)}
.gbook.flip-on .row b{color:#8A6A12}
.gbook.flip-on .row .go{color:#8A6A12}
.gbook.flip-on .row.soon>span{color:var(--paper-dim)}
.gbook.flip-on .row.soon b,.gbook.flip-on .row .soonlbl{color:var(--paper-dim)}
.gbook.flip-on .row.read b::after{color:#1C7A4F}
.gbook.flip-on .page-number{color:var(--paper-dim)}

/* A leaf has a fixed height and the longest chapter runs to eight lessons.
   Tighten the list so that fits; the overflow rule above is the safety net. */
.gbook.flip-on .toc{gap:.1rem}
.gbook.flip-on .row a,.gbook.flip-on .row>span{padding:.38rem .55rem}
.gbook.flip-on .row span:not(.soonlbl){font-size:.9rem;line-height:1.35}
.gbook.flip-on .ch-title{font-size:clamp(1.1rem,3vw,1.45rem)}
.gbook.flip-on .ch-count{margin-bottom:.7rem}
.gbook.flip-on .page-number{margin-top:.8rem}
.gbook.flip-on .toc::-webkit-scrollbar{width:5px}
.gbook.flip-on .toc::-webkit-scrollbar-thumb{background:rgba(138,106,18,.3);border-radius:3px}
.gbook.flip-on .toc::-webkit-scrollbar-track{background:transparent}

/* =========================================================================
   CHAPTER STRIP — the reason a book can also be a jump table.

   A flip book is sequential, and "take me to chapter eight" is not. Without
   this you would flip eight spreads to get there, which is the problem the
   contents was meant to solve. One tap per chapter, straight to the page.
   ========================================================================= */
.gstrip{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;
  padding:.2rem 0 .9rem}
.gstrip button{min-width:2.1rem;padding:.32rem .5rem;cursor:pointer;
  font-family:'Syne',system-ui,sans-serif;font-weight:700;font-size:.72rem;
  font-variant-numeric:tabular-nums;
  color:rgba(244,237,224,.72);background:rgba(18,48,57,.6);
  border:1px solid rgba(201,162,39,.28);border-radius:3px;transition:.14s}
.gstrip button:hover{border-color:rgba(201,162,39,.7);color:#E4C96B}
.gstrip button.on{background:rgba(201,162,39,.18);border-color:#C9A227;color:#E4C96B}
.gstrip button .n{display:block;font-size:.58rem;font-weight:600;opacity:.7;
  letter-spacing:.06em}
@media (max-width:34rem){
  .gstrip{gap:.25rem}
  .gstrip button{min-width:1.9rem;padding:.3rem .35rem;font-size:.68rem}
}