:root{
  --paper:#f8f6f0; --ink:#111111; --accent:#7a1f2b; --rule:#e2dcc8;
  --muted:#6f6857; --soft:#928b78; --measure:39rem;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Newsreader",Charter,"Iowan Old Style",Georgia,serif;
  font-size:20px; line-height:1.72; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
em{font-style:italic;}

.topbar{
  position:sticky; top:0; z-index:20; background:rgba(248,246,240,.92);
  backdrop-filter:saturate(140%) blur(6px); border-bottom:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between;
  padding:.95rem 2rem;
}
.brand{font-size:1.02rem; font-weight:500; letter-spacing:-.01em;}
.brand .dia{color:var(--accent); margin-right:.5rem; font-size:.8rem;
  position:relative; top:-1px;}
.topmeta{font-family:"Inter",sans-serif; font-size:.78rem; color:var(--muted);
  letter-spacing:.02em;}

.layout{max-width:62rem; margin:0 auto; display:grid;
  grid-template-columns:15rem 1fr; gap:3.4rem; padding:3.2rem 2rem 6rem;}
.content{max-width:var(--measure); min-width:0;}

/* sidebar — collapsible parts */
.sidebar{font-family:"Inter",system-ui,sans-serif;}
.side-inner{position:sticky; top:5.2rem; max-height:calc(100vh - 7rem);
  overflow-y:auto; padding-right:.5rem;}
.side-label{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .3rem; font-weight:600;}
.tg{border-bottom:1px solid var(--rule);}
.tg summary{list-style:none; cursor:pointer; display:flex; align-items:baseline;
  gap:.5rem; padding:.62rem 0; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--soft); font-weight:600;}
.tg summary::-webkit-details-marker{display:none;}
.tg summary .pn{flex:1; color:inherit;}
.tg summary .pn:hover{color:var(--ink);}
.tg summary .pc{font-weight:400; font-size:.62rem;
  font-family:"JetBrains Mono",monospace;}
.tg summary::after{content:"+"; font-family:"JetBrains Mono",monospace;
  font-size:.84rem; color:var(--soft);}
.tg[open] summary::after{content:"\2212"; color:var(--accent);}
.tg.cur summary{color:var(--accent);}
.tg.cur summary .pc{color:var(--accent);}
.tg > a:last-of-type{margin-bottom:.7rem;}
.toc-ch{display:flex; gap:.55rem; align-items:baseline; padding:.22rem 0;
  font-size:.82rem; line-height:1.42; color:var(--muted);}
.toc-ch:hover{color:var(--ink);}
.toc-ch .cn{font-family:"JetBrains Mono",monospace; font-size:.64rem;
  color:var(--soft); min-width:1.2rem;}
.toc-ch.current{color:var(--accent); font-weight:500;}
.toc-ch.current .cn{color:var(--accent);}
.toc-solo{display:block; padding:.5rem 0; font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--soft);
  border-bottom:1px solid var(--rule);}
.toc-solo:hover{color:var(--ink);}
.toc-solo.current{color:var(--accent);}

.kicker{font-family:"Inter",sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin:0 0 1.3rem;}

/* hero (index) */
h1.book{font-size:4rem; font-weight:600; line-height:1.04;
  letter-spacing:-.025em; margin:.4rem 0 1rem;}
.dek{font-size:1.35rem; line-height:1.5; color:var(--muted);
  font-style:italic; margin:0 0 1.8rem;}
.byrow{display:flex; align-items:center; gap:.7rem;
  font-family:"Inter",sans-serif; font-size:.82rem; color:var(--muted);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:.8rem 0; margin:1.8rem 0 2.4rem;}
.byrow .who{color:var(--ink); font-weight:500;}
.about{color:var(--muted); font-size:1.05rem;}

/* ===== Cinematic landing page =====
   Strategy: hide the sidebar entirely on the landing page, give the hero
   a full-viewport stage, and reveal the full contents below the fold. */
.layout:has(.content--landing){
  display:block; max-width:none; padding:0; gap:0;}
.layout:has(.content--landing) .sidebar{display:none;}

.content--landing{
  max-width:none; padding:0;
  animation:land-fade-in .9s ease-out both;
}
@keyframes land-fade-in{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}

.hero-section{
  min-height:calc(100vh - 56px);
  display:flex; flex-direction:column; justify-content:center;
  padding:3rem 2.4rem 5rem;
  position:relative;
  /* subtle warm vignette to add cinematic depth */
  background:
    radial-gradient(ellipse at center top, rgba(255,251,238,.55) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(122,80,40,.05) 0%, transparent 60%);
}
.hero{
  width:100%; max-width:1080px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0, 420px) minmax(0, 1fr);
  gap:5.5rem; align-items:center;
}
/* ===== Cinematic book-open animation =====
   Three stacked layers inside a 3D perspective stage:
     z=3  .hero-cover         — front cover, flips first (the binding opens)
     z=2  .book-page          — inside title page, flips second (the page turns)
     z=1  .destination-page   — what page-1.html will look like (revealed at end)
   Clicking the cover plays both flips in sequence, then navigates. */
.cover-stage{
  perspective:1900px;
  perspective-origin:50% 38%;
  position:relative;
  transform-style:preserve-3d;
}
/* Shared aspect frame so all three layers occupy identical space */
.cover-stage::after{
  content:""; display:block; padding-top:150%; /* 2:3 ratio reserve */
}
.cover-stage > *{
  position:absolute; inset:0;
}
/* When JS pins the stage to fixed for the zoom, the ::after aspect spacer
   should stop affecting layout — children are sized by the fixed dimensions. */
