/* press/book.css — the book on the table: the ENGINE layer, shared by every press site.
   A page is laid out once at the print trim (8 x 10 in) in container units, so screen and print are the same page.
   This file owns geometry, the leaf turn, the generic pages (cover, endpaper, title, contents, matter, notes, back),
   the controls, the room's doodle motions, the phone and print rules. It paints with TOKENS only; a site's theme.css
   sets the tokens (loaded after this file), and the site's own stylesheet adds its page kinds.
   Governed by bakedin-app/docs/WEBSITE_UX_CANON.md (W1 visual lead · W2 pill restraint · W3 text density · W4 colour
   variety · W6 one primary CTA · W7 access · W8 mobile) and the canon's engagement standard. */
:root{
  /* the paper and its ink */
  --paper:#f7f1e3; --paper-2:#efe6d3; --ink:#2b2a24; --mut:rgba(43,42,36,.64); --rule:rgba(43,42,36,.18);
  /* the binding: cloth, foil, and the lighter foil */
  --cloth:#1f3d2b; --cloth-hi:#2b4f3a; --foil:#e9dcc0; --champagne:#f3ead6; --glow:none;
  --foil-glow:transparent; --foil-glow-2:transparent; --cover-frame:rgba(233,220,192,.55); --cover-sheen:rgba(255,255,255,.06);
  --endpaper:#e4d9c1; --endpaper-dot:rgba(31,61,43,.14); --endpaper-dot-2:rgba(31,61,43,.08);
  --edge-1:#d9cfb8; --edge-2:#cbbfa4; --edge-3:#8f7a45; --back-url:rgba(243,234,214,.8);
  /* three accents a site maps to its own names */
  --accent:#4f7a5a; --accent-2:#b8743a; --accent-3:#8a5a7a; --amber:#d9a441;
  /* the room: everything that is not the book */
  --room-ink:#3a2a1e; --room-bg:#f3ecdc; --hot:#9c4a6b;
  --nav-bg:#1f3d2b; --nav-line:rgba(233,220,192,.35); --nav-fg:rgba(243,234,214,.72); --nav-hi:#e9dcc0;
  --turn-ink:#3a2a1e; --turn-bg:#fff; --turn-hi:#fff6dc;
  --btn-bg:#1f3d2b; --btn-fg:#e9dcc0; --btn-line:#e9dcc0; --btn-hi:#2b4f3a;
  --display:"Fraunces",Georgia,serif; --hand:"Caveat","Segoe Print",cursive; --sans:"Inter",-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* the page width animates: the closed book sits small in the busy room; tap it and it grows to reading size */
@property --pw{syntax:"<length>";inherits:true;initial-value:320px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}   /* height:100% made the BODY the scroller: full-page captures stopped at one screen and the document never grew */
html{overflow-x:clip}
body{font:16px/1.6 var(--sans);color:var(--room-ink);overflow-x:hidden;background:var(--room-bg);background-attachment:fixed}
a{color:inherit}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:14px;top:10px;z-index:20;background:#fff;color:#000;padding:8px 12px;border-radius:6px}

.table-top{display:flex;justify-content:space-between;align-items:center;padding:16px clamp(16px,3vw,32px);position:relative;z-index:5;background:var(--nav-bg);border-bottom:1px solid var(--nav-line);box-shadow:0 6px 24px rgba(10,14,16,.18)}
.mark{font-family:var(--display);font-size:20px;font-weight:500;text-decoration:none;color:var(--nav-hi);letter-spacing:-.01em;text-shadow:var(--glow)}
.table-top nav{display:flex;gap:clamp(14px,2.4vw,28px)}
.table-top nav a{font:500 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--nav-fg);padding:8px 0}
.table-top nav a:hover,.table-top nav a[aria-current]{color:var(--nav-hi)}

.table{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100dvh - 60px);padding:22px 0 28px;overflow:hidden;
  --pw:min(38vw,calc((100dvh - 290px) * .8));transition:--pw .85s cubic-bezier(.3,.8,.2,1),padding .6s}
