/* katalogs.salons.lv — the catalogue, built from two-page spreads.
   Each theme = one spread: LEFT theme page + RIGHT product comparison.
   Type scales with the page via cqw (container-type:inline-size on every page).
   Accent azure #007DC5 (from the old Ergostate catalogue). */

:root{ --accent:#007dc5; --ink:#0e0e0e; --bg:#ffffff; --ang:20deg; --diag-top:60cqw; --zoom:1; --tile:#f2f4f6; --line:#e2e6e9;
  --callout:#5ab4e6;
  --serif:'Instrument Serif',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --serif-w:400; --sans-w:900; }
*{box-sizing:border-box;}
body{margin:0;background:#1d1f22;font-family:'Inter',sans-serif;color:#111;overflow:hidden;}

/* ---- top bar ---- */
.bar{display:none;}
.bar h1{font-size:14px;margin:0;font-weight:700;letter-spacing:.05em;}
.bar h1 b{color:var(--accent);}
.bar .count{font-family:'JetBrains Mono',monospace;font-size:12px;color:#8b8b8b;}
.bar .spacer{margin-left:auto;}
.bar .toggle{font-size:12px;color:#ddd;display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;}
.bar .nav{display:flex;gap:8px;}
.bar .nav button{font:inherit;font-size:13px;width:34px;height:30px;border:1px solid #3a3a3a;background:#222;color:#eee;border-radius:5px;cursor:pointer;}
.bar .nav button:hover{background:#2e2e2e;}
.bar .nav button:disabled{opacity:.3;cursor:default;}

/* ---- stage / viewer ---- */
.viewer{height:100vh;display:flex;align-items:safe center;justify-content:safe center;overflow:auto;}
.spread{display:flex;height:calc(86vh * var(--zoom));flex:none;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.45);}
.spread::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:8%;
  transform:translateX(-50%);pointer-events:none;z-index:6;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.06) 26%,
    rgba(0,0,0,.17) 45%,
    rgba(0,0,0,.22) 49.4%,
    rgba(255,255,255,.13) 50%,
    rgba(0,0,0,.22) 50.6%,
    rgba(0,0,0,.17) 55%,
    rgba(0,0,0,.06) 74%,
    rgba(0,0,0,0) 100%);}
.solo{height:calc(86vh * var(--zoom));flex:none;box-shadow:0 30px 80px rgba(0,0,0,.45);}
/* Full screen: the paper takes the whole screen and keeps its ratio. The two
   heights are measured by fitFull() in index.html, which knows what the dock
   and the reading bar leave over; the paper's aspect-ratio does the rest, so
   nothing is ever stretched. Out of full screen these are unset and the
   spread is 86vh tall as always. The zoom is deliberately out of it: full
   screen means full, whatever the slider was left on. */
body.fullscr .spread{height:var(--fit-sp,86vh);}
body.fullscr .solo{height:var(--fit-solo,86vh);}
body.fullscr{background:#000;}
body.fullscr .spread,body.fullscr .solo{box-shadow:none;}

/* ---- filmstrip: fluid horizontal scroll, snaps onto a page ---- */
body.strip{overscroll-behavior-x:contain;}
body.strip .viewer{
  overflow-x:hidden;overflow-y:hidden;touch-action:pan-y pinch-zoom;
  align-items:center;justify-content:flex-start;
  scrollbar-width:none;
}
body.strip .viewer::-webkit-scrollbar{display:none;}
body.strip #stage{
  display:flex;align-items:center;flex:none;
  gap:clamp(6px,1vw,18px);
  padding-inline:50vw;
}
body.strip .spread,body.strip .solo{
  opacity:.34;
  transform:scale(.9);
  transition:opacity .28s ease,transform .28s ease;
}
.noanim,.noanim *{transition:none!important;animation:none!important;}

/* page turn: copies of the old spread laid over the new one (see turnTo) */
.turn{position:fixed;z-index:60;pointer-events:none;contain:layout style;}
.turn-keep,.turn-leaf{position:absolute;top:0;}
.turn-leaf{transform-style:preserve-3d;will-change:transform;}
.turn-pane{position:absolute;left:0;top:0;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.turn-back{transform:rotateY(180deg);}
.turn-leaf:not(.turn-solo) .turn-front,.turn-back{box-shadow:0 0 24px rgba(0,0,0,.18);}
.turn-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,0) 60%);opacity:0;}
@media print{ .turn{display:none!important;} }
body.dragging-el .spread,body.dragging-el .solo,
body.dragging-el .page,body.dragging-el .page *{transition:none!important;}
.maskcv{position:fixed;z-index:141;cursor:crosshair;touch-action:none;
  outline:1px dashed rgba(0,125,197,.85);opacity:0;}