.cover-stage.zooming::after{ display:none; }
.cover-stage.zooming{
  z-index:9999;
  transition:left .9s cubic-bezier(.42,0,.18,1),
             top .9s cubic-bezier(.42,0,.18,1),
             width .9s cubic-bezier(.42,0,.18,1),
             height .9s cubic-bezier(.42,0,.18,1);
}

/* Full-screen FULLY OPAQUE backdrop — covers everything so only the book
   is visible during the cinematic sequence */
.cover-backdrop{
  position:fixed; inset:0; z-index:9998;
  background:
    radial-gradient(ellipse at center,
      #1c1611 0%, #0e0a06 60%, #050402 100%);
  opacity:0;
  transition:opacity .55s cubic-bezier(.42,0,.18,1);
  pointer-events:none;
}
.cover-backdrop::after{
  /* subtle film-grain overlay so the dark doesn't look digitally flat */
  content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='nb'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='17'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23nb)'/></svg>") 0 0/240px 240px;
  mix-blend-mode:overlay; opacity:.5;
}
.cover-backdrop.visible{ opacity:1; }

/* "Click to continue" cue — sits at the bottom of the screen between
   the discrete page-turn clicks */
.cinema-cue{
  position:fixed; left:50%; bottom:5.5vh;
  transform:translateX(-50%);
  z-index:10003; pointer-events:none;
  font-family:"Inter",sans-serif; font-size:.66rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase;
  color:rgba(245,239,226,.62);
  opacity:0;
  transition:opacity .55s cubic-bezier(.42,0,.18,1);
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.cinema-cue.visible{
  opacity:1;
  animation:cue-pulse 2.6s ease-in-out 1s infinite;
}
.cinema-cue .arr{
  display:inline-block; margin-right:.55em;
  color:rgba(196,93,53,.85);
  animation:cue-arr 2.6s ease-in-out 1s infinite;
}
@keyframes cue-pulse{
  0%, 100%{ opacity:.7; }
  50%{ opacity:1; }
}
@keyframes cue-arr{
  0%, 100%{ transform:translateX(0); }
  50%{ transform:translateX(4px); }
}
/* hide the rest of the landing when the cover is zoomed in, so only the
   book is on screen — true full-screen takeover */
body.cover-zooming .hero-text,
body.cover-zooming .scroll-cue,
body.cover-zooming .landing-contents,
body.cover-zooming .sidebar,
body.cover-zooming .topbar{
  opacity:0;
  transition:opacity .55s cubic-bezier(.42,0,.18,1);
  pointer-events:none;
}

/* ===== Cinematic letterbox bars (top & bottom) ===== */
.cinema-bar{
  position:fixed; left:0; right:0; height:10vh; min-height:46px;
  background:#0a0805; z-index:10001; pointer-events:none;
  transition:transform 1s cubic-bezier(.42,0,.18,1);
}
.cinema-bar.top{ top:0; transform:translateY(-100%); }
.cinema-bar.bottom{ bottom:0; transform:translateY(100%); }
.cinema-bar.in{ transform:translateY(0); }

/* ===== Title card that appears during the anticipation beat ===== */
.cinema-title-card{
  position:fixed; left:50%; bottom:14vh;
  transform:translateX(-50%) translateY(8px);
  z-index:10002; pointer-events:none;
  text-align:center;
  font-family:"Inter",sans-serif;
  color:rgba(245,239,226,.92);
  opacity:0;
  transition:opacity .45s cubic-bezier(.42,0,.18,1),
             transform .55s cubic-bezier(.42,0,.18,1);
}
.cinema-title-card.in{
  opacity:1; transform:translateX(-50%) translateY(0);
}
.cinema-title-card .ct-eyebrow{
  display:block; font-size:.66rem; letter-spacing:.42em;
  text-transform:uppercase; font-weight:600;
  color:rgba(245,239,226,.55);
  margin-bottom:.55rem;
}
.cinema-title-card .ct-line{
  display:block; font-family:"Newsreader",serif; font-style:italic;
  font-size:1.1rem; letter-spacing:.02em; color:rgba(245,239,226,.92);
}
.cinema-title-card .ct-rule{
  display:block; width:42px; height:1px; margin:.85rem auto 0;
  background:rgba(196,93,53,.7);
}

/* ===== Warm light leak at the binding edge when cover opens =====
   Sits over the destination/book-page near the spine. Builds as the
   cover rotates past ~30°, peaks at ~120°, fades by the time the page
   has turned. */
.cover-stage .binding-glow{
  position:absolute; top:-4%; bottom:-4%; left:-2%;
  width:22%; z-index:4; pointer-events:none;
  background:linear-gradient(to right,
    rgba(255,215,140,.0) 0%,
    rgba(255,200,120,.32) 18%,
    rgba(255,180,90,.55) 38%,
    rgba(255,170,80,.32) 58%,
    rgba(255,170,80,.08) 80%,
    transparent 100%);
  filter:blur(14px);
  opacity:0;
  transition:opacity .9s cubic-bezier(.42,0,.18,1);
  mix-blend-mode:screen;
}
.cover-stage.opening .binding-glow{ opacity:.7; transition-delay:.18s; }
.cover-stage.turning .binding-glow{ opacity:.5; }

/* small extra "ember" near where the corner of the page would lift */
.cover-stage .ember{
  position:absolute; top:34%; left:6%;
  width:18%; height:30%; z-index:4; pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(255,225,160,.45) 0%,
    rgba(255,190,100,.25) 30%,
    transparent 70%);
  filter:blur(20px);
  opacity:0;
  transition:opacity .8s cubic-bezier(.42,0,.18,1);
  mix-blend-mode:screen;
}
.cover-stage.opening .ember{ opacity:.85; transition-delay:.28s; }
.cover-stage.turning .ember{ opacity:.45; }