.table.reading{--pw:min(48.5vw,calc((100dvh - 150px) * .8));padding:12px 0 14px}
.table.reading .doodles{opacity:.38;filter:saturate(.8);transition:opacity .8s}
.doodles{transition:opacity .8s}
.table.reading .hint{display:none}
.table.reading .controls{margin-top:12px}
.table.reading .extras{margin-top:8px}

/* ---- the book object (wide screens: a spread of two pages, leaves turn in 3D) ---- */
.book{position:relative;width:calc(var(--pw) * 2);height:calc(var(--pw) * 1.25);perspective:2600px;transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.book.closed-front{transform:translateX(calc(var(--pw) * -.5))}
.book.closed-back{transform:translateX(calc(var(--pw) * .5))}
.book::before{content:"";position:absolute;inset:auto 4% -4% 4%;height:14%;background:radial-gradient(ellipse at center,rgba(60,35,15,.4),transparent 70%);filter:blur(14px);z-index:-1;transform:translateZ(-60px)}
.bk-off{display:none!important}
.leaf{position:absolute;top:0;left:50%;width:var(--pw);height:100%;transform-origin:left center;transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.35,.1,.2,1);cursor:pointer}
.leaf.turned{transform:rotateY(-180deg)}
.leaf .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.leaf .back{transform:rotateY(180deg)}
.leaf.turning .face::after{content:"";position:absolute;inset:0;pointer-events:none;animation:shade 1s ease}
@keyframes shade{0%{background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,0))}50%{background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.02))}100%{background:none}}

/* page block thickness visible on the closed book */
.book.closed-front .leaf:first-child .front{box-shadow:5px 0 0 -1px var(--edge-1),9px 0 0 -2px var(--edge-2),13px 1px 0 -3px var(--edge-3),0 30px 60px -20px rgba(0,0,0,.8)}

/* ---- a page ---- */
.page{container-type:size;position:absolute;inset:0;background:var(--paper);color:var(--ink);overflow:hidden}
.page::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.front .page::after{content:"";position:absolute;inset:0 auto 0 0;width:9%;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0))}
.back .page::after{content:"";position:absolute;inset:0 0 0 auto;width:9%;pointer-events:none;background:linear-gradient(270deg,rgba(0,0,0,.45),rgba(0,0,0,0))}
.pi{position:relative;height:100%;padding:9cqw 10cqw 10cqw;display:flex;flex-direction:column}
.folio{position:absolute;bottom:4.5cqw;left:0;right:0;text-align:center;font:500 2cqw/1 var(--mono);letter-spacing:.2em;color:var(--mut)}
.page .kicker{font:500 1.9cqw/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin:0 0 2.4cqw}
.page h2{font-family:var(--display);font-weight:400;font-size:7.2cqw;line-height:1.05;letter-spacing:-.02em;margin:0 0 3cqw}
.page h3{font:500 1.9cqw/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mut);margin:0 0 2cqw}
.page p{margin:0 0 2.2cqw}
.hand{font-family:var(--hand);font-weight:700;color:var(--hand-ink,var(--foil));line-height:1}
.wait{font-family:var(--hand);font-size:3.6cqw;color:var(--hand-ink-2,var(--champagne));line-height:1.15;margin-top:2cqw!important}

/* cover: clothbound, foil title */
.p-cover{background:var(--cloth);color:var(--foil);box-shadow:inset 0 0 0 2.2cqw var(--cloth),inset 0 0 0 2.5cqw var(--cover-frame)}
.p-cover::before{opacity:1;mix-blend-mode:normal;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),
  radial-gradient(ellipse at 50% 30%,var(--cover-sheen),transparent 60%)}
.p-cover::after{content:"";position:absolute;inset:0 auto 0 0;width:5%;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.06) 60%,transparent)}
.p-cover .pi{align-items:center;text-align:center;justify-content:center;padding:8cqw}
.cv-hand{font-family:var(--hand);font-size:5.4cqw;color:var(--champagne);margin:0 0 1cqw}
.cv-title{font-family:var(--display);font-weight:300;font-size:13cqw;line-height:.95;letter-spacing:-.03em;margin:0;color:var(--foil);
  text-shadow:0 0 3cqw var(--foil-glow)}
