/* The Inference — ameliyamedia.com. Tokens follow the Astra design direction; the book mode is Rashad's page-turn ask. */
:root{
  --canvas:#141619;--surface:#1D2025;--raised:#272B31;--text:#E8E3DA;--text-2:#B8B3AC;--muted:#A09C96;--rule:#363A40;--ctl:#777E89;--focus:#F2E1AA;
  --page:#1A1D22;--page-edge:#0E1013;--ink:#E8E3DA;
  --fam:#C6CDD5;--fam-2:#F2F3F0;--fam-hi:#FFFFFF;--fam-ui:#D5DBE3;--fam-glow:rgba(214,220,227,.18);
  --logo-body:#E8E3DA;--logo-accent:#C09445;--navy:#052A53;--gold:#C09445;
  --display:"Fraunces",Georgia,serif;--serif:"Source Serif 4",Georgia,"Times New Roman",serif;--ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs:1.25rem;--lh:1.62;--ease:cubic-bezier(.22,1,.36,1);--flip:cubic-bezier(.4,0,.2,1);--bar:56px;
}
html[data-family="openair"]{--fam:#C9D0D8;--fam-2:#F2F3F0;--fam-hi:#FFFFFF;--fam-ui:#D5DBE3;--fam-glow:rgba(201,208,216,.22)}
html[data-family="gemstone"]{--fam:#527BE9;--fam-2:#A38BFA;--fam-hi:#EFA9CD;--fam-ui:#C3B5FF;--fam-glow:rgba(163,139,250,.26)}
html[data-family="crail"]{--fam:#E8B95B;--fam-2:#D9953D;--fam-hi:#F477B2;--fam-ui:#EAC375;--fam-glow:rgba(232,185,91,.26)}
html[data-theme="paper"]{--logo-body:#052A53;--canvas:#F4F0E8;--surface:#EAE4D9;--raised:#E2DBCE;--text:#242321;--text-2:#58534D;--muted:#6E6963;--rule:#D6CFC2;--ctl:#8A847B;--focus:#2459A6;--page:#FBF8F1;--page-edge:#D9D2C4;--ink:#242321}
html[data-size="0"]{--fs:1.0625rem}html[data-size="1"]{--fs:1.15rem}html[data-size="2"]{--fs:1.25rem}html[data-size="3"]{--fs:1.375rem}html[data-size="4"]{--fs:1.55rem}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;color-scheme:dark}html[data-theme="paper"]{color-scheme:light}
body{margin:0;background:var(--canvas);color:var(--text);font-family:var(--serif);font-size:var(--fs);line-height:var(--lh);-webkit-font-smoothing:antialiased;transition:background .4s linear,color .4s linear}
a{color:inherit}img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-999px;top:8px;background:var(--focus);color:#111;padding:8px 12px;font-family:var(--ui);z-index:100}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.lockup{display:block;aspect-ratio:1024/1024;height:auto}
.mark{display:block;aspect-ratio:545/496;height:auto}
.eyebrow{font-family:var(--ui);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fam-ui);margin:0 0 .6em}
.rule{display:block;height:1px;width:48px;background:var(--fam);opacity:.9;transform-origin:left;margin:1.1em 0 0}
kbd{font-family:var(--ui);font-size:.72em;border:1px solid var(--rule);border-radius:4px;padding:0 5px}

/* ---------- COVER ---------- */
.cover-page{overflow-x:hidden}
.cover{position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;isolation:isolate}
.cover-art{position:absolute;inset:0;z-index:-2;overflow:hidden}
.cover-art img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform:scale(1.08);animation:kb 14s var(--ease) forwards;filter:saturate(.92)}
@keyframes kb{to{transform:scale(1.0)}}
.cover-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,16,19,.92) 0%,rgba(14,16,19,.78) 34%,rgba(14,16,19,.28) 62%,rgba(14,16,19,.08) 100%),linear-gradient(180deg,rgba(14,16,19,.55),rgba(14,16,19,0) 30%,rgba(14,16,19,0) 70%,rgba(14,16,19,.7))}
.cover-top,.cover-foot{display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,5vw,64px);font-family:var(--ui);font-size:.8rem;letter-spacing:.06em;color:var(--text-2)}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--text)}
.brand .lockup{width:clamp(150px,15vw,200px);opacity:.96;transition:opacity .25s}
.brand:hover .lockup{opacity:1}
.mark{color:currentColor}
.cover-page .brand{--logo-body:#F2EFE8;--logo-accent:#D8AE63}
.foot-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s}.foot-link:hover{border-color:currentColor}
.top-link{text-decoration:none;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--text)}
.cover-body{align-self:center;padding:8vh clamp(20px,5vw,64px) 6vh;max-width:760px}
.eyebrow-lg{color:#D5DBE3;opacity:.9}
.cover-title{font-family:var(--display);font-weight:400;font-size:clamp(56px,9vw,132px);line-height:.92;letter-spacing:-.035em;margin:.1em 0 .25em;color:#F4F1EA;text-wrap:balance}
.thread{display:block;height:1px;width:min(420px,60%);background:linear-gradient(90deg,#F2E1AA,#C9D0D8 60%,transparent);transform-origin:left;margin:18px 0 22px}
.cover-sub{font-family:var(--display);font-size:clamp(20px,2.4vw,30px);font-weight:300;letter-spacing:.01em;margin:0 0 .9em;color:#E8E3DA}
.cover-line{font-size:1.02rem;line-height:1.55;color:#C9C4BC;max-width:560px;margin:0 0 2em}
.cover-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
/* the two real buttons are always the same width as each other, at every screen size */
.cover-actions .btn.primary,.cover-actions .btn.ghost{flex:1 1 0;min-width:0;max-width:320px;text-align:center;display:flex;align-items:center;justify-content:center}
.cover-actions .btn.link{flex:0 0 100%;display:inline-flex;align-items:center;justify-content:flex-start;padding-inline:0;margin-top:2px}
.btn{font-family:var(--ui);font-size:.86rem;letter-spacing:.04em;text-decoration:none;padding:14px 22px;border-radius:999px;border:1px solid var(--ctl);color:var(--text);transition:background .25s,transform .25s var(--ease),border-color .25s;display:inline-block}
.btn.primary{background:#E8E3DA;color:#141619;border-color:#E8E3DA}.btn.primary:hover{background:#fff;transform:translateY(-1px)}
.btn.ghost:hover{border-color:#E8E3DA}.btn.link{border-color:transparent;padding-inline:8px;color:var(--text-2)}.btn.link:hover{color:var(--text)}
.cover-foot .dot{width:4px;height:4px;border-radius:50%;background:var(--text-2);display:inline-block;margin:0 12px}
.reveal{opacity:0;transform:translateY(10px);animation:reveal .9s var(--ease) forwards}
.r1{animation-delay:.15s}.r2{animation-delay:.3s}.r3{animation-delay:.55s;transform:scaleX(0);animation-name:draw;animation-duration:1.1s}.r4{animation-delay:.6s}.r5{animation-delay:.75s}.r6{animation-delay:.95s}.r7{animation-delay:1.3s}
@keyframes reveal{to{opacity:1;transform:none}}@keyframes draw{to{opacity:1;transform:scaleX(1)}}
/* Phones: the cover art is shown WHOLE as a real cover plate, not a centre crop of a
   landscape painting (that cropped to the empty middle of the hall and read as a grey
   field). Art on top, title block beneath, art fading into the page. */
@media (max-width:720px){
  .cover{display:flex;flex-direction:column;min-height:100svh}
  .cover-scrim{display:none}
  .cover-top{order:1;flex:0 0 auto}
  .cover-art{order:2;flex:0 0 auto;position:static;inset:auto;z-index:0;display:block;width:100%;overflow:visible}
  .cover-art img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 50%;transform:none;animation:none;filter:saturate(.98) contrast(1.06) brightness(1.1);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%)}
  .cover-body{order:3;flex:1 1 auto;align-self:auto;padding:0 clamp(20px,5vw,64px) 5vh;margin-top:-4vw}
  .cover-foot{order:4;flex:0 0 auto;margin-top:auto;flex-wrap:wrap;justify-content:flex-start;row-gap:4px;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .cover-foot>*{flex:0 0 100%}
  .cover-foot .dot{display:none}
  .cover-title{font-size:clamp(46px,13vw,68px)}
  .thread{margin:14px 0 18px}
  .cover-line{margin-bottom:1.6em}
  /* both real buttons the same width; the text link stays a plain left aligned link */
  .cover-actions{flex-direction:column;align-items:stretch;gap:10px}
  .cover-actions .btn.primary,.cover-actions .btn.ghost{width:100%;max-width:270px;padding:12px 18px;text-align:center}
  .cover-actions .btn.link{align-self:flex-start;width:auto;padding-inline:0;margin-top:4px}
}

/* ---------- COLOPHON (publisher) ---------- */
.colophon{background:var(--canvas);border-top:1px solid var(--rule);padding:clamp(56px,9vw,104px) clamp(20px,5vw,64px) clamp(48px,7vw,88px)}
.colophon-inner{max-width:60ch;margin:0 auto;text-align:center}
.colophon .lockup{width:clamp(240px,30vw,340px);margin:6px auto 22px}
.colo-tag{font-family:var(--display);font-weight:300;font-size:clamp(20px,2.4vw,27px);line-height:1.3;color:var(--text);margin:0 0 1em;text-wrap:balance}
.colo-body{font-size:1rem;line-height:1.62;color:var(--text-2);margin:0 0 1.8em}
.colo-meta{margin:0}
.cover-page{overflow-y:auto;height:auto}

/* ---------- READER CHROME ---------- */
.reader-page{overflow:hidden;height:100svh}
.bar{position:fixed;top:0;left:0;right:0;height:var(--bar);display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:14px;padding:0 14px;background:color-mix(in srgb,var(--canvas) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);z-index:30;font-family:var(--ui);transition:transform .35s var(--ease),opacity .35s}
.bar-brand{display:inline-flex;align-items:center}.bar-brand .mark{width:34px;opacity:.85;transition:opacity .25s}.bar-brand:hover .mark{opacity:1}
.bar-where{font-size:.8rem;color:var(--text-2);display:flex;gap:10px;min-width:0;overflow:hidden;white-space:nowrap}.bar-where .w-label{color:var(--fam-ui);letter-spacing:.1em;text-transform:uppercase;font-size:.7rem}.bar-where .w-chap{overflow:hidden;text-overflow:ellipsis}
.bar-right{display:flex;gap:4px}
.ib{appearance:none;background:none;border:0;color:var(--text);font-family:var(--ui);font-size:.8rem;display:inline-flex;align-items:center;gap:8px;padding:10px 10px;border-radius:8px;cursor:pointer;min-height:44px;min-width:44px;justify-content:center}.ib:hover{background:var(--raised)}
.ib span{display:none}@media (min-width:720px){.ib#btn-contents span{display:inline}}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}.progress span{display:block;height:100%;width:0;background:var(--fam);box-shadow:0 0 8px var(--fam-glow);transform-origin:left;transition:width .25s linear}
html[data-quiet="1"] .bar{transform:translateY(-100%);opacity:0;pointer-events:none}
.show-controls{position:fixed;top:10px;right:10px;z-index:31;font-family:var(--ui);font-size:.75rem;background:var(--raised);color:var(--text);border:1px solid var(--rule);border-radius:999px;padding:8px 12px;opacity:.55;cursor:pointer}.show-controls:hover{opacity:1}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(380px,92vw);background:var(--surface);border-right:1px solid var(--rule);z-index:40;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .38s var(--ease)}.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:14px 12px 10px 20px;border-bottom:1px solid var(--rule)}.drawer-head h2{font-family:var(--display);font-weight:400;font-size:1.3rem;margin:0}
.drawer-body{overflow:auto;padding:8px 8px 24px;flex:1}.drawer-foot{font-family:var(--ui);font-size:.72rem;color:var(--muted);padding:10px 20px;border-top:1px solid var(--rule);margin:0}
.contents,.c-chapters{list-style:none;margin:0;padding:0}.contents>li{margin:2px 0}.contents a{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;text-decoration:none;padding:10px 12px;border-radius:8px;font-family:var(--ui);font-size:.9rem;line-height:1.35}.contents a:hover{background:var(--raised)}
.c-label{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fam-ui)}.c-story>a .c-title{font-family:var(--display);font-size:1.02rem}
.c-chapters{margin:2px 0 8px 14px;border-left:1px solid var(--rule)}.c-chapters a{padding:7px 12px;font-size:.84rem;color:var(--text-2)}.c-num{color:var(--muted);font-variant-numeric:tabular-nums;width:1.4em}
.contents a.current{background:var(--raised);color:var(--text);box-shadow:inset 3px 0 0 var(--fam)}
.c-story[data-family="openair"] .c-label{color:#D5DBE3}.c-story[data-family="gemstone"] .c-label{color:#C3B5FF}.c-story[data-family="crail"] .c-label{color:#EAC375}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35;opacity:0;transition:opacity .3s}.scrim.open{opacity:1}
.settings{position:fixed;top:calc(var(--bar) + 8px);right:10px;width:min(340px,94vw);background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:10px 14px;z-index:40;font-family:var(--ui);font-size:.85rem;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule)}.set-row:last-child{border-bottom:0}
.seg{display:inline-flex;background:var(--raised);border-radius:999px;padding:3px}.seg button{appearance:none;border:0;background:none;color:var(--text-2);font-family:var(--ui);font-size:.8rem;padding:7px 12px;border-radius:999px;cursor:pointer;min-height:32px}.seg button.on{background:var(--canvas);color:var(--text)}
.seg [data-size="0"]{font-size:.7rem}.seg [data-size="1"]{font-size:.8rem}.seg [data-size="3"]{font-size:.95rem}.seg [data-size="4"]{font-size:1.1rem}
.txt{appearance:none;background:none;border:0;color:var(--text-2);font-family:var(--ui);font-size:.8rem;cursor:pointer;padding:6px 0;text-decoration:underline}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--raised);color:var(--text);font-family:var(--ui);font-size:.8rem;padding:10px 14px;border-radius:999px;z-index:50;border:1px solid var(--rule)}

/* ---------- STAGE + BOOK ---------- */
.stage{position:fixed;inset:var(--bar) 0 0 0;display:grid;place-items:center;padding:14px}
html[data-quiet="1"] .stage{inset:0}
.book{position:relative;width:var(--bw);height:var(--bh);perspective:2600px;transform-style:preserve-3d;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.slot{position:absolute;top:0;bottom:0;width:calc(var(--bw)/2);background:var(--page);overflow:hidden;color:var(--ink)}
.slot.left{left:0;border-radius:6px 0 0 6px;box-shadow:inset -18px 0 26px -20px rgba(0,0,0,.55)}.slot.right{right:0;border-radius:0 6px 6px 0;box-shadow:inset 18px 0 26px -20px rgba(0,0,0,.55)}
.book.single .slot.left{display:none}.book.single .slot.right{left:0;right:0;width:100%;border-radius:6px}
.spine{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.6),rgba(0,0,0,.35));z-index:2;pointer-events:none}.book.single .spine{display:none}
.book::before,.book::after{content:"";position:absolute;top:6px;bottom:-4px;width:8px;background:repeating-linear-gradient(90deg,var(--page-edge) 0 1px,var(--page) 1px 2px);z-index:-1;opacity:.9}
.book::before{left:-7px;border-radius:4px 0 0 4px}.book::after{right:-7px;border-radius:0 4px 4px 0}
.page{position:absolute;inset:0;padding:var(--pp);display:flex;flex-direction:column;font-size:calc(var(--fs) * var(--fs-scale, 1))}
.measure{font-size:calc(var(--fs) * var(--fs-scale, 1))}.page-inner{flex:1;overflow:hidden}
.folio{font-family:var(--ui);font-size:.68rem;letter-spacing:.1em;color:var(--muted);text-align:center;padding-top:10px;display:flex;justify-content:space-between;align-items:center}
.folio .f-run{text-transform:uppercase;color:var(--fam-ui)}
.runhead{display:none}
.f-nav{display:none}
/* Phones: the running head moves to the top of the page, and the bottom becomes a
   navigation bar - Back on the left, the page number centred, Next on the right - so it
   is obvious how to turn the page. Desktop keeps the classic run-and-folio line. */
@media (max-width:720px){
  .runhead{display:block;font-family:var(--ui);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fam-ui);padding-bottom:12px;margin-bottom:2px;border-bottom:1px solid var(--rule);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .folio{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-top:12px;border-top:1px solid var(--rule)}
  .folio .f-run{display:none}
  .folio .f-num{justify-self:center;color:var(--muted)}
  .f-nav{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 2px;margin:-6px 0;font:inherit;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .f-nav:active{color:var(--text)}
  .f-back{justify-self:start}
  .f-next{justify-self:end}
  .f-back::before{content:"\2039";font-size:1.5em;line-height:1}
  .f-next::after{content:"\203A";font-size:1.5em;line-height:1}
  /* the running head above already says "Chapter N" - do not repeat it in the heading.
     Hidden in .measure as well, or the paginator measures a page taller than the real one. */
  .page h3.chapter-h .ch-num,.measure h3.chapter-h .ch-num{display:none}
}
.leaf{position:absolute;top:0;bottom:0;width:calc(var(--bw)/2);transform-style:preserve-3d;z-index:5;will-change:transform;pointer-events:none}
.leaf.fwd{right:0;transform-origin:left center}.leaf.bwd{left:0;transform-origin:right center}
.book.single .leaf{width:100%;left:0;right:auto;transform-origin:left center}
.face{position:absolute;inset:0;background:var(--page);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;color:var(--ink)}
.face.back{transform:rotateY(180deg)}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s}
.leaf.turning .face.front::after{background:linear-gradient(90deg,rgba(0,0,0,.0),rgba(0,0,0,.35));opacity:1}
.leaf.turning .face.back::after{background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,0));opacity:1}
.leaf.fwd.turning{animation:flipF var(--flip-ms,900ms) var(--flip) forwards}.leaf.bwd.turning{animation:flipB var(--flip-ms,900ms) var(--flip) forwards}
@keyframes flipF{0%{transform:rotateY(0)}100%{transform:rotateY(-180deg)}}@keyframes flipB{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}
.turn{position:absolute;top:0;bottom:0;width:22%;background:none;border:0;cursor:pointer;z-index:6;opacity:0}.turn.prev{left:0;cursor:w-resize}.turn.next{right:0;cursor:e-resize}
.turn:focus-visible{opacity:1;outline:2px solid var(--focus);outline-offset:-6px}
.measure{position:absolute;left:-99999px;top:0;width:calc(var(--bw)/2);height:var(--bh);padding:var(--pp);visibility:hidden;pointer-events:none}
.measure .page-inner{height:calc(var(--bh) - var(--pp)*2 - var(--chrome,28px));overflow:hidden}