/* When the user clicks a 2nd time, give them an instant skip */
body.cover-skipping .cover-stage,
body.cover-skipping .cinema-bar,
body.cover-skipping .cover-backdrop,
body.cover-skipping .cinema-title-card{
  transition:opacity .15s linear !important;
  opacity:0;
}
.hero-cover{
  display:block;
  transform-style:preserve-3d;
  transform-origin:0% 50%;
  transition:transform .55s cubic-bezier(.2,.8,.2,1), filter .55s;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.08));
  animation:cover-rise 1.1s cubic-bezier(.2,.8,.2,1) .15s both;
  z-index:3;
  will-change:transform,filter;
  backface-visibility:hidden;
}
.hero-cover:hover{
  transform:translateY(-6px) translateZ(8px) rotate(-.5deg);
}
/* Cinematic multi-stage flip — anticipation lift, gravity acceleration,
   slow-motion through the 90° climax, soft settle. ~1.2s total. */
.hero-cover.flipping{
  animation:cover-open 1.2s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events:none;
}
@keyframes cover-open{
  0%   { transform:rotateY(0)       translateZ(0)   translateY(0); }
  6%   { transform:rotateY(-2deg)   translateZ(6px) translateY(-2px); }
  18%  { transform:rotateY(-14deg)  translateZ(14px) translateY(-3px);
         filter:drop-shadow(-6px 10px 16px rgba(0,0,0,.22)); }
  /* slow-mo dwell around the 90° climax */
  46%  { transform:rotateY(-80deg)  translateZ(22px) translateY(-3px);
         filter:drop-shadow(-12px 18px 30px rgba(0,0,0,.32)); }
  60%  { transform:rotateY(-100deg) translateZ(20px) translateY(-2px);
         filter:drop-shadow(-16px 22px 36px rgba(0,0,0,.34)); }
  82%  { transform:rotateY(-150deg) translateZ(14px); }
  100% { transform:rotateY(-172deg) translateZ(10px);
         filter:drop-shadow(-22px 26px 44px rgba(0,0,0,.38)); }
}
/* Book-page — the inside title page revealed when the cover opens, then turns.
   Always visible (z-index/stacking handles which layer is on top in 3D). */
.book-page{
  z-index:2;
  border-radius:2px;
  background:#f0e7d2;
  background-image:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.45) 0%, transparent 38%),
    radial-gradient(circle at 75% 82%, rgba(0,0,0,.04) 0%, transparent 48%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0.46  0 0 0 0 0.40  0 0 0 0 0.30  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n2)'/></svg>");
  background-size:cover, cover, 280px 280px;
  box-shadow:
    inset 22px 0 38px rgba(0,0,0,.10),
    inset 0 0 60px rgba(122,80,40,.06),
    -2px 4px 12px rgba(0,0,0,.18);
  transform-style:preserve-3d;
  transform-origin:left center;
  transform:rotateY(0);
  transition:transform 1s cubic-bezier(.55,.05,.35,1);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:14% 14%; text-align:center;
  font-family:"Newsreader",Charter,Georgia,serif; color:#5a3a26;
  will-change:transform;
}
/* page-turn with matching slow-mo at climax, backface hidden so the
   destination layer becomes visible cleanly as the page passes 90° */