.cv-sub{font:500 1.9cqw/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;margin-top:11cqw;color:var(--back-url)}

/* line emblem (cover, part opener) */
.emblem{display:block;width:100%;height:auto}
.cv-emblem{width:42cqw;color:var(--foil);margin-bottom:7cqw;filter:drop-shadow(0 0 1.6cqw var(--foil-glow))}
.p-chapter-art{background:var(--cloth);color:var(--foil)}
.ca-emblem{filter:drop-shadow(0 0 2cqw var(--foil-glow-2))}
.p-chapter-art::before{opacity:1;mix-blend-mode:normal;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px)}
.p-chapter-art .pi{justify-content:center;align-items:center}
.ca-emblem{width:56cqw}

/* endpapers + inside cover */
.p-endpaper{background:var(--endpaper)}
.p-endpaper::before{opacity:1;mix-blend-mode:normal;background:
  radial-gradient(circle at 25% 25%,var(--endpaper-dot) 0 .6cqw,transparent .7cqw),
  radial-gradient(circle at 75% 75%,var(--endpaper-dot-2) 0 .6cqw,transparent .7cqw);background-size:8cqw 8cqw}
.p-endpaper .pi{justify-content:flex-end;align-items:center}
.belongs{background:var(--paper);padding:5cqw 7cqw;text-align:center;border:.25cqw solid var(--rule);width:70cqw}
.belongs .hand{font-size:5cqw;margin:0 0 6cqw}
.belongs .line{display:block;border-bottom:.25cqw solid var(--label-ink,var(--foil));opacity:.6}

/* title */
.p-title .pi{justify-content:center;align-items:center;text-align:center}
.t-title{font-size:10cqw!important;margin-bottom:5cqw!important}
.t-title em{font-style:italic;font-weight:400;color:var(--accent)}
.t-hand{font-family:var(--hand);font-size:5cqw;color:var(--accent-3)}
.t-imprint{position:absolute;bottom:9cqw;font:500 1.9cqw/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--mut)}

/* contents */
.toc{list-style:none;margin:2cqw 0 0;padding:0;counter-reset:t}
.toc a{display:flex;align-items:baseline;gap:2cqw;padding:2.4cqw 0;text-decoration:none;font-family:var(--display);font-size:4.2cqw;color:var(--ink)}
.toc a i{flex:1;border-bottom:.3cqw dotted var(--rule);transform:translateY(-.8cqw)}
.toc a b{font:600 2.6cqw/1 var(--sans);color:var(--mut)}
.toc a:hover span{color:var(--accent)}

/* an honest frame for a slot that is not written or not yet sourced */
.sourcing{display:flex;justify-content:space-between;align-items:center;gap:2cqw;border:.25cqw dashed var(--rule);border-radius:1cqw;padding:2.4cqw 3cqw;font-size:2.2cqw;color:var(--mut);width:100%}
.sourcing b{font:500 1.7cqw/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--label-ink,var(--foil))}

/* notes */
.n-head{font-size:6cqw;margin-bottom:3cqw}
.rule{display:block;border-bottom:.2cqw solid var(--rule);height:4.6cqw}

/* back cover */
.p-back{background:var(--cloth);color:var(--foil)}
.p-back::before{opacity:1;mix-blend-mode:normal;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px)}
.p-back .pi{justify-content:center;align-items:center;text-align:center;padding:14cqw}
.bk-hand{font-family:var(--hand);font-size:7cqw;color:var(--champagne)}
.bk-blurb{font-family:var(--display);font-size:3.6cqw;line-height:1.5}
.bk-url{position:absolute;bottom:9cqw;font:500 1.9cqw/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--back-url)}

