/* =========================================================================
   CONTENTS — a Part's index as a book.

   Two states, one stylesheet:
     default        a plain, readable, fully linked list of chapters
     body.flip-on   the same markup taken over by StPageFlip

   The default is not a fallback nobody sees. It is what a crawler reads, what
   a reduced-motion reader gets, and what survives if the flip script fails —
   and since this page is the only route to a lesson, it has to be good on its
   own. The palette is the library's, not the lesson pages': this is the shelf
   continuing, so it stays warm wood and gold in both themes.
   ========================================================================= */

:root{
  --ink:#0B171C;
  --ink2:#102229;
  --cream:#F4EDE0;
  --cream-dim:rgba(244,237,224,.68);
  --gold:#C9A227;
  --gold-soft:#E4C96B;
  --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);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--cream);
  font-family:var(--body);font-weight:300;line-height:1.7;
  background:
    radial-gradient(120% 80% at 50% -10%, #16303A 0%, transparent 60%),
    linear-gradient(180deg,#0B171C 0%,#0A141A 100%);
  background-attachment:fixed}

/* ---------- top bar ---------- */
.cbar{position:sticky;top:0;z-index:20;background:rgba(9,20,26,.86);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.cbar .in{max-width:74rem;margin:0 auto;display:flex;align-items:center;gap:1rem;
  padding:.7rem clamp(.9rem,3vw,1.6rem)}
.cbar .mark{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  color:var(--gold-soft);font-family:var(--font-ui);font-weight:800;font-size:.86rem;
  letter-spacing:-.01em;flex:none}
.cbar .mark svg{width:22px;height:14px}
.cbar .nm{flex:1;min-width:0;font-family:var(--font-ui);font-weight:600;font-size:.76rem;
  color:var(--cream-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbar .back{flex:none;text-decoration:none;font-family:var(--font-ui);font-weight:700;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(201,162,39,.4);border-radius:3px;padding:.35rem .7rem}
.cbar .back:hover{background:rgba(201,162,39,.12)}

/* ---------- the stage ---------- */
.stage{max-width:74rem;margin:0 auto;padding:clamp(1.2rem,4vw,2.4rem) clamp(.8rem,3vw,1.6rem)}
.book{display:grid;gap:clamp(1rem,3vw,1.6rem)}

/* =========================================================================
   DEFAULT — the readable list
   ========================================================================= */
.page{border:1px solid var(--line);border-radius:5px;overflow:hidden;
  background:linear-gradient(168deg,rgba(28,58,68,.5),rgba(12,28,34,.6))}
.page-content{padding:clamp(1.1rem,3.2vw,1.8rem)}

.page.cover .page-content{text-align:center;padding:clamp(1.8rem,5vw,3rem)}
.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%)}
.orn{display:block;margin:0 auto .8rem;width:26px;height:16px}
.kick{display:block;font-family:var(--font-ui);font-weight:700;font-size:.66rem;
  letter-spacing:.22em;color:var(--gold);text-transform:uppercase}
.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)}
.div{display:block;width:2.4rem;height:1px;margin:.9rem auto;background:var(--gold);opacity:.7}
.sub{display:block;font-family:var(--font-ui);font-weight:700;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim)}
.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}
.band i{display:block;height:3px;background:var(--gold)}
.cfoot{display:block;font-family:var(--font-ui);font-weight:600;font-size:.7rem;
  color:var(--cream-dim)}
.turnhint{display:none}
.endnote{font-family:var(--serif);font-size:1.1rem;color:var(--cream-dim);margin:0}

.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)}
.ch-eyebrow .rule{display:block;width:1.6rem;height:1px;background:var(--gold);opacity:.6}
.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)}
.ch-count{margin:0 0 1rem;font-family:var(--font-ui);font-weight:600;font-size:.68rem;
  letter-spacing:.06em;color:var(--cream-dim)}

.toc{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.row a,.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}
.row a:hover,.row a:focus-visible{background:rgba(201,162,39,.1);border-color:rgba(201,162,39,.35)}
.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}
.row span:not(.soonlbl){flex:1;font-family:var(--body);font-size:.96rem;line-height:1.45}
.row .go{flex:none;font-style:normal;color:var(--gold);opacity:.55}
.row a:hover .go{opacity:1}
.row.soon>span{color:var(--cream-dim);opacity:.55;cursor:default}
.row.soon b{color:var(--cream-dim)}
.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)}
.row.read b::after{content:'✓';margin-left:.3rem;color:var(--gold-soft)}

.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}

/* =========================================================================
   body.flip-on — StPageFlip takes over
   ========================================================================= */
body.flip-on .stage{display:flex;justify-content:center;align-items:flex-start;
  padding-bottom:.6rem;height:auto}
body.flip-on .book{display:block;gap:0}
/* The window the book is seen through. A closed cover is a single page
   sitting in one half of a two-page spread; narrowing this frame and
   sliding the book behind it centres that page instead of leaving it
   stranded to one side. The tint matches the cover so the hidden half
   never flashes as a pale gap mid-flip. */
body.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)}
body.flip-on.settled .frame{transition:width .32s var(--ease)}
body.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. */
body.flip-on .page{border:0;border-radius:0;overflow:hidden;
  background:var(--paper);color:var(--paper-ink)}
body.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 */
body.flip-on .page.--left .page-content{box-shadow:inset -18px 0 26px -20px rgba(60,40,10,.65)}
body.flip-on .page.--right .page-content{box-shadow:inset 18px 0 26px -20px rgba(60,40,10,.65)}

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

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

/* ---------- page controls ---------- */
.flipnav{display:flex;justify-content:center;align-items:center;gap:1rem;
  padding:.2rem 1rem 1.4rem}
.flipnav button{width:2.6rem;height:2.6rem;border-radius:50%;cursor:pointer;
  border:1px solid rgba(201,162,39,.4);background:rgba(18,48,57,.75);color:var(--gold-soft);
  font-size:1.3rem;line-height:1;transition:.15s}
.flipnav button:hover:not(:disabled){background:rgba(201,162,39,.16)}
.flipnav button:disabled{opacity:.3;cursor:default}
.flipnav span{font-family:var(--font-ui);font-weight:700;font-size:.72rem;
  letter-spacing:.1em;color:var(--cream-dim);min-width:4rem;text-align:center;
  font-variant-numeric:tabular-nums}
.fliphint{margin:0 0 2rem;text-align:center;font-family:var(--font-ui);font-weight:600;
  font-size:.66rem;letter-spacing:.1em;color:var(--cream-dim);opacity:.7}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:rgba(8,22,28,.6);margin-top:2rem}
.foot .in{max-width:74rem;margin:0 auto;padding:2rem clamp(.9rem,3vw,1.6rem);
  display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between}
.foot .brand{margin:0 0 .4rem;font-family:var(--font-ui);font-weight:800;color:var(--gold-soft)}
.foot .note{margin:0 0 .8rem;max-width:38rem;font-size:.82rem;color:var(--cream-dim)}
.foot .links{list-style:none;display:flex;flex-wrap:wrap;gap:1rem;margin:0;padding:0}
.foot .links a{color:var(--gold);text-decoration:none;font-family:var(--font-ui);
  font-weight:600;font-size:.76rem}
.foot .links a:hover{text-decoration:underline}
.foot .copy{margin:0;font-family:var(--font-ui);font-weight:600;font-size:.72rem;
  color:var(--cream-dim);text-align:right}

@media (max-width:40rem){
  .foot .in{flex-direction:column}
  .foot .copy{text-align:left}
  .cbar .nm{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}