.book-page{ backface-visibility:hidden; }
.book-page.turning{
  animation:page-turn 1.1s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes page-turn{
  0%   { transform:rotateY(0) translateZ(0);
         box-shadow:inset 22px 0 38px rgba(0,0,0,.10),
                    inset 0 0 60px rgba(122,80,40,.06),
                    -2px 4px 12px rgba(0,0,0,.18); }
  14%  { transform:rotateY(-12deg) translateZ(8px);
         box-shadow:inset 22px 0 42px rgba(0,0,0,.14),
                    -8px 10px 22px rgba(0,0,0,.22); }
  /* slow-mo through the climax — same dwell as cover */
  44%  { transform:rotateY(-78deg) translateZ(16px);
         box-shadow:inset 22px 0 50px rgba(0,0,0,.20),
                    -20px 18px 36px rgba(0,0,0,.32),
                    inset 0 0 0 1px rgba(255,255,255,.15); }
  58%  { transform:rotateY(-98deg) translateZ(16px);
         box-shadow:inset 22px 0 50px rgba(0,0,0,.22),
                    -24px 20px 40px rgba(0,0,0,.34); }
  82%  { transform:rotateY(-148deg) translateZ(8px); }
  100% { transform:rotateY(-172deg) translateZ(4px);
         box-shadow:inset 22px 0 38px rgba(0,0,0,.12),
                    -28px 22px 48px rgba(0,0,0,.24); }
}

/* Camera-punch zoom on the stage right as the cover starts to crack open —
   a 4% scale push for 140ms, then back. Subtle gravitas. */
.cover-stage.opening{
  animation:camera-punch 360ms cubic-bezier(.4,0,.2,1);
}
@keyframes camera-punch{
  0%   { transform:scale(1); }
  35%  { transform:scale(1.025); }
  100% { transform:scale(1); }
}
/* spine shadow — sits over the destination page during the flip,
   simulating the dark crease where pages meet the binding */
.cover-stage::before{
  content:""; position:absolute; top:0; bottom:0; left:0;
  width:14%; z-index:5; pointer-events:none;
  background:linear-gradient(to right,
    rgba(0,0,0,.32) 0%,
    rgba(0,0,0,.18) 25%,
    rgba(0,0,0,.04) 75%,
    transparent 100%);
  opacity:0;
  transition:opacity .35s ease;
}
.cover-stage.opening::before{ opacity:1; transition-delay:.2s; }
.book-page .bp-eyebrow{
  font-family:"Inter",sans-serif; font-size:.66rem; letter-spacing:.36em;
  text-transform:uppercase; color:rgba(122,31,43,.7); font-weight:600;
  margin-bottom:1.4rem;
}
.book-page .bp-rule{
  width:80px; height:1px; background:rgba(122,31,43,.45);
  margin:0 0 1.6rem;
}
.book-page .bp-title{
  font-family:"Newsreader",serif; font-size:2.2rem; font-weight:600;
  color:#7a1f2b; letter-spacing:-.018em; line-height:1.05;
  margin:0 0 1rem;
}
.book-page .bp-dedication{
  font-family:"Newsreader",serif; font-style:italic;
  font-size:1rem; color:#5a3a26; line-height:1.5;
  max-width:24ch; margin:1.4rem auto 0;
}
.book-page .bp-byline{
  font-family:"Caveat",cursive; font-size:1.2rem;
  color:#7a1f2b; margin-top:2.2rem;
}
/* Destination page — what's revealed once both flips complete */
.destination-page{
  z-index:1;
  border-radius:2px;
  background:#f5efe2;
  background-image:
    radial-gradient(circle at 28% 16%, rgba(255,255,255,.45) 0%, transparent 38%),
    radial-gradient(circle at 78% 84%, rgba(0,0,0,.03) 0%, transparent 48%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n3'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='13'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.39  0 0 0 0 0.28  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n3)'/></svg>");
  background-size:cover, cover, 280px 280px;
  box-shadow:
    inset 18px 0 32px rgba(0,0,0,.08),
    inset 0 0 50px rgba(122,80,40,.05);
  display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start;
  padding:13% 11%;
  font-family:"Newsreader",Charter,Georgia,serif; color:#1a1411;
}
.destination-page .dp-num{
  font-family:"Inter",sans-serif; font-size:.6rem; letter-spacing:.32em;
  text-transform:uppercase; color:rgba(122,31,43,.65); font-weight:600;
  margin-bottom:1rem;
}
.destination-page .dp-title{
  font-family:"Newsreader",serif; font-size:1.9rem; font-weight:600;
  color:#1a1411; letter-spacing:-.012em; line-height:1.1; margin:0 0 1rem;
}
.destination-page .dp-epigraph{
  font-family:"Newsreader",serif; font-style:italic;
  font-size:.85rem; color:#5a4d3a; line-height:1.5;
  border-left:2px solid rgba(122,31,43,.4); padding-left:.7rem;
  margin:0 0 1.2rem;
}
.destination-page .dp-salutation{
  font-family:"Newsreader",serif; font-size:.95rem; color:#1a1411;
  margin:.4rem 0;
}
.destination-page .dp-body{
  font-family:"Newsreader",serif; font-size:.85rem; color:#3a3528;
  line-height:1.55;
}
@keyframes cover-rise{
  from{opacity:0; transform:translateY(28px) rotate(-1.5deg);}
  to{opacity:1; transform:translateY(0) rotate(0);}
}
/* MPA View Transition — soft cross-fade on cross-document navigation
   (Chrome/Safari; Firefox silently ignores). Removes any flash. */
@view-transition{ navigation:auto; }
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.42s;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
}
::view-transition-old(root){ animation-name:vt-fade-out; }
::view-transition-new(root){ animation-name:vt-fade-in; }
@keyframes vt-fade-out{ to{ opacity:0; } }
@keyframes vt-fade-in{ from{ opacity:0; } }
/* respect reduced-motion preferences — skip the flip animation entirely */
@media (prefers-reduced-motion:reduce){
  .hero-cover.flipping,.book-page.turning{
    transform:none; opacity:0; transition:opacity .25s;
  }
  .book-page,.destination-page{ display:none; }
}
.hero-text{
  min-width:0; padding-left:.5rem;
  animation:text-slide-in 1s ease-out .4s both;
}
@keyframes text-slide-in{
  from{opacity:0; transform:translateX(12px);}
  to{opacity:1; transform:translateX(0);}
}
.hero-text .kicker{margin:0 0 1.4rem; font-size:.74rem; letter-spacing:.32em;}
.hero-text h1.book{
  font-size:4.6rem; line-height:.96; letter-spacing:-.034em;
  font-weight:600; margin:0 0 1.4rem; color:var(--ink);
}
.hero-text .dek{
  font-size:1.2rem; line-height:1.55; color:var(--muted);
  font-style:italic; margin:0 0 2rem; max-width:32rem;
}
.hero-text .byrow{
  margin:0 0 1.6rem; padding:0; border:0;
  font-family:"Inter",sans-serif; font-size:.78rem; letter-spacing:.06em;
  color:var(--soft);
}
.hero-text .byrow::before{
  content:"by"; text-transform:uppercase; letter-spacing:.28em;
  font-size:.62rem; color:var(--soft); margin-right:.75rem;
}
.hero-text .byrow .who{color:var(--ink); font-weight:500; font-size:.95rem;
  font-family:"Newsreader",serif; font-style:italic; letter-spacing:0;}
.hero-text .about{display:none;}

/* CTA buttons */
.cta-row{
  display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap;
}
.cta{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.9rem 1.7rem;
  background:var(--accent); color:#f5efe2;
  font-family:"Inter",sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  border-radius:2px; transition:.2s ease;
  box-shadow:0 2px 8px rgba(122,31,43,.18);
}
.cta:hover{background:#5a141d; box-shadow:0 4px 14px rgba(122,31,43,.28); transform:translateY(-1px);}
.cta .arr{transition:transform .2s ease;}
.cta:hover .arr{transform:translateX(3px);}
.cta--ghost{
  background:transparent; color:var(--accent);
  border:1px solid var(--accent); box-shadow:none;
}
.cta--ghost:hover{background:rgba(122,31,43,.06); color:var(--accent); box-shadow:none;}

/* scroll cue */
.scroll-cue{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  font-family:"Inter",sans-serif; font-size:.64rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--soft);
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  opacity:.75; transition:opacity .2s;
  animation:cue-fade-in 1.2s ease-out 1.6s both;
}
.scroll-cue:hover{opacity:1; color:var(--accent);}
.scroll-cue::after{content:"\2193"; font-size:.95rem; animation:bob 2.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}
@keyframes cue-fade-in{from{opacity:0;}to{opacity:.75;}}

/* ===== Contents section below the fold ===== */
.landing-contents{
  max-width:1080px; margin:0 auto; padding:5rem 2.4rem 7rem;
  border-top:1px solid var(--rule);
}
.landing-contents h2{
  font-family:"Inter",sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase; color:var(--accent);
  text-align:center; margin:0 0 .6rem;
}
.landing-contents .toc-sub{
  text-align:center; font-family:"Newsreader",serif; font-style:italic;
  font-size:1.05rem; color:var(--muted); margin:0 0 3.4rem;
}
.parts-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:2.8rem 4rem;
}
.part-card{
  border-top:1px solid var(--rule); padding-top:1.5rem;
}
.part-card .pname{
  display:block; font-family:"Inter",sans-serif; font-size:.62rem;
  font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--soft); margin-bottom:.55rem;
}
.part-card .ptitle{
  display:block; font-family:"Newsreader",serif; font-size:1.32rem;
  font-weight:600; line-height:1.2; letter-spacing:-.01em;
  color:var(--ink); margin-bottom:1.3rem;
  transition:color .15s ease;
}
.part-card .ptitle:hover{color:var(--accent);}
.part-card .clist{display:flex; flex-direction:column; gap:.35rem;}
.part-card .ci{
  display:grid; grid-template-columns:1.8rem 1fr; gap:.8rem;
  padding:.25rem 0;
  font-family:"Newsreader",serif; font-size:1rem; line-height:1.4;
  color:#3a3528;
  border-bottom:1px dotted transparent;
  transition:.15s ease;
}
.part-card .ci:hover{color:var(--accent); border-bottom-color:rgba(122,31,43,.25);}
.part-card .ci .cn{
  font-family:"Inter",sans-serif; font-size:.68rem; font-weight:600;
  color:var(--soft); padding-top:.25rem; letter-spacing:.04em;
}
.part-card .ci .ct{min-width:0;}
.solo-card{
  grid-column:1 / -1;
  display:flex; gap:2rem; justify-content:center; align-items:center;
  padding-top:1.6rem; margin-top:1rem; border-top:1px solid var(--rule);
}
.solo-card a{
  font-family:"Inter",sans-serif; font-size:.74rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--soft);
  padding:.7rem 1.2rem; border:1px solid var(--rule); border-radius:2px;
  transition:.15s ease;
}
.solo-card a:hover{color:var(--accent); border-color:var(--accent);}

