/* Book reading mode — a photographed cloth-bound book on a dark table. */

:root{
  --ink:#2A231A;
  --ink-soft:#5C5142;
  --maroon:#6E2430;
  --gold:#C9A24E;
  --serif:"Hoefler Text",Baskerville,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#080706;color:#EFE7D6;font-family:var(--serif);overflow-x:hidden}
body::before{content:"";position:fixed;inset:-8%;z-index:-2;background:url("img/book-spread-v.jpg") center/cover no-repeat;
  filter:blur(46px) brightness(.42) saturate(.85);transform:scale(1.05)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 44%,rgba(0,0,0,0) 0%,rgba(4,4,4,.55) 70%,rgba(3,3,3,.9) 100%)}
.sky-stars{display:none}
[hidden]{display:none !important}

.book-bar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:14px clamp(16px,4vw,40px);background:linear-gradient(rgba(8,6,4,.86),rgba(8,6,4,.25) 70%,transparent)}
.bb-brand{font-size:17px;color:#EFE7D6;text-decoration:none}
.bb-brand em{color:var(--gold);font-style:italic}
.bb-nav{display:flex;gap:22px;font-size:15px;font-style:italic}
.bb-nav a{color:rgba(239,231,214,.62);text-decoration:none}
.bb-nav a:hover{color:#EFE7D6}

.desk{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:54px 12px 6px}

.book{position:relative;height:min(calc(100svh - 150px),900px);width:auto;aspect-ratio:1849/1016;max-width:97vw;
  background:url("img/book-pages.jpg") center/100% 100% no-repeat;
  opacity:0;transform:scale(.99);transition:opacity 1s ease,transform 1s ease;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.6));
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%,#000 94%,transparent 100%);
  mask-image:radial-gradient(120% 120% at 50% 50%,#000 94%,transparent 100%)}
.book.is-visible{opacity:1;transform:none}
.book::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(4,5,9,.55) 100%)}

.sheet{position:absolute;color:var(--ink);opacity:0;transition:opacity .45s ease;
  mix-blend-mode:multiply;font-size:clamp(10.5px,.80vw,13.8px);line-height:1.46}
.spread.is-current .sheet{opacity:1}
.sheet--l{left:8.2%;right:52.4%;top:9%;bottom:12%;padding-top:.4em;
  }
.sheet--r{left:54.4%;right:8.6%;top:9%;bottom:12%;padding-top:.8em;
  }

.rh{margin:0 0 .55em;font-size:.78em;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid rgba(90,70,40,.28);padding-bottom:.3em}
.ch-year{font-size:2.1em;line-height:.95;color:var(--maroon);margin:.1em 0 .05em;font-variant-numeric:oldstyle-nums}
.sheet h2{font-size:1.62em;line-height:1.06;margin:0 0 .3em;font-weight:400}
.ch-lede{font-style:italic;color:var(--ink-soft);margin:0 0 .5em;font-size:.98em}
.ch-body p{margin:0 0 .5em;text-align:justify;hyphens:auto}
.ch-body p:first-child::first-letter{font-size:2.7em;line-height:.82;float:left;padding:.06em .09em 0 0;color:var(--maroon)}
.ch-body p b{font-weight:600}
.ch-obj{margin:.55em 0 0;font-size:.9em;color:var(--ink-soft);line-height:1.5;padding-top:.5em;
  border-top:1px solid rgba(120,95,50,.25)}
.ch-obj i{color:var(--maroon);font-style:italic}
.q{margin:.55em 0 0;padding-left:.7em;border-left:2px solid rgba(168,132,63,.75)}
.q p{margin:0;font-size:.92em;font-style:italic;line-height:1.45}
.q cite{display:block;margin-top:.15em;font-size:.78em;color:var(--ink-soft);font-style:normal}
.ch-surv{margin:.5em 0 0;font-size:.86em;color:var(--ink-soft)}
.ch-surv i{color:var(--ink);font-style:italic}
.ch-facts{display:flex;flex-wrap:wrap;gap:.2em .9em;margin:.5em 0 0;font-size:.8em;color:var(--ink-soft)}
.ch-facts i{font-style:italic}
.ch-facts span{color:var(--maroon);font-variant-numeric:oldstyle-nums}

.plate-kicker{margin:0;font-size:.78em;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.plate-title{margin:.15em 0 .6em;font-size:1.35em;line-height:1.08}
.plate{border:1px solid rgba(120,95,50,.3);padding:5px;background:rgba(255,250,240,.25)}
.plate img{display:block;width:100%;height:auto;max-height:38vh;object-fit:cover;filter:sepia(.14) saturate(.86) contrast(1.02) brightness(.98)}
.plate--empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:4/3;background:rgba(255,250,240,.14)}
.pe-year{font-size:1.9em;color:var(--maroon);margin:0 0 .3em;font-variant-numeric:oldstyle-nums}
.pe-note{margin:0;font-size:.86em;font-style:italic;color:var(--ink-soft);line-height:1.6}
.plate-cap{margin:.55em 0 0;font-size:.84em;font-style:italic;color:var(--ink-soft)}

