/* 08 HISTORY BOOK (DESIGN RESEARCH) — 'research-book' reader v4 (js/research-book.js), 2026-11-06, in review.
   Site tokens plus three of the book's own: the paper (also baked into every plate), the desk the book lies on, and one
   muted red used only for chapter numbers. Earlier stylesheets: review/history-book-ui/_snapshot, design-research-v3/_v2-snapshot. */
.drb{--paper:#f2efe9;--desk:#e7e4de;--red:#a8322a;--ink2:#2b2a28;--drb-h:calc(100svh - var(--pill-h) * 2 - var(--m) * 5 - clamp(18px,3.2vh,36px) - 72px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding-top:var(--m);padding-bottom:calc(var(--m) * 4)}
.wip-note+.drb,.pub-note+.drb{padding-top:0}
.drb>.d-back,.drb>.d-next{grid-column:1/-1;margin-top:0}
.drb-back{display:flex;align-items:center;gap:calc(var(--m) * 2);margin-bottom:var(--m)}
.drb-back .pill{flex:0 0 calc((100% - var(--m) * 3) / 4)}
.drb-pvnote{font-size:12px;color:var(--mute)}
/* the preview indicator is shown inline on this page, never over the book or its controls */
body:has(.drb) .review-flag.pv-flag{display:none}

/* stage: a quiet, full-width desk */
.drb-stage{margin:0 calc(var(--m) * -1);background:var(--desk);padding:clamp(18px,3.2vh,36px) var(--m) 0;display:grid;grid-template-rows:auto auto;justify-items:center}
.drb-desk{display:flex;justify-content:center;width:100%;padding:0 14px}
.drb-book{--lp:0;--rp:1;position:relative;width:min(100%,calc(var(--drb-h) * 1.414));aspect-ratio:1.414/1;outline:none;
  box-shadow:0 1px 1px rgba(30,29,27,.08),0 2px 6px -2px rgba(30,29,27,.10),0 26px 40px -30px rgba(30,29,27,.55)}
.drb-book.single{width:min(100%,calc(var(--drb-h) / 1.414));aspect-ratio:1/1.414}
/* horizontal swipes on the book turn pages; they never pan or zoom the page under it */
.drb-book{touch-action:pan-y pinch-zoom}
/* the closed cover is exactly one page of the open book, at every width */
.drb-book.closed{width:min(50%,calc(var(--drb-h) / 1.414))}
/* page block: a few sheets visible at the outer edges, thicker on the side that holds more pages */
.drb-book::before,.drb-book::after{content:"";position:absolute;top:2px;bottom:2px;background:repeating-linear-gradient(to right,#dcd8d0 0 1px,#f4f1eb 1px 2px)}
.drb-book::before{right:100%;width:calc(1px + var(--lp) * 4px)}
.drb-book::after{left:100%;width:calc(1px + var(--rp) * 4px)}
.drb-book.closed::before{display:none}
.drb-sheet{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.drb-book.single .drb-sheet{grid-template-columns:1fr}
/* spine: a narrow crease where the pages meet */
.drb-book:not(.single) .drb-sheet::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 14px);width:28px;pointer-events:none;
  background:linear-gradient(to right,transparent,rgba(30,29,27,.035) 35%,rgba(30,29,27,.12) 49.5%,rgba(255,255,255,.35) 50.5%,rgba(30,29,27,.03) 65%,transparent)}
.drb-page{position:relative;overflow:hidden;background:var(--paper);container-type:inline-size}
.drb-page.l{background-image:linear-gradient(to left,rgba(30,29,27,.05),transparent 9%)}
.drb-page.r{background-image:linear-gradient(to right,rgba(30,29,27,.045),transparent 9%)}
.drb-book.single .drb-page{background-image:none}
.drb-book.closed .drb-page{background-image:linear-gradient(to right,rgba(30,29,27,.08),rgba(30,29,27,.02) 2.5%,transparent 5%)}
.drb-page::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .48 0 0 0 0 .45 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.drb-plate{position:absolute;padding:0;margin:0;border:0;background:none;display:block}
button.drb-plate{cursor:zoom-in}
.drb-plate img{display:block;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .45s ease}
.drb-plate img.in,.drb-mini .drb-plate img{opacity:1}
button.drb-plate:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
/* page typography */
.drb-sec{position:absolute;z-index:2;left:9%;top:5%;display:flex;gap:1.8cqw;font-size:max(9px,2.05cqw);letter-spacing:.02em;color:var(--ink2)}
.drb-sec b{font-weight:400;color:var(--red);font-variant-numeric:tabular-nums}
.drb-folio{position:absolute;bottom:4.2%;font-size:max(8px,1.75cqw);letter-spacing:.04em;color:#8b8780;font-variant-numeric:tabular-nums}
.drb-page.l .drb-folio{left:9%}
.drb-page.r .drb-folio{right:9%}
.drb-cover{position:absolute;left:9%;right:9%;top:9%}
.drb-cno{display:block;font-size:max(9px,2.2cqw);color:var(--red);font-variant-numeric:tabular-nums;margin-bottom:3.4cqw}
.drb-cover h2{margin:0;font-family:'Anybody',var(--font);font-stretch:74%;font-weight:500;font-size:19cqw;line-height:.8;letter-spacing:-.035em;color:#1e1d1b}
.drb-cover p{margin:4.6cqw 0 0;font-size:max(10px,3.1cqw);line-height:1.3;color:var(--ink2)}
.drb-imprint{position:absolute;left:9%;bottom:5.5%;font-family:'Anybody',var(--font);font-stretch:78%;font-weight:600;font-size:max(9px,2.5cqw);letter-spacing:.06em;color:var(--ink2)}
.drb-end{position:absolute;left:9%;right:22%;bottom:13%}
.drb-end p{margin:0 0 .5em;font-size:max(9px,2.35cqw);line-height:1.5;color:#77736c}
.drb-end p.t{font-family:'Anybody',var(--font);font-stretch:74%;font-weight:500;font-size:max(18px,7.5cqw);line-height:.9;letter-spacing:-.02em;color:#1e1d1b;margin-bottom:.7em}
/* outer page edges turn the page; a soft lift appears on hover */
.drb-edge{position:absolute;top:0;bottom:0;width:7%;z-index:4;border:0;padding:0;background:none;opacity:0;transition:opacity .25s}
.drb-edge.prev{left:0;cursor:w-resize;background:linear-gradient(to right,rgba(30,29,27,.07),rgba(30,29,27,0))}
.drb-edge.next{right:0;cursor:e-resize;background:linear-gradient(to left,rgba(30,29,27,.07),rgba(30,29,27,0))}
.drb-edge:hover{opacity:1}
.drb-edge[hidden]{display:none}
@media (hover:none){.drb-edge{display:none}}
/* turning leaf (2D fold at the spine) */
.drb-leaf{position:absolute;top:0;bottom:0;width:50%;z-index:3;display:grid;will-change:transform}
.drb-leaf.r{left:50%;transform-origin:0 50%}
.drb-leaf.l{left:0;transform-origin:100% 50%}
.drb-leaf .drb-page{height:100%}
.drb-leaf-shade{position:absolute;inset:0;pointer-events:none;opacity:0}
.drb-leaf.r .drb-leaf-shade{background:linear-gradient(to right,rgba(30,29,27,.35),rgba(30,29,27,.08))}
.drb-leaf.l .drb-leaf-shade{background:linear-gradient(to left,rgba(30,29,27,.35),rgba(30,29,27,.08))}
/* controls: one quiet line under the book */
.drb-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:min(100%,calc(var(--drb-h) * 1.414 + 28px));padding:14px 14px 16px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.drb-bar button{border:0;background:none;padding:8px 6px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.drb-bar button:hover{color:var(--red)}
.drb-bar button:disabled{opacity:.3;cursor:default;color:inherit}
.drb-bar button:focus-visible,.drb-book:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.drb-chap{white-space:pre;color:#77736c;overflow:hidden;text-overflow:ellipsis}
.drb-turn{display:flex;align-items:center;gap:18px}
.drb-count{min-width:9ch;text-align:center;font-variant-numeric:tabular-nums}
.drb-tools{display:flex;justify-content:flex-end;gap:14px}
/* full screen: the stage alone */
.drb-stage:fullscreen{margin:0;width:100vw;height:100vh;align-content:center;--drb-h:calc(100vh - 110px)}
.drb-stage:fullscreen .drb-book{width:min(96vw,calc(var(--drb-h) * 1.414))}
.drb-stage:fullscreen .drb-book.single{width:min(96vw,calc(var(--drb-h) / 1.414))}
body.drb-reading .nav,body.drb-reading .foot,body.drb-reading .review-flag,body.drb-reading .wip-note,body.drb-reading .pub-note,body.drb-reading .drb-back,body.drb-reading .drb-pvnote,
body.drb-reading .drb-intro,body.drb-reading .drb-info,body.drb-reading .drb-next-proj{display:none!important}
body.drb-reading .drb{padding:0}
body.drb-reading .drb-stage{position:fixed;inset:0;z-index:70;margin:0;align-content:center;--drb-h:calc(100svh - 110px)}
body.drb-modal{overflow:hidden}
/* introduction, below the book */
.drb-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--m);align-items:end;padding:calc(var(--m) * 6) 0 calc(var(--m) * 3);border-bottom:1px solid var(--ink)}
.drb-title{grid-column:1/8}
.drb-no{display:block;font-variant-numeric:tabular-nums;color:var(--red);font-size:12px;margin-bottom:10px}
.drb-title h1{margin:0;font-family:'Anybody',var(--font);font-stretch:74%;font-weight:500;font-size:clamp(52px,8.4vw,144px);line-height:.82;letter-spacing:-.035em}
.drb-sub{margin:16px 0 0;font-size:clamp(14px,1.2vw,18px);line-height:1.3;max-width:30ch}
.drb-lede{grid-column:8/13;font-size:14px;line-height:1.6;max-width:46ch}
.drb-lede p{margin:0 0 .8em}
.drb-lede p+p{color:var(--mute)}
.drb-toc{grid-column:1/-1;margin-top:calc(var(--m) * 2)}
.drb-toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px var(--m)}
.drb-toc a{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:13px}
.drb-toc a b{font-weight:400;color:var(--red);font-variant-numeric:tabular-nums;min-width:2ch}
.drb-toc a:hover{color:var(--red)}
.drb-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--m);width:100%;margin:calc(var(--m) * 3) 0 var(--m)}
.drb-info .review{grid-column:1/-1}
.drb-next-proj{display:flex;justify-content:flex-end}
.drb-next-proj .pill{width:min(100%,calc((100% - var(--m)) / 2))}
/* index of spreads */
.drb-index{position:fixed;inset:0;z-index:80;background:var(--desk);overflow:auto;padding:calc(var(--m) * 3) calc(var(--m) * 3) calc(var(--m) * 5)}
.drb-index-in{max-width:1500px;margin:0 auto}
.drb-index-h{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:calc(var(--m) * 3)}
.drb-index-h button{border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:8px 0}
.drb-index-h button:hover{color:var(--red)}
.drb-thumbs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--m) * 3.2) calc(var(--m) * 2.6)}
.drb-thumbs button{display:block;width:100%;border:0;background:none;padding:0;text-align:left;cursor:pointer;font:inherit;color:var(--ink)}
.drb-mini{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:1.414/1;box-shadow:0 1px 1px rgba(30,29,27,.08),0 14px 22px -18px rgba(30,29,27,.55);transition:transform .25s ease}
.drb-mini.single{grid-template-columns:1fr;width:50%;margin-left:50%}
.drb-mini .drb-page::after,.drb-mini .drb-folio,.drb-mini .drb-end,.drb-mini .drb-imprint{display:none}
.drb-thumbs button:hover .drb-mini{transform:translateY(-3px)}
.drb-thumbs button[aria-current] .drb-mini{outline:1px solid var(--red);outline-offset:5px}
.drb-mini-t{display:flex;gap:8px;margin-top:12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.drb-mini-t b{font-weight:400;color:var(--red)}
.drb-mini-t i{font-style:normal;margin-left:auto;color:#8b8780;font-variant-numeric:tabular-nums}
/* detail viewer */
.drb-view{position:fixed;inset:0;z-index:90;background:var(--paper);display:grid;grid-template-rows:minmax(0,1fr) auto}
.drb-view[hidden],.drb-index[hidden]{display:none}
.drb-view-img{overflow:hidden;display:flex;align-items:center;justify-content:center;padding:4vh 4vw;min-height:0}
.drb-view-img img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;user-select:none;-webkit-user-drag:none}
.drb-view.zoomed .drb-view-img{overflow:auto;display:block;padding:0;cursor:grab}
.drb-view.zoomed .drb-view-img img{max-width:none;max-height:none;width:auto;height:240vh;cursor:zoom-out;display:block;margin:0 auto}
.drb-view-bar{display:flex;gap:16px;align-items:center;padding:12px calc(var(--m) * 2.4) 16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-top:1px solid rgba(30,29,27,.12)}
.drb-view-cap{flex:1;min-width:0;letter-spacing:.02em;text-transform:none;font-size:13px}
.drb-view-n{color:#8b8780;font-variant-numeric:tabular-nums}
.drb-view-bar button{border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:8px 4px;color:var(--ink)}
.drb-view-bar button:hover{color:var(--red)}
@media (max-width:1100px){.drb-toc ol{grid-template-columns:repeat(4,minmax(0,1fr))}.drb-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* phones: one page, sized for the hand; controls in reach and clear of the page */
@media (max-width:760px){
  .drb{--drb-h:calc(100svh - 190px);padding-bottom:calc(var(--m) * 6)}
  .drb-back{flex-wrap:wrap;gap:6px var(--m)}
  .drb-back .pill{flex-basis:100%}
  .wip-note+.drb .drb-back{display:none}
  .drb-stage{padding:16px 0 0}
  .drb-desk{padding:0 16px}
  .drb-book.single{width:min(100%,calc(var(--drb-h) / 1.414))}
  .drb-bar{grid-template-columns:1fr auto;grid-template-areas:"turn turn" "chap tools";width:100%;padding:6px 10px 10px;row-gap:2px}
  .drb-turn{grid-area:turn;justify-content:space-between;width:100%}
  .drb-turn button{min-height:44px;padding:0 12px}
  .drb-chap{grid-area:chap;padding-left:12px;font-size:10px}
  .drb-tools{grid-area:tools}
  .drb-tools button{min-height:40px}
  .drb-intro{grid-template-columns:minmax(0,1fr);padding-top:calc(var(--m) * 4)}
  .drb-title,.drb-lede,.drb-toc{grid-column:1/-1}
  .drb-title h1{font-size:18vw}
  .drb-toc ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drb-thumbs{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--m) * 2.4) var(--m)}
  .drb-index{padding:calc(var(--m) * 2)}
  .drb-info{grid-template-columns:minmax(0,1fr)}
  .drb-next-proj .pill{width:100%}
  .drb-view-bar{flex-wrap:wrap;gap:2px 12px;padding:10px 14px 14px}
  .drb-view-cap{flex-basis:100%;order:-1;padding-bottom:4px}
}
@media (prefers-reduced-motion:reduce){
  .drb-plate img,.drb-edge,.drb-mini{transition:none}
}