/* page typography */
.page p,.measure p{margin:0 0 .85em;text-align:left;hyphens:none}.page p.signoff,.measure p.signoff{color:var(--text-2);margin-top:1.4em}
.page p.cont::first-letter{}
.page h3.chapter-h,.measure h3.chapter-h{font-family:var(--display);font-weight:400;font-size:1.55em;line-height:1.15;margin:.2em 0 .9em;display:flex;flex-direction:column;gap:.35em}
.ch-num{font-family:var(--ui);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fam-ui)}.ch-title{letter-spacing:-.01em}
.page .part-h,.measure .part-h{margin:0 0 1em}
.page .epigraph.lead,.measure .epigraph.lead{font-style:italic;font-size:.9em;color:var(--text-2);line-height:1.5;margin:0 0 1.6em;padding-bottom:1.2em;border-bottom:1px solid var(--rule);max-width:none}.part-title{font-family:var(--display);font-weight:400;font-size:1.9em;line-height:1.1;margin:.1em 0 .3em;letter-spacing:-.015em}
.page figure,.measure figure{margin:.2em 0 1em;position:relative}.page figure img,.measure figure img{border:1px solid var(--rule);border-radius:3px}
figure .light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 55%,var(--fam-glow),transparent 45%);opacity:0}
.page.fresh figure.opener-art .light{animation:steady 1.6s ease-in-out 1}
@keyframes steady{0%{opacity:0}45%{opacity:.9}100%{opacity:0}}
/* opener plate pages: one painting bleeds across the spread; titles overlay the right page */
.page.plate{padding:0;background:#0b0d10}.page.plate .page-inner{position:relative;overflow:hidden}
.page.plate figure.bleed{position:absolute;inset:0;margin:0}.page.plate figure.bleed img{position:absolute;top:0;height:100%;width:200%;max-width:none;object-fit:cover;border:0;border-radius:0}
.page.plate-left figure.bleed img{left:0}.page.plate-right figure.bleed img{left:-100%}
.page.plate-single figure.bleed img{width:100%;left:0;object-position:50% 40%}
.page.plate figure.bleed .light{background:radial-gradient(circle at 50% 50%,var(--fam-glow),transparent 40%)}
.page.plate .overlay{position:absolute;left:0;right:0;bottom:0;padding:calc(var(--pp)*1.6) var(--pp) calc(var(--pp)*1.1);background:linear-gradient(180deg,rgba(11,13,16,0) 0%,rgba(11,13,16,.55) 28%,rgba(11,13,16,.92) 70%,rgba(11,13,16,.97) 100%);color:#F4F1EA}
.page.plate .overlay .eyebrow{color:var(--fam-ui)}.page.plate .overlay .rule{display:none}
.page.plate-left .page-inner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0) 80%,rgba(0,0,0,.35));pointer-events:none}
.page.plate .story-title{color:#F7F4EE;text-shadow:0 2px 24px rgba(0,0,0,.6)}.page.plate .story-sub{color:#DCD7CE;margin-bottom:.2em}.page.plate .epigraph{color:#CFCAC1;max-width:none;font-size:.86em}
.page.fresh.plate-right .light,.page.fresh.plate-single .light{animation:steady 1.8s ease-in-out 1}
.page.blank .page-inner{display:grid;place-items:center}.page.blank .page-inner::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fam);opacity:.6;box-shadow:0 0 18px var(--fam-glow)}
.endplate{text-align:center;margin-top:2.4em;padding-top:1.6em;border-top:1px solid var(--rule);color:var(--text-2)}
.endplate .lockup{width:min(230px,80%);margin:0 auto 14px}
.endplate p{text-align:center}
.endplate-tag{font-family:var(--display);font-weight:300;font-size:1.02em;line-height:1.35;color:var(--text);margin:0 0 .7em}
.endplate-meta{font-family:var(--ui);font-size:.78rem;margin:0}.endplate a{color:var(--text)}