.maskview{position:fixed;z-index:140;pointer-events:none;}
body.masking .dock{opacity:1;}
body.masking .viewer{cursor:crosshair;}
body.masking .sel-node{outline:0!important;}
body.masking .sel-corners::after{display:none!important;}
.save.on{background:var(--accent);color:#fff;border-color:var(--accent);}
@media print{ .maskcv{display:none!important;} }
/* one spread at a time: the neighbours keep their place in the strip, unseen */
@media screen{ body.strip .spread:not(.live),body.strip .solo:not(.live){visibility:hidden;} }
body.strip .spread.live,body.strip .solo.live{will-change:opacity,transform;}
body.strip .spread.live,body.strip .solo.live{opacity:1;transform:scale(1);}
.page{height:100%;aspect-ratio:var(--page-ar,210/297);background:var(--bg);color:var(--ink);container-type:inline-size;position:relative;overflow:hidden;font-family:var(--sans);}

/* ---- dot navigation ---- */
.dots{position:fixed;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:9px;z-index:20;}
.dots .dot{width:9px;height:9px;border-radius:50%;background:#4a4d52;cursor:pointer;transition:transform .12s;}
.dots .dot:hover{transform:scale(1.25);}
.dots .dot.on{background:var(--accent);}
/* the reading bar: where you are in the book and how far the book has come */
.bookbar{position:fixed;top:12px;left:0;right:0;z-index:20;pointer-events:none;
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:0 24px;
  font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9a9da2;}
.bookbar b{color:#e6e7e9;font-weight:400;}
.bookbar .bb-mid{display:flex;align-items:center;gap:9px;}
.bookbar .bb-chip{width:9px;height:9px;flex:none;background:var(--chap,transparent);}
.bookbar .bb-todo{color:#e8b71a;}
body.dock-on .bookbar{right:var(--dock-w);padding-left:620px;}
body.stack .bookbar{display:none;}
@media print{ .bookbar{display:none!important;} }
/* Print spread lives in the reading bar, so it is there with the tools hidden */
.bookbar .bb-print{pointer-events:auto;margin-left:14px;padding:4px 9px;border:1px solid #3a3d42;
  border-radius:4px;background:#17191c;color:#e6e7e9;font:inherit;letter-spacing:inherit;
  text-transform:inherit;cursor:pointer;display:inline-block;line-height:1;}
.bookbar .bb-print:hover{border-color:#007dc5;color:#fff;}
.bookbar .bb-print:disabled{opacity:.6;cursor:wait;}
/* the page-turn arrows, beside a click on the paper (see turnAim in index.html) */
.bookbar .bb-turn{margin-left:6px;padding:4px 8px;}
.bookbar .bb-turn:first-of-type{margin-left:14px;}
.bookbar .bb-turn:disabled{opacity:.3;cursor:default;}
/* Variants: the chips along the bottom, one per version of this spread.
   Authoring only — a hosted reader has no dock and no chips (vars.js). */
.varbar{position:fixed;bottom:14px;left:0;right:0;z-index:20;pointer-events:none;
  display:flex;justify-content:center;align-items:center;gap:7px;padding:0 24px;
  font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9a9da2;}
body.dock-on .varbar{right:var(--dock-w);}
body.stack .varbar,body.reader .varbar{display:none;}
@media print{ .varbar{display:none!important;} }
.varbar .vb-lab{margin-right:5px;color:#6d7176;}
.varbar .vb-chip{pointer-events:auto;padding:5px 11px;border:1px solid #3a3d42;border-radius:4px;
  background:#17191c;color:#e6e7e9;font:inherit;letter-spacing:inherit;text-transform:inherit;
  cursor:pointer;line-height:1;display:inline-flex;align-items:baseline;gap:7px;}
.varbar .vb-chip:hover{border-color:#007dc5;color:#fff;}
.varbar .vb-chip.on{border-color:#007dc5;background:#007dc5;color:#fff;}
.varbar .vb-chip .vb-name{opacity:.72;text-transform:none;letter-spacing:.04em;}
.varbar .vb-add,.varbar .vb-x{padding:5px 9px;color:#9a9da2;}
.varbar .vb-x:hover{border-color:#b3453c;color:#e78b83;}
/* the browser's own landscape print: one sheet per spread, the pages side by side */
@media print{
  body.print-one.print-landscape .spread.print-me,body.print-one.print-landscape .solo.print-me{display:flex!important;
    justify-content:center;width:calc(2 * var(--print-w,210mm))!important;
    height:var(--print-h,297mm)!important;overflow:hidden;
    break-after:page;page-break-after:always;break-inside:avoid;}
  body.print-one.print-landscape .spread.print-me.print-last,body.print-one.print-landscape .solo.print-me.print-last{
    break-after:auto;page-break-after:auto;}
  body.print-one.print-landscape .page{flex:none;margin:0!important;break-after:auto!important;page-break-after:auto!important;}
}
@media (max-width:760px){ .bookbar{font-size:9px;letter-spacing:.08em;padding:0 10px;} .bookbar .bb-title{display:none;} }
.lbl{position:fixed;bottom:32px;left:0;right:0;text-align:center;color:#9a9da2;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;z-index:20;pointer-events:none;}

/* ================= COVER (title page) ================= */
.cov-brand{position:absolute;top:7cqw;left:7cqw;font-family:var(--sans);font-weight:400;font-size:2.3cqw;letter-spacing:.34em;text-transform:uppercase;opacity:.7;}
.cov-tag{position:absolute;top:7cqw;right:7cqw;font-family:var(--sans);font-weight:400;font-size:2.3cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
.cov-frame{position:absolute;left:8cqw;right:8cqw;top:18cqw;height:52cqw;border:0.45cqw solid var(--ink);pointer-events:none;}
.cov-tile{position:absolute;left:11cqw;right:11cqw;top:21cqw;height:46cqw;background:var(--tile);pointer-events:none;}
.cov-hero{position:absolute;left:11cqw;right:11cqw;top:21cqw;height:46cqw;display:flex;align-items:center;justify-content:center;}
.cov-hero img{width:82%;height:82%;object-fit:contain;}
.cov-diag{position:absolute;left:-16cqw;top:var(--diag-top);width:132cqw;height:0.62cqw;background:var(--accent);transform-origin:50% 50%;transform:rotate(calc(-1*var(--ang)));}
.cov-sq{position:absolute;right:11cqw;top:69cqw;width:6.5cqw;height:6.5cqw;background:var(--accent);}
.cov-kick{position:absolute;left:7cqw;right:7cqw;bottom:43cqw;font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:2.4cqw;line-height:1.7;opacity:.72;}
.cov-title{position:absolute;left:7cqw;right:7cqw;bottom:13cqw;margin:0;font-weight:var(--sans-w);letter-spacing:-.02em;line-height:.86;font-size:15.5cqw;}
.cov-foot{position:absolute;left:7cqw;right:7cqw;bottom:6cqw;display:flex;justify-content:space-between;font-family:var(--sans);font-weight:400;font-size:2cqw;letter-spacing:.05em;opacity:.6;}

/* ================= LEFT theme page ================= */
.l-brand{position:absolute;top:7cqw;left:7cqw;font-family:var(--sans);font-weight:400;font-size:2.2cqw;letter-spacing:.34em;text-transform:uppercase;opacity:.65;}
.l-num{position:absolute;top:5.5cqw;right:7cqw;font-weight:800;font-size:9cqw;line-height:.8;color:var(--accent);}
.l-frame{position:absolute;left:8cqw;right:14cqw;top:21cqw;height:46cqw;border:0.45cqw solid var(--ink);pointer-events:none;}
.l-tile{position:absolute;left:11cqw;right:11cqw;top:24cqw;height:46cqw;background:var(--tile);pointer-events:none;}
.l-herowrap{position:absolute;left:11cqw;right:11cqw;top:24cqw;height:46cqw;display:flex;align-items:center;justify-content:center;}
.l-herowrap img{width:80%;height:80%;object-fit:contain;}
.l-diag{position:absolute;left:-16cqw;top:var(--diag-top);width:132cqw;height:0.6cqw;background:var(--accent);transform-origin:50% 50%;transform:rotate(calc(-1*var(--ang)));}
.l-sq{position:absolute;right:11cqw;top:67cqw;width:6cqw;height:6cqw;background:var(--accent);}
.l-kick{position:absolute;left:7cqw;right:7cqw;bottom:42cqw;font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.12em;font-size:2.3cqw;opacity:.7;}
.l-title{position:absolute;left:7cqw;right:7cqw;bottom:11cqw;margin:0;font-weight:var(--sans-w);letter-spacing:-.02em;line-height:.86;font-size:15cqw;}
.l-foot{position:absolute;left:7cqw;bottom:6cqw;font-family:var(--sans);font-weight:400;font-size:2cqw;letter-spacing:.06em;opacity:.55;}

/* ================= RIGHT product comparison ================= */
.r-head{position:absolute;top:7cqw;left:7cqw;right:7cqw;display:flex;align-items:baseline;justify-content:space-between;border-bottom:0.3cqw solid var(--ink);padding-bottom:2.4cqw;}
.r-head .idx{font-family:var(--sans);font-weight:400;font-size:2.3cqw;letter-spacing:.22em;text-transform:uppercase;opacity:.7;}
.r-head .ttl{font-weight:800;font-size:4.4cqw;letter-spacing:-.01em;}
.r-foot{position:absolute;left:7cqw;right:7cqw;bottom:5cqw;display:flex;justify-content:space-between;font-family:var(--sans);font-weight:400;font-size:2cqw;letter-spacing:.06em;opacity:.55;border-top:0.22cqw solid var(--line);padding-top:2cqw;}

/* grid mode (4–6 small products) */
.r-grid{position:absolute;top:18cqw;left:7cqw;right:7cqw;bottom:9cqw;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;}
.r-grid .cardm{position:relative;display:flex;flex-direction:column;padding:3cqw 3.4cqw;border-top:0.22cqw solid var(--line);min-height:0;overflow:hidden;}
.r-grid .cardm:nth-child(odd){border-right:0.22cqw solid var(--line);}
.r-grid .cardm:nth-child(1),.r-grid .cardm:nth-child(2){border-top:0;}
.cardm .pimg{flex:1;background:var(--tile);display:flex;align-items:center;justify-content:center;min-height:0;}
.cardm .pimg img{width:84%;height:84%;object-fit:contain;}
.cardm .pbot{margin-top:2.2cqw;display:flex;align-items:flex-end;justify-content:space-between;gap:2cqw;}
.cardm .pname{font-weight:700;font-size:3.2cqw;letter-spacing:-.01em;display:flex;align-items:center;gap:1.4cqw;}
.cardm .pname::before{content:'';width:1.7cqw;height:1.7cqw;background:var(--accent);flex:none;}
.cardm .pspec{margin-top:1cqw;font-family:var(--sans);font-weight:400;font-size:2cqw;letter-spacing:.05em;color:var(--accent);}

/* rows mode (2–3 wide products: keyboards, desks) */
.r-rows{position:absolute;top:18cqw;left:7cqw;right:7cqw;bottom:9cqw;display:grid;grid-auto-rows:1fr;}
.r-rows .cardr{position:relative;display:flex;align-items:center;gap:4cqw;padding:3.4cqw 0;border-top:0.22cqw solid var(--line);min-height:0;overflow:hidden;}
.r-rows .cardr:first-child{border-top:0;}
.cardr .pimg{width:46%;height:100%;background:var(--tile);display:flex;align-items:center;justify-content:center;flex:none;}
.cardr .pimg img{width:88%;height:88%;object-fit:contain;}
.cardr .pinfo{flex:1;min-width:0;}
.cardr .pname{font-weight:700;font-size:4cqw;letter-spacing:-.01em;display:flex;align-items:center;gap:1.8cqw;}
.cardr .pname::before{content:'';width:2cqw;height:2cqw;background:var(--accent);flex:none;}
.cardr .pspec{margin-top:1.4cqw;font-family:var(--sans);font-weight:400;font-size:2.2cqw;letter-spacing:.05em;color:var(--accent);}

/* QR (vector, print-sharp, toggled) */
.qrbox{flex:none;width:12cqw;height:12cqw;display:none;}
.cardr .qrbox{width:13cqw;height:13cqw;align-self:flex-end;}
.qrbox svg{width:100%;height:100%;display:block;}
body.qr-on .qrbox{display:block;}

/* one-row title (auto-fit SVG) — swappable with the split <br> version */
.l-title svg,.cov-title svg{display:block;width:100%;height:auto;overflow:visible;}
.l-title text,.cov-title text{font-family:var(--sans);font-weight:var(--sans-w);letter-spacing:-0.02em;}

/* ---- top-bar extra buttons ---- */
.bar .tbtn{font:inherit;font-size:12px;padding:6px 12px;border:1px solid #3a3a3a;background:#222;color:#eee;border-radius:5px;cursor:pointer;}
.bar .tbtn:hover{background:#2e2e2e;}
.bar .barseg{display:flex;gap:0;border:1px solid #3a3a3a;border-radius:5px;overflow:hidden;}
.bar .barseg button{font:inherit;font-size:11px;padding:6px 10px;border:0;border-right:1px solid #3a3a3a;background:#222;color:#aaa;cursor:pointer;}
.bar .barseg button:last-child{border-right:0;}
.bar .barseg button.on{background:#007dc5;color:#fff;}
.bar .barseg button:hover:not(.on){background:#2e2e2e;color:#eee;}

/* ================= INSPECTOR DOCK ================= */
:root{ --dock-w:326px; }
.dock{
  position:fixed;top:0;right:0;bottom:0;width:var(--dock-w);z-index:60;
  background:#161616;border-left:1px solid #2b2b2b;color:#eee;
  display:grid;grid-template-rows:var(--tree-h,32%) auto minmax(0,1fr) auto;
}
.dock-grip{position:absolute;left:-4px;top:0;bottom:0;width:9px;cursor:col-resize;z-index:2;}
.dock-grip:hover,body.resizing .dock-grip{background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.55;}
body.resizing{user-select:none;cursor:col-resize;}

.dock-tools{padding:10px 12px;border-bottom:1px solid #262626;background:#131313;display:flex;flex-direction:column;gap:7px;}
.tools-row{display:flex;align-items:center;gap:7px;}
.tools-row .grow{flex:1;}
.tools-row .mid{text-align:center;}
.tools-row .chk{flex:1;font-size:11.5px;}
.hud{position:fixed;top:10px;left:10px;z-index:70;display:flex;align-items:center;gap:6px;
  padding:6px 8px;background:rgba(16,16,16,.82);border:1px solid #262626;border-radius:8px;
  backdrop-filter:blur(6px);}
.hud .tbtn{height:26px;min-width:26px;padding:0 8px;font-size:11.5px;}
.hud .seg button{padding:4px 8px;font-size:11px;}
.hud .count{font-family:'JetBrains Mono',monospace;font-size:11px;color:#9a9a9a;white-space:nowrap;}
.hud .hudsep{width:1px;height:18px;background:#2e2e2e;}
.hud .hudgrip{cursor:grab;color:#4d4d4d;font-size:12px;letter-spacing:-3px;
  user-select:none;padding:0 4px 0 0;line-height:1;}
.hud .hudgrip:hover{color:#8a8a8a;}
.hud.dragging{cursor:grabbing;opacity:.92;}
.hud.dragging *{cursor:grabbing;}
.hud .savestate{margin:0 0 0 2px;}
@media print{ .hud{display:none!important;} }
.tbtn.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.dock-tools .count{font-family:'JetBrains Mono',monospace;font-size:11px;color:#8b8b8b;white-space:nowrap;}
.dock-tools .nav{display:flex;gap:5px;}
.dock-tools .nav button{font:inherit;font-size:13px;width:30px;height:28px;border:1px solid #3a3a3a;background:#222;color:#eee;border-radius:5px;cursor:pointer;}
.dock-tools .nav button:hover:not(:disabled){background:#2e2e2e;}
.dock-tools .nav button:disabled{opacity:.3;cursor:default;}
.dock-tools .tbtn{font:inherit;font-size:11.5px;padding:6px 10px;border:1px solid #3a3a3a;background:#222;color:#eee;border-radius:5px;cursor:pointer;}
.dock-tools .tbtn:hover{background:#2e2e2e;}
.dock-tools .barseg{display:flex;border:1px solid #3a3a3a;border-radius:5px;overflow:hidden;}
.dock-tools .barseg button{flex:1;font:inherit;font-size:11px;padding:6px 10px;border:0;border-right:1px solid #3a3a3a;background:#222;color:#aaa;cursor:pointer;}
.dock-tools .barseg button:last-child{border-right:0;}
.dock-tools .barseg button.on{background:var(--accent);color:#fff;}
.dock-tools .barseg button:hover:not(.on){background:#2e2e2e;color:#eee;}
.barhint{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#4d4d4d;}
.dock{display:none;}
body.dock-on .dock{display:grid;}
body.dock-on .viewer{width:calc(100vw - var(--dock-w));}
body.dock-on .dots,body.dock-on .lbl{right:var(--dock-w);}
.viewer.grabbing{cursor:grabbing;}

.dock-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px 8px;border-bottom:1px solid #262626;background:#131313;}
.dock-ttl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8b8b8b;}
.dock-sub{font-family:'JetBrains Mono',monospace;font-size:10px;color:#4f7f9f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dock-split{height:9px;background:#141414;border-top:1px solid #262626;border-bottom:1px solid #262626;
  cursor:row-resize;position:relative;}
.dock-split::after{content:'';position:absolute;left:50%;top:50%;width:34px;height:2px;margin:-1px 0 0 -17px;
  background:#3a3a3a;border-radius:1px;}
.dock-split:hover::after,body.vresizing .dock-split::after{background:var(--accent);}
body.vresizing{cursor:row-resize;user-select:none;}
.insp-path{position:absolute;right:10px;bottom:4px;pointer-events:none;opacity:.6;z-index:3;}

/* ---- tree ---- */
.tree{overflow:auto;padding:6px 0 10px;}
.tree .trow{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;font-size:12px;color:#d2d2d2;cursor:pointer;user-select:none;border-left:2px solid transparent;}
.tree .trow:hover{background:#1e1e1e;}
.tree .trow.on{background:#152633;border-left-color:var(--accent);color:#fff;}
.tree .trow.off{opacity:.42;}
.tree .tw{flex:none;width:15px;height:15px;padding:0;border:0;background:none;color:#6a6a6a;font-size:9px;line-height:15px;text-align:center;cursor:pointer;transition:transform .14s;}
.tree button.tw:hover{color:#fff;}
.tree .tw.open{transform:rotate(90deg);}
.tree .tchk{flex:none;accent-color:var(--accent);margin:0;}
.tree .tnum{flex:none;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#5f5f5f;}
.tree .trow.on .tnum{color:#bfe0f5;}
.tree .tlab{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tree .tsel{flex:none;max-width:132px;font:inherit;font-size:10px;padding:2px 4px;
  border:1px solid #3a3a3a;background:#1c1c1c;color:#bdbdbd;border-radius:4px;cursor:pointer;appearance:none;}
.tree .tsel:hover{background:#262626;color:#fff;border-color:#4d4d4d;}
.tree .tkind{flex:none;font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:#565656;}

/* ---- inspector ---- */
.insp{overflow:auto;padding:5px 8px 18px;}
.insp-none{font-size:11px;color:#8b8b8b;padding:8px 0;}
.frow.wide{flex-direction:column;align-items:stretch;gap:3px;}
.frow.wide .flab{width:auto;}
.frow:has(.imgwrap),.frow:has(.fprev),.frow:has(.picklist){flex-direction:column;align-items:stretch;gap:3px;}
.frow:has(.imgwrap) .flab,.frow:has(.fprev) .flab,.frow:has(.picklist) .flab{width:auto;}
.fold{border:1px solid #2a2a2a;border-radius:4px;background:#1a1a1a;margin-bottom:4px;overflow:hidden;}
.fold>summary{list-style:none;cursor:pointer;padding:4px 7px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#9a9a9a;background:#1d1d1d;user-select:none;}
.fold>summary::-webkit-details-marker{display:none;}
.fold>summary::before{content:'▸';display:inline-block;width:11px;color:#5f5f5f;transition:transform .14s;}
.fold[open]>summary::before{transform:rotate(90deg);}
.fold>summary:hover{color:#eee;}
.fold>summary{display:flex;align-items:center;gap:6px;}
.fold>summary .fttl{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fold>summary .ftail{flex:none;display:flex;align-items:center;gap:4px;margin:0 auto;}
.fold>summary .fbtn{flex:none;width:17px;height:15px;padding:0;line-height:1;
  border:1px solid #333;border-radius:3px;background:#232323;color:#8f8f8f;
  font-size:9px;cursor:pointer;}
.fold>summary .fbtn:hover{border-color:var(--accent);color:#fff;background:#2b2b2b;}
.fold-body{padding:6px 7px 7px;display:flex;flex-direction:column;gap:5px;}

.frow{display:flex;align-items:center;gap:7px;min-height:22px;}
.flab{flex:none;width:70px;font-size:10.5px;color:#9a9a9a;display:flex;justify-content:space-between;gap:4px;}
.flab b{color:#3aa0e0;font-family:'JetBrains Mono',monospace;font-weight:600;}
.fin{flex:1;min-width:0;font:inherit;font-size:11.5px;padding:4px 6px;border:1px solid #333;background:#111;color:#eee;border-radius:4px;resize:vertical;}
.fin:focus{outline:0;border-color:var(--accent);}
.frow input[type=range]{flex:1;min-width:0;width:auto;height:14px;accent-color:var(--accent);}
.fcol{padding:0;height:22px;cursor:pointer;background:#111;}
.fprev{height:44px;background:#0d0d0d;border:1px solid #262626;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.fprev img{max-width:100%;max-height:100%;object-fit:contain;}
.chk{display:flex;align-items:center;gap:7px;font-size:11px;color:#ddd;cursor:pointer;}
.chk input{accent-color:var(--accent);}

.seg{display:flex;gap:6px;}
.seg button{flex:1;font:inherit;font-size:10.5px;padding:4px 3px;border:1px solid #3a3a3a;background:#222;color:#ccc;border-radius:4px;cursor:pointer;}
.seg button.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.seg button:disabled{opacity:.28;cursor:default;}

.picklist{display:flex;flex-direction:column;gap:5px;}
.picklist .prow{display:flex;gap:4px;}
.picklist .tpick{flex:1;min-width:0;display:flex;gap:7px;align-items:baseline;font:inherit;font-size:11px;padding:4px 7px;border:1px solid #3a3a3a;background:#222;color:#ccc;border-radius:4px;cursor:pointer;text-align:left;line-height:1.25;}
.picklist .tpick.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.picklist .tnum{font-family:'JetBrains Mono',monospace;font-size:10px;color:#5f5f5f;flex:none;}
.picklist .tpick.on .tnum{color:#bfe0f5;}
.picklist .pop{flex:none;width:28px;font:inherit;font-size:12px;border:1px solid #3a3a3a;background:#222;color:#9a9a9a;border-radius:5px;cursor:pointer;}
.picklist .pop:hover{background:#2e2e2e;color:#fff;}

.tform{margin-top:8px;padding:10px;border:1px dashed #3a3a3a;border-radius:6px;display:flex;flex-direction:column;gap:6px;}
.tform-head{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#5c5c5c;}
.tform input{font:inherit;font-size:12px;padding:7px 8px;border:1px solid #333;background:#111;color:#eee;border-radius:5px;width:100%;}
.tform input:focus{outline:0;border-color:var(--accent);}
.tform input::placeholder{color:#5c5c5c;}
.tform-ops{display:flex;gap:6px;}
.tform-ops button{flex:1;font:inherit;font-size:12px;padding:7px;border-radius:5px;cursor:pointer;border:1px solid #3a3a3a;}
.tform-ops .tf-main{background:var(--accent);color:#fff;border-color:var(--accent);}
.tform-ops .tf-alt{background:#222;color:#bbb;}

.insp .save{margin-top:3px;width:100%;font:inherit;font-size:11px;padding:5px;background:#2a2a2a;color:#ddd;border:1px solid #3a3a3a;border-radius:4px;cursor:pointer;}
.insp .save:hover{background:#333;color:#fff;}
.insp .save.dirty{background:var(--accent);color:#fff;border-color:var(--accent);}
.insp .msg{display:block;font-size:10px;color:#8b8b8b;margin-top:3px;text-align:center;min-height:12px;}


/* ================= SPREAD TEMPLATE · full-bleed theme ================= */
.page.theme-strip{--bg:#0e0e0e;--ink:#ffffff;}
.ls-hero{position:absolute;inset:0;overflow:hidden;}
.ls-hero img{width:100%;height:100%;object-fit:cover;display:block;}
.ls-hero.fit-contain img{object-fit:contain;background:#0e0e0e;}
.ls-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,10,14,.6) 0%,rgba(8,10,14,.04) 30%,rgba(8,10,14,.7) 70%,rgba(8,10,14,.95) 100%);}
.ls-brand{position:absolute;top:7cqw;left:7cqw;font-family:var(--sans);font-weight:400;
  font-size:2.1cqw;letter-spacing:.4em;text-transform:uppercase;opacity:.85;}
.ls-num{position:absolute;top:5.5cqw;right:7cqw;font-weight:var(--sans-w);font-size:9cqw;
  line-height:.8;color:var(--accent);}
.ls-block{position:absolute;left:7cqw;width:86cqw;bottom:13cqw;}
.ls-rule{display:block;width:14cqw;height:0.26cqw;background:var(--accent);margin-bottom:3cqw;}
.ls-title{margin:0;font-family:var(--sans);font-weight:var(--sans-w);color:var(--ink);letter-spacing:-.025em;}
.ls-w{display:block;}
.ls-w+.ls-w{margin-top:var(--wgap,0);}
.ls-title svg{display:block;width:100%;height:auto;overflow:visible;}
.ls-title text{font-family:inherit;font-weight:inherit;fill:currentColor;letter-spacing:inherit;}
.ls-kick{margin-top:2.6cqw;font-family:var(--sans);font-weight:400;font-size:2.2cqw;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.6;opacity:.8;}
.ls-foot{position:absolute;left:7cqw;bottom:6cqw;font-family:var(--sans);font-weight:400;
  font-size:2cqw;letter-spacing:.06em;opacity:.55;}

/* ================= SPREAD TEMPLATE · index list ================= */
.page.theme-index{--bg:#ffffff;}
.li-head{position:absolute;left:7cqw;right:7cqw;top:7cqw;display:flex;justify-content:space-between;
  align-items:baseline;font-family:var(--sans);font-weight:400;font-size:2.1cqw;
  letter-spacing:.34em;text-transform:uppercase;opacity:.7;}
.li-head .li-num{font-family:inherit;font-size:2.1cqw;color:var(--accent);letter-spacing:.2em;}
.li-rule{position:absolute;left:7cqw;right:7cqw;top:13cqw;height:0.26cqw;background:var(--ink);}
.li-block{position:absolute;right:7cqw;top:17cqw;width:12cqw;height:12cqw;background:var(--accent);}
.li-title{position:absolute;left:7cqw;width:62cqw;top:18cqw;margin:0;font-family:var(--sans);font-weight:var(--sans-w);color:var(--ink);letter-spacing:-.025em;}
.li-w{display:block;}
.li-w+.li-w{margin-top:var(--wgap,0);}
.li-title svg{display:block;width:100%;height:auto;overflow:visible;}
.li-title text{font-family:inherit;font-weight:inherit;fill:currentColor;letter-spacing:inherit;}
.li-kick{position:absolute;left:7cqw;right:7cqw;top:46cqw;font-family:var(--sans);
  font-size:2.2cqw;font-weight:400;line-height:1.5;opacity:.8;}
.li-list{position:absolute;left:7cqw;right:7cqw;top:60cqw;bottom:12cqw;overflow:hidden;}
.li-row{display:flex;align-items:baseline;gap:2.4cqw;padding:1.7cqw 0;border-bottom:0.1cqw solid var(--line);}
.li-n{flex:none;width:5cqw;font-family:var(--sans);font-weight:400;font-size:1.9cqw;color:var(--accent);}
.li-nm{flex:1;font-size:2.9cqw;font-weight:600;letter-spacing:-.01em;}
.li-sp{flex:none;font-family:var(--sans);font-weight:400;font-size:1.75cqw;
  letter-spacing:.05em;color:#777;}
.li-foot{position:absolute;left:7cqw;bottom:6cqw;font-family:var(--sans);font-weight:400;
  font-size:2cqw;letter-spacing:.06em;opacity:.55;}

/* ================= SPREAD TEMPLATE · products on both pages ================= */
.r-rows-full{top:7cqw!important;}

/* ================= COVER TEMPLATE · horizontal image ================= */
.page.cover-hcenter{--bg:#f4f3f1;}
.hc-head{position:absolute;left:7cqw;right:7cqw;top:7cqw;display:flex;justify-content:space-between;
  font-family:var(--sans);font-weight:400;font-size:2cqw;letter-spacing:.34em;text-transform:uppercase;}
.hc-head .hc-brand{opacity:.65;}
.hc-head .hc-tag{color:var(--accent);letter-spacing:.22em;}
.hc-mid{position:absolute;left:9cqw;right:9cqw;top:0;bottom:0;text-align:center;}
.hc-hero{position:absolute;left:0;right:0;top:24cqw;height:42cqw;
  display:flex;align-items:center;justify-content:center;}
.hc-hero img{display:block;flex:none;}
.hc-hero.fit-contain{mix-blend-mode:multiply;}
.hc-hero.fit-contain img{height:100%;width:auto;max-width:none;max-height:none;object-fit:contain;}
.hc-hero.fit-cover img{width:100%;height:100%;object-fit:cover;}
.hc-title{position:absolute;left:0;right:0;top:72cqw;margin:0 auto;width:72cqw;
  font-family:var(--serif);font-weight:var(--serif-w);color:var(--ink);letter-spacing:.01em;}
.hc-title svg{display:block;width:100%;height:auto;overflow:visible;}
.hc-title text{font-family:inherit;font-weight:inherit;fill:currentColor;letter-spacing:inherit;}
.hc-rule{position:absolute;left:0;right:0;top:90cqw;display:block;width:10cqw;height:0.14cqw;
  background:var(--ink);opacity:.35;margin:0 auto;}
.hc-year{position:absolute;left:0;right:0;top:95cqw;font-family:var(--sans);font-weight:400;
  font-size:2cqw;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);}
.hc-kick{position:absolute;left:0;right:0;top:102cqw;margin:0 auto;max-width:64cqw;
  font-family:var(--sans);font-size:2.2cqw;font-weight:400;line-height:1.5;opacity:.78;}
.hc-foot{position:absolute;left:7cqw;bottom:6cqw;font-family:var(--sans);font-weight:400;
  font-size:1.9cqw;letter-spacing:.06em;opacity:.5;}

/* ================= COVER TEMPLATE · back cover ================= */
.page.cover-back{--bg:#f4f3f1;}
.bk-hero{position:absolute;left:14cqw;right:14cqw;top:22cqw;height:44cqw;
  display:flex;align-items:center;justify-content:center;}
.bk-hero img{display:block;flex:none;}
.bk-hero.fit-contain{mix-blend-mode:multiply;}
.bk-hero.fit-contain img{height:100%;width:auto;max-width:100%;object-fit:contain;}
.bk-hero.fit-cover img{width:100%;height:100%;object-fit:cover;}
.page.dark-paper .bk-hero{mix-blend-mode:normal;}
.bk-title{position:absolute;left:12cqw;right:12cqw;top:76cqw;margin:0;text-align:center;
  font-family:var(--serif);font-weight:var(--serif-w);font-size:6.4cqw;line-height:1.12;color:var(--ink);}
.bk-kick{position:absolute;left:18cqw;right:18cqw;top:97cqw;text-align:center;
  font-family:var(--sans);font-size:2.2cqw;font-weight:400;line-height:1.5;opacity:.72;}
.bk-rule{position:absolute;left:0;right:0;top:112cqw;display:block;width:10cqw;height:0.14cqw;
  background:var(--ink);opacity:.35;margin:0 auto;}
.bk-contact{position:absolute;left:7cqw;bottom:12cqw;font-family:var(--sans);font-weight:400;
  font-size:2.1cqw;letter-spacing:.06em;line-height:1.75;}
.bk-qr{position:absolute;right:7cqw;bottom:12cqw;width:14cqw;height:14cqw;}
.bk-qr svg{display:block;width:100%;height:100%;}
body:not(.qr-on) .bk-qr{visibility:hidden;}
.bk-foot{position:absolute;left:7cqw;right:7cqw;bottom:6cqw;display:flex;justify-content:space-between;
  font-family:var(--sans);font-weight:400;font-size:1.9cqw;letter-spacing:.06em;opacity:.5;}

/* ================= COVER TEMPLATE · full-bleed poster ================= */
.page.cover-poster{--bg:#0e0e0e;--ink:#ffffff;}
.po-hero{position:absolute;inset:0;overflow:hidden;}
.po-hero img{width:100%;height:100%;object-fit:cover;display:block;}
.po-hero.fit-contain img{object-fit:contain;background:#0e0e0e;}
.po-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,10,14,.62) 0%,rgba(8,10,14,.06) 34%,rgba(8,10,14,.72) 74%,rgba(8,10,14,.94) 100%);}
.po-brand{position:absolute;top:7cqw;left:7cqw;font-family:var(--sans);font-weight:400;
  font-size:2.2cqw;letter-spacing:.4em;text-transform:uppercase;opacity:.85;}
.po-tag{position:absolute;top:7cqw;right:7cqw;font-family:var(--sans);font-weight:400;
  font-size:2.2cqw;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);}
.po-corner{position:absolute;top:5cqw;left:5cqw;width:9cqw;height:9cqw;
  border-top:0.3cqw solid rgba(255,255,255,.55);border-left:0.3cqw solid rgba(255,255,255,.55);pointer-events:none;}
.po-block{position:absolute;left:7cqw;width:86cqw;bottom:14cqw;}
.po-rule{display:block;width:16cqw;height:0.28cqw;background:var(--accent);margin-bottom:3.4cqw;}
.po-title{margin:0;width:86cqw;font-family:var(--sans);font-weight:var(--sans-w);color:var(--ink);letter-spacing:-.02em;}
.po-title svg{display:block;width:100%;height:auto;overflow:visible;}
.po-title text{font-family:inherit;font-weight:inherit;fill:currentColor;letter-spacing:inherit;}
.po-sub{margin-top:2.6cqw;font-family:var(--serif);font-size:4cqw;font-weight:var(--serif-w);
  letter-spacing:.04em;opacity:.94;}
.po-pills{margin-top:2.2cqw;font-family:var(--sans);font-weight:400;font-size:2cqw;
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent);}
.po-foot{position:absolute;left:7cqw;right:7cqw;bottom:6cqw;display:flex;justify-content:space-between;
  font-family:var(--sans);font-weight:400;font-size:2cqw;letter-spacing:.06em;opacity:.7;}

/* ================= COVER TEMPLATE · half and half ================= */
.page.cover-split{--bg:#ffffff;}
.sp-img{position:absolute;left:0;top:0;bottom:0;width:44cqw;overflow:hidden;background:var(--tile);}
.sp-img img{width:100%;height:100%;object-fit:cover;display:block;}
.sp-img.fit-contain img{object-fit:contain;padding:6cqw;box-sizing:border-box;}
.sp-div{position:absolute;left:44cqw;top:0;bottom:0;width:0.22cqw;background:var(--ink);opacity:.16;}
.sp-right{position:absolute;left:52cqw;right:7cqw;top:12cqw;}
.sp-brand{font-family:var(--sans);font-weight:400;font-size:1.9cqw;letter-spacing:.4em;
  text-transform:uppercase;opacity:.6;}
.sp-kick{margin-top:3cqw;font-family:var(--sans);font-size:2.2cqw;font-weight:400;
  line-height:1.5;opacity:.85;}
.sp-rule{display:block;width:9cqw;height:0.2cqw;background:var(--accent);margin:3.6cqw 0;}
.sp-title{margin:0;font-family:var(--serif);font-weight:var(--serif-w);color:var(--ink);letter-spacing:.01em;}
.sp-w{display:block;}
.sp-w+.sp-w{margin-top:var(--wgap,0.6cqw);}
.sp-title svg{display:block;width:100%;height:auto;overflow:visible;}
.sp-title text{font-family:inherit;font-weight:inherit;fill:currentColor;letter-spacing:inherit;}
.sp-sub{margin-top:3cqw;font-family:var(--sans);font-weight:400;font-size:2cqw;
  letter-spacing:.28em;text-transform:uppercase;opacity:.62;}
.sp-dot{display:block;width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--accent);margin:3.4cqw 0;}
.sp-pills{font-family:var(--sans);font-size:1.82cqw;line-height:1.5;opacity:.75;font-weight:400;}
.sp-year{margin-top:4cqw;font-family:var(--sans);font-weight:400;font-size:1.9cqw;
  letter-spacing:.3em;text-transform:uppercase;color:var(--accent);}
.sp-foot{position:absolute;left:52cqw;bottom:6cqw;font-family:var(--sans);font-weight:400;
  font-size:1.9cqw;letter-spacing:.06em;opacity:.5;}

/* ================= COVER TEMPLATE · swiss grid ================= */
.page.cover-swiss{--bg:#ffffff;}
.sw-grid{position:absolute;left:7cqw;right:7cqw;top:0;bottom:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--line) 0 0.1cqw,transparent 0.1cqw 21.5cqw);opacity:.85;}
.sw-head{position:absolute;left:7cqw;right:7cqw;top:7cqw;display:flex;justify-content:space-between;
  font-family:var(--sans);font-weight:400;font-size:2cqw;letter-spacing:.28em;text-transform:uppercase;}
.sw-head .sw-tag{color:var(--accent);letter-spacing:.2em;}
.sw-rule1{position:absolute;left:7cqw;right:7cqw;top:12cqw;height:0.28cqw;background:var(--ink);}
.sw-hero{position:absolute;left:29cqw;right:7cqw;top:17cqw;height:44cqw;overflow:hidden;background:var(--tile);}
.sw-hero img{width:100%;height:100%;object-fit:cover;display:block;}
.sw-hero.fit-contain img{object-fit:contain;padding:3cqw;box-sizing:border-box;}
.sw-block{position:absolute;left:7cqw;top:17cqw;width:19.5cqw;height:19.5cqw;background:var(--accent);}
.sw-kick{position:absolute;left:7cqw;top:39cqw;width:19.5cqw;font-family:var(--sans);font-weight:400;
  font-size:1.85cqw;line-height:1.7;letter-spacing:.04em;opacity:.72;}
.sw-title{position:absolute;left:7cqw;width:86cqw;top:60cqw;margin:0;font-family:var(--sans);font-weight:var(--sans-w);color:var(--ink);letter-spacing:-.025em;}
.sw-w{display:block;}
.sw-w+.sw-w{margin-top:var(--wgap,0);}
.sw-title svg{display:block;width:100%;height:auto;overflow:visible;}
.sw-title text{font-family:inherit;font-weight:inherit;fill:currentColor;letter-spacing:inherit;}
.sw-sub{position:absolute;left:7cqw;right:7cqw;bottom:16cqw;font-family:var(--serif);
  font-size:3.4cqw;font-weight:var(--serif-w);letter-spacing:.03em;opacity:.8;}
.sw-rule2{position:absolute;left:7cqw;right:7cqw;bottom:12cqw;height:0.1cqw;background:var(--line);}
.sw-foot{position:absolute;left:7cqw;right:7cqw;bottom:6cqw;display:flex;justify-content:space-between;
  font-family:var(--sans);font-weight:400;font-size:1.9cqw;letter-spacing:.06em;opacity:.55;}

/* ================= COVER TEMPLATE · typographic ================= */
.page.cover-type{--bg:#f4f2ee;}
.ty-bar{position:absolute;left:0;top:0;bottom:0;width:3.2cqw;background:var(--accent);}
.ty-head{position:absolute;left:11cqw;right:7cqw;top:7cqw;display:flex;justify-content:space-between;
  font-family:var(--sans);font-weight:400;font-size:2cqw;letter-spacing:.34em;text-transform:uppercase;opacity:.72;}
.ty-rule1{position:absolute;left:11cqw;right:7cqw;top:13cqw;height:0.1cqw;background:var(--ink);opacity:.3;}
.ty-title{position:absolute;left:11cqw;width:82cqw;top:20cqw;margin:0;font-family:var(--serif);font-weight:var(--serif-w);color:var(--ink);letter-spacing:.005em;}
.ty-w{display:block;}
.ty-w+.ty-w{margin-top:var(--wgap,0);}
.ty-title svg{display:block;width:100%;height:auto;overflow:visible;}
.ty-title text{font-family:inherit;font-weight:inherit;fill:currentColor;letter-spacing:inherit;}
.ty-rule2{position:absolute;left:11cqw;right:7cqw;top:58cqw;height:0.1cqw;background:var(--ink);opacity:.3;}
.ty-kick{position:absolute;left:11cqw;right:34cqw;top:63cqw;font-family:var(--sans);
  font-size:2.2cqw;font-weight:400;line-height:1.5;opacity:.85;}
.ty-block{position:absolute;right:7cqw;top:63cqw;width:14cqw;height:14cqw;border:0.3cqw solid var(--accent);}
.ty-sub{position:absolute;left:11cqw;right:7cqw;bottom:18cqw;font-family:var(--sans);font-weight:400;
  font-size:2.1cqw;letter-spacing:.3em;text-transform:uppercase;opacity:.6;}
.ty-year{position:absolute;left:11cqw;bottom:12cqw;font-family:var(--sans);font-weight:400;
  font-size:2cqw;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);}
.ty-foot{position:absolute;left:11cqw;bottom:6cqw;font-family:var(--sans);font-weight:400;
  font-size:1.9cqw;letter-spacing:.06em;opacity:.5;}

/* ---- top / bottom image slots ---- */
.pl-topimg,.pl-botimg,.cov-topimg,.cov-botimg{
  position:absolute;left:9cqw;right:9cqw;z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.pl-topimg img,.pl-botimg img,.cov-topimg img,.cov-botimg img{display:block;flex:none;}
.pl-topimg.fit-contain img,.pl-botimg.fit-contain img,
.cov-topimg.fit-contain img,.cov-botimg.fit-contain img{height:100%;width:auto;max-width:none;max-height:none;object-fit:contain;}
.pl-topimg.fit-cover img,.pl-botimg.fit-cover img,
.cov-topimg.fit-cover img,.cov-botimg.fit-cover img{width:100%;height:100%;object-fit:cover;}
.pl-topimg{top:7cqw;}
.pl-botimg{bottom:33cqw;}
.cov-topimg{left:7cqw;right:7cqw;top:7cqw;}
.cov-botimg{left:7cqw;right:7cqw;bottom:11cqw;}

/* ---- diagonal word cut (vesica) ---- */
.vp{position:absolute;inset:0;pointer-events:none;--vp-dir:calc(180deg - var(--ang));}
.vp-layer{position:absolute;inset:0;pointer-events:none;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;}
.vp-w{position:absolute;left:7cqw;width:max-content;max-width:86cqw;margin:0;font-weight:var(--sans-w);
  letter-spacing:-.02em;line-height:1;font-size:var(--vp-size);white-space:nowrap;color:var(--ink);
  pointer-events:auto;cursor:grab;}
.vp-a .vp-w{top:calc(var(--vp-line) - var(--vp-size) + var(--vp-ov));}
.vp-b .vp-w{top:calc(var(--vp-line) - var(--vp-ov));}
.vp-a{clip-path:var(--vp-clip-a);}
.vp-b{clip-path:var(--vp-clip-b);}
.vp.soft .vp-a{
  clip-path:none;
  -webkit-mask-image:linear-gradient(var(--vp-dir),#000 calc(var(--vp-stop) - var(--vp-blend)),transparent calc(var(--vp-stop) + var(--vp-blend)));
  mask-image:linear-gradient(var(--vp-dir),#000 calc(var(--vp-stop) - var(--vp-blend)),transparent calc(var(--vp-stop) + var(--vp-blend)));
}
.vp.soft .vp-b{
  clip-path:none;
  -webkit-mask-image:linear-gradient(var(--vp-dir),transparent calc(var(--vp-stop) - var(--vp-blend)),#000 calc(var(--vp-stop) + var(--vp-blend)));
  mask-image:linear-gradient(var(--vp-dir),transparent calc(var(--vp-stop) - var(--vp-blend)),#000 calc(var(--vp-stop) + var(--vp-blend)));
}
.page.cut-accent  .vp-b .vp-w{color:var(--accent);}
.page.cut-ghost   .vp-b .vp-w{opacity:.3;}
.page.cut-outline .vp-b .vp-w{color:transparent;-webkit-text-stroke:0.3cqw var(--accent);}
.page.has-cut .cov-kick{opacity:.55;}
.page.no-line .cov-diag,.page.no-line .l-diag,.page.no-line .st-diag{display:none;}

.imgpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:7px;
  max-height:150px;overflow:auto;padding:7px;background:#0d0d0d;border:1px solid #262626;border-radius:4px;}
.ipk{padding:0;height:58px;border:1px solid #2a2a2a;background:#151515;border-radius:3px;cursor:pointer;overflow:hidden;}
.ipk img{width:100%;height:100%;object-fit:contain;display:block;}
.ipk:hover{border-color:#555;}
.ipk.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.imgops{display:flex;gap:6px;margin-top:6px;}
.ipkwrap{position:relative;display:block;}
.ipkwrap .ipk{width:100%;}
.ipkbar{position:absolute;top:-5px;right:-5px;display:none;gap:3px;z-index:3;}
.ipkwrap:hover .ipkbar{display:flex;}
.ipkbtn{width:16px;height:16px;padding:0;line-height:14px;
  background:rgba(20,28,34,.92);color:#e6eef5;border:1px solid #3a4a56;
  border-radius:3px;font-size:11px;cursor:pointer;}
.ipkx:hover{background:#a33;border-color:#a33;color:#fff;}
.ipkcut:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.ipkwhy{font-style:normal;margin-left:6px;padding:1px 5px;border-radius:3px;
  background:#1d2a33;color:#7fb2d6;font-size:9px;text-transform:uppercase;letter-spacing:.06em;}
.imgops .save{margin-top:0;}

.fspec{padding:6px;background:#fff;color:#111;border-radius:4px;font-size:17px;line-height:1.15;text-align:center;}

.readout{font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1.45;color:#7d7d7d;padding:5px 7px;background:#111;border:1px solid #262626;border-radius:4px;}
.readout b{color:#3aa0e0;font-weight:600;}
select.fin{appearance:none;cursor:pointer;}

/* ---- selection highlight on the page ---- */


/* ================= PRINT / PDF EXPORT ================= */
@media print{
  body{background:#fff;overflow:visible;}
  .bar,.dock,.dots,.lbl,.pdfbox{display:none!important;}
  .viewer{display:block!important;width:auto!important;height:auto!important;overflow:visible!important;}
  #stage{display:block!important;padding:0!important;gap:0!important;width:auto!important;}
  .spread,.solo{display:block!important;height:auto!important;box-shadow:none!important;opacity:1!important;transform:none!important;}
  .page{width:var(--print-w,var(--page-w,210mm))!important;height:var(--print-h,var(--page-h,297mm))!important;
    margin:var(--mark,0)!important;break-after:page;page-break-after:always;box-shadow:none!important;}
  .page:last-child{break-after:auto;page-break-after:auto;}
  .sel-node{outline:0!important;background:none!important;}
  .sel-corners::after{display:none!important;}
  .fs-cutgrab.sel-node::before{display:none!important;}
  .spread::before{display:none!important;}
  body.print-one .spread:not(.print-me),body.print-one .solo:not(.print-me){display:none!important;}
  body.print-one .spread.print-me,body.print-one .solo.print-me{display:block!important;}
  .spread.excluded::after,.solo.excluded::after{display:none!important;}
  body.pshop .cropmarks{display:block!important;}
  .feature .fs-pic.fit-contain[data-freeh]{display:block!important;width:0!important;
    height:0!important;overflow:visible!important;}
  .feature .fs-pic.fit-contain[data-freeh]>img{position:absolute;left:0;top:0;
    height:var(--freeh)!important;width:auto!important;max-width:none!important;max-height:none!important;}
}

.cropmarks{display:none;position:absolute;inset:0;pointer-events:none;z-index:30;}
.cropmarks .cm{position:absolute;background:#000;}
.cropmarks .cm-v{width:0.2mm;height:var(--bleed,3mm);}
.cropmarks .cm-h{height:0.2mm;width:var(--bleed,3mm);}
.cropmarks .cm-v.cm-tl{left:var(--bleed,3mm);top:0;}
.cropmarks .cm-h.cm-tl{top:var(--bleed,3mm);left:0;}
.cropmarks .cm-v.cm-tr{right:var(--bleed,3mm);top:0;}
.cropmarks .cm-h.cm-tr{top:var(--bleed,3mm);right:0;}
.cropmarks .cm-v.cm-bl{left:var(--bleed,3mm);bottom:0;}
.cropmarks .cm-h.cm-bl{bottom:var(--bleed,3mm);left:0;}
.cropmarks .cm-v.cm-br{right:var(--bleed,3mm);bottom:0;}
.cropmarks .cm-h.cm-br{bottom:var(--bleed,3mm);right:0;}

.pdfbox{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);}
.pdfbox.on{display:flex;align-items:center;justify-content:center;}
.pdfpane{width:420px;max-height:82vh;overflow:auto;background:#141414;border:1px solid #2c2c2c;
  border-radius:10px;padding:16px;color:#ddd;font-size:12px;}
.pdfhead{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#9a9da2;margin-bottom:10px;}
.pdflist{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;}
.pdfrow{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:5px;cursor:pointer;}
.pdfrow:hover{background:#1e1e1e;}
.pdfrow b{color:#7f7f7f;font-family:'JetBrains Mono',monospace;font-size:11px;}
.pdfkind{margin-left:auto;color:#6d6d6d;font-size:11px;}
.pdfops{display:flex;gap:6px;margin:8px 0;}
.pdfops button{flex:1;padding:7px 8px;border:1px solid #2f2f2f;border-radius:6px;background:#1b1b1b;color:#ddd;cursor:pointer;}
.pdfops button:hover{background:#252525;}
.pdfops button.go{background:#0a6fb0;border-color:#0a6fb0;color:#fff;}

/* ---- the Print panel (print-panel.js): pick pages or spreads, get a PDF ---- */
.prbox{display:none;position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.6);}
.prbox.on{display:flex;align-items:center;justify-content:center;}
@media print{ .prbox{display:none!important;} }
.pr-pane{width:min(980px,calc(100vw - 32px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;
  background:#141518;border:1px solid #2c2e33;border-radius:10px;color:#dfe0e2;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;}
.pr-top{display:flex;align-items:center;gap:14px;padding:14px 16px 8px;flex-wrap:wrap;}
.pr-tabs{display:flex;border:1px solid #33363b;border-radius:6px;overflow:hidden;}
.pr-tabs button,.pr-quick button,.pr-x,.pr-go{font:inherit;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;}
.pr-tabs button{padding:7px 14px;border:0;background:transparent;color:#9a9da2;}
.pr-tabs button.on{background:#007dc5;color:#fff;}
.pr-quick{display:flex;gap:6px;}
.pr-quick button{padding:6px 10px;border:1px solid #33363b;border-radius:5px;background:#1b1d21;color:#dfe0e2;}
.pr-quick button:hover,.pr-tabs button:not(.on):hover{border-color:#007dc5;color:#fff;}
.pr-x{margin-left:auto;width:30px;height:30px;border:0;border-radius:5px;background:transparent;color:#9a9da2;
  font-size:20px;line-height:1;letter-spacing:0;}
.pr-x:hover{background:#23262b;color:#fff;}
.pr-help{padding:0 16px 10px;color:#7d8086;letter-spacing:.04em;}
.pr-grid{flex:1;min-height:0;overflow:auto;padding:6px 16px 16px;display:grid;gap:16px 14px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));align-content:start;}
.pr-tile{min-width:0;}
.pr-pic{position:relative;aspect-ratio:420/297;background:#fff;border-radius:3px;overflow:hidden;
  box-shadow:0 0 0 1px #2c2e33;display:flex;}
.pr-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.pr-hit{position:relative;flex:1;border:0;padding:0;margin:0;background:rgba(20,21,24,.55);cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .1s;}
.pr-one .pr-half{flex:none;width:50%;margin-left:25%;}
.pr-half.pr-s1{box-shadow:inset 1px 0 0 rgba(0,0,0,.18);}
.pr-hit:hover{background:rgba(20,21,24,.3);}
.pr-hit.on{background:transparent;box-shadow:inset 0 0 0 3px #007dc5;}
.pr-no{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);min-width:22px;padding:3px 6px;
  border-radius:10px;background:#2a2d32;color:#c9cbce;font-style:normal;font-size:10px;letter-spacing:.06em;white-space:nowrap;}
.pr-hit.on .pr-no{background:#007dc5;color:#fff;}
.pr-hit.on .pr-no::before{content:'\2713\00a0';}
.pr-name{margin-top:6px;color:#9a9da2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.12em;font-size:10px;}
.pr-here .pr-name{color:#fff;}
.pr-here .pr-name::before{content:'\25CF\00a0';color:#007dc5;}
.pr-foot{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid #25272b;}
.pr-msg{flex:1;color:#9a9da2;min-width:0;}
.pr-go{padding:9px 16px;border:1px solid #007dc5;border-radius:6px;background:#007dc5;color:#fff;}
.pr-go:hover{background:#0a8ad6;}
.pr-go:disabled{opacity:.4;cursor:default;}
@media (max-width:560px){ .pr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;} .pr-go{padding:9px 10px;} }

.empty-book{color:#9a9da2;font-size:14px;text-align:center;padding:40px;max-width:320px;line-height:1.5;}
.empty-book b{color:#eee;}

/* story + kit pages */
.page.story,.page.kit{background:var(--bg);}
.st-brand{position:absolute;top:7cqw;left:7cqw;font-family:var(--sans);font-weight:400;font-size:2.2cqw;letter-spacing:.34em;text-transform:uppercase;opacity:.65;}
.st-tag{position:absolute;top:7cqw;right:7cqw;font-family:var(--sans);font-weight:400;font-size:2.2cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.st-num{position:absolute;top:14cqw;left:7cqw;font-weight:800;font-size:8cqw;line-height:.8;color:var(--accent);opacity:.9;}
.st-kick{position:absolute;left:7cqw;right:7cqw;top:28cqw;font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:2.3cqw;line-height:1.55;opacity:.72;}
.st-title{position:absolute;left:7cqw;right:7cqw;top:40cqw;margin:0;font-weight:900;letter-spacing:-.02em;line-height:.9;font-size:11cqw;}
.st-title svg{display:block;width:100%;height:auto;overflow:visible;}
.st-title text{font-family:var(--sans);font-weight:var(--sans-w);letter-spacing:-0.02em;}
.st-body{position:absolute;left:7cqw;right:7cqw;top:72cqw;bottom:14cqw;overflow:hidden;}
.st-body p{margin:0 0 2.4cqw;font-size:2.55cqw;line-height:1.45;font-weight:400;color:#222;}
.st-diag{position:absolute;left:-16cqw;top:var(--diag-top);width:132cqw;height:0.55cqw;background:var(--accent);transform-origin:50% 50%;transform:rotate(calc(-1*var(--ang)));opacity:.85;pointer-events:none;}
.st-sq{position:absolute;right:7cqw;bottom:12cqw;width:5.5cqw;height:5.5cqw;background:var(--accent);}
.st-foot{position:absolute;left:7cqw;bottom:6cqw;font-family:var(--sans);font-weight:400;font-size:2cqw;letter-spacing:.06em;opacity:.55;}

.page.kit .st-title.kit-title{top:26cqw;font-size:12cqw;}
.kit-grid{position:absolute;left:7cqw;right:7cqw;top:48cqw;bottom:12cqw;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:0;}
.kit-item{display:flex;gap:2.2cqw;align-items:flex-start;padding:2.4cqw 2.2cqw;border-top:0.22cqw solid var(--line);min-height:0;}
.kit-item:nth-child(odd){border-right:0.22cqw solid var(--line);}
.kit-item:nth-child(1),.kit-item:nth-child(2){border-top:0;}
.kit-n{font-family:var(--sans);font-weight:400;font-size:2cqw;color:var(--accent);letter-spacing:.06em;flex:none;padding-top:.3cqw;}
.kit-name{font-weight:700;font-size:2.5cqw;letter-spacing:-.01em;line-height:1.2;}
.kit-role{margin-top:.8cqw;font-family:var(--sans);font-weight:400;font-size:1.85cqw;letter-spacing:.04em;color:#666;line-height:1.35;}

/* ---- pancake / stack view ---- */
body.stack .viewer{align-items:flex-start;overflow-y:auto;padding:30px 0;}
body.stack #stage{display:flex;flex-direction:column;align-items:center;gap:38px;width:100%;}
body.stack .spread,body.stack .solo{height:auto;box-shadow:0 18px 50px rgba(0,0,0,.42);}
body.stack .page{height:auto;width:calc(34vw * var(--zoom));}
body.stack .dots,body.stack .lbl{display:none;}

/* hide the diagonal accent line entirely */
body.no-diag .l-diag,body.no-diag .cov-diag{display:none;}

.tree .trow.back{color:#7f7f7f;border-bottom:1px solid #232323;margin-bottom:4px;padding-top:6px;padding-bottom:6px;}
.tree .trow.back:hover{color:#fff;background:#1e1e1e;}
.tree .trow.back .tw{color:#7f7f7f;font-size:13px;}
.tree .tenter{flex:none;width:18px;height:18px;padding:0;border:0;border-radius:4px;background:none;color:#5f5f5f;font-size:12px;line-height:18px;cursor:pointer;}
.tree .trow:hover .tenter{color:#fff;background:#2b2b2b;}

.tree-empty{padding:14px 12px;font-size:12px;color:#7f7f7f;}
body.strip .spread.excluded,body.strip .solo.excluded{filter:grayscale(1);}
.spread.excluded::after,.solo.excluded::after{
  content:'NOT IN THE BOOK';position:absolute;left:0;right:0;top:0;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-align:center;padding:5px 0;background:#1d1f22;color:#8b8b8b;z-index:3;
}
.spread.excluded,.solo.excluded{position:relative;}
@media print{ .spread.excluded,.solo.excluded{display:none!important;} }

.cov-hero.fit-cover img,.l-herowrap.fit-cover img{width:100%;height:100%;object-fit:cover;}
.cov-hero.fit-contain img,.l-herowrap.fit-contain img{object-fit:contain;}

.cov-diag,.l-diag,.st-diag{pointer-events:auto;cursor:pointer;}



body.dragging-el,body.dragging-el *{cursor:none!important;user-select:none;}
body:not(.dock-on) .hud{display:none;}
body:not(.dock-on) .page,body:not(.dock-on) .page *{cursor:default;}
.viewer .page,.viewer .page *{user-select:none;-webkit-user-select:none;}
/* reading, with the tools away: the words select and copy; pictures do not */
body:not(.dock-on) .viewer .page,body:not(.dock-on) .viewer .page *{user-select:text;-webkit-user-select:text;}
body:not(.dock-on) .viewer .page img{user-select:none;-webkit-user-select:none;}
.page img{-webkit-user-drag:none;user-drag:none;user-select:none;pointer-events:auto;}
.page a{-webkit-user-drag:none;}
.sel-node{cursor:grab;outline:0.12cqw dashed rgba(0,125,197,.15);outline-offset:0.24cqw;}
body.dragging-el .page .sel-node{transition:outline-color .5s ease .15s!important;outline-color:transparent;}
.sel-node.sel-corners{outline:none;}
.sel-corners::after{content:'';position:absolute;pointer-events:none;z-index:9;
  left:var(--selL,0px);top:var(--selT,0px);right:var(--selR,0px);bottom:var(--selB,0px);
  border:0.12cqw dashed rgba(0,125,197,.15);
  background:linear-gradient(rgba(0,125,197,.3),rgba(0,125,197,.3)) left top,
    linear-gradient(rgba(0,125,197,.3),rgba(0,125,197,.3)) right top,
    linear-gradient(rgba(0,125,197,.3),rgba(0,125,197,.3)) left bottom,
    linear-gradient(rgba(0,125,197,.3),rgba(0,125,197,.3)) right bottom;
  background-size:0.5cqw 0.5cqw;background-repeat:no-repeat;
  opacity:1;transition:opacity .5s ease .15s;}
body.dragging-el .sel-corners::after{opacity:0;}
.page .fs-cutgrab.sel-node,.page .fs-hr.sel-node,.page .cov-diag.sel-node,
.page .l-diag.sel-node,.page .st-diag.sel-node{
  outline-offset:0;background:rgba(0,125,197,.16)!important;}
.page .fs-cutgrab.sel-node::before{content:'';position:absolute;left:0;right:0;top:50%;height:0;
  border-top:0.12cqw dashed var(--accent);}
html.pdfrun .sel-node{outline:0!important;background:none!important;}
html.pdfrun .sel-corners::after{display:none!important;}
html.pdfrun .fs-cutgrab.sel-node::before{display:none!important;}


.savestate{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#5f5f5f;margin-left:auto;margin-right:10px;}
.savestate.pending{color:#b8922a;}
.savestate.ok{color:#3f8f5a;}
.savestate.fail{color:#b4433a;}

/* ================= COVER · CLASSIC PLATE ================= */
.page.cover-plate{
  --bg:#f7f3ea; --navy:#16294d; --gold:#b0873f; --hairline:#c9bfa8;
  --paper:var(--bg); --ink:var(--navy);
  display:flex;flex-direction:column;align-items:center;
}
.pl-frame{position:absolute;left:3cqw;right:3cqw;top:3cqw;bottom:3cqw;
  border:0.28cqw solid var(--navy);pointer-events:none;z-index:2;}
.pl-frame2{position:absolute;left:4.2cqw;right:4.2cqw;top:4.2cqw;bottom:4.2cqw;
  border:0.12cqw solid var(--navy);opacity:.5;pointer-events:none;z-index:2;}

.pl-top{position:absolute;left:9cqw;right:9cqw;top:9cqw;display:flex;flex-direction:column;
  align-items:center;text-align:center;z-index:3;}
.pl-brand{font-family:var(--sans);font-weight:400;font-size:1.9cqw;letter-spacing:.42em;
  text-transform:uppercase;opacity:.5;margin-bottom:4.6cqw;}
.pl-kick{font-family:var(--sans);font-size:1.9cqw;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;line-height:1.5;}
.pl-rule{display:block;width:11cqw;height:0.16cqw;background:var(--navy);opacity:.55;margin:3.4cqw 0;}
.pl-title{margin:0 auto;font-family:var(--serif);font-weight:var(--serif-w);color:var(--navy);
  letter-spacing:.005em;line-height:.94;width:100%;}
.pl-sub{margin-top:2.2cqw;font-family:var(--serif);font-size:4.1cqw;
  font-weight:400;letter-spacing:.2em;text-transform:uppercase;}
.pl-pills{font-family:var(--sans);font-weight:400;font-size:2.05cqw;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);}

.pl-hero{position:absolute;left:14cqw;right:14cqw;top:52cqw;bottom:34cqw;z-index:3;
  display:flex;align-items:center;justify-content:center;mix-blend-mode:multiply;}
.pl-hero img{height:100%;width:auto;max-width:none;max-height:none;flex:none;filter:grayscale(1) contrast(1.06);}
.pl-hero.fit-cover{mix-blend-mode:normal;}
.pl-hero.fit-cover img{width:100%;height:100%;object-fit:cover;filter:none;}

.pl-band{position:absolute;left:0;right:0;bottom:0;height:29cqw;background:var(--navy);
  color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 10cqw;text-align:center;z-index:4;}
.pl-markrow{display:flex;align-items:center;gap:3cqw;width:100%;justify-content:center;
  margin-bottom:3.2cqw;color:var(--paper);}
.pl-brule{display:block;flex:1;max-width:19cqw;height:0.1cqw;background:currentColor;opacity:.45;}
.pl-mark{width:6.4cqw;height:6.4cqw;flex:none;}
.pl-b1{font-family:var(--serif);font-size:3cqw;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;}
.pl-b2{margin-top:1.1cqw;font-family:var(--serif);font-size:2.5cqw;font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;opacity:.86;}
.pl-hair{display:block;width:44cqw;height:0.1cqw;background:currentColor;opacity:.35;margin:3.2cqw 0;}
.pl-year{font-family:var(--sans);font-weight:400;font-size:1.95cqw;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);}
.pl-title svg{display:block;width:100%;height:auto;overflow:visible;}
.pl-title text{font-family:inherit;font-weight:inherit;fill:currentColor;letter-spacing:inherit;}


/* ================= FEATURE PAGES · one product, one page ================= */
.page.feature{--bg:#e5e5e5;}
.feature .fs-hero{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.feature .fs-hero{mix-blend-mode:multiply;}
.page.dark-paper .fs-hero,.page.dark-paper .fs-pic,
.fs-half.dark-half .fs-hero,.fs-half.dark-half .fs-pic,
.page.dark-paper .pl-hero,.page.dark-paper .hc-hero{mix-blend-mode:normal;}
.feature .fs-hero img{display:block;}
.feature .fs-hero.fit-contain img{max-width:100%;max-height:100%;object-fit:contain;}
.feature .fs-hero.fit-cover img{width:100%;height:100%;object-fit:cover;}
.feature .fs-title{position:absolute;margin:0;font-family:var(--serif);font-weight:var(--serif-w);
  color:var(--ink);letter-spacing:.02em;line-height:1;white-space:nowrap;}
.feature .fs-series{white-space:nowrap;}
.feature .fs-title svg{display:block;width:100%;height:auto;overflow:visible;}
.feature .fs-title text{font-family:inherit;font-weight:inherit;fill:currentColor;letter-spacing:inherit;}
.feature .fs-series{position:absolute;font-family:var(--sans);font-size:2.1cqw;font-weight:500;
  letter-spacing:.42em;text-transform:uppercase;color:var(--ink);opacity:.75;}
.feature .fs-pitch{position:absolute;font-family:var(--sans);font-size:2.35cqw;font-weight:400;
  line-height:1.5;color:var(--ink);opacity:.85;}
.feature .fs-words{position:absolute;}
.feature .fs-words.al-center{text-align:center;}
.feature .fs-words.al-right{text-align:right;}
.feature .fs-words .fs-title,.feature .fs-words .fs-series{width:max-content;min-width:100%;}
.feature .fs-words.al-right .fs-title,.feature .fs-words.al-right .fs-series{left:auto;right:0;}
.feature .fs-words.al-center .fs-title,.feature .fs-words.al-center .fs-series{left:50%;right:auto;translate:-50% 0;}
.feature .fs-marks{position:absolute;display:flex;flex-direction:column;align-items:flex-start;}
.feature .fs-marks.al-center{align-items:center;}
.feature .fs-marks.al-right{align-items:flex-end;}
.fs-mark{display:flex;align-items:center;gap:2.8cqw;}
.fs-mk-i{width:5cqw;height:5cqw;flex:none;color:var(--ink);opacity:.9;}
.fs-mk-t{font-family:var(--sans);font-size:1.7cqw;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);opacity:.9;}

.f-focus .fs-hero{left:0;right:0;top:0;height:64%;}
.f-focus .fs-words{left:8cqw;width:42cqw;top:68%;height:34cqw;}
.f-focus .fs-words .fs-title{left:0;right:0;top:0;font-size:7.2cqw;}
.f-focus .fs-words .fs-series{left:0;right:0;top:10.5cqw;}
.f-focus .fs-words .fs-pitch{left:0;right:0;top:16cqw;}
.f-focus .fs-marks{right:5cqw;width:40cqw;top:calc(68% + 2cqw);gap:4.4cqw;}

.tadd{flex:none;width:18px;height:18px;margin-right:4px;padding:0;line-height:1;
  background:#1d2a33;color:#8fa3b3;border:1px solid #2b3a45;border-radius:3px;
  font-size:13px;cursor:pointer;}
.tadd:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.tdel:hover{background:#a33;border-color:#a33;}
.tdel{color:#d98d8d;border-color:#4a2c2c;}
.seg button.danger{color:#e79a9a;border-color:#4a2c2c;}
.seg button.danger:hover:not(:disabled){background:#a33;border-color:#a33;color:#fff;}
.save.danger{color:#e79a9a;border-color:#4a2c2c;}
.save.danger:hover{background:#a33;border-color:#a33;color:#fff;}
.histrow button.danger{color:#e79a9a;border-color:#4a2c2c;}
.fs-half.half-off{background:none!important;}
.fs-hr::after{content:'';position:absolute;left:0;right:0;top:50%;
  height:2.4cqw;transform:translateY(-50%);}
.fs-hr{position:absolute;top:50cqw;height:var(--hrw,0.16cqw);min-height:1px;
  background:var(--hrc,var(--ink));z-index:6;}
@media print{ .fs-hr{min-height:0;} }
html.pdfrun .fs-hr{min-height:0;}
html.pdfrun .hud{display:none!important;}
.hr-hair{height:0.06cqw;}
.hr-dashed{background:repeating-linear-gradient(90deg,var(--hrc,var(--ink)) 0 1.2cqw,transparent 1.2cqw 2.6cqw);}
.hr-dotted{background:repeating-linear-gradient(90deg,var(--hrc,var(--ink)) 0 .28cqw,transparent .28cqw 1.1cqw);}
.hr-double{background:none;height:calc(var(--hrw,0.16cqw)*4);
  border-top:var(--hrw,0.16cqw) solid var(--hrc,var(--ink));
  border-bottom:var(--hrw,0.16cqw) solid var(--hrc,var(--ink));}
.histlist{margin-top:6px;max-height:220px;overflow:auto;border:1px solid #2b3a45;border-radius:4px;}
.histrow{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:4px 8px;font-size:11px;color:#8fa3b3;border-bottom:1px solid #1d2a33;}
.histrow:last-child{border-bottom:0;}
.histrow button{flex:none;padding:2px 8px;font-size:11px;background:#1d2a33;color:#cfe0ec;
  border:1px solid #2b3a45;border-radius:3px;cursor:pointer;}
.histrow button:hover{background:var(--accent);color:#fff;border-color:var(--accent);}


.facelist{max-height:230px;overflow:auto;margin:2px 0 6px;padding:2px;
  border:1px solid #24313b;border-radius:4px;background:#10171d;}
.facehead{padding:6px 6px 3px;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.22em;text-transform:uppercase;color:#5d7382;}
.fface{display:block;width:100%;text-align:left;padding:5px 8px;margin:0;
  background:none;border:0;border-radius:3px;color:#c8d4dd;font-size:15px;line-height:1.25;cursor:pointer;}
.fface:hover{background:#1b2a35;color:#fff;}
.fface.on{background:var(--accent);color:#fff;}

.imgfind{margin-bottom:4px;}
.imgwrap{max-height:290px;overflow:auto;padding-right:2px;}
.ipkgrp{margin-bottom:7px;}
.ipkhead{padding:3px 1px;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:#5d7382;}
.ipkhead b{color:#7d94a5;font-weight:400;}

.feature .fs-corners{position:absolute;inset:0;pointer-events:none;}
.feature .fs-corners>div{position:absolute;pointer-events:auto;
  font-family:var(--sans);font-weight:400;font-size:1.75cqw;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink);opacity:.55;white-space:nowrap;}
.feature .fs-tl{left:7cqw;top:6.5cqw;}
.feature .fs-tr{right:7cqw;top:6.5cqw;letter-spacing:.2em;color:var(--accent);opacity:.85;}
.feature .fs-bl{left:7cqw;bottom:6cqw;letter-spacing:.1em;}
.feature .fs-br{right:7cqw;bottom:6cqw;letter-spacing:.1em;font-size:2.1cqw;opacity:.8;}

/* Chapter tab: the chapter's colour on the outer edge, one step lower per
   chapter, so the chapters read along the edge of the closed book. */
.feature .fs-chap{position:absolute;z-index:6;width:2.6cqw;height:12cqw;pointer-events:none;
  top:calc(14cqw + var(--chap-i,0) * 14cqw);background:var(--chap);
  -webkit-print-color-adjust:exact;print-color-adjust:exact;}
.feature .fs-chap-l{left:0;}
.feature .fs-chap-r{right:0;}

.page.feature.f-slant{--bg:#ffffff;--bg2:#e5e5e5;}
.feature .fs-half{position:absolute;inset:0;}
.feature .fs-fill{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.feature .fs-bgimg{position:absolute;left:50%;top:50%;width:100%;height:100%;}
.f-slant .fs-halfA .fs-fill{background:var(--bg);}
.f-slant .fs-halfB .fs-fill{background:var(--bg2);}
.f-slant .fs-cut{position:absolute;left:-16cqw;top:var(--diag-top);width:132cqw;height:0.16cqw;
  background:var(--ink);opacity:.3;transform-origin:50% 50%;transform:rotate(calc(-1*var(--ang)));}
.f-slant .fs-hero{left:0;right:0;top:0;height:32%;}
.f-slant .fs-words{left:8cqw;width:42cqw;top:35%;height:32cqw;}
.f-slant .fs-words .fs-title{left:0;right:0;top:0;font-size:6.6cqw;}
.f-slant .fs-words .fs-series{left:0;right:0;top:9.6cqw;}
.f-slant .fs-words .fs-pitch{left:0;right:0;top:14.6cqw;font-size:2.2cqw;}
.f-slant .fs-desc2{left:52cqw;width:40cqw;top:58%;height:26cqw;}
.f-slant .fs-desc3{left:8cqw;width:40cqw;top:78%;height:26cqw;}
.f-slant .fs-desc2 .fs-title,.f-slant .fs-desc3 .fs-title{left:0;right:0;top:0;font-size:4.2cqw;}
.f-slant .fs-desc2 .fs-pitch,.f-slant .fs-desc3 .fs-pitch{left:0;right:0;top:6.4cqw;font-size:2.2cqw;}
.f-slant .fs-marks{right:5cqw;width:40cqw;top:calc(35% + 1cqw);gap:4cqw;}
.feature .fs-lower{position:absolute;}
.feature .fs-lower.al-center{text-align:center;}
.feature .fs-lower.al-right{text-align:right;}
.f-slant .fs-lower{left:8cqw;right:8cqw;top:70%;height:20cqw;}
/* The lower block is one more description: serif title, Inter paragraph, as desc2/desc3. */
.f-slant .fs-lowt{position:absolute;left:0;right:0;top:0;font-family:var(--serif);
  font-size:4.2cqw;font-weight:var(--serif-w);letter-spacing:.02em;line-height:1;text-transform:uppercase;color:var(--ink);}
.f-slant .fs-lowx{position:absolute;left:0;right:0;top:6.4cqw;font-family:var(--sans);
  font-weight:400;font-size:2.2cqw;line-height:1.5;color:var(--ink);opacity:.85;}

.f-slant .fs-cutgrab{position:absolute;left:-16cqw;top:calc(var(--diag-top) - 1.1cqw);
  width:132cqw;height:2.6cqw;transform-origin:50% 50%;z-index:8;
  transform:rotate(calc(-1*var(--ang)));cursor:ns-resize;background:transparent;}
.f-slant .fs-cutgrab:hover{background:rgba(0,125,197,.16);
  box-shadow:inset 0 0 0 0.08cqw rgba(0,125,197,.5);}
.sg-layer{position:absolute;inset:0;pointer-events:none;z-index:9;}
.sg-layer .sg-v{position:absolute;top:0;bottom:0;width:0;border-left:0.12cqw dashed #e9457a;}
.sg-layer .sg-h{position:absolute;left:0;right:0;height:0;border-top:0.12cqw dashed #e9457a;}
@media print{ .sg-layer{display:none!important;} .fs-cutgrab{display:none!important;} }

.peekbox{position:fixed;z-index:120;display:none;pointer-events:none;
  padding:3px 7px;border-radius:3px;background:#0d1319;color:#cfe0ec;
  border:1px solid #24313b;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.5);}
.peekbox.on{display:block;}

.feature .fs-pic{position:absolute;left:22cqw;top:18cqw;width:46cqw;height:38cqw;
  display:flex;align-items:center;justify-content:center;mix-blend-mode:multiply;}
.feature .fs-pic img{display:block;}
/* a picture's caption hangs under it (index.html capHTML): placed from the picture's own height, which is
   --freeh on screen and in print alike (in print the box itself is 0 high) */
.feature .fs-pic .fs-cap{position:absolute;left:0;top:calc(var(--freeh,100%) + 1.2cqw);text-align:left;}
.feature .fs-cap .fs-capt{font-family:var(--serif);font-weight:var(--serif-w);font-size:2.5cqw;line-height:1.05;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);}
.feature .fs-cap .fs-capx{margin-top:.7cqw;font-family:var(--sans);font-weight:400;font-size:1.75cqw;
  line-height:1.45;color:var(--ink);opacity:.85;}
.feature .fs-cap .fs-capt:empty,.feature .fs-cap .fs-capx:empty{display:none;}
.feature .fs-pic.fit-contain img{max-width:100%;max-height:100%;object-fit:contain;}
.feature .fs-pic.fit-contain[data-freeh],.feature .fs-hero.fit-contain[data-freeh]{width:auto;max-width:none;}
.feature .fs-pic.fit-contain[data-freeh] img,.feature .fs-hero.fit-contain[data-freeh] img{
  height:100%;width:auto;max-width:none;max-height:none;}
.feature .fs-hero[data-freeh]{right:auto;width:auto;translate:-50% -50%;}
.feature .fs-hero[data-freeh] img{height:100%;width:auto;max-width:none;max-height:none;object-fit:contain;}
.f-slant .fs-hero[data-freeh]{left:50cqw;top:22.627cqw;}
.f-focus .fs-hero[data-freeh]{left:50cqw;top:45.2545cqw;}
.feature .fs-pic.fit-cover img{width:100%;height:100%;object-fit:cover;}


.trow.tdrag{cursor:grab;}
.trow.drop{background:rgba(0,125,197,.18);box-shadow:inset 0 0 0 1px rgba(0,125,197,.55);}

.txbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:80;
  display:none;align-items:center;gap:10px;padding:7px 12px;
  background:rgba(16,16,16,.9);border:1px solid #2a2a2a;border-radius:9px;
  backdrop-filter:blur(7px);font-size:11.5px;color:#9a9a9a;}
body.text-on .txbar{display:flex;}
.txbar .seg button{padding:4px 9px;font-size:11px;}
.txhint{color:#6f6f6f;letter-spacing:.02em;}
.txstate{font-family:'JetBrains Mono',monospace;font-size:10px;color:#7d7d7d;white-space:nowrap;}
.txstate.ok{color:#5e9c6a;}
.txstate.pending{color:#b09048;}
body.text-on [data-n].tx-f{
  cursor:text;border-radius:0.25cqw;
  outline:0.15cqw dashed rgba(0,125,197,.5);outline-offset:0.3cqw;
  background:rgba(0,125,197,.07);
  animation:txlight .34s ease both;}
@keyframes txlight{
  from{background:rgba(0,125,197,.26);outline-color:rgba(0,125,197,.95);}
  to{background:rgba(0,125,197,.07);outline-color:rgba(0,125,197,.5);}}
body.text-on [data-n].tx-shared{
  outline-style:solid;outline-color:rgba(0,125,197,.38);
  background:rgba(0,125,197,.05);}
body.text-on [data-n].tx-f:hover{
  background:rgba(0,125,197,.14);outline-color:rgba(0,125,197,.8);}
body.text-on [data-n].tx-f:focus{
  outline:0.2cqw solid var(--accent);background:rgba(0,125,197,.1);}
body.text-on .sel-node{outline:none!important;}
body.text-on .sel-corners::after{display:none!important;}
@media print{ .txbar{display:none!important;} .tx-f{outline:0!important;background:none!important;animation:none!important;} }
html.pdfrun .txbar{display:none!important;}
html.pdfrun .tx-f{outline:0!important;background:none!important;animation:none!important;}

/* ---- Manhattan callouts: an object drawn on the left page, joined by a
   right-angled line to the real product on the right page. The lines sit on
   the .spread rather than inside a .page, because a page clips its overflow
   and a callout that cannot cross the gutter cannot do its job.
   .sp-links declares itself a container so cqw here means "percent of the
   whole spread" -- the tags straddle both pages, so page units would size
   them against the wrong thing. ---- */
.sp-links{position:absolute;inset:0;pointer-events:none;z-index:6;
  container-type:inline-size;}
/* The line is apparatus, not drawing. In ink it was graphite laid over
   graphite and it disappeared into the sketch it was meant to explain, so it
   takes the brand azure instead: the reader sees at once which marks are the
   object and which are the pointing. The words in a tag stay ink -- they are
   printed copy, not apparatus. One token carries the lot. */
.sp-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.sp-lines polyline{fill:none;stroke:var(--callout);stroke-width:.9;stroke-linejoin:round;
  stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.74;}
.sp-lines polyline.ghost{stroke-width:.65;opacity:.18;}
/* the fat invisible twin that catches the pointer -- see layoutLinks */
.sp-lines .sp-hits polyline.hitline{fill:none;stroke:transparent;
  stroke-linejoin:round;stroke-linecap:round;pointer-events:stroke;cursor:pointer;}
.sp-lines circle.dot{fill:none;stroke:var(--callout);stroke-width:1.25;
  vector-effect:non-scaling-stroke;opacity:.86;}
.sp-tag{position:absolute;display:flex;align-items:center;gap:1.1cqw;
  pointer-events:auto;transform:translateY(-50%);max-width:26cqw;}
/* Height drives and the square follows, so the picture answers the ordinary
   image-height control the way every other picture in the book does. */
.sp-tag-img{height:7cqw;width:auto;aspect-ratio:1;flex:none;display:flex;
  align-items:center;justify-content:center;background:var(--tile);}
.sp-tag-img img{width:100%;height:100%;}
.sp-tag-img.fit-contain img{object-fit:contain;}
.sp-tag-img.fit-cover img{object-fit:cover;}
/* Same voice as the feature descriptions on the rest of the spread: the serif
   name over sans body copy. A callout is a description with a line attached,
   so it should not invent its own typography. */
.sp-tag-w{min-width:0;}
.sp-tag-h{font-family:var(--serif);font-weight:var(--serif-w);font-size:2.1cqw;
  line-height:1.05;letter-spacing:.02em;color:var(--ink);}
.sp-tag-d{font-family:var(--sans);font-size:1.12cqw;font-weight:400;line-height:1.5;
  color:var(--ink);opacity:.85;margin-top:.45cqw;}

/* ---- Callout handles: the one part of a spread that is never printed.
   A ring sits on the anchor, a square on every bend, a dashed dot in the
   middle of each leg waiting to become one, a round button on each corner
   that flips it, and a bar where the line meets the tag. They are placed in spread pixels, which is why they live on
   .sp-hands rather than inside a tag -- a tag moves, the route does not care.
   .sp-links takes no pointer events, so each handle asks for its own. ---- */
.sp-hands{position:absolute;inset:0;pointer-events:none;}
.sp-h{position:absolute;box-sizing:border-box;width:11px;height:11px;
  margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#fff;
  border:2px solid var(--accent);pointer-events:auto;cursor:grab;
  box-shadow:0 1px 3px rgba(0,0,0,.25);}
.sp-h:hover{background:var(--accent);}
/* The anchor already draws its own circle, so its handle is only a grab area
   laid over it: a visible ring here read as a second circle. It tints on
   hover so the hand can still find it. */
.sp-h-a{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border:none;
  background:transparent;box-shadow:none;}
.sp-h-a:hover{background:rgba(0,125,197,.22);}
.sp-h-b{border-radius:2px;}
.sp-h-m{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;opacity:.5;
  border-style:dashed;background:#fff;box-shadow:none;cursor:copy;}
.sp-h-m:hover{opacity:1;border-style:solid;}
.sp-h-e{width:8px;height:15px;margin:-7.5px 0 0 -4px;border-radius:2px;}
/* a corner's flip button: a click, not a drag, so it says so with the cursor */
.sp-h-c{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-width:1.5px;cursor:pointer;}
body.dragging-el .sp-h{cursor:grabbing;}
@media print{ .sp-hands{display:none!important;} }
html.pdfrun .sp-hands{display:none!important;}

/* ---- the callout layer at print time ------------------------------------
   On screen a spread is one flex box and the layer lies over both pages, so
   "percent of the spread" means what it says. Printing breaks that: a sheet
   is one page, .spread turns into a block and its two pages stack, so the
   layer suddenly measures itself against a single page and every tag lands
   at 71% of the LEFT sheet, lines trailing off the bottom.
   So each page carries its own copy of the layer, two pages wide and pushed
   left on the right-hand page, which puts the spread's own coordinates back
   under it. The page clips its half; bound facing, the two halves meet again
   across the gutter, which is what a callout does on paper anyway. The copy
   is made from the finished layer rather than measured again -- nothing in
   the browser is worth measuring once printing has started. */
.sp-links.sp-print{display:none;}
@media print{
  .spread>.sp-links{display:none!important;}
  .page>.sp-links.sp-print{display:block;left:0;right:auto;top:0;bottom:auto;
    width:200%;height:100%;}
  .page.right>.sp-links.sp-print{left:-100%;}
}

/* ================= THREE DIAGONAL BANDS ================= */
/* Two lines, three clipped fields, and each field carries one product's own
   picture as its paper. The apparatus is the slant split repeated: the same
   grab strip, the same stroke, only twice and with a middle band that is
   bounded on both sides. The second line reads its own --diag-top2/--ang2 so
   a drag on one line never moves the other. */
.page.feature.f-bands{--bg:#ffffff;--bg2:#ffffff;--bg3:#ffffff;}
.f-bands .fs-halfA .fs-fill{background:var(--bg);}
.f-bands .fs-halfB .fs-fill{background:var(--bg2);}
.f-bands .fs-halfC .fs-fill{background:var(--bg3);}
.f-bands .fs-cut{position:absolute;left:-16cqw;top:var(--diag-top);width:132cqw;height:0.16cqw;
  background:var(--ink);opacity:.3;transform-origin:50% 50%;transform:rotate(calc(-1*var(--ang)));}
.f-bands .fs-cut2{top:var(--diag-top2);transform:rotate(calc(-1*var(--ang2)));}
.f-bands .fs-cutgrab{position:absolute;left:-16cqw;top:calc(var(--diag-top) - 1.1cqw);
  width:132cqw;height:2.6cqw;transform-origin:50% 50%;z-index:8;
  transform:rotate(calc(-1*var(--ang)));cursor:ns-resize;background:transparent;}
.f-bands .fs-cutgrab2{top:calc(var(--diag-top2) - 1.1cqw);transform:rotate(calc(-1*var(--ang2)));}
.f-bands .fs-cutgrab:hover{background:rgba(0,125,197,.16);
  box-shadow:inset 0 0 0 0.08cqw rgba(0,125,197,.5);}
/* One description block per band, each sitting inside its own third. */
.f-bands .fs-hero{left:0;right:0;top:0;height:30%;}
.f-bands .fs-hero[data-freeh]{left:50cqw;top:20cqw;}
.f-bands .fs-words{left:8cqw;width:42cqw;top:6cqw;height:26cqw;}
.f-bands .fs-words .fs-title{left:0;right:0;top:0;font-size:5.4cqw;}
.f-bands .fs-words .fs-series{left:0;right:0;top:8cqw;}
.f-bands .fs-words .fs-pitch{left:0;right:0;top:12.6cqw;font-size:2.2cqw;}
.f-bands .fs-desc2{left:8cqw;width:42cqw;top:39%;height:24cqw;}
.f-bands .fs-desc3{left:8cqw;width:42cqw;top:72%;height:24cqw;}
.f-bands .fs-desc2 .fs-title,.f-bands .fs-desc3 .fs-title{left:0;right:0;top:0;font-size:4.2cqw;}
.f-bands .fs-desc2 .fs-pitch,.f-bands .fs-desc3 .fs-pitch{left:0;right:0;top:6.4cqw;font-size:2.2cqw;}
.f-bands .fs-marks{right:5cqw;width:40cqw;top:42%;gap:4cqw;}
.f-bands .fs-lower{left:8cqw;right:8cqw;top:86%;height:18cqw;}
.f-bands .fs-lowt{position:absolute;left:0;right:0;top:0;font-family:var(--serif);
  font-size:4.2cqw;font-weight:var(--serif-w);letter-spacing:.02em;line-height:1;text-transform:uppercase;color:var(--ink);}
.f-bands .fs-lowx{position:absolute;left:0;right:0;top:6.4cqw;font-family:var(--sans);
  font-weight:400;font-size:2.2cqw;line-height:1.5;color:var(--ink);opacity:.85;}

/* the Versions row in the image section: one button per treatment of the same
   picture, wrapping rather than scrolling so none of them hides */
.vrow{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 2px;}
.vrow .vbtn{font:inherit;font-size:10.5px;padding:4px 8px;border:1px solid #3a3a3a;background:#222;
  color:#ccc;border-radius:4px;cursor:pointer;white-space:nowrap;}
.vrow .vbtn:hover{border-color:#5a5a5a;color:#eee;}
.vrow .vbtn.on{background:var(--accent);color:#fff;border-color:var(--accent);}

/* the folded library under the Versions row */
.imglib{margin-top:6px;}
.imglib>summary{list-style:none;cursor:pointer;user-select:none;font-family:'JetBrains Mono',monospace;
  font-size:10px;color:#7d7d7d;padding:5px 7px;background:#111;border:1px solid #262626;border-radius:4px;}
.imglib>summary::-webkit-details-marker{display:none;}
.imglib>summary:hover{color:#ccc;border-color:#3a3a3a;}
.imglib[open]>summary{margin-bottom:6px;}
/* the reader's note after a save: whose words it replaced, or a save that did not go up (rdNote) */
.rdnote{position:fixed;left:16px;bottom:16px;z-index:90;max-width:400px;padding:9px 13px;border-radius:7px;background:rgba(16,16,16,.92);color:#e8e8e8;font-size:12px;line-height:1.45;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .3s,transform .3s;cursor:pointer}
.rdnote.on{opacity:1;transform:none;pointer-events:auto}
/* the editors' password on the reader: a real sign-in form, so the browser offers to keep it (rdKeyForm) */
.rdkey{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:rgba(14,14,14,.22)}
.rdkey form{width:min(320px,calc(100vw - 40px));display:flex;flex-direction:column;gap:9px;padding:20px 20px 16px;background:#fbfbf9;border:1px solid #e4e4e0;border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,.16);font:400 13px/1.45 Inter,system-ui,sans-serif;color:#2a2a28}
.rdkey label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#7a7a78}
.rdkey input{font:inherit;color:#161616;background:#fff;border:1px solid #e4e4e0;border-radius:4px;padding:8px 10px;width:100%;box-sizing:border-box;outline:none}
.rdkey input:focus{border-color:#ffcc00}
.rdkey .m{margin:0;min-height:1.45em;font-size:12px;color:#b0453a}
.rdkey .b{display:flex;justify-content:flex-end;gap:8px}
.rdkey button{font:inherit;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#2a2a28;background:none;border:1px solid #e4e4e0;border-radius:4px;padding:6px 14px;cursor:pointer}
.rdkey button[type=submit]{background:#161616;border-color:#161616;color:#f6f6f4}
.rdkey button:disabled{opacity:.5;cursor:default}

/* The size tidy's switch (index.html TIDY): local only, bottom left, out of the book's way. */
.tidybar{position:fixed;left:16px;bottom:14px;z-index:40;display:flex;align-items:center;gap:2px;
  padding:3px;border-radius:15px;background:rgba(32,34,38,.92);
  font-family:'Inter',system-ui,sans-serif;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;}
.tidybar .tl{padding:0 8px 0 9px;color:#6f737a;}
.tidybar button{border:0;background:none;color:#9a9da2;padding:6px 11px;border-radius:12px;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;}
.tidybar button:hover{color:#e8e8e8;}
.tidybar button.on{background:#ececec;color:#111;}
.tidybar .tn{display:none;padding:0 10px 0 8px;color:#e0a040;}
body.tidy-after .tidybar .tn{display:inline;}
body.tidy-after #stage,body.tidy-after .dock{pointer-events:none;}
body.tidy-after .dock{opacity:.45;}

/* ---- phone: one page at a time (phoneFit in index.html, reader only) ----
   The paper is sized so one page fills the width; the strip slides between the
   halves of a spread. Every sheet stays visible so a slide shows the next page
   coming in. The bar keeps the chapter, the page and Print; the arrows and the
   contents sit at the bottom, big enough for a thumb. */
body.phone .viewer{height:100dvh;padding:46px 0 74px;}
body.phone .spread,body.phone .solo{height:var(--fit-ph,86vh);box-shadow:0 14px 34px rgba(0,0,0,.4);}
body.phone.strip #stage{gap:10px;}
body.phone.strip #stage>.spread,body.phone.strip #stage>.solo{visibility:visible;opacity:1;transform:none;transition:none;}
body.phone .dots,body.phone .lbl{display:none;}
body.phone .bookbar{top:0;height:46px;align-items:center;padding:0 12px;gap:10px;
  font-size:10px;letter-spacing:.12em;background:#1d1f22;}
body.phone .bookbar .bb-mid{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
body.phone .bookbar .bb-chip{display:inline-block;margin-right:8px;vertical-align:-1px;}
body.phone .bookbar .bb-right{flex:none;display:flex;align-items:center;white-space:nowrap;}
body.phone .bookbar .bb-print{margin-left:12px;padding:8px 12px;}
.phnav{display:none;}
body.phone .phnav{position:fixed;left:0;right:0;bottom:0;height:74px;z-index:20;display:flex;
  align-items:center;justify-content:space-between;gap:10px;padding:0 12px 6px;background:#1d1f22;
  font-family:var(--sans);}
.phnav .ph-arrow{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid #3a3d42;background:#17191c;
  color:#e6e7e9;font:300 30px/1 var(--sans);padding:0 0 4px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.phnav .ph-arrow:active{border-color:var(--accent);background:#0f2d40;}
.phnav .ph-arrow:disabled{opacity:.25;}
.phnav .ph-mid{flex:1;min-width:0;height:52px;border:0;background:none;color:#e6e7e9;cursor:pointer;
  font:400 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-tap-highlight-color:transparent;}
.phnav .ph-mid span{display:block;margin-top:3px;font-size:9px;letter-spacing:.2em;color:#7d8187;}
/* the contents, over the whole reader */
.phtoc{position:fixed;inset:0;z-index:200;background:#1d1f22;color:#e6e7e9;font-family:var(--sans);
  display:none;flex-direction:column;}
.phtoc.on{display:flex;}
.phtoc .pt-top{flex:none;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 20px;
  border-bottom:1px solid #2c2f33;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9a9da2;}
.phtoc .pt-x{width:48px;height:48px;border:0;background:none;color:#e6e7e9;font:300 30px/1 var(--sans);cursor:pointer;}
.phtoc ul{list-style:none;margin:0;padding:6px 0 30px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.phtoc .pt-h{display:flex;align-items:center;gap:9px;padding:20px 20px 6px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:#7d8187;}
.phtoc .pt-h i{width:9px;height:9px;background:var(--chap);}
.phtoc li button{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:13px 20px;border:0;background:none;color:#e6e7e9;font:400 15px/1.3 var(--sans);text-align:left;cursor:pointer;}
.phtoc li button b{font-weight:400;font-size:12px;color:#7d8187;letter-spacing:.06em;}
.phtoc li button.on{color:var(--accent);}
.phtoc li button.on b{color:var(--accent);}
@media print{ .phnav,.phtoc{display:none!important;} }