/* pep-book.css - A4 product books in the site theme (2026-10-25, thread peptology-collagen-menu).
   Lifted from bio-spicule-catalog.html (flip / scroll / print / booth views) so every product book reads and turns the same.
   Load after assets/pep-pages.css. One <section class="sheet"> = one A4 page. The engine is assets/pep-book.js. */
:root{--dark:#0b1f20;--paper:#fffdf7}
.tool{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:14px 0 4px}
.tool .hint{width:100%;text-align:center;font-size:12.5px;color:var(--sub)}
.book{max-width:794px;margin:0 auto;padding:18px 0 40px;display:flex;flex-direction:column;gap:30px}
.sheet{background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lift);position:relative;
  aspect-ratio:210/297;padding:52px 56px 64px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.sheet.dark{background:var(--dark);color:#e9f2f0;border-color:#0b1f20}
.sheet.cream{background:var(--cream)}
.pf{position:absolute;left:56px;right:56px;bottom:24px;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dark .pf{color:#6f9592}
.kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--primary);font-weight:600}
.dark .kick{color:#f3cf65}
.sheet h1{font:600 64px/1 var(--disp);letter-spacing:-.02em}
.sheet h2{font:600 38px/1.05 var(--disp);letter-spacing:-.01em}
.sheet h2 em,.sheet h1 em{font-style:italic;color:var(--primary)}
.dark h1,.dark h2{color:#fff}
.dark h1 em,.dark h2 em{color:#f3cf65}
.sheet p,.sheet li{font-size:14px;line-height:1.55;color:var(--sub)}
.dark p,.dark li{color:#c9dcd9}
.sheet b{color:var(--ink)} .dark b{color:#fff}
.sheet h3{font-size:17px}
.dark h3{color:#fff}
ul.l{list-style:none;display:flex;flex-direction:column;gap:7px}
ul.l li{padding-left:15px;position:relative}
ul.l li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tl2{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.dark .tl2{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.tl2 .big{display:block;font:600 30px/1 var(--disp);color:var(--primary-d);margin-bottom:6px}
.dark .tl2 .big{color:#f3cf65}
.tl2 span{font-size:13px;line-height:1.45;color:var(--sub);display:block}
.dark .tl2 span{color:#c9dcd9}
.band{background:var(--goldsoft);border-left:4px solid var(--gold);border-radius:8px;padding:12px 14px}
.band p{color:var(--ink)}
.dark .band{background:rgba(243,207,101,.12)}
.dark .band p{color:#f3e3bb}
table.t{width:100%;min-width:0;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-d);
  border-bottom:1.5px solid var(--ink);padding:7px 6px}
table.t td{border-bottom:1px solid var(--line);padding:7px 6px;color:var(--sub);vertical-align:top;line-height:1.4;overflow-wrap:anywhere}
table.t td b{color:var(--ink)}
.dark table.t th{color:#f3cf65;border-color:#c9dcd9}
.dark table.t td{color:#c9dcd9;border-color:rgba(255,255,255,.14)}
.dark table.t td b{color:#fff}
table.t td.n{text-align:right;font-family:var(--mono);color:var(--muted);width:56px}
table.t td.us{background:#eef7f6;color:var(--primary-d)}
table.t th.us{background:var(--primary);color:#fff;border-color:var(--primary)}
.steps{display:grid;gap:9px}
.step{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.dark .step{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.step .no{font:600 26px/1 var(--disp);color:var(--gold)}
.step h3{margin-bottom:2px}
.vials{display:flex;justify-content:center;align-items:flex-end;gap:6px;flex-wrap:nowrap}
.vials .phvial{flex:none;filter:drop-shadow(0 10px 12px rgba(0,0,0,.35))}
.src{font-size:11.5px!important;line-height:1.5;color:var(--muted)!important}
/* molecular-weight bars */
.mwb{display:grid;gap:9px}
.mwb .r{display:grid;grid-template-columns:200px minmax(0,1fr) 84px;gap:12px;align-items:center;font-size:13px;color:var(--sub)}
.mwb .tr{height:16px;border-radius:999px;background:#efe3c4;overflow:hidden}
.mwb .f{height:100%;border-radius:999px;background:#bfb294}
.mwb .r.us{font-weight:700;color:var(--ink)} .mwb .r.us .f{background:linear-gradient(90deg,var(--primary),var(--primary-d))}
.mwb .v{font-family:var(--mono);font-size:12px;text-align:right}
/* product hero art */
.pack{display:flex;justify-content:center;align-items:flex-end;gap:18px}
.pack svg{filter:drop-shadow(0 16px 18px rgba(0,0,0,.35))}
/* flip book view: every page is a fixed 794 x 1123 sheet, scaled */
html.flip .book{max-width:none;display:block;padding:0}
html.flip .stage{display:flex;justify-content:center;padding:6px 10px}
html.flip .shelf{background:radial-gradient(ellipse at top,#173033,#071314 70%)}
html.flip .shelf .wrap{max-width:none;padding:0 10px}
html.flip footer{margin-top:0}
html.flip .tool .btn-o{background:transparent;color:#f3e3bb;border-color:rgba(243,227,187,.55)}
html.flip .tool .hint{color:#9fc5c1}
html.flip .ctrl{color:#f3e3bb}
html.flip .ctrl .btn{background:#f3e3bb;color:#2b2412;border:0;border-radius:999px}
html.flip .phvial{pointer-events:none}
html.flip .sheet{padding:0;aspect-ratio:auto;border-radius:0;border:0;box-shadow:none}
html.flip .pgin{position:absolute;left:0;top:0;width:794px;height:1123px;padding:52px 56px 64px;display:flex;flex-direction:column;gap:14px;
  transform:scale(var(--k,1));transform-origin:0 0}
.ctrl{display:none;justify-content:center;align-items:center;gap:14px;padding:10px 0 24px;font-family:var(--mono);font-size:13px;color:var(--sub)}
html.flip .ctrl{display:flex}
:fullscreen header.bar,:fullscreen .tool{display:none}
html.fs header.bar,html.fs .tool{display:none}
.printnote{display:none}
/* booth mode (?booth=1): laptop at a booth, visitors tap chapters; QR takes the whole book home */
html.booth header.bar,html.booth .tool,html.booth footer,html.booth .ctrl,html.booth .printnote{display:none!important}
html.booth body,html.booth .shelf{background:radial-gradient(ellipse at top,#173033,#071314 70%);min-height:100vh}
html.booth .stage{padding-top:14px}
#bbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:12px 16px 14px;background:rgba(7,19,20,.92);border-top:1px solid rgba(243,207,101,.25)}
#bbar button{font:700 15px var(--body);color:#f3e3bb;background:transparent;border:1.5px solid rgba(243,227,187,.45);border-radius:999px;padding:10px 16px;cursor:pointer;min-height:46px}
#bbar button.on{background:#f3cf65;border-color:#f3cf65;color:#2b2412}
#bbar .bfs{border-style:dashed}
#bqr{position:fixed;right:18px;top:18px;z-index:50;background:#fff;border-radius:16px;padding:12px 12px 10px;width:150px;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.4)}
#bqr div svg{width:100%;height:auto;display:block}
#bqr span{display:block;font:800 13px/1.25 var(--body);color:#05656b;margin-top:6px}
.barr{position:fixed;top:50%;transform:translateY(-50%);z-index:40;width:64px;height:64px;border-radius:50%;border:0;background:rgba(243,207,101,.9);color:#2b2412;font:800 30px var(--body);cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.4)}
#bl{left:16px} #br{right:16px}
#bstart{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(7,19,20,.82);color:#f3e3bb;text-align:center;cursor:pointer;padding:20px}
#bstart b{font:600 clamp(34px,5vw,64px)/1.05 var(--disp);color:#fff}
#bstart span{font:600 clamp(16px,2vw,22px) var(--body)}
#bstart i{font-style:normal;margin-top:10px;background:#f3cf65;color:#2b2412;border-radius:999px;padding:16px 34px;font:800 20px var(--body)}
@media(max-width:900px){#bqr{width:104px;padding:8px}#bqr span{font-size:11px}.barr{width:48px;height:48px;font-size:22px}}
/* phones in scroll view */
html.narrow .book{gap:20px;padding-top:10px}
html.narrow .sheet{aspect-ratio:auto;padding:28px 20px 52px;border-radius:12px}
html.narrow .sheet h1{font-size:44px}
html.narrow .sheet h2{font-size:29px}
html.narrow .pf{left:20px;right:20px;bottom:18px}
html.narrow .g2{grid-template-columns:minmax(0,1fr)}
html.narrow .g3,html.narrow .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
html.narrow .tl2 .big{font-size:26px}
html.narrow table.t{table-layout:fixed;font-size:12px}
html.narrow .mwb .r{grid-template-columns:minmax(0,1fr) 70px}
html.narrow .mwb .tr{grid-column:1/-1;order:3}
@media(max-width:420px){ html.narrow .g3{grid-template-columns:minmax(0,1fr)} }
/* print: one sheet per A4 page */
@page{size:A4;margin:0}
@media print{
  html,body{background:#fff}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  header.bar,footer,.tool,.ctrl{display:none!important}
  .wrap{max-width:none;padding:0}
  .book{max-width:none;padding:0;gap:0;display:block}
  .sheet{width:210mm;height:297mm;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;break-after:page;page-break-after:always;
    padding:52px 56px 64px}
  .sheet:last-child{break-after:auto;page-break-after:auto}
  html.flip .stage{display:none}
  html.flip .printnote{display:block;padding:40px;font-size:16px}
}