/* ══════════════════════════════════════════════════════════════════
   KNEURALABS · Policy Library — the wooden bookcase
   A face-out shelf of matched policy volumes. Tap a cover; the book
   lifts off the shelf, swings open, and becomes readable. Close it and
   it settles back onto the plank.
   Loaded AFTER styles.css so the .prose reading styles are reused.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --gilt:    oklch(0.74 0.090 78);
  --gilt-hi: oklch(0.88 0.075 86);
  --cream:   oklch(0.965 0.018 88);
  --font-serif:'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* ultra-minimal gallery surround — a clean, quiet room */
  --room:     oklch(0.945 0.006 85);
  --room-2:   oklch(0.915 0.008 84);
  --ink:      oklch(0.26 0.014 70);
  --ink-soft: oklch(0.46 0.012 70);
  --ink-faint:oklch(0.62 0.010 72);
  --hair:     oklch(0.86 0.008 80);
  --shelf-line: oklch(0.80 0.010 78);
}
/* timber tweaks retired — the shelf is minimal now, but keep the hooks
   harmless so older saved states don't break */
[data-wood="walnut"],[data-wood="mahogany"]{}

html,body{height:100%}
body{
  background:var(--room);
  font-family:var(--font-sans);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
}

/* ════════════════════════════════════════════════════════════
   PAGE FRAME
   ════════════════════════════════════════════════════════════ */
.lib{max-width:1180px;margin:0 auto;padding:clamp(1.8rem,4vw,3.4rem) clamp(1rem,3vw,2.4rem) 5rem}

.lib-top{
  display:flex;align-items:center;gap:1rem;
  margin-bottom:clamp(2rem,4vw,3.4rem);
}
.lib-brand{display:flex;align-items:center;gap:.85rem;min-width:0}
.lib-brand img{width:38px;height:38px;border-radius:8px;display:block;flex-shrink:0;
  box-shadow:0 1px 4px rgba(0,0,0,.12)}
.lib-brand .wm{font-size:1.1rem;font-weight:700;letter-spacing:-.01em;line-height:1;color:var(--ink)}
.lib-brand .tag{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.04em;
  color:var(--ink-faint);margin-top:.34rem}
.lib-top .spacer{flex:1}
.lib-top .count{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
  color:var(--ink-faint);
  border:1px solid var(--hair);
  border-radius:999px;padding:.4rem .85rem;white-space:nowrap;
}

.lib-head{margin-bottom:clamp(2.4rem,5vw,4rem);max-width:48ch}
.lib-head h1{
  font-family:var(--font-serif);
  font-size:clamp(2.1rem,5.6vw,3.4rem);font-weight:600;letter-spacing:-.02em;
  line-height:1.04;text-wrap:balance;color:var(--ink);
}
.lib-head h1 em{font-style:italic;color:var(--ink)}
.lib-head p{
  margin-top:1rem;font-size:clamp(.95rem,1.6vw,1.08rem);line-height:1.6;
  color:var(--ink-soft);max-width:44ch;text-wrap:pretty;
}

/* ════════════════════════════════════════════════════════════
   THE SHELVES — ultra-minimal: no cabinet, just books on hairlines,
   each volume turned a few degrees so its spine shows.
   ════════════════════════════════════════════════════════════ */
.bookcase{
  position:relative;
  display:flex;flex-direction:column;
  gap:clamp(2.6rem,5vw,4.4rem);
}
.bookcase::before,.bookcase::after{content:none}
.bookcase-inner-shade{display:none}

.shelf{position:relative;z-index:1}

/* the row of standing books, viewed in light perspective */
.shelf-row{
  position:relative;z-index:2;display:grid;
  grid-template-columns:repeat(var(--per,4),1fr);
  gap:clamp(22px,3.4vw,52px);
  align-items:end;
  padding:0 clamp(6px,2vw,28px);
  perspective:2600px;
  perspective-origin:50% 64%;
}

/* the shelf itself: a single clean hairline ledge the books sit on */
.shelf-plank{
  position:relative;z-index:1;height:2px;margin-top:0;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--shelf-line) 6%,var(--shelf-line) 94%,transparent);
}
.shelf-plank::before{
  content:"";position:absolute;left:2%;right:2%;top:-10px;height:14px;border-radius:50%;
  background:radial-gradient(ellipse 100% 100% at 50% 0,rgba(60,48,30,.20),transparent 72%);
  filter:blur(5px);
}