/* front + back matter, contents rows */
.m-body{font-family:var(--display);font-size:3.1cqw;line-height:1.6;color:var(--mut)}
.m-body p{margin-bottom:3cqw!important}
.toc-cont{margin-top:6cqw!important}
.toc .toc-part a{font-family:var(--mono);font-size:2cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--label-ink,var(--foil));padding:3cqw 0 1cqw}
.toc .toc-part i{border:0}
.toc li:not(.toc-part):not(.toc-front):not(.toc-back) a{padding-left:4cqw;font-size:3.3cqw;padding-top:1.3cqw;padding-bottom:1.3cqw}
.toc .toc-front a,.toc .toc-back a{font-size:3.2cqw;padding:1.4cqw 0}

/* ---- controls under the book (W2: no pills; text + arrows) ---- */
.controls{display:flex;align-items:center;gap:22px;margin-top:22px}
.bk-turn{width:48px;height:48px;border-radius:50%;border:2px solid var(--turn-ink);background:var(--turn-bg);color:var(--turn-ink);font-size:20px;cursor:pointer;box-shadow:3px 3px 0 var(--turn-ink);transition:transform .15s,box-shadow .15s}
.bk-turn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--turn-ink);background:var(--turn-hi)}
.bk-turn:disabled{opacity:.3;cursor:default}
.where{min-width:150px;text-align:center;font:600 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--turn-ink)}
.extras{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px;margin-top:16px;min-height:46px}
.bk-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:6px;background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-line);box-shadow:3px 3px 0 var(--btn-line);font:600 15px/1 var(--sans);text-decoration:none;cursor:pointer}
.bk-btn:hover{background:var(--btn-hi)}
.bk-btn.ghost{background:none;box-shadow:none;border:0;border-bottom:2px solid var(--room-ink);color:var(--room-ink);padding:13px 4px;border-radius:0}
.bk-btn.ghost:hover{color:var(--hot);border-color:var(--hot);background:none}
.hint{font:700 24px/1 var(--hand);color:var(--hot);margin-top:12px;height:24px;transform:rotate(-2deg)}

/* ---- doodles around the book (the bustle) ----
   outer .dd: position + rotation + pointer parallax (book.js sets --px/--py); inner .ddi: its own motion. */
.doodles{position:absolute;inset:0;z-index:0}
.book,.controls,.extras,.hint{position:relative;z-index:1}
.dd{position:absolute;width:var(--s,60px);transform:translate3d(var(--px,0px),var(--py,0px),0) rotate(var(--r,0deg));
  transition:transform .9s cubic-bezier(.2,.8,.2,1);cursor:default}
.ddi{display:block;animation:popin .8s cubic-bezier(.3,1.6,.5,1) backwards,var(--motion) var(--dur,6s) ease-in-out infinite;
  animation-delay:calc(var(--i) * 55ms),var(--d,0s);transform-origin:50% 50%;filter:drop-shadow(0 6px 6px rgba(80,50,20,.16))}
.dd svg{display:block;width:100%;height:auto;overflow:visible}
.m-bob{--motion:bob;--dur:5.6s}
.m-drift{--motion:drift;--dur:9s}
.m-sway .ddi{transform-origin:50% 0}.m-sway{--motion:sway;--dur:3.8s}
.m-spin{--motion:spin;--dur:16s}.m-spin .ddi{animation-timing-function:cubic-bezier(.3,1.6,.5,1),linear}
.m-pulse{--motion:pulse;--dur:2.6s}
.dd:nth-child(3n) {--dur-k:1.2}.dd:nth-child(4n){animation-direction:reverse}
.dd:hover .ddi{animation:wiggle .7s ease-in-out}
@keyframes popin{from{transform:scale(0) rotate(-40deg);opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(12px,-10px) rotate(6deg)}66%{transform:translate(-8px,8px) rotate(-5deg)}}
@keyframes sway{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes wiggle{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-16deg) scale(1.12)}50%{transform:rotate(12deg) scale(1.12)}75%{transform:rotate(-6deg) scale(1.05)}}
.spr{position:absolute;width:11px;height:4px;border-radius:3px;background:var(--c);transform:rotate(var(--r));opacity:.9;animation:twinkle 3.2s ease-in-out infinite;animation-delay:calc(var(--r) * -.02s)}
@keyframes twinkle{0%,100%{opacity:.9}50%{opacity:.35}}
/* the burst when a page turns: confetti flies out from the book */
.burst{position:absolute;left:50%;top:45%;width:10px;height:4px;border-radius:3px;background:var(--c);z-index:3;pointer-events:none;
  animation:fly 1.1s cubic-bezier(.15,.7,.3,1) forwards}