/* ---------- SCROLL MODE ---------- */
.scroll-doc{display:none}
html[data-mode="scroll"] .reader-page{overflow:auto;height:auto}
html[data-mode="scroll"] .stage{position:static;display:block;padding:0}
html[data-mode="scroll"] .book,html[data-mode="scroll"] .measure{display:none}
html[data-mode="scroll"] .scroll-doc{display:block;padding:calc(var(--bar) + 48px) 20px 120px}
.doc-h{text-align:center;margin:0 auto 64px;max-width:64ch}.doc-h h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,72px);letter-spacing:-.03em;margin:.1em 0}
.scroll-doc .part{max-width:min(64ch,42rem);margin:0 auto 160px}.scroll-doc p{margin:0 0 .85em}
.scroll-doc .opener{max-width:960px;margin:0 auto 64px}.scroll-doc .opener-text{max-width:min(64ch,42rem);margin:28px auto 0}
.scroll-doc figure{max-width:960px;margin:32px auto 40px}.scroll-doc figure img{border:1px solid var(--rule)}
.scroll-doc .chapter-h{font-family:var(--display);font-weight:400;font-size:1.7em;line-height:1.15;margin:96px 0 .9em;display:flex;flex-direction:column;gap:.35em;scroll-margin-top:80px}
.scroll-doc .part-h{margin:0 0 1.2em}.scroll-doc .part{scroll-margin-top:80px}
.scroll-doc .signoff{color:var(--text-2)}