.folio{position:absolute;bottom:4%;font-size:.9em;color:#4A4030;font-variant-numeric:oldstyle-nums;opacity:.9}
.folio--l{left:2%}
.folio--r{right:2%}

.sheet--plain{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.front-crest{width:38%;max-width:130px;opacity:.45;margin-bottom:1.6em}
.front-imprint{margin:0;font-size:.85em;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.front-motto{margin:.8em 0 0;font-size:.85em;font-style:italic;color:rgba(168,132,63,.9)}
.sheet--title{align-items:flex-start;text-align:left}
.t-kicker{margin:0 0 .4em;font-size:.85em;letter-spacing:.3em;color:var(--ink-soft)}
.sheet--title h1{font-size:2.5em;line-height:1.02;margin:0 0 .35em;font-weight:400}
.t-rule{width:3em;height:2px;background:var(--maroon);margin:0 0 .6em}
.t-sub{font-style:italic;color:var(--ink-soft);margin:0 0 .3em;font-size:1em}
.t-sub2{margin:0;font-size:.88em;color:var(--ink-soft);line-height:1.65;max-width:30ch}
.col-links{margin:1.1em 0 0;font-size:.92em}
.col-links a{color:var(--maroon);text-decoration:none;border-bottom:1px solid rgba(110,36,48,.35)}
.col-credits{margin:2em 0 0;font-size:.8em;font-style:italic;color:var(--ink-soft);line-height:1.7}

.sheet--toc{padding-top:.2em}
.toc-head{margin:0 0 .7em;font-size:.85em;letter-spacing:.28em;text-transform:uppercase;color:var(--maroon)}
.toc{list-style:none;margin:0;padding:0;border-top:1px solid rgba(120,95,50,.32)}
.toc li{border-bottom:1px solid rgba(120,95,50,.2)}
.toc a{display:grid;grid-template-columns:1.4em 1fr auto 1.6em;gap:.5em;align-items:baseline;padding:.42em 0;
  text-decoration:none;color:var(--ink)}
.toc a:hover .t-title{color:var(--maroon)}
.t-num{font-size:.8em;color:var(--gold);letter-spacing:.08em}
.t-title{font-size:.98em}
.t-year{font-size:.76em;color:var(--ink-soft);font-variant-numeric:oldstyle-nums}
.t-folio{font-size:.8em;color:var(--ink-soft);text-align:right;font-variant-numeric:oldstyle-nums}
.sheet--howto{align-items:flex-start;text-align:left;justify-content:center}
.orn{margin:0 0 .6em;color:var(--gold);font-size:1.2em;letter-spacing:.3em}
.howto-head{margin:0 0 .5em;font-size:.86em;letter-spacing:.22em;text-transform:uppercase}
.howto-body{margin:0 0 .7em;font-size:.9em;line-height:1.7;color:var(--ink-soft)}

.spread{display:none;position:absolute;inset:0}
.spread.is-current{display:block}
.spread.is-leaving .sheet{opacity:0;transform:translateY(-4px);transition:opacity .28s ease,transform .28s ease}
.book .sweep{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:5;
  background:linear-gradient(100deg,transparent 30%,rgba(255,246,225,.35) 48%,transparent 66%)}
.book.is-turning .sweep{animation:sweep .5s ease-out}
@keyframes sweep{0%{opacity:0;transform:translateX(22%)}35%{opacity:.85}100%{opacity:0;transform:translateX(-22%)}}

.controls{display:flex;align-items:center;gap:16px;color:rgba(239,231,214,.85);margin-top:2px}
.controls button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(201,162,78,.45);background:rgba(6,7,12,.55);
  color:#EFE7D6;font-size:20px;line-height:1;cursor:pointer;transition:background .2s ease}
.controls button:hover{background:rgba(201,162,78,.2)}
.count{font-size:13px;font-variant-numeric:oldstyle-nums;letter-spacing:.1em}

.cover-open{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:radial-gradient(70% 60% at 50% 45%,rgba(6,7,12,.5),rgba(3,4,7,.97))}
.cover-stage{justify-self:start;position:relative;height:min(84svh,880px);aspect-ratio:1197/1900;transform-origin:left center;
  transition:transform 1.15s cubic-bezier(.6,.02,.28,1),opacity .8s ease .35s}
.cover-photo{display:block;height:100%;width:100%;object-fit:contain;
  -webkit-mask-image:radial-gradient(56% 64% at 50% 47%,#000 62%,rgba(0,0,0,.8) 82%,transparent 99%);
  mask-image:radial-gradient(56% 64% at 50% 47%,#000 62%,rgba(0,0,0,.8) 82%,transparent 99%)}
.cover-block{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%) perspective(1400px) rotateY(-7deg) rotateZ(.6deg);
  width:52%;text-align:center;color:var(--gold);pointer-events:none}
.cover-block .cb-475,.cover-block .cb-title{background:linear-gradient(112deg,#F3E0B0 0%,#DFBE7F 30%,#CBA656 58%,#A98336 82%,#8E6C2A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 -1px 0 rgba(255,240,200,.18))}
.cover-crest{filter:drop-shadow(0 1px 0 rgba(0,0,0,.5)) drop-shadow(0 3px 6px rgba(0,0,0,.45)) brightness(.98)}

.cover-crest{width:44%;margin:0 auto .5em;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.cb-475{margin:0 0 .05em;font-size:3.1em;line-height:.9;font-variant-numeric:oldstyle-nums;text-shadow:0 1px 0 rgba(0,0,0,.45)}
.cb-title{margin:0 0 .35em;font-size:1.28em;letter-spacing:.01em}
.cb-rule{height:1px;background:rgba(201,162,78,.75);width:44%;margin:0 auto .4em}
.cb-years{margin:0;font-size:.78em;letter-spacing:.26em;opacity:.9}

.cover-open.is-opening .cover-stage{transform:perspective(2000px) rotateY(-96deg) translateX(-6%);opacity:.05}
.cover-open.is-opening .cv-hint{opacity:0;transition:opacity .3s ease}
.cover-open.is-gone{display:none}

@media (max-width:820px){
  .cover-open{grid-template-columns:1fr;grid-template-rows:auto auto;gap:10px;padding:5vh 6vw}
  .cover-copy{justify-self:center;order:2;text-align:center;max-width:100%}
  .cc-kicker,.cc-years{letter-spacing:.18em}
  .cc-rule{margin:0 auto 1em}
  .cover-stage{justify-self:center;order:1;height:min(58svh,520px)}
  .desk{padding-top:52px}
  .book{aspect-ratio:3/4.4;width:min(520px,94vw);background:url("img/book-spread-v.jpg") center/cover no-repeat}
  .sheet--l{display:none}
  .sheet--r{left:9%;right:9%;top:9%;bottom:9%;font-size:15px}
  .spread--toc .sheet--l{display:block;left:9%;right:9%;top:9%;bottom:9%}
  .spread--toc .sheet--r{display:none}
  .sheet--plain{left:12%;right:12%;top:12%;bottom:12%}
  .cover-stage{height:min(74vh,720px)}
  .cover-block{width:56%}
  .cb-475{font-size:2.6em}
}
@media (prefers-reduced-motion: reduce){
  .book,.sheet,.cover-stage{transition:none}
  .book.is-turning .sweep{animation:none}
}

/* ---------- 3D leaf: a real turning page ---------- */
.leaf{position:absolute;left:52.4%;top:22.2%;width:29.6%;height:61%;display:none;
  transform-origin:left center;transform-style:preserve-3d;z-index:9;pointer-events:none}
.leaf.is-live{display:block}
.leaf__f,.leaf__b{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
  background-color:#E9DABB;
  background-image:url("img/book-spread-v.jpg");
  background-size:318% 168%;
  box-shadow:0 22px 46px rgba(30,20,6,.5), inset 0 0 70px rgba(120,88,38,.28)}
.leaf__b{transform:rotateY(180deg)}
.leaf__f::after,.leaf__b::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 20% 30%,rgba(255,255,255,.28),transparent 60%),
    repeating-linear-gradient(0deg,rgba(120,95,50,.03) 0 1px,transparent 1px 3px);
  opacity:.9}
.leaf__f{background-position:96% 42%}
.leaf__b{background-position:4% 42%}
.leaf__f::before,.leaf__b::before{content:"";position:absolute;top:0;bottom:0;width:34px;pointer-events:none;z-index:2}
.leaf__f::before{left:0;background:linear-gradient(90deg,rgba(60,40,12,.35),transparent)}
.leaf__b::before{right:0;background:linear-gradient(270deg,rgba(60,40,12,.35),transparent)}
.leaf .sheet{position:static;inset:auto;opacity:1;font-size:clamp(11px,1.02vw,15.5px);
  padding:clamp(18px,2.2vw,34px) clamp(16px,2.2vw,38px)}
.leaf .folio{display:none}
.leaf__shadow{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 55%);opacity:0}

/* per-spread paper mood: keeps the same photograph but changes the paper's condition */
.spread::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;mix-blend-mode:multiply;opacity:0}
.spread--front::after,.spread--colophon::after{background:radial-gradient(90% 70% at 30% 25%,rgba(255,238,205,.16),transparent 60%)}
.spread--chapter:nth-of-type(odd)::after{background:linear-gradient(200deg,rgba(120,90,40,.10),transparent 45%)}
.spread--chapter:nth-of-type(even)::after{background:linear-gradient(20deg,rgba(120,90,40,.10),transparent 45%)}
.spread.is-current::after{opacity:1}
.spread--toc::after{background:radial-gradient(80% 60% at 70% 30%,rgba(120,90,40,.10),transparent 60%)}

/* ribbon bookmark */
.bookmarks{display:none;position:absolute;left:48.8%;top:0;width:15px;height:7.5%;z-index:6;pointer-events:none;
  background:linear-gradient(180deg,#7B2A32,#5E1E25);box-shadow:0 2px 6px rgba(0,0,0,.45);
  clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%)}
@media (max-width:820px){.bookmarks{display:none}}

/* ---------- the opening film (generated with Kling) ---------- */
.cover-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;
  -webkit-mask-image:radial-gradient(56% 64% at 50% 47%,#000 62%,rgba(0,0,0,.8) 82%,transparent 99%);
  mask-image:radial-gradient(56% 64% at 50% 47%,#000 62%,rgba(0,0,0,.8) 82%,transparent 99%)}
.cover-open.is-playing .cover-video{display:block}
.cover-open.is-playing .cover-photo{opacity:0;transition:opacity .2s ease}
.cover-open.is-playing .cover-block{opacity:0;transition:opacity .5s ease .35s}
.cover-open.is-playing .cv-hint{opacity:0;transition:opacity .2s ease}

/* ---------- reading mode: one page, held close ---------- */
.controls .read-btn{width:auto;min-width:64px;border-radius:2em;font-size:13px;font-style:italic;
  padding:0 14px;letter-spacing:.04em}
.book.reading{background:#EFE6D2 url("img/paper.jpg") center/cover;border-radius:3px;
  height:min(84svh,780px);width:min(720px,92vw);aspect-ratio:auto;
  box-shadow:0 40px 90px rgba(0,0,0,.7), inset 0 0 140px rgba(120,90,45,.14);
  filter:none;-webkit-mask-image:none;mask-image:none}
.book.reading::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,rgba(90,70,35,.16),transparent 12%,transparent 88%,rgba(90,70,35,.1))}
.book.reading .sheet--l,.book.reading .sheet--r{left:9%;right:9%;top:7.5%;bottom:9%;
  transform:none;font-size:clamp(15px,1.32vw,18px);line-height:1.64;opacity:0}
.book.reading .spread.is-current .sheet--r{opacity:1}
.book.reading .sheet--l{display:none}
.book.reading .sheet h2{font-size:1.55em}
.book.reading .ch-year{font-size:1.9em}
.book.reading .rh{font-size:.72em}
.book.reading .ch-body p{max-width:none}
.book.reading .folio{position:absolute;right:0;bottom:1.5%;margin:0;font-size:.8em}
.book.reading .plate{display:none}
.book.reading .plate-kicker,.book.reading .plate-title,.book.reading .plate-cap{display:none}




@media (max-width:820px){
  .book.reading{width:94vw;height:min(80svh,720px)}
  .book.reading .sheet--l,.book.reading .sheet--r{left:8%;right:8%;top:7%;bottom:8%;font-size:17px;line-height:1.62}
}

/* ---------- reading mode: the chapter page, full ---------- */
.read-page{display:none}
.book.reading .spread--chapter .sheet{display:none !important}
.book.reading .read-page{display:block;position:absolute;left:11%;right:11%;top:7%;bottom:9%;padding-bottom:2.6em;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  color:var(--ink);mix-blend-mode:multiply;font-size:clamp(15px,1.3vw,18px);line-height:1.62}
.book.reading .read-page .rh{margin:0 0 .7em;font-size:.74em;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid rgba(90,70,40,.3);padding-bottom:.4em}
.book.reading .read-page .ch-year{font-size:1.7em;line-height:1;color:var(--maroon);margin:.2em 0 .1em;font-variant-numeric:oldstyle-nums}
.book.reading .read-page h2{font-size:1.5em;line-height:1.07;margin:0 0 .35em;font-weight:400}
.book.reading .read-page .ch-lede{font-style:italic;color:var(--ink-soft);margin:0 0 .7em;font-size:.98em;max-width:32em}
.book.reading .read-page .ch-body p{margin:0 0 .6em;text-align:justify;hyphens:auto;max-width:33em}
.book.reading .read-page .ch-body p:first-child::first-letter{font-size:2.5em;line-height:.84;float:left;padding:.05em .1em 0 0;color:var(--maroon)}
.book.reading .read-page .ch-obj{margin:.8em 0 0;font-size:.88em;color:var(--ink-soft);line-height:1.55;
  border-top:1px solid rgba(120,95,50,.28);padding-top:.6em}
.book.reading .read-page .ch-obj i{color:var(--maroon)}
.book.reading .read-page .q{margin:.7em 0 0;padding-left:.8em;border-left:2px solid rgba(168,132,63,.7)}
.book.reading .read-page .q p{margin:0;font-size:.92em;font-style:italic}
.book.reading .read-page .q cite{display:block;margin-top:.2em;font-size:.78em;color:var(--ink-soft);font-style:normal}
.book.reading .read-page .ch-surv{margin:.7em 0 0;font-size:.86em;color:var(--ink-soft)}
.book.reading .read-page .ch-surv i{color:var(--ink);font-style:italic}
.rp-plate{margin:0 0 1em;display:flex;gap:1em;align-items:flex-start}
.rp-plate img{width:42%;max-height:190px;object-fit:cover;border:1px solid rgba(120,95,50,.3);padding:4px;background:rgba(255,250,240,.3)}
.rp-plate figcaption{font-size:.78em;font-style:italic;color:var(--ink-soft);line-height:1.5;margin:0}
.rp-plate--empty{flex-direction:column;align-items:flex-start;border:1px dashed rgba(120,95,50,.4);padding:.9em 1em;gap:.3em}
.rp-plate--empty span{font-size:1.4em;color:var(--maroon);font-variant-numeric:oldstyle-nums}
.rp-plate--empty i{font-size:.82em;color:var(--ink-soft)}
.read-folio{display:none;position:absolute;right:0;bottom:.2em;font-size:.8em;color:var(--ink-soft);font-variant-numeric:oldstyle-nums}
@media (max-width:820px){
  .book.reading .read-page{left:6%;right:6%;top:5.5%;bottom:7%;font-size:16px;line-height:1.58;padding-bottom:3em}
  .rp-plate img{width:44%;max-height:150px}
}

/* ---------- cover: landscape title spread (final) ---------- */
.cover-open{position:fixed;inset:0;z-index:60;display:block;
  background:radial-gradient(70% 60% at 68% 44%,rgba(6,7,12,.42),rgba(3,4,7,.97))}
.cover-copy{position:absolute;left:8%;top:50%;transform:translateY(-50%);width:min(430px,38vw);color:#EFE7D6;z-index:2}
.cc-kicker{margin:0 0 1.4em;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:rgba(239,231,214,.55);font-family:var(--serif)}
.cc-475{margin:0 0 .05em;font-size:clamp(56px,6.4vw,92px);line-height:.84;font-variant-numeric:oldstyle-nums;
  background:linear-gradient(112deg,#F4E3B6 0%,#DCBC7E 40%,#BE9349 72%,#96702B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.cc-title{margin:.12em 0 .55em;font-size:clamp(30px,3.3vw,44px);line-height:1.02;font-weight:400;color:#EFE7D6}
.cc-rule{width:74px;height:1px;background:rgba(201,162,78,.7);margin:0 0 1.1em}
.cc-years{margin:0 0 1.8em;font-size:13px;letter-spacing:.3em;color:rgba(201,162,78,.9)}
.cc-motto{margin:0 0 2.6em;font-size:15px;font-style:italic;color:rgba(239,231,214,.5)}
.cover-copy .cv-hint{position:relative;display:inline-block;margin:0;padding:0 0 9px;font-size:15px;font-style:italic;
  color:#EFE7D6;border:0;background:none;cursor:pointer}
.cc-underline{position:absolute;left:0;bottom:0;width:100%;height:1px;background:rgba(201,162,78,.75);
  transform-origin:left;transition:transform .35s ease}
.cover-copy:hover .cc-underline{transform:scaleX(1.1)}
.cover-stage{position:absolute;right:5%;top:50%;transform:translateY(-50%);height:min(86svh,860px);
  width:auto;aspect-ratio:1197/1900;transform-origin:left center;
  transition:transform 1.15s cubic-bezier(.6,.02,.28,1),opacity .8s ease .35s}
.cover-open.is-opening .cover-stage{transform:translateY(-50%) perspective(2000px) rotateY(-96deg) translateX(-4%);opacity:.05}
@media (max-width:820px){
  .cover-open{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:5vh 6vw}
  .cover-copy{position:static;transform:none;width:auto;max-width:100%;text-align:center;order:2}
  .cc-kicker,.cc-years{letter-spacing:.18em}
  .cc-rule{margin:0 auto 1em}
  .cc-motto{margin:0 0 1.6em}
  .cover-stage{position:static;transform:none;height:min(54svh,480px);order:1}
  .cover-open.is-opening .cover-stage{transform:perspective(1400px) rotateY(-80deg);opacity:.05}
}

/* chapter dividers */
.sheet--divider{display:flex;flex-direction:column;justify-content:center}
.sheet--l.sheet--divider{align-items:flex-end;text-align:right}
.sheet--r.sheet--divider{align-items:flex-start;text-align:left}
.dv-year{margin:0;font-size:clamp(44px,5vw,74px);line-height:.9;color:var(--maroon);font-variant-numeric:oldstyle-nums}
.dv-rule{width:70px;height:1px;background:rgba(201,162,78,.8);margin:.9em 0}
.dv-num{margin:0;font-size:13px;letter-spacing:.3em;color:var(--ink-soft);font-variant-caps:all-small-caps}
.dv-kicker{margin:0 0 .5em;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.dv-title{margin:0 0 .6em;font-size:clamp(22px,2.4vw,32px);line-height:1.06;font-weight:400;color:var(--ink);max-width:18ch}
.dv-line{margin:0 0 2em;font-size:14px;font-style:italic;color:var(--ink-soft);max-width:30ch;line-height:1.55}
.dv-foot{margin:0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(120,95,50,.65)}

/* bookmark ribbon: progress through the book */
.bookmark{position:absolute;right:22%;top:-1.6%;width:13px;z-index:7;pointer-events:none;
  background:linear-gradient(180deg,#7B2A32,#5A1C22);box-shadow:0 2px 5px rgba(0,0,0,.4);
  clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);height:5%;transition:height .5s ease}
.book.reading .bookmark{display:none}

/* ---------- typographic pass on the spread (v5) ---------- */
/* book margins: inner (gutter) margin smaller than outer */
.sheet--l{left:11.5%;right:52.2%;top:9%;bottom:12.5%;padding-top:.6em}
.sheet--r{left:53.4%;right:9.4%;top:9%;bottom:12.5%;padding-top:1em}
.sheet{color:#241C12;mix-blend-mode:normal;font-size:clamp(12.5px,1.06vw,15.6px);line-height:1.56;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
/* ragged-right with hyphenation reads better on screen than justified rivers */
.sheet .ch-body p,.sheet .q p,.sheet .ch-obj,.sheet .ch-surv,.sheet .plate-cap,.sheet .rp-plate figcaption{
  text-align:left;text-wrap:pretty;hyphens:auto}
.sheet .ch-body p{max-width:31em;margin:0 0 .62em}
.sheet .ch-obj{max-width:31em}
.sheet .ch-surv{max-width:31em}
.sheet .plate-cap{max-width:31em}
/* running head */
.sheet .rh{font-size:.72em;letter-spacing:.18em;color:rgba(72,55,28,.72);border-bottom:1px solid rgba(90,70,40,.25);
  padding-bottom:.45em;margin:0 0 .9em}
/* year + title + lede */
.sheet .ch-year{font-size:1.72em;line-height:1;margin:.1em 0 .06em}
.sheet h2{font-size:1.48em;line-height:1.08;margin:0 0 .4em;max-width:14ch}
.sheet .ch-lede{font-size:.98em;line-height:1.5;margin:0 0 .85em;max-width:30em;color:#4B4030}
/* drop cap: sit it properly into the first line */
.sheet .ch-body p:first-child::first-letter{font-size:3.05em;line-height:.86;float:left;
  padding:.02em .09em 0 0;margin-top:.02em;color:var(--maroon)}
.sheet .ch-body p:first-child{text-indent:0}
/* object note: a real note, not a subtitle */
.sheet .ch-obj{font-size:.9em;line-height:1.55;color:#4B4030;border-top:1px solid rgba(120,95,50,.3);
  padding-top:.6em;margin-top:.8em}
.sheet .ch-obj i{color:var(--maroon);font-style:italic}
.sheet .ch-surv{font-size:.9em;line-height:1.5;color:#4B4030;margin-top:.7em}
.sheet .folio{font-size:.72em;letter-spacing:.1em;color:rgba(72,55,28,.6)}
/* left page: plate + caption note */
.sheet .plate-kicker{font-size:.72em;letter-spacing:.24em;color:rgba(110,36,48,.8)}
.sheet .plate img{border:1px solid rgba(90,70,40,.3);box-shadow:0 2px 8px rgba(60,40,15,.18)}
/* reading mode: same treatment, larger */
.book.reading .read-page{color:#241C12;mix-blend-mode:normal}
.book.reading .read-page .ch-body p{text-align:left;text-wrap:pretty;max-width:33em}
.book.reading .read-page .rh{letter-spacing:.18em;color:rgba(72,55,28,.7)}
.book.reading .read-page .ch-lede{max-width:32em;color:#4B4030}
/* keep the type out of the gutter shadow */
.sheet--r{left:55.4%;right:8.6%;top:9.4%;bottom:12%}
.sheet--l{left:10.6%;right:51.6%;top:9.4%;bottom:12%}
/* final nits */
.sheet h2{max-width:20ch;font-size:1.4em}
.bookmark{top:8.5%;height:6%;right:24%}
.book.reading .bookmark{display:none}

/* a slightly larger book on tall screens (more room for type) */
.book{height:min(calc(100svh - 120px), 940px)}
@media (max-height:760px){.book{height:min(calc(100svh - 110px), 700px)}}

/* real page-turn frames (generated footage stills) */
.turn-frames{position:absolute;inset:0;z-index:12;pointer-events:none;display:flex;justify-content:center;align-items:center}
.turn-frames img{position:absolute;height:min(calc(100svh - 120px),940px);width:auto;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%,#000 94%,transparent 100%);
  mask-image:radial-gradient(120% 120% at 50% 50%,#000 94%,transparent 100%);opacity:0}
/* empty plate becomes a printed note, not a white card */
.plate--empty{aspect-ratio:auto;background:transparent;border:0;padding:1.4em 0 0;display:block;text-align:center}
.plate--empty::before{content:"";display:block;width:54px;height:1px;background:rgba(120,95,50,.55);margin:0 auto 1.2em}
.plate--empty .pe-year{font-size:1.7em;margin:0 0 .5em}
.plate--empty .pe-note{font-size:.9em;line-height:1.6;color:#4B4030}
.sheet .plate-kicker{margin-bottom:.9em}
/* turn frames must sit exactly on the book */
.turn-frames{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:hidden;border-radius:2px}
.turn-frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%,#000 94%,transparent 100%);
  mask-image:radial-gradient(120% 120% at 50% 50%,#000 94%,transparent 100%)}
/* contents page insets: keep the list on the paper, heading clear of the top edge */
.sheet--toc{left:13.6%;right:53.6%;top:13.2%;bottom:13%}
.sheet--howto{left:55%;right:8.8%;top:13.2%;bottom:13%}
.sheet--toc .toc a{padding:.38em 0}
.sheet--toc .toc-head{margin:0 0 .9em}
.sheet--toc .toc li:last-child{border-bottom:0}
/* ribbon: outer top corner, clear of the text block */
.bookmark{right:7.4%;top:7.4%;height:5.5%}
/* crest reads a little stronger on the title spread */
.front-crest{opacity:.55}
/* contents: numerals inside the paper, folios legible */
.sheet--toc{left:15.6%;right:53%}
.sheet--toc .t-num{color:rgba(168,132,63,.95);font-size:.82em;letter-spacing:.06em}
.sheet--toc .t-folio{color:rgba(72,55,28,.8);font-size:.84em}
.sheet--toc .t-year{color:rgba(72,55,28,.7)}
.bookmark{right:9.6%;top:10.4%}

/* mobile cover: book above, type below — single column, no overlay text on the object */
@media (max-width:820px){
  .cover-open{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
    padding:5vh 7vw;position:fixed}
  .cover-stage{position:relative;right:auto;top:auto;transform:none;order:1;height:min(52svh,460px);width:auto;aspect-ratio:1197/1900}
  .cover-copy{position:static;transform:none;order:2;width:100%;max-width:100%;text-align:center}
  .cover-block{display:none}
  .cc-kicker{letter-spacing:.2em;margin-bottom:1em}
  .cc-rule{margin:0 auto 1em}
  .cc-motto{margin-bottom:1.4em}
  .cover-open.is-opening .cover-stage{transform:perspective(1400px) rotateY(-80deg);opacity:.05}
}
@media (max-width:820px){
  .cover-open{background:radial-gradient(70% 60% at 50% 40%,rgba(6,7,12,.86),rgba(3,4,7,.99))}
  .book:not(.is-visible){opacity:0 !important}
}
@media (max-width:820px){
  .cover-block{display:block;top:52%;width:60%}
  .cover-block .cb-475,.cover-block .cb-title,.cover-block .cb-rule,.cover-block .cb-years{display:none}
  .cover-block .cover-crest{width:56%;margin:0 auto}
}

/* contents note */
.toc-note{margin:-.2em 0 .9em;font-size:.82em;font-style:italic;color:rgba(72,55,28,.7)}

.story-dir i,.story-dir .arr{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;font-size:15px}
.sheet--toc .toc-note{margin:-.3em 0 .8em}
.sheet--howto .howto-body + .howto-body{margin-top:.7em}

/* ---------- plates printed into the paper (v8) ---------- */
.plate{position:relative;border:0;padding:0;background:none}
.plate img{display:block;width:100%;height:auto;max-height:38vh;object-fit:cover;
  mix-blend-mode:multiply;
  filter:sepia(.26) saturate(.78) contrast(.94) brightness(1.06);
  transform:rotate(-.14deg);transform-origin:50% 50%}
/* paper grain over the image, so it sits in the sheet rather than on it */
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("img/paper.jpg") center/cover;mix-blend-mode:overlay;opacity:.3}
/* the gutter darkens the inner edge, as it would in a real book */
.plate::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(52,38,16,0) 55%,rgba(52,38,16,.26) 100%),
             linear-gradient(180deg,rgba(52,38,16,.14),rgba(52,38,16,0) 18%);
  mix-blend-mode:multiply}
.plate-cap{position:relative}
/* reading mode: same treatment, smaller */
.rp-plate img{mix-blend-mode:multiply;border:0;padding:0;background:none;
  filter:sepia(.24) saturate(.8) contrast(.95) brightness(1.05)}
.rp-plate{position:relative}
.rp-plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("img/paper.jpg") center/cover;mix-blend-mode:overlay;opacity:.22}

/* turn video overlays the book exactly */
.turn-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:12;
  pointer-events:none;border-radius:2px;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%,#000 95%,transparent 100%);
  mask-image:radial-gradient(120% 120% at 50% 50%,#000 95%,transparent 100%)}

/* ---------- v9: fill the page, larger type ---------- */
.sheet{font-size:clamp(13px,1.16vw,17.2px);line-height:1.62}
.sheet .ch-body p{max-width:29em}
.sheet .ch-obj,.sheet .ch-surv,.sheet .plate-cap{max-width:29em}
.sheet .ch-body p:first-child::first-letter{font-size:3.2em}
.sheet .plate img{max-height:42vh}
.sheet--l{display:flex;flex-direction:column}
.sheet--l .plate-cap{margin-top:.7em}
.sheet--l .ch-obj{margin-top:auto}

/* left page: the plate grows to fill, captions and notes sit under it */
.sheet--l{display:flex;flex-direction:column;gap:0}
.sheet--l .plate{flex:1 1 auto;min-height:0;display:flex}
.sheet--l .plate img{height:100%;width:100%;object-fit:cover;max-height:none}
.sheet--l .plate::before,.sheet--l .plate::after{border-radius:0}
.sheet--l .plate-cap{margin:.7em 0 0}
.sheet--l .ch-obj{margin:1em 0 0}
.sheet--l .q{margin:1em 0 0}

/* keep running heads and bottom notes on lit paper, clear of the deckle edges */
.sheet--l{top:10.9%;bottom:15.8%}
.sheet--r{top:10.5%;bottom:15.2%}
.sheet .plate-kicker{color:rgba(96,30,40,.92);font-size:.74em;letter-spacing:.2em;margin-bottom:.7em}
.sheet--l .plate{flex:0 1 auto}
.sheet--l .plate img{height:auto;max-height:40vh}
.sheet--l .ch-obj{margin-top:1em}
.sheet--l{top:12.4%;bottom:14.6%}
.sheet--l .plate{margin-top:.2em}

/* keep the printed block well inside the paper: pages are ragged, so leave a generous margin */
.sheet--l{left:13.6%;right:53.1%;top:15.2%;bottom:16.6%}
.sheet--r{left:54.4%;right:10.6%;top:14.2%;bottom:16%}
.sheet--l .plate{margin:0}
.sheet--l .plate img{border-radius:1px}

/* v11: make the plate belong to the page — same perspective, same light, halftone feel */
.sheet--l .plate img{
  filter:sepia(.34) saturate(.66) contrast(.9) brightness(1.07);
  transform:perspective(1500px) rotateX(.9deg) rotateY(-.55deg);
  transform-origin:50% 50%;
  opacity:.97;
}
.sheet--l .plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3' height='3'><circle cx='1' cy='1' r='.55' fill='%23231a10' fill-opacity='.5'/></svg>"),
    radial-gradient(85% 75% at 46% 34%, rgba(60,45,20,0) 45%, rgba(60,45,20,.13) 100%),
    url("img/paper.jpg");
  background-size:3px 3px, cover, cover;
  mix-blend-mode:multiply;opacity:.55;
}

/* halftone quieter */
.sheet--l .plate::after{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><circle cx='1.4' cy='1.4' r='.5' fill='%23231a10' fill-opacity='.55'/></svg>"),
    radial-gradient(85% 75% at 46% 34%, rgba(60,45,20,0) 45%, rgba(60,45,20,.12) 100%),
    url("img/paper.jpg");
  background-size:4px 4px, cover, cover;
  opacity:.4;
}
.sheet--l .plate::after{opacity:.3}