/* ===== Landing mobile / narrow viewports ===== */
@media (max-width:880px){
  .hero{grid-template-columns:1fr; gap:2.6rem; text-align:center;}
  .hero-cover{order:-1; max-width:320px; margin:0 auto; width:100%;}
  .hero-text{padding-left:0;}
  .hero-text h1.book{font-size:2.8rem;}
  .hero-text .dek{font-size:1.05rem; margin-left:auto; margin-right:auto;}
  .hero-text .byrow{justify-content:center;}
  .cta-row{justify-content:center;}
  .parts-grid{grid-template-columns:1fr; gap:2.4rem;}
  .solo-card{flex-direction:column; gap:1rem;}
  .hero-section{min-height:auto; padding:2.5rem 1.4rem 4rem;}
  .scroll-cue{display:none;}
  .landing-contents{padding:3rem 1.4rem 5rem;}
}

/* ===== Letter-motif cover (refined) — used on landing hero, the
   fullscreen flip animation, and the standalone covers page. Keeps the
   stamp / postmark / return-address / signature / wax-seal elements but
   with cleaner typography, better balance, and container-query scaling. */
.cover-art{
  position:relative; width:100%; aspect-ratio:2/3;
  background:#f3ecdc;
  background-image:
    /* soft top-light highlight */
    radial-gradient(ellipse at 50% 24%, rgba(255,252,242,.55) 0%, transparent 60%),
    /* faint edge vignette for paper depth */
    radial-gradient(ellipse at 50% 50%, transparent 56%, rgba(80,58,30,.07) 92%, rgba(80,58,30,.13) 100%),
    /* paper grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='ng'><feTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' seed='11'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.36  0 0 0 0 0.26  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23ng)'/></svg>");
  background-size:cover, cover, 320px 320px;
  box-shadow:
    0 30px 60px rgba(0,0,0,.32),
    0 8px 18px rgba(0,0,0,.18),
    inset 0 0 80px rgba(122,80,40,.05),
    inset 0 0 0 1px rgba(0,0,0,.04);
  border-radius:2px;
  overflow:hidden;
  color:#1a1411;
  font-family:"Newsreader",Charter,Georgia,serif;
  container-type:inline-size;
  /* Flex column with intentional spacing — top zone fixed, title block sits
     just below it with controlled margin, subtitle close behind, then the
     remaining space is a single breath BEFORE the author block at bottom.
     Bottom padding is generous so the signature has real breathing room. */
  display:flex; flex-direction:column;
  padding:6% 9% 22%;
}