/* ════════════════════════════════════════════════════════════
   A BOOK ON THE SHELF — a real volume turned a few degrees so you
   read the front board AND see the spine receding into depth.
   .book is the 3D context; .vol3d carries the tilt; the cover is
   the front face and .book-spine is the bound left side.
   ════════════════════════════════════════════════════════════ */
.book{
  position:relative;width:100%;aspect-ratio:var(--ar,62/90);align-self:end;
  border:none;background:none;padding:0;cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .42s cubic-bezier(.22,1,.36,1),filter .42s;
}
/* clean grounding shadow on the shelf */
.book::after{
  content:"";position:absolute;left:-5%;right:5%;bottom:-10px;height:15px;z-index:-1;
  background:radial-gradient(ellipse 58% 130% at 48% 0,rgba(54,42,24,.40),transparent 70%);
  filter:blur(4px);transition:opacity .42s,transform .42s;
}
.vol3d{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateY(var(--tilt,16deg));
  transition:transform .42s cubic-bezier(.22,1,.36,1);
}
.book .cover{
  position:absolute;inset:0;z-index:2;
  transform:translateZ(calc(var(--thick,26px) / 2));
  backface-visibility:hidden;
}
/* the bound spine — the left side face, carrying the title bottom-up */
.book-spine{
  position:absolute;top:0;height:100%;left:0;width:var(--thick,26px);
  transform:translateX(calc(var(--thick,26px) / -2)) rotateY(-90deg);
  border-radius:2px 0 0 2px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:12px 0;
  background:linear-gradient(90deg,
    color-mix(in oklch,var(--cloth),#000 42%),
    color-mix(in oklch,var(--cloth),#000 16%) 52%,
    color-mix(in oklch,var(--cloth),#000 34%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 0 16px rgba(0,0,0,.5);
}
.book-spine::before{ /* faint cloth weave on the spine too */
  content:"";position:absolute;inset:0;background:url("tex/clothweave.png");background-size:11px 11px;
  opacity:.4;mix-blend-mode:overlay;pointer-events:none;
}
.sp-band{width:58%;height:2px;border-radius:1px;flex-shrink:0;position:relative;z-index:1;
  background:linear-gradient(90deg,transparent,color-mix(in oklch,var(--gilt),transparent 14%),transparent)}
.sp-title{
  writing-mode:vertical-rl;transform:rotate(180deg);position:relative;z-index:1;
  font-family:var(--font-sans);font-weight:600;
  font-size:clamp(7px,1.5vw,10px);letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;max-height:62%;
  color:color-mix(in oklch,var(--gilt),#fff 14%);text-shadow:0 1px 1px rgba(0,0,0,.55);
}
.book:hover{transform:translateY(-14px)}
.book:hover .vol3d{transform:rotateY(7deg) translateZ(42px)}
.book:hover::after{opacity:.5;transform:translateY(8px) scaleX(.92)}
.book:active{transform:translateY(-7px)}
.book:active .vol3d{transform:rotateY(11deg) translateZ(20px)}
.book:focus-visible{outline:none}
.book:focus-visible .cover{box-shadow:0 0 0 3px var(--gilt),var(--cover-shadow)}
.book.is-reading{opacity:0;pointer-events:none}  /* hidden while its reader is open */

/* ════════════════════════════════════════════════════════════
   THE COVER FACE — a matched cloth-bound volume
   reused on the shelf AND as the closed front cover in the reader
   ════════════════════════════════════════════════════════════ */
.cover{
  --cover-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.34),          /* lit top board edge */
    inset 1.5px 0 0 rgba(255,255,255,.10),           /* lit left edge */
    inset 0 0 0 1px color-mix(in oklch,var(--cloth),#000 26%),
    inset 0 0 22px -2px rgba(0,0,0,.34),             /* cloth pulled tight over the board edges */
    inset 0 -10px 18px -10px rgba(0,0,0,.5),         /* shadowed lower board */
    inset -2px 0 6px -3px rgba(0,0,0,.4),            /* shadowed right board edge */
    0 16px 30px -12px rgba(0,0,0,.66),
    0 5px 11px rgba(0,0,0,.45);
  position:relative;width:100%;height:100%;border-radius:2.5px 7px 7px 2.5px;
  background:
    radial-gradient(140% 120% at 24% 12%, color-mix(in oklch,var(--cloth),#fff 17%), transparent 50%),
    radial-gradient(130% 130% at 82% 98%, color-mix(in oklch,var(--cloth),#000 30%), transparent 58%),
    linear-gradient(180deg,color-mix(in oklch,var(--cloth),#fff 6%),var(--cloth) 26%,color-mix(in oklch,var(--cloth),#000 16%));
  box-shadow:var(--cover-shadow);
  overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
}
/* real woven cloth texture — fine warp/weft over the dyed buckram */
.cover::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.62;
  background:
    url("tex/clothweave.png"),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 2.5px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 2.5px);
  background-size:13px 13px, 2.5px 2.5px, 2.5px 2.5px;
  mix-blend-mode:overlay;
}
/* spine joint groove on the left + raised cloth at the hinge + a soft sheen sweeping across */
.cover::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(90deg,
      color-mix(in oklch,var(--cloth),#fff 10%) 0,
      color-mix(in oklch,var(--cloth),#000 4%) 2.2%,
      color-mix(in oklch,var(--cloth),#000 34%) 4.2%,   /* the French groove — a real recessed joint */
      color-mix(in oklch,var(--cloth),#000 2%) 5.4%,
      color-mix(in oklch,var(--cloth),#fff 16%) 6.4%,   /* cloth bulges back up past the hinge */
      transparent 9.5%),
    linear-gradient(112deg,transparent 36%,rgba(255,255,255,.12) 49%,rgba(255,255,255,.03) 56%,transparent 64%);
}

/* ── shared cover furniture — every volume is LEFT-ALIGNED ── */
.cv-pad{
  position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(12px,2.6vw,21px) clamp(10px,2vw,15px) clamp(11px,2.2vw,16px) clamp(15px,3vw,24px);
  color:var(--gilt);text-align:left;overflow:hidden;width:100%;
}
.cv-frame{
  position:absolute;inset:clamp(7px,1.6vw,13px);z-index:1;pointer-events:none;border-radius:1px;
  border:1px solid color-mix(in oklch,var(--gilt),transparent 38%);
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--gilt),transparent 72%);
}
.cv-eyebrow{
  font-family:var(--font-mono);font-size:clamp(.44rem,1.05vw,.62rem);letter-spacing:.16em;
  text-transform:uppercase;color:color-mix(in oklch,var(--gilt),var(--cloth) 20%);position:relative;z-index:2;
  text-shadow:0 .5px 0 rgba(0,0,0,.45),0 -.5px 0 color-mix(in oklch,var(--gilt-hi),transparent 55%);
}
.cv-title{
  font-family:var(--font-sans);font-weight:700;font-size:clamp(1rem,2.8vw,1.72rem);line-height:1.02;
  letter-spacing:-.022em;text-align:left;text-wrap:balance;position:relative;z-index:2;
  /* hot-foil stamp: a metallic vertical gradient pressed into the cloth */
  color:transparent;
  background:linear-gradient(176deg,
    color-mix(in oklch,var(--gilt-hi),#fff 30%) 4%,
    var(--gilt) 34%,
    color-mix(in oklch,var(--gilt),#fff 22%) 52%,
    color-mix(in oklch,var(--gilt),#000 22%) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 1px 1px rgba(0,0,0,.55),0 -1px 0 color-mix(in oklch,var(--gilt-hi),transparent 40%);
}
.cv-grow{flex:1 1 auto;min-height:.25rem}
.cv-rule{height:1px;width:100%;background:color-mix(in oklch,var(--gilt),transparent 42%);position:relative;z-index:2}
.cv-rule.short{width:42%}
.cv-rule.thick{height:3px;background:color-mix(in oklch,var(--gilt),transparent 14%);border-radius:2px}
.cv-foot{
  width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;position:relative;z-index:2;
  font-family:var(--font-mono);font-size:clamp(.42rem,1vw,.58rem);letter-spacing:.06em;
  color:color-mix(in oklch,var(--gilt),var(--cloth) 18%);
  text-shadow:0 .5px 0 rgba(0,0,0,.4);
}
.cv-foot .vol{font-weight:600;letter-spacing:.04em;color:color-mix(in oklch,var(--gilt),#fff 12%)}
.cv-row{display:flex;align-items:center;gap:.6rem;width:100%;position:relative;z-index:2}
.cv-row.between{justify-content:space-between}
.cv-row .cv-foot{width:auto;flex:1}
/* the real KNEURALABS logo, tipped onto the board */
.cv-logo{
  display:block;border-radius:6px;overflow:hidden;background:#fff;flex-shrink:0;position:relative;z-index:2;
  box-shadow:0 0 0 1px color-mix(in oklch,var(--gilt),transparent 28%),
             0 0 0 3px color-mix(in oklch,var(--cloth),#000 16%),0 3px 7px rgba(0,0,0,.45);
}
.cv-logo img{width:100%;height:100%;object-fit:cover;display:block}
.cv-logo.sm{width:clamp(22px,8vw,34px);aspect-ratio:1}
.cv-logo.md{width:clamp(30px,12vw,54px);aspect-ratio:1}
.cv-logo.lg{width:clamp(42px,17vw,76px);aspect-ratio:1;border-radius:8px}

/* ── unique motifs ── */
.cv-numeral{
  position:absolute;right:-.05em;top:50%;transform:translateY(-50%);z-index:0;pointer-events:none;
  font-family:var(--font-sans);font-weight:800;font-size:clamp(5rem,32vw,13rem);line-height:.66;letter-spacing:-.06em;
  color:color-mix(in oklch,var(--gilt),transparent 85%);
}
.cv-ledger{
  position:absolute;left:0;right:0;top:34%;bottom:24%;z-index:0;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(0deg,transparent 0 calc(1.4em - 1px),
    color-mix(in oklch,var(--gilt),transparent 55%) calc(1.4em - 1px) 1.4em);
}
.cv-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(color-mix(in oklch,var(--gilt),transparent 82%) 1px,transparent 1px),
                   linear-gradient(90deg,color-mix(in oklch,var(--gilt),transparent 82%) 1px,transparent 1px);
  background-size:14px 14px;
  -webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent);
}
.cv-bracket{
  position:absolute;z-index:2;width:clamp(14px,5vw,26px);aspect-ratio:1;
  border:2px solid color-mix(in oklch,var(--gilt),transparent 32%);
}
.cv-bracket.tl{top:clamp(8px,1.8vw,14px);left:clamp(12px,2.6vw,20px);border-right:none;border-bottom:none}
.cv-caret{display:inline-block;width:.46em;height:.95em;margin-left:.14em;vertical-align:-.1em;
  background:color-mix(in oklch,var(--gilt),transparent 25%);animation:cvblink 1.1s steps(1) infinite}
@keyframes cvblink{50%{opacity:0}}
.cv-band{
  align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:.5rem;position:relative;z-index:2;
  border-radius:2px;padding:clamp(6px,1.4vw,10px) clamp(8px,1.6vw,12px);
  background:linear-gradient(90deg,color-mix(in oklch,var(--gilt),transparent 16%),color-mix(in oklch,var(--gilt),transparent 44%));
  color:var(--cloth);font-family:var(--font-mono);font-size:clamp(.46rem,1.1vw,.64rem);
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;
}
.cv-band .cv-logo{box-shadow:0 0 0 1px rgba(0,0,0,.18),0 2px 5px rgba(0,0,0,.4)}
.cv-seal{
  position:relative;z-index:2;width:clamp(40px,16vw,74px);aspect-ratio:1;border-radius:50%;padding:5px;
  background:radial-gradient(circle,transparent 58%,color-mix(in oklch,var(--gilt),transparent 62%) 59%);
  box-shadow:0 0 0 2px color-mix(in oklch,var(--gilt),transparent 42%),
             inset 0 0 0 2px color-mix(in oklch,var(--gilt),transparent 56%);
  display:flex;align-items:center;justify-content:center;
}
.cv-seal img{width:72%;height:72%;object-fit:cover;border-radius:50%;display:block}
.cv-sig{position:relative;z-index:2;width:100%}
.cv-sig::before{content:"";display:block;border-bottom:1.5px dashed color-mix(in oklch,var(--gilt),transparent 35%);margin-bottom:.3rem}
.cv-sig span{font-family:var(--font-mono);font-size:clamp(.4rem,.95vw,.55rem);letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in oklch,var(--gilt),var(--cloth) 25%)}
.cv-hazard{
  position:absolute;right:0;bottom:0;width:44%;height:44%;z-index:0;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(-45deg,var(--gilt) 0 8px,transparent 8px 18px);
  -webkit-mask:radial-gradient(circle at 100% 100%,#000,transparent 76%);mask:radial-gradient(circle at 100% 100%,#000,transparent 76%);
}

/* per-variant spacing tweaks */
.cv-v0 .cv-title{margin:.5rem 0 .7rem}
.cv-v1 .cv-title{margin-top:.3rem;max-width:78%}
.cv-v2 .cv-title{padding:.15rem 0}
.cv-v4 .cv-rule{margin:.55rem 0}
.cv-v4 .cv-title{margin:.2rem 0 .55rem}
.cv-v5 .cv-title{margin:.2rem 0}
.cv-v6 .cv-title{margin:.55rem 0 .5rem}
.cv-v8 .cv-title{margin-top:.5rem}
.cv-v9 .cv-title{margin-bottom:.5rem}
.cv-v9 .cv-sig{margin-bottom:.7rem}

/* ════════════════════════════════════════════════════════════
   THE READER — backdrop + 3D opening book
   ════════════════════════════════════════════════════════════ */
.reader{
  position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:radial-gradient(120% 120% at 50% 30%,rgba(10,7,4,.55),rgba(5,4,2,.86));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .4s ease;
}
.reader.in{opacity:1}

.reader-close{
  position:absolute;top:clamp(.9rem,2.4vw,1.6rem);right:clamp(.9rem,2.4vw,1.6rem);z-index:30;
  width:44px;height:44px;border-radius:999px;cursor:pointer;border:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream);color:var(--ink);
  box-shadow:0 6px 20px rgba(0,0,0,.5);transition:transform .2s,background .2s;
}
.reader-close:hover{transform:scale(1.07) rotate(90deg);background:var(--gilt)}

/* prev / next paddles */
.reader-paddle{
  position:absolute;top:50%;transform:translateY(-50%);z-index:25;
  width:46px;height:46px;border-radius:999px;cursor:pointer;border:none;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in oklch,var(--cream),transparent 14%);color:var(--ink);
  box-shadow:0 6px 18px rgba(0,0,0,.45);transition:transform .2s,background .2s,opacity .2s;
}
.reader-paddle:hover{background:var(--gilt);transform:translateY(-50%) scale(1.08)}
.reader-paddle.prev{left:clamp(.6rem,2.6vw,2.2rem)}
.reader-paddle.next{right:clamp(.6rem,2.6vw,2.2rem)}
.reader-paddle:disabled{opacity:0;pointer-events:none}

.stage{
  position:relative;perspective:2400px;
  width:min(440px, 90vw, 82vh * 62 / 90);
  aspect-ratio:62/90;
}

.book3d{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .52s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}

/* the readable page revealed under the cover */
.page{
  position:absolute;inset:0;border-radius:3px 7px 7px 3px;overflow:hidden;
  background:url("tex/paper.png"),var(--rs-bg);
  background-blend-mode:multiply;background-size:220px,auto;
  color:var(--rs-text);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.7),0 8px 18px rgba(0,0,0,.4);
  display:flex;flex-direction:column;
  opacity:0;transition:opacity .25s ease .12s;
  /* own compositing layer so mobile WebKit paints the page reliably.
     (an overflow child of a preserve-3d ancestor otherwise renders blank
     on iOS Safari — the page never rotates, so flattening it is safe) */
  transform:translateZ(0);-webkit-transform:translateZ(0);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.book3d.open .page{opacity:1}

/* ── the turning leaf (page-flip on prev / next) ── */
.leaf{
  position:absolute;inset:0;z-index:15;transform-origin:left center;transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.5,.04,.34,1);will-change:transform;pointer-events:none;
}
.leaf-face{
  position:absolute;inset:0;border-radius:3px 7px 7px 3px;overflow:hidden;backface-visibility:hidden;
  background:url("tex/paper.png"),var(--rs-bg);background-blend-mode:multiply;background-size:220px,auto;
  color:var(--rs-text);display:flex;flex-direction:column;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.5);
}
.leaf-face.back{
  transform:rotateY(180deg);
  background:linear-gradient(110deg,var(--rs-panel),var(--rs-bg));
}
/* gutter shading on the turning leaf for depth */
.leaf-face::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:34px;z-index:9;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.22),transparent);
}
.leaf-face .page-body{overflow:hidden}
/* gutter shadow + page-block edge on the right fore-edge */
.page::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:26px;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.20),rgba(0,0,0,.05) 45%,transparent);
}
.page::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:7px;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(120,95,55,.22) 0 1px,transparent 1px 3px),
             linear-gradient(90deg,transparent,rgba(120,95,55,.14));
}

.page-head{
  position:relative;z-index:6;flex-shrink:0;text-align:center;
  padding:clamp(1.7rem,4.4vw,2.6rem) clamp(1.4rem,4vw,2.2rem) clamp(1.1rem,2.6vw,1.5rem);
  border-bottom:1px solid var(--rs-line);
  background:var(--rs-bg);
}
.page-head .ph-code{
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.26em;color:var(--accent);
  text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
}
.page-head .ph-code .pmark{display:none}
.page-head h2{
  margin-top:.75rem;font-family:var(--font-serif);font-size:clamp(1.45rem,4vw,2rem);font-weight:600;
  letter-spacing:-.01em;line-height:1.1;color:var(--rs-text);text-wrap:balance;
}
.page-head h2::after{ /* a small chapter ornament under the title */
  content:"";display:block;width:38px;height:1px;background:var(--rs-line2);margin:.95rem auto 0;
}
.page-head .ph-meta{
  margin-top:.85rem;display:flex;justify-content:center;gap:1.4rem;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;color:var(--rs-faint);
}
.page-head .ph-meta b{color:var(--rs-soft);font-weight:500}

/* ── proper-book typography: serif, justified, indented, drop-capped ── */
.page-body{
  position:relative;z-index:6;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:clamp(1.5rem,4vw,2.3rem) clamp(1.4rem,4vw,2.2rem) clamp(1.6rem,4vw,2.4rem);
  scroll-behavior:smooth;
}
.page-body::-webkit-scrollbar{width:9px}
.page-body::-webkit-scrollbar-thumb{background:var(--rs-line2);border-radius:9px;border:3px solid var(--rs-bg)}

.page-body .prose{max-width:34rem;margin:0 auto;font-family:var(--font-serif)}
.page-body .prose p{
  font-family:var(--font-serif);font-size:1.02rem;line-height:1.66;color:var(--rs-text);
  max-width:none;margin:0;text-align:justify;text-indent:1.35em;
  hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty;
}
.page-body .prose p:first-of-type{text-indent:0}
/* drop cap to open the chapter, like a real book */
.page-body .prose p:first-of-type::first-letter{
  float:left;font-family:var(--font-serif);font-weight:700;
  font-size:3.2em;line-height:.72;padding:.04em .1em 0 0;color:var(--rs-text);
}
.page-body .prose strong{font-weight:600;color:var(--rs-text)}

/* section breaks become centred serif sub-titles with a hairline flourish */
.page-body .prose p:has(> strong:only-child){text-indent:0;text-align:center;margin:2rem 0 .2rem}
.page-body .prose p > strong:only-child{
  display:block;font-family:var(--font-serif);font-weight:600;font-size:1.16rem;
  letter-spacing:0;color:var(--rs-text);border-top:none;padding-top:0;margin:0;
}
.page-body .prose p > strong:only-child::before{
  content:"";display:block;width:32px;height:1px;background:var(--rs-line2);margin:0 auto 1rem;
}
.page-body .prose ul{margin:.7rem 0 1rem;text-align:left}
.page-body .prose li{font-family:var(--font-serif);font-size:.97rem;line-height:1.55;max-width:none}
.page-body .plain-note{font-family:var(--font-serif);font-style:italic}
.page-body .plain-note strong{font-style:normal}
.page-foot-pager{
  margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--rs-line);
  display:flex;justify-content:space-between;gap:1rem;
}
.page-foot-pager button{
  background:none;border:none;cursor:pointer;text-align:left;color:var(--rs-soft);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;
  display:flex;flex-direction:column;gap:.3rem;transition:color .18s;padding:0;
}
.page-foot-pager button.np{text-align:right;align-items:flex-end}
.page-foot-pager button:hover:not(:disabled){color:var(--accent)}
.page-foot-pager button:disabled{opacity:.28;cursor:default}
.page-foot-pager .pf-dir{font-size:.56rem;letter-spacing:.16em;color:var(--rs-faint)}
.page-foot-pager .pf-ttl{font-family:var(--font-serif);font-weight:600;font-size:.9rem;letter-spacing:-.01em;color:inherit}

/* the front cover — hinged on the left, swings open */
.book3d .cover{
  position:absolute;inset:0;z-index:10;
  transform-origin:left center;transform:rotateY(0deg);
  transition:transform .72s cubic-bezier(.62,.02,.34,1);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.34),
    inset 0 0 0 1px color-mix(in oklch,var(--cloth),#000 26%),
    inset 0 0 26px -2px rgba(0,0,0,.34),
    inset 0 -12px 22px -12px rgba(0,0,0,.5),
    0 22px 46px -14px rgba(0,0,0,.62);
}
.book3d.open .cover{transform:rotateY(-156deg)}
/* the inside of the front cover (its back face) — endpaper cream */
.book3d .cover .cover-back{
  position:absolute;inset:0;border-radius:2px 5px 5px 2px;z-index:6;
  transform:rotateY(180deg);backface-visibility:hidden;
  background:linear-gradient(110deg,var(--cream),color-mix(in oklch,var(--cream),var(--cloth) 8%));
  box-shadow:inset 0 0 60px rgba(120,95,55,.14);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  color:color-mix(in oklch,var(--rs-soft),var(--cloth) 20%);padding:2rem;text-align:center;
}
.cover-back .cb-mark{width:46px;height:46px;border-radius:8px;opacity:.85}
.cover-back .cb-note{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;
  color:color-mix(in oklch,var(--rs-faint),#000 6%);line-height:1.7}
.cover-back .cb-emboss{
  position:absolute;inset:14px;border:1px solid color-mix(in oklch,var(--cloth),transparent 60%);
  border-radius:3px;pointer-events:none;
}

/* hint chip under the book */
.reader-hint{
  position:absolute;left:50%;bottom:clamp(.6rem,2.4vw,1.4rem);transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  color:color-mix(in oklch,var(--cream),transparent 40%);
  display:flex;align-items:center;gap:.5rem;opacity:0;transition:opacity .4s ease .5s;
}
.reader.in .reader-hint{opacity:1}
.reader-hint kbd{font-family:var(--font-mono);border:1px solid color-mix(in oklch,var(--cream),transparent 70%);
  border-radius:4px;padding:.05rem .4rem;font-size:.58rem}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE  (column count is driven by JS chunking via --per;
   here we only adapt chrome, the reader, and tight viewports)
   ════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  .reader-paddle{display:none}
  .book3d.open .cover{transform:rotateY(-150deg)}
  .lib-head h1{font-size:clamp(1.8rem,8vw,2.4rem)}
}
@media(max-width:420px){
  .reader-hint{font-size:.55rem;letter-spacing:.06em}
}

/* short / landscape viewports (phones on their side, short laptops) */
@media(max-height:560px){
  .lib{padding-top:1rem;padding-bottom:2rem}
  .lib-head{margin-bottom:1.1rem}
  .lib-head p{display:none}
  .lib-top{margin-bottom:1rem}
  .reader-hint{display:none}
  .book3d.open .cover{transform:rotateY(-152deg)}
}
@media(max-height:430px){
  .lib-head{margin-bottom:.7rem}
  .lib-head h1{font-size:clamp(1.5rem,6vw,2rem)}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.12s!important}
}