/* motion + a11y */
html[data-motion="off"] .cover-art img,html[data-motion="off"] .reveal{animation:none!important;opacity:1;transform:none}
html[data-motion="off"] .leaf.turning{animation-duration:1ms!important}
html[data-motion="off"] figure .light{animation:none!important}
@media (prefers-reduced-motion:reduce){.cover-art img,.reveal{animation:none!important;opacity:1;transform:none}.leaf.turning{animation-duration:1ms!important}figure .light{animation:none!important}}
@media (forced-colors:active){.btn,.ib,.seg button{border:1px solid CanvasText}}
::selection{background:var(--fam);color:#111}

/* phone opener: whole painting, then the title on the page below it */
.page.plate-portrait{padding:0;background:var(--page)}
/* Phone openers: the plate runs the full width of the page, screen edge to screen edge,
   with no border and no gap. On dark themes the page takes the plates' own near black
   ground so a dark plate (the mesh) has no visible rectangle at all. */
html:not([data-theme="paper"]) .page.plate-portrait{background:#0b0d10}
.page.plate-portrait .page-inner{display:flex;flex-direction:column;justify-content:center;gap:1.4em;position:static;overflow:hidden}
.page.plate-portrait figure.whole{position:static;flex:0 0 auto;margin:0;width:100%}
.page.plate-portrait figure.whole img{position:static;display:block;width:100%;height:auto;max-width:none;object-fit:contain;border:0;border-radius:0}
.page.plate-portrait .opener-text{position:static;padding:0 var(--pp);background:none}
.page.plate-portrait .story-title{color:var(--text);text-shadow:none}
.page.plate-portrait .rule{display:block}
.page.plate-portrait .story-sub{color:var(--text-2)}
.page.plate-portrait .page-inner::after{display:none}
/* the book fills the phone screen, so a full width plate really does touch both edges */
@media (max-width:720px){.stage{padding:0}.book.single .slot.right{border-radius:0}.book::before,.book::after{display:none}}