/* ===== Top zone: stamp + postmark + return address =====
   Fixed proportional height so the postal apparatus has consistent space. */
.cover-art .cv-top-zone{
  position:relative;
  flex:0 0 19%;
}

/* Return address (top-left, handwritten in Caveat) */
.cover-art .cv-return{
  position:absolute; top:30%; left:0;
  font-family:"Caveat",cursive; font-size:.78rem;
  color:rgba(58,42,31,.7); line-height:1.4;
}
.cover-art .cv-return .cv-ret-lbl{
  display:block;
  font-family:"Inter",sans-serif; font-size:.5rem;
  letter-spacing:.26em; text-transform:uppercase;
  color:rgba(122,103,80,.7); font-weight:600;
  margin-bottom:4px;
}
.cover-art .cv-return .cv-ret-faint{
  color:rgba(58,42,31,.5); font-size:.92em;
}

/* Postmark cancellation (faded ring next to stamp) */
.cover-art .cv-postmark{
  position:absolute; top:18%; right:24%;
  width:18%; aspect-ratio:1/1; border-radius:50%;
  border:1.4px solid rgba(90,58,38,.55);
  transform:rotate(-9deg); opacity:.78;
  display:flex; align-items:center; justify-content:center;
}
.cover-art .cv-postmark::before{
  content:""; position:absolute; inset:10%; border-radius:50%;
  border:1px solid rgba(90,58,38,.4);
}
/* radiating cancellation lines to the left of the postmark */
.cover-art .cv-postmark::after{
  content:""; position:absolute; left:-90%; top:46%; width:90%; height:1px;
  background:repeating-linear-gradient(to right,
    rgba(90,58,38,.5) 0 7px, transparent 7px 12px);
}
.cover-art .cv-pm-inner{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#5a3a26; line-height:1.05;
  padding:14%;
}
.cover-art .cv-pm-top,
.cover-art .cv-pm-bot{
  font-family:"Inter",sans-serif; font-size:.4rem;
  letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:rgba(90,58,38,.7);
}
.cover-art .cv-pm-year{
  font-family:"Newsreader",serif; font-style:italic;
  font-size:.7rem; letter-spacing:.04em;
  color:#5a3a26; margin:2px 0;
}