.burst.star{width:12px;height:12px;border-radius:2px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@keyframes fly{0%{transform:translate(-50%,-50%) rotate(0) scale(.4);opacity:1}
  80%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.ddi,.spr{animation:none!important}.burst{display:none}.dd{transition:none}}

/* ---- phones: one page at a time ---- */
/* one page at a time wherever a spread would be cramped: narrow screens, and any screen taller than it is wide (tablets upright) */
@media (max-width:899px),(max-aspect-ratio:11/10){
  .table{--pw:min(calc(100vw - 64px),calc((100dvh - 250px) * .8))}
  .table.reading{--pw:min(calc(100vw - 16px),calc((100dvh - 140px) * .8))}
  .book{width:var(--pw)!important;transform:none!important;perspective:none}
  .leaf{left:0;transition:none;cursor:default}
  .leaf .face{backface-visibility:visible}
  .leaf .back{transform:none}
  .leaf.turned{transform:none}
  .book .page-solo{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s,transform .35s;transform:translateX(12px)}
  .book .page-solo.on{opacity:1;visibility:visible;transform:none}
  .front .page::after,.back .page::after{display:none}
  .table-top nav a:first-child{display:none}
  .dd{opacity:.6}
  .dd .ddi{transform:scale(.62)}
  .controls{gap:10px;padding:0 12px;width:100%;justify-content:space-between}
  .extras{max-width:100%;padding:0 12px;gap:12px 18px}
  .where{min-width:0;flex:1;font-size:10.5px}
  .dd.far{display:none}
  /* phones: the open page grows to fit its content (the print page keeps its fixed 8x10 shape) */
  .table.reading .book{height:auto!important}
  .table.reading .book .page-solo{position:relative;inset:auto;display:none;min-height:calc(var(--pw) * 1.25);transform:none;container-type:inline-size;height:auto}
  .table.reading .book .page-solo.on{display:block}
  .table.reading .page-solo .pi{height:auto;min-height:calc(var(--pw) * 1.25);padding-bottom:16cqw}
  .bk-blurb{font-size:15.5px}
  .toc a{font-size:18px}.toc a b{font-size:13px}
  .page h3,.page .kicker{font-size:11px}
  .wait{font-size:18px}
  .folio{font-size:10px}
  .sourcing{font-size:13px}.sourcing b{font-size:10px}
}

/* ---- print: each page on its own sheet at the trim size ---- */
@media print{
  html,body{height:auto!important;overflow:visible!important}
  body{background:none}
  .table-top,.controls,.extras,.hint,.skip,.doodles,.bk-off{display:none!important}
  .table,.table.reading{display:block;padding:0!important;min-height:0}   /* the open book's 12px/14px table padding added two sheets to the print */
  .book{width:auto;height:auto;perspective:none;transform:none!important}
  .book::before{display:none}
  .leaf,.leaf .face{position:static;transform:none!important;width:auto;height:auto;backface-visibility:visible}
  .page,.page-solo{display:block!important;position:relative;width:8in;height:10in;break-after:page;opacity:1!important;visibility:visible!important;transform:none!important}   /* phones hide every page but the open one on screen; the print gets them all */
  .front .page::after,.back .page::after{display:none}
  .toc a{color:inherit}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.bk-btn[hidden]{display:none}
.book.closed-front::before{left:52%}.book.closed-back::before{right:52%}

/* short screens (phones held sideways): let the open page be wide and scroll, rather than shrinking it to fit the height */
@media (max-height:520px){
  .table{min-height:0;overflow:visible}
  .table.reading{--pw:min(calc(100vw - 48px),560px)}
  .table:not(.reading){--pw:min(calc((100dvh - 150px) * .8),300px)}
}