/* Postage stamp (top-right) */
.cover-art .cv-stamp{
  position:absolute; top:14%; right:0;
  width:15%; aspect-ratio:13/16;
  background:
    linear-gradient(180deg, #c9b896 0%, #b8a47e 60%, #9d8862 100%);
  border:1px solid rgba(0,0,0,.18);
  transform:rotate(3.5deg);
  box-shadow:0 2px 6px rgba(0,0,0,.22),
             inset 0 0 14px rgba(0,0,0,.08);
}
/* perforated edges using radial gradients */
.cover-art .cv-stamp::before,
.cover-art .cv-stamp::after{
  content:""; position:absolute; left:-4px; right:-4px; height:8px;
  background:radial-gradient(circle at 4px 4px, #f3ecdc 3.4px, transparent 3.6px) 0 0/8px 8px;
}
.cover-art .cv-stamp::before{ top:-4px; }
.cover-art .cv-stamp::after{ bottom:-4px; }
.cover-art .cv-stamp-inner{
  position:absolute; inset:6%;
  border:1px solid rgba(0,0,0,.25);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; color:#3a2a18; gap:.15rem;
}
.cover-art .cv-stamp-ornament{
  font-size:.85rem; line-height:1;
  color:rgba(58,42,24,.62);
  margin-bottom:.05rem;
}
.cover-art .cv-stamp-denom{
  font-family:"Newsreader",serif; font-weight:600;
  font-size:1.1rem; line-height:1; color:#2a1d10;
}
.cover-art .cv-stamp-lbl{
  font-family:"Inter",sans-serif; font-size:.38rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(58,42,24,.78); font-weight:600;
  margin-top:.2rem;
}

/* ===== Middle zone: title is the addressee =====
   Sits just below the postal top zone (with a controlled margin), NOT
   floating in the middle of the page. */
.cover-art .cv-title-zone{
  width:100%;
  margin-top:5%;
}
.cover-art .cv-addr-eyebrow{
  display:flex; align-items:center; gap:.8rem;
  font-family:"Inter",sans-serif; font-size:.56rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase;
  color:rgba(122,31,43,.72);
  margin-bottom:.9rem;
}
.cover-art .cv-addr-eyebrow::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(to right,
    rgba(122,31,43,.4) 0%, rgba(122,31,43,.04) 100%);
}
.cover-art .cv-title{
  font-family:"Newsreader",serif; font-weight:600;
  font-size:2.95rem; line-height:.98; letter-spacing:-.026em;
  color:#1a1411; margin:0;
}
.cover-art .cv-tline{ display:block; }
.cover-art .cv-comma{ color:rgba(122,31,43,.9); }
.cover-art .cv-handwritten{
  margin-top:.85rem;
  font-family:"Caveat",cursive;
  font-size:1.05rem; line-height:1.4;
  color:#3a2a1f;
  margin-bottom:0;
}
.cover-art .cv-hw-faint{ color:rgba(58,42,31,.55); font-size:.95em; }

/* ===== Subtitle zone: italic dedication, separated by rule =====
   Sits close to the title block, not floating in dead space. */
.cover-art .cv-subtitle-zone{
  border-top:1px solid rgba(122,31,43,.22);
  padding-top:1.1rem;
  margin-top:1.4rem;
}
.cover-art .cv-subtitle{
  font-family:"Newsreader",serif; font-style:italic;
  font-size:.9rem; line-height:1.5;
  color:#3a3528; margin:0;
}

/* ===== Bottom zone: author signature + wax seal =====
   margin-top:auto pushes the author block to the bottom of the cover so all
   remaining breathing space sits in ONE place — between subtitle and author —
   rather than scattered between every element. */
.cover-art .cv-author-zone{
  margin-top:auto;
  width:100%;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.cover-art .cv-author-block{
  display:flex; flex-direction:column; align-items:flex-start;
}
.cover-art .cv-by{
  font-family:"Inter",sans-serif; font-size:.5rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase;
  color:rgba(122,103,80,.7);
  margin-bottom:.55rem;
  display:block;
}
.cover-art .cv-signature{
  font-family:"Caveat",cursive; font-weight:600;
  font-size:1.7rem;
  /* line-height tuned to fully contain Caveat's deep descenders */
  line-height:1.4;
  color:#7a1f2b;
  letter-spacing:.005em;
  display:block;
  padding-bottom:.3em;
}
.cover-art .cv-seal{
  width:11%; aspect-ratio:1/1; border-radius:50%;
  background:
    radial-gradient(circle at 35% 28%, #a8404a 0%, #7a1f2b 55%, #4d121a 100%);
  box-shadow:
    0 2px 6px rgba(0,0,0,.32),
    inset -4px -5px 10px rgba(0,0,0,.36),
    inset 2px 2px 4px rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  color:#f3d9a4; font-family:"Newsreader",serif; font-style:italic;
  font-size:1.1rem; font-weight:500;
  transform:rotate(-6deg);
  flex-shrink:0; margin-bottom:.4rem;
}

/* ===== Scale typography UP when the cover renders at fullscreen
   (during the flip animation) via container queries. Keeps everything
   readable and proportional whether at 360px or 1000px wide. ===== */
@container (min-width: 460px){
  .cover-art .cv-title          { font-size:4.4rem; }
  .cover-art .cv-handwritten    { font-size:1.4rem; }
  .cover-art .cv-addr-eyebrow   { font-size:.7rem; letter-spacing:.4em; }
  .cover-art .cv-subtitle       { font-size:1.15rem; }
  .cover-art .cv-return         { font-size:1rem; }
  .cover-art .cv-return .cv-ret-lbl { font-size:.62rem; }
  .cover-art .cv-signature      { font-size:2.2rem; line-height:1.15; }
  .cover-art .cv-by             { font-size:.62rem; letter-spacing:.38em; margin-bottom:.7rem; }
  .cover-art .cv-seal           { font-size:1.65rem; }
  .cover-art .cv-stamp-denom    { font-size:1.55rem; }
  .cover-art .cv-stamp-lbl      { font-size:.48rem; }
  .cover-art .cv-stamp-ornament { font-size:1.1rem; }
  .cover-art .cv-pm-year        { font-size:.95rem; }
  .cover-art .cv-pm-top,
  .cover-art .cv-pm-bot         { font-size:.52rem; }
}

/* hover lift on the landing hero */
.hero-cover{transition:transform .3s ease;}
.hero-cover:hover{transform:translateY(-3px);}

/* part divider page */
.divider{padding:3rem 0 1rem;}
.divider .deyebrow{font-family:"Inter",sans-serif; font-size:.78rem;
  font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin:0 0 1.4rem;}
.divider h1{font-size:3.4rem; font-weight:600; line-height:1.08;
  letter-spacing:-.022em; margin:0 0 1.8rem;}
.divider .dintro{font-size:1.4rem; line-height:1.55; color:#403a30;
  font-style:italic; border-top:2px solid var(--accent); padding-top:1.6rem;}
.divider .dbegin{display:inline-block; margin-top:2.4rem;
  font-family:"Inter",sans-serif; font-size:.82rem; font-weight:600;
  letter-spacing:.04em; color:var(--accent);}

/* chapter */
h1.chap{font-size:2.7rem; font-weight:600; line-height:1.12;
  letter-spacing:-.022em; margin:.1rem 0 1.6rem; padding-bottom:1.4rem;
  border-bottom:1px solid var(--rule);}
.content p{margin:0 0 1.3rem;}
.content h3{font-size:1.3rem; font-weight:600; letter-spacing:-.01em;
  margin:2.6rem 0 .8rem; line-height:1.3;}
.content h4{font-family:"Inter",sans-serif; font-size:.92rem; font-weight:600;
  letter-spacing:.02em; margin:2rem 0 .6rem; color:var(--ink);}
.content h4#postscript{font-family:"Inter",sans-serif; font-size:.7rem;
  font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  text-align:center; color:var(--accent); margin:3.4rem 0 1.4rem;
  padding-top:1.8rem; border-top:1px solid var(--rule); position:relative;}
.content h4#postscript::before{content:"\2042"; position:absolute;
  top:.4rem; left:50%; transform:translateX(-50%); background:var(--paper);
  padding:0 .8rem; color:var(--accent); font-size:1.1rem; font-weight:400;
  letter-spacing:0;}
/* concept-appendix entries */
.content h4 + p.concept-tagline{
  font-family:"Newsreader",Charter,Georgia,serif; font-style:italic;
  font-size:1.02rem; color:#5f5947; margin:-.2rem 0 .9rem; line-height:1.5;
  letter-spacing:0;}
.content p.concept-footer{
  font-family:"Inter",sans-serif; font-style:normal; font-size:.78rem;
  letter-spacing:.04em; color:var(--soft); margin:1.6rem 0 1.1rem;
  padding-top:.7rem; border-top:1px dotted var(--rule); line-height:1.55;}
.content p.concept-footer a{color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(122,31,43,.25);}
.content p.concept-footer a:hover{border-bottom-color:var(--accent);}
/* inline concept callout — sits between paragraphs inside chapters */
.content aside.concept-callout{
  display:block; margin:2rem 0; padding:1rem 1.2rem 1.05rem;
  background:rgba(122,31,43,.045); border-left:3px solid var(--accent);
  border-radius:2px; line-height:1.5;}
.content aside.concept-callout .label{
  display:inline-block; font-family:"Inter",sans-serif; font-size:.65rem;
  font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin-right:.65rem; vertical-align:.08em;}
.content aside.concept-callout .label::after{
  content:"\2192"; margin-left:.5rem; opacity:.55; font-weight:400;}
.content aside.concept-callout a.name{
  font-family:"Newsreader",Charter,Georgia,serif; font-style:normal;
  font-weight:600; font-size:1.02rem; color:var(--ink);
  border-bottom:1px solid rgba(122,31,43,.35); padding-bottom:1px;}
.content aside.concept-callout a.name:hover{border-bottom-color:var(--accent);}
.content aside.concept-callout .tagline{
  display:block; font-family:"Newsreader",Charter,Georgia,serif;
  font-style:italic; font-size:.95rem; color:#5f5947;
  margin-top:.3rem; line-height:1.5;}
/* Appendix concept titles slightly larger and more elegant */
.content h4{text-transform:none;}
.content h3 + p > em:only-child,
.content h3 + p em:first-child:last-child{color:var(--muted);}
blockquote{margin:1.9rem 0; padding-left:1.3rem;
  border-left:2px solid var(--accent); font-style:italic; color:#403a30;}
blockquote.epigraph{border-left:0; padding:0 0 0 0; margin:-.4rem 0 2.6rem;
  font-size:1.16rem; line-height:1.5; color:var(--muted); max-width:31rem;}
.content dl{margin:1.6rem 0;}
.content dl dt{font-weight:600; margin:1.1rem 0 .2rem;}
.content dl dd{margin:0 0 .3rem; color:#403a30;}
.content ul,.content ol{margin:0 0 1.3rem; padding-left:1.3rem;}
.content li{margin:.4rem 0;}
hr.brk{border:0; text-align:center; margin:2.6rem 0;}
hr.brk:before{content:"\2042"; color:var(--accent); font-size:1.3rem;}
figure{margin:2.6rem 0; text-align:center;}
figure img{max-width:100%; height:auto; border-radius:2px;
  border:1px solid var(--rule);}
figcaption{font-family:"Inter",sans-serif; font-size:.8rem; color:var(--soft);
  font-style:italic; margin-top:.6rem; line-height:1.5;}

/* index contents (mobile) */
.contents{margin-top:2.4rem;}
.contents .cpart{font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:2rem 0 .5rem;}
.contents .ci{display:flex; gap:.8rem; align-items:baseline; padding:.32rem 0;
  border-bottom:1px solid var(--rule);}
.contents .ci .cn{font-family:"JetBrains Mono",monospace; font-size:.74rem;
  color:var(--soft); min-width:1.8rem;}
.contents .ci .ct{font-size:1.06rem;}
.contents .ci:hover .ct{color:var(--accent);}

/* prev/next */
.pnav{display:flex; justify-content:space-between; gap:1.4rem; margin-top:4rem;
  padding-top:1.6rem; border-top:1px solid var(--rule);}
.pnav a{max-width:47%; font-family:"Inter",sans-serif; font-size:.9rem;}
.pnav .next{margin-left:auto; text-align:right;}
.pnav .lbl{display:block; font-family:"JetBrains Mono",monospace;
  font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.25rem;}
.pnav .ttl{color:var(--ink); font-family:"Newsreader",serif; font-size:1.05rem;}
.pnav a:hover .ttl{color:var(--accent);}

.hide-desktop{display:none;}
@media(max-width:880px){
  .layout{grid-template-columns:1fr; gap:0; padding:2.2rem 1.4rem 4.5rem;}
  .sidebar{display:none;}
  .hide-desktop{display:block;}
  .topbar{padding:.85rem 1.4rem;}
  h1.book{font-size:2.8rem;} h1.chap{font-size:2.05rem;}
  .divider h1{font-size:2.4rem;} .divider .dintro{font-size:1.15rem;}
  body{font-size:18.5px;}
}