/* ============================================================================
   THE BOOMBOX EDITION — "Ex Libris"
   The site as a private-press special edition of Brad & Taryn's library.
   ----------------------------------------------------------------------------
   Materials: ink-aubergine leather (the desk), bone laid paper (every reading
   surface), oxblood wax, layered-gradient gold foil. One key light, top-left,
   candle-warm: every emboss/shadow/sheen obeys it.
   ========================================================================== */

/* ============================ TOKENS ============================ */
:root{
  /* the desk / void — full-leather boards */
  --ink:oklch(0.17 0.03 320);
  --ink-deep:oklch(0.13 0.025 320);
  --ink-soft:oklch(0.22 0.035 318);
  --ink-line:oklch(0.34 0.03 320);

  /* bone / cream laid paper */
  --paper:oklch(0.93 0.015 85);
  --paper-warm:oklch(0.905 0.02 84);
  --paper-shade:oklch(0.86 0.022 82);
  --paper-ink:oklch(0.28 0.022 320);     /* body text on paper */
  --paper-soft:oklch(0.40 0.02 320);     /* secondary text on paper (≥4.5:1) */
  --paper-line:oklch(0.74 0.025 80);     /* hairline rules on paper */

  /* oxblood-garnet wax */
  --wax:oklch(0.42 0.13 25);
  --wax-deep:oklch(0.33 0.11 22);
  --wax-bright:oklch(0.52 0.145 27);

  /* gold foil — layered ramp (kept bright: it sits on near-black leather) */
  --foil-0:#8f6f33; --foil-1:#b48b3c; --foil-2:#e7c878; --foil-3:#f7ecc8;
  /* moon-silver foil ramp */
  --slvr-0:#7e7f8c; --slvr-1:#a9abb8; --slvr-2:#dfe2ea; --slvr-3:#f6f7fa;

  /* text on leather */
  --cream:oklch(0.90 0.02 85);
  --cream-dim:oklch(0.76 0.025 85);
  --gold-ink:oklch(0.80 0.085 85);       /* flat gold tone that passes on ink */

  /* per-reader metal (html[data-metals] swaps these) */
  --metal-0:var(--foil-0); --metal-1:var(--foil-1);
  --metal-2:var(--foil-2); --metal-3:var(--foil-3);

  --font-display:"Cinzel", "EB Garamond", Georgia, serif;
  --font-body:"EB Garamond", Georgia, serif;
  --font-hand:"IM Fell English", "EB Garamond", Georgia, serif;

  /* the motion constitution */
  --t-flick:240ms; --t-leaf:700ms; --t-board:1100ms;
  --ease-paper:cubic-bezier(.25,.8,.25,1);
  --ease-board:cubic-bezier(.6,.05,.2,1);

  --maxw:1180px;

  /* one tiled SVG laid-paper grain (static, rasterized once) */
  --grain-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.24 0 0 0 0 0.20 0 0 0 0 0.13 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  /* leather grain for the void */
  --grain-leather:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.052 0.07' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
  /* tight cloth weave for clothbound fallback covers */
  --grain-cloth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.46 0.92' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 0.9 0 0 0 0.075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
}

/* Brad keeps moon-silver, Taryn ember-gold; shared pages mix (gold display). */
html[data-metals="silver"]{
  --metal-0:var(--slvr-0); --metal-1:var(--slvr-1);
  --metal-2:var(--slvr-2); --metal-3:var(--slvr-3);
}
html[data-metals="gold"], html[data-metals="mix"]{
  --metal-0:var(--foil-0); --metal-1:var(--foil-1);
  --metal-2:var(--foil-2); --metal-3:var(--foil-3);
}

/* ---- legacy tokens (Keeper's Console keeps its functional skin) ---------- */
:root{
  --void-1:#0b0818; --void-2:#120d24;
  --panel-line:rgba(168,148,222,0.18);
  --silver:oklch(0.90 0.012 285);
  --silver-dim:oklch(0.74 0.02 288);
  --muted:oklch(0.62 0.025 290);
  --gold:oklch(0.84 0.10 86);
  --lavender:oklch(0.82 0.095 300);
  --violet-soft:oklch(0.55 0.14 300);
  --violet-glow:oklch(0.62 0.20 300 / 0.45);
  --accent:var(--silver); --accent-warm:var(--gold);
  --r:14px; --ease:cubic-bezier(.2,.7,.2,1);
}

/* ============================ BASE ============================ */
*{box-sizing:border-box;}
/* overflow-x:hidden on <body> makes it a horizontal scroll CONTAINER on iOS,
   which shows up as a second scrollbar; overflow-x:clip suppresses overflow
   without that side effect. hidden first as the fallback for older Safari. */
html,body{margin:0;padding:0; overflow-x:hidden; overflow-x:clip;}
body{
  background:
    radial-gradient(140% 100% at 22% 0%, oklch(0.21 0.035 318), transparent 62%),
    linear-gradient(180deg, var(--ink), var(--ink-deep));
  color:var(--cream);
  font-family:var(--font-body);
  font-size:18px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
}
body::before{ /* leather grain on the void — one fixed tile, zero cost at rest */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:var(--grain-leather);
}
.app{position:relative; z-index:1; min-height:100svh; display:flex; flex-direction:column;}
button{font-family:inherit; color:inherit; cursor:pointer; background:none; border:none; font-size:inherit;}
img{max-width:100%;}
::selection{background:oklch(0.42 0.13 25 / .85); color:var(--paper);}

/* Focus: a thin foil rule, never the default ring. */
:focus{outline:none;}
:focus-visible{outline:2px solid var(--foil-2); outline-offset:3px; border-radius:2px;}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* ============================ MATERIALS ============================ */
/* Every reading surface is laid paper with the same grain tile. */
.paper{
  background-color:var(--paper);
  background-image:var(--grain-paper);
  color:var(--paper-ink);
}
.paper ::selection{background:oklch(0.42 0.13 25 / .9); color:var(--paper);}

/* Gold-foil stamped display text: layered gradient clip + a debossed bite
   from a drop-shadow under the glyphs. Sheen is BAKED at the key-light angle;
   only the hero title carries a live (scroll-raked) sheen layer. */
.foil{
  font-family:var(--font-display); font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  background:linear-gradient(112deg,
    var(--metal-0) 0%, var(--metal-1) 26%, var(--metal-3) 41%,
    var(--metal-2) 50%, var(--metal-1) 68%, var(--metal-0) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,0.6));
}
/* Blind deboss — stamped without foil, for paper surfaces. */
.deboss{
  font-family:var(--font-display); font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase;
  color:oklch(0.50 0.025 320);
  text-shadow:0 1px 0 rgba(255,253,245,0.85), 0 -1px 0 rgba(60,40,30,0.28);
}
/* Data voice: EB Garamond small caps + old-style figures. Never mono. */
.figs{font-feature-settings:"onum" 1;}
.smallcaps{font-variant-caps:small-caps; letter-spacing:0.06em;}
.datum{font-variant-caps:small-caps; font-feature-settings:"onum" 1; letter-spacing:0.04em;}

/* Hairline rules instead of glows. */
.rule{height:1px; background:linear-gradient(90deg, transparent, var(--paper-line), transparent); border:none;}
.rule-ink{height:1px; background:linear-gradient(90deg, transparent, var(--ink-line), transparent); border:none;}

/* Handwritten marginalia. ≥16px, italic only. */
.hand{
  font-family:var(--font-hand); font-style:italic; font-size:1.06rem;
  color:oklch(0.36 0.05 290); line-height:1.4;
}

/* ============================ TOP NAV ============================ */
.topnav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.55rem clamp(1rem,4vw,2.6rem);
  padding-left:max(clamp(1rem,4vw,2.6rem), env(safe-area-inset-left));
  padding-right:max(clamp(1rem,4vw,2.6rem), env(safe-area-inset-right));
  background:linear-gradient(180deg, var(--ink-deep), oklch(0.15 0.028 320 / 0.97));
  border-bottom:1px solid oklch(0.32 0.05 35 / 0.55);
}
.topnav-home{background:transparent; border-bottom-color:transparent;}
.brand{display:flex; align-items:center; gap:0.55rem; min-height:44px;}
.brand-device{
  width:22px; height:22px; display:grid; place-items:center; flex-shrink:0;
  border:1px solid var(--metal-1); border-radius:50%;
  color:var(--metal-2); font-size:0.7rem; line-height:1;
}
.brand-text{
  font-family:var(--font-display); font-weight:600; font-size:0.78rem;
  letter-spacing:0.24em; text-transform:uppercase; color:var(--cream);
  white-space:nowrap;
}
.nav-links{display:flex; gap:0.15rem;}
.nav-link{
  position:relative; font-size:1rem; letter-spacing:0.05em;
  font-variant-caps:small-caps;
  padding:0.55rem 0.9rem; min-height:44px; color:var(--cream-dim);
  transition:color var(--t-flick) var(--ease-paper);
}
.nav-link::after{ /* the thin foil rule */
  content:""; position:absolute; left:0.9rem; right:0.9rem; bottom:7px; height:1px;
  background:linear-gradient(90deg, var(--metal-0), var(--metal-2), var(--metal-0));
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--t-flick) var(--ease-paper);
}
.nav-link:hover{color:var(--cream);}
.nav-link:hover::after{transform:scaleX(0.6);}
.nav-link.active{color:var(--cream);}
.nav-link.active::after{transform:scaleX(1);}

/* ============================ FOOTER ============================ */
.page-wrap{flex:1; width:100%;}
.site-foot{
  display:flex; align-items:center; justify-content:center; gap:0.7rem; flex-wrap:wrap;
  padding:2.4rem 1rem calc(2.6rem + env(safe-area-inset-bottom));
  color:var(--cream-dim); font-size:0.92rem; letter-spacing:0.05em;
  font-variant-caps:small-caps;
}
.foot-rune{color:var(--metal-1); font-size:0.8rem;}
.foot-admin{
  color:var(--cream-dim); font-size:0.86rem; letter-spacing:0.08em;
  font-variant-caps:small-caps; padding:0.4rem 0.7rem; min-height:44px;
  border-bottom:1px solid transparent; transition:all var(--t-flick) var(--ease-paper);
}
.foot-admin:hover{color:var(--gold-ink); border-bottom-color:var(--metal-0);}

/* ============================ LOADING STATES ============================ */
/* Deep links get a quiet paper-grain wait; the hero handles home's own. */
.page-loading{
  min-height:62svh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1.1rem; color:var(--cream-dim);
}
.loading-mark{
  width:54px; height:54px; border:1px solid var(--metal-0); border-radius:50%;
  display:grid; place-items:center; font-family:var(--font-display);
  font-size:1.25rem; color:var(--metal-2); position:relative; overflow:hidden;
}
.loading-mark::after{ /* breathing foil sheen — the loading state, then gone */
  content:""; position:absolute; inset:-40%;
  background:linear-gradient(112deg, transparent 38%, rgba(255,245,215,0.32) 50%, transparent 62%);
  animation:breathe 2.8s var(--ease-paper) infinite;
}
@keyframes breathe{ 0%{transform:translateX(-65%);} 55%,100%{transform:translateX(65%);} }
.loading-text{font-size:1.05rem; font-style:italic;}

/* ============================ THE HERO ============================ */
.hero-track{position:relative;}
.hero-track.scrub{height:220svh;} /* desktop: the open is scrubbed over ~120vh */
.hero-stage{
  position:sticky; top:0; height:100svh; min-height:540px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-track:not(.scrub) .hero-stage{position:relative;}
.hero-persp{perspective:1900px; perspective-origin:50% 46%;}
.hero-scene{position:relative; transform-style:preserve-3d;}

/* Geometry: the open spread is two pages of --pgw each; the closed book is the
   right half with the front board on top, hinged at the gutter. */
.hero-scene{
  --pgw:min(38vw, 330px);
  --pgh:calc(var(--pgw) * 1.5);
  width:calc(var(--pgw) * 2); height:var(--pgh);
}
@media (max-width:760px){ .hero-scene{--pgw:min(43vw, 220px);} }

.hero-spread{
  position:absolute; inset:0; display:flex;
  border-radius:6px 10px 10px 6px;
  background:var(--paper-warm);
  box-shadow:0 34px 70px -30px rgba(0,0,0,0.75);
  opacity:0; /* fades up as the board passes — light leads, matter follows */
}
.endpaper-chart{position:absolute; top:0; right:0; bottom:0; left:0; inset:0; width:100%; height:100%; border-radius:inherit;}
.spread-gutter{
  position:absolute; top:0; bottom:0; left:50%; width:74px; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(50,30,25,0.30) 50%, transparent);
  pointer-events:none;
}
.spread-half{position:relative; flex:1; display:grid; place-items:center; padding:clamp(0.8rem,2.4vw,1.6rem);}

/* The engraved bookplates */
.plate{
  position:relative; width:100%; max-width:280px; aspect-ratio:0.72;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.32rem; padding:1.1rem 0.9rem; text-align:center;
  background:oklch(0.95 0.012 86); background-image:var(--grain-paper);
  border:1px solid var(--p-metal-0, var(--foil-0));
  outline:1px solid oklch(0.78 0.03 82); outline-offset:-6px;
  box-shadow:0 2px 0 rgba(255,253,245,0.8) inset, 0 -1px 0 rgba(70,50,40,0.18) inset,
    0 10px 26px -14px rgba(60,35,25,0.45);
  color:var(--paper-ink);
  transition:transform var(--t-flick) var(--ease-paper), box-shadow var(--t-flick) var(--ease-paper);
}
.plate[data-person="brad"]{--p-metal-0:var(--slvr-0); --p-metal-1:var(--slvr-1); --p-metal-2:var(--slvr-2);}
.plate[data-person="taryn"]{--p-metal-0:var(--foil-0); --p-metal-1:var(--foil-1); --p-metal-2:var(--foil-2);}
.plate:hover{transform:translateY(-3px); box-shadow:0 2px 0 rgba(255,253,245,0.8) inset,
  0 -1px 0 rgba(70,50,40,0.18) inset, 0 18px 34px -16px rgba(60,35,25,0.55);}
.plate-exlibris{
  font-family:var(--font-display); font-size:0.62rem; font-weight:600;
  letter-spacing:0.38em; text-transform:uppercase; color:oklch(0.46 0.03 320);
}
.plate-flourish{color:var(--p-metal-0); font-size:0.78rem; letter-spacing:0.5em; padding-left:0.5em;}
.plate-monogram{
  width:58px; height:58px; margin:0.25rem 0; border-radius:50%;
  border:1px solid var(--p-metal-0);
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:600; font-size:1.7rem;
  color:oklch(0.40 0.04 320);
  text-shadow:0 1px 0 rgba(255,253,245,0.85);
  box-shadow:0 0 0 3px oklch(0.95 0.012 86), 0 0 0 4px oklch(0.80 0.03 82);
}
.plate-name{
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.15rem,2.6vw,1.5rem);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--paper-ink); line-height:1.1;
}
.plate-tonight{margin:0.3rem 0 0; display:flex; flex-direction:column; align-items:center; gap:0.4rem; min-width:0; width:100%;}
.plate-tonight-label{font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color:oklch(0.48 0.025 320);}
.plate-peek{width:54px; flex-shrink:0; box-shadow:0 8px 18px -8px rgba(60,35,25,0.6);}
.plate-tonight-title{
  font-style:italic; font-size:0.95rem; color:var(--paper-soft); line-height:1.3;
  max-width:24ch; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.plate-cta{
  margin-top:0.35rem; font-variant-caps:small-caps; letter-spacing:0.1em;
  font-size:0.95rem; color:oklch(0.42 0.06 35);
}

/* The front board — full-leather, hinged at the gutter (left edge = spine). */
.hero-board{
  position:absolute; top:-1.1%; bottom:-1.1%; left:50%; right:-1.4%;
  transform-origin:left center; transform-style:preserve-3d;
  border-radius:4px 10px 10px 4px;
}
.board-face{
  position:absolute; inset:0; border-radius:inherit;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.board-front{
  background:
    radial-gradient(130% 110% at 18% 6%, oklch(0.24 0.04 318), transparent 55%),
    linear-gradient(160deg, oklch(0.21 0.035 318), oklch(0.145 0.028 320));
  box-shadow:0 30px 60px -22px rgba(0,0,0,0.85), 0 1px 0 rgba(255,240,210,0.07) inset;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; padding:9% 11%;
  overflow:hidden;
}
.board-front::before{content:""; position:absolute; inset:0; background-image:var(--grain-leather); border-radius:inherit;}
.board-frame{ /* blind-tooled border */
  position:absolute; inset:6.5%;
  border:1px solid oklch(0.30 0.045 35 / 0.8);
  outline:1px solid rgba(0,0,0,0.5); outline-offset:3px;
  border-radius:3px; pointer-events:none;
}
.board-title{
  position:relative; text-align:center; font-size:clamp(1.05rem,3.1vw,1.55rem);
  line-height:1.55; margin:0;
}
/* the foil class sits on the INNER span — background-clip:text must own the
   glyphs directly (an overflow-hidden child between them breaks the clip) */
.board-title .foil{letter-spacing:0.3em;}
.board-title .sheen-wrap{position:relative; display:block; overflow:hidden;}
.board-device{position:relative; color:var(--metal-2); font-size:1rem; letter-spacing:0.6em; padding-left:0.6em;}
.board-press{
  position:relative; font-family:var(--font-display); font-size:0.56rem; letter-spacing:0.44em;
  text-transform:uppercase; color:oklch(0.52 0.05 60);
}
/* breathing foil sheen across the stamped title — the CSV loading state */
.board-sheen{
  position:absolute; inset:-20% -60%; pointer-events:none;
  background:linear-gradient(112deg, transparent 40%, rgba(255,246,214,0.38) 50%, transparent 60%);
  transform:translateX(-80%); opacity:0;
}
.hero[data-loading="true"] .board-sheen{opacity:1; animation:rake 3.4s var(--ease-paper) infinite;}
@keyframes rake{ 0%{transform:translateX(-80%);} 60%,100%{transform:translateX(80%);} }

.board-back{ /* the pastedown — where a real bookplate is pasted */
  transform:rotateY(180deg);
  background-color:var(--paper-warm); background-image:var(--grain-paper);
  box-shadow:0 16px 40px -20px rgba(0,0,0,0.55);
  display:grid; place-items:center; padding:clamp(0.8rem,2.4vw,1.6rem);
}
.board-back::after{content:""; position:absolute; inset:4%; border:1px solid oklch(0.80 0.03 82); border-radius:2px; pointer-events:none;}

/* page block + sprayed edge + the trailing garnet ribbon, on the closed book */
.hero-edges{
  position:absolute; top:0.4%; bottom:0.4%; left:50.5%; right:-2.6%;
  border-radius:3px 8px 8px 3px;
  background:
    repeating-linear-gradient(180deg, rgba(120,90,60,0.10) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, oklch(0.90 0.02 84), oklch(0.83 0.025 80));
}
.hero-edges::after{ /* sprayed fore-edge sliver */
  content:""; position:absolute; top:0; bottom:0; right:0; width:7px;
  border-radius:0 8px 8px 0;
  background:linear-gradient(180deg, var(--wax-bright), var(--wax-deep));
  opacity:0.9;
}
.hero-ribbon-tail{
  position:absolute; bottom:-12.5%; left:62%; width:13px; height:24%;
  background:linear-gradient(100deg, var(--wax-deep) 18%, var(--wax-bright) 50%, var(--wax) 82%);
  clip-path:polygon(0 0, 100% 0, 100% 92%, 50% 100%, 0 92%);
  box-shadow:0 10px 18px -8px rgba(0,0,0,0.6);
}

/* default = closed; GSAP owns the ceremony, this class owns the resting state */
.hero-scene{transform:translateX(-25%) scale(0.94);}
.hero-spread{visibility:hidden;}
.hero-spread .plate{opacity:0;}
.hero.is-open .hero-scene{transform:none;}
.hero.is-open .hero-board{transform:rotateY(-165deg);}
.hero.is-open .hero-spread{visibility:visible; opacity:1;}
.hero.is-open:not(.ceremonied) .hero-spread{animation:settle 420ms var(--ease-paper);}
.hero.is-open .plate{opacity:1;}
.hero .board-back .plate{opacity:0;}
.hero.is-open .board-back .plate{opacity:1;}
.hero.is-open .hero-edges{opacity:0;}
.hero.is-open .hero-actions{display:none;}
@keyframes settle{from{opacity:0;} to{opacity:1;}}
/* Touch/iOS: preserve-3d is flattened by overflow:hidden on the stage.
   Use a 2D slide-off for the resting open-board state instead of rotateY.
   Brad's plate is duplicated into spread-half--brad so it stays visible after
   the board slides off; on desktop the board-back owns it, so hide it there. */
@media (pointer:fine){
  .spread-half--brad{display:none;}
}
@media (pointer:coarse){
  .hero.is-open .hero-board{transform:translateX(-145%) scale(0.88); opacity:0;}
}
.hero-actions{min-height:52px; display:flex; align-items:center; justify-content:center; margin-top:1.4rem;}

.hero-kicker{
  margin:0 0 1.4rem; font-size:0.7rem; letter-spacing:0.42em; text-transform:uppercase;
  color:var(--cream-dim); text-align:center;
}
.hero-open-cta{
  margin-top:2rem; min-height:44px; padding:0.6rem 1.7rem;
  border:1px solid var(--metal-0); border-radius:999px;
  font-variant-caps:small-caps; letter-spacing:0.14em; font-size:1.05rem;
  color:var(--gold-ink);
  transition:border-color var(--t-flick) var(--ease-paper), color var(--t-flick) var(--ease-paper);
}
.hero-open-cta:hover{border-color:var(--metal-2); color:var(--cream);}
.hero-scroll-hint{margin-top:1.6rem; color:var(--cream-dim); font-style:italic; font-size:0.95rem;}
.chart-caption{
  min-height:1.6em; margin:1rem 0 0; text-align:center;
  font-style:italic; font-size:0.95rem; color:var(--cream-dim);
}

/* ============================ RIBBON + INDEX ============================ */
.ribbon-strand{
  position:fixed; top:0; right:max(9px, env(safe-area-inset-right)); width:5px;
  height:100svh; z-index:45; pointer-events:none;
  transform:scaleY(var(--depth,0)); transform-origin:top center;
  background:linear-gradient(90deg, var(--wax-deep), var(--wax-bright) 45%, var(--wax) 80%);
  border-radius:0 0 3px 3px;
}
.ribbon-tab{
  position:fixed; right:max(4px, calc(env(safe-area-inset-right) - 5px));
  bottom:calc(17svh + env(safe-area-inset-bottom));
  width:44px; height:52px; z-index:46;
  display:grid; place-items:center;
  background:linear-gradient(100deg, var(--wax-deep) 12%, var(--wax-bright) 55%, var(--wax) 90%);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  color:var(--paper); font-family:var(--font-display); font-size:0.78rem;
  box-shadow:-6px 8px 16px -8px rgba(0,0,0,0.55);
  transition:transform var(--t-flick) var(--ease-paper);
}
.ribbon-tab:hover{transform:translateY(3px);}
.ribbon-tab span{transform:translateY(-4px);}

.toc-backdrop{position:fixed; inset:0; z-index:58; background:oklch(0.12 0.02 320 / 0.55);}
.toc-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  max-height:78svh; overflow:auto; -webkit-overflow-scrolling:touch;
  border-radius:16px 16px 0 0;
  padding:1.3rem clamp(1.2rem,5vw,2rem) calc(1.4rem + env(safe-area-inset-bottom));
  box-shadow:0 -24px 60px -28px rgba(0,0,0,0.8);
  transform:translateY(104%);
  transition:transform var(--t-leaf) var(--ease-paper);
}
.toc-sheet.open{transform:translateY(0);}
.toc-sheet::before{ /* taut ribbon entering the sheet */
  content:""; position:absolute; top:0; right:max(24px, env(safe-area-inset-right));
  width:5px; height:26px;
  background:linear-gradient(90deg, var(--wax-deep), var(--wax-bright));
}
.toc-head{
  margin:0 0 0.4rem; text-align:center;
  font-family:var(--font-display); font-weight:600; font-size:0.78rem;
  letter-spacing:0.34em; text-transform:uppercase; color:var(--paper-soft);
}
.toc-leafrule{display:block; text-align:center; color:var(--foil-0); font-size:0.8rem; margin-bottom:0.5rem;}
.toc-list{list-style:none; margin:0; padding:0;}
.toc-row{
  display:flex; align-items:baseline; gap:0.7rem; width:100%;
  min-height:46px; padding:0.55rem 0.2rem; text-align:left;
  font-size:1.12rem; color:var(--paper-ink);
  transition:color var(--t-flick) var(--ease-paper);
}
.toc-row:hover{color:var(--wax);}
.toc-row .toc-label{font-variant-caps:small-caps; letter-spacing:0.05em; white-space:nowrap;}
.toc-row .toc-leader{flex:1; border-bottom:1px dotted var(--paper-line); transform:translateY(-4px);}
.toc-row .toc-folio{font-feature-settings:"onum" 1; color:var(--paper-soft); font-size:1.02rem;}
.toc-row.primary .toc-label{color:oklch(0.46 0.09 60); font-weight:600;}
.toc-row.primary .toc-folio{color:oklch(0.46 0.09 60);}
.toc-row.active .toc-label{color:var(--wax);}
@media (min-width:761px){
  .toc-sheet{
    left:auto; right:18px; bottom:18px; width:min(420px, 92vw);
    border-radius:12px; max-height:72svh;
  }
  .toc-sheet::before{right:24px;}
}

/* ============================ PAGE-TURN LEAF ============================ */
.leaf-layer{
  position:fixed; inset:0; z-index:80; pointer-events:none;
  perspective:1500px; visibility:hidden;
}
.leaf-layer.live{visibility:visible;}
.leaf{
  position:absolute; inset:0; transform-origin:left center;
  transform-style:preserve-3d;
}
.leaf-face{
  position:absolute; inset:0;
  background-color:var(--paper); background-image:var(--grain-paper);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.leaf-face.back{transform:rotateY(180deg);}
.leaf-crease{ /* the moving shadow of the turning leaf */
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(45,25,20,0.42), transparent 34%);
  opacity:0;
}

/* ============================ SHELF PAGE ============================ */
.shelf-page{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,3rem);}
.shelf-hero{text-align:center; padding:clamp(2.2rem,5vw,4rem) 0 clamp(1.4rem,3vw,2.2rem);}
.shelf-hero-kicker{
  display:block; margin-bottom:1rem; font-size:0.68rem; letter-spacing:0.42em;
  text-transform:uppercase; color:var(--cream-dim);
}
.display-title{
  margin:0; font-size:clamp(1.7rem,5.4vw,3.1rem); line-height:1.25; letter-spacing:0.22em;
}
.shelf-hero-tag{color:var(--cream-dim); font-style:italic; font-size:1.14rem; margin:0.9rem auto 0; max-width:52ch;}

.shelf-section{margin-bottom:clamp(3rem,6vw,5rem);}
/* Index jumps land clear of the sticky topnav. */
#sec-newread, #sec-forthcoming, #sec-finished, #sec-allread, #sec-insights, #sec-reading, #sec-backburner{scroll-margin-top:72px;}
.fmt-audio{margin-left:0.4rem; font-size:0.82em; opacity:0.85; vertical-align:baseline;}

.section-header{display:flex; align-items:center; gap:1.1rem; margin-bottom:1.5rem;}
.section-header-line{flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--ink-line), transparent);}
.section-header-text{text-align:center; flex-shrink:0; max-width:78vw;}
.section-kicker{
  display:block; margin-bottom:0.4rem; font-size:0.62rem; letter-spacing:0.34em;
  text-transform:uppercase; color:var(--cream-dim);
}
.section-title-row{display:flex; align-items:baseline; justify-content:center; gap:0.7rem;}
.section-title{
  margin:0; font-size:clamp(1.05rem,3vw,1.5rem); letter-spacing:0.2em; white-space:nowrap;
}
.section-count{
  font-feature-settings:"onum" 1; font-size:1.02rem; color:var(--cream-dim);
}
.section-note{
  text-align:center; max-width:56ch; margin:-0.5rem auto 1.4rem;
  font-family:var(--font-hand); font-style:italic; font-size:1.02rem; color:var(--cream-dim);
}

/* --- Next Reads CTA — a tipped-in invitation card --- */
.next-reads-cta{
  display:flex; align-items:center; gap:1.1rem; width:100%; text-align:left;
  padding:clamp(1rem,2.5vw,1.4rem) clamp(1.1rem,3vw,1.8rem);
  margin-bottom:clamp(2.4rem,5vw,3.4rem);
  background-color:var(--paper); background-image:var(--grain-paper);
  color:var(--paper-ink); border-radius:4px;
  border-left:5px solid var(--wax);
  box-shadow:0 16px 36px -20px rgba(0,0,0,0.8), 0 1px 0 rgba(255,253,245,0.8) inset;
  transition:transform var(--t-flick) var(--ease-paper), box-shadow var(--t-flick) var(--ease-paper);
}
.next-reads-cta:hover{transform:translateY(-3px); box-shadow:0 24px 44px -22px rgba(0,0,0,0.85), 0 1px 0 rgba(255,253,245,0.8) inset;}
.nrc-seal{
  flex-shrink:0; width:46px; height:46px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, var(--wax-bright), var(--wax) 55%, var(--wax-deep));
  box-shadow:0 3px 8px -2px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.25) inset;
  display:grid; place-items:center;
  color:oklch(0.88 0.04 35); font-family:var(--font-display); font-size:0.72rem; letter-spacing:0.08em;
}
.nrc-text{display:flex; flex-direction:column; gap:0.16rem; min-width:0; flex:1;}
.nrc-kicker{font-size:0.6rem; letter-spacing:0.32em; text-transform:uppercase; color:oklch(0.46 0.09 35);}
.nrc-title{font-family:var(--font-display); font-weight:600; font-size:clamp(1.02rem,2.2vw,1.3rem); letter-spacing:0.04em; line-height:1.25; color:var(--paper-ink);}
.nrc-sub{font-style:italic; font-size:0.97rem; color:var(--paper-soft);}
.nrc-cta{white-space:nowrap; flex-shrink:0; align-self:center; font-variant-caps:small-caps; letter-spacing:0.08em; color:oklch(0.42 0.06 35);}

/* --- Empty shelf --- */
.shelf-empty{
  max-width:560px; margin:1rem auto clamp(3rem,6vw,5rem); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  padding:clamp(2.4rem,6vw,3.6rem) 2rem; border-radius:4px;
  background-color:var(--paper); background-image:var(--grain-paper); color:var(--paper-ink);
  box-shadow:0 22px 50px -26px rgba(0,0,0,0.8);
}
.empty-sigil{font-size:1.5rem; color:var(--foil-1);}
.empty-title{font-family:var(--font-display); font-weight:600; font-size:clamp(1.2rem,3vw,1.6rem); letter-spacing:0.08em; margin:0;}
.empty-sub{color:var(--paper-soft); font-style:italic; font-size:1.05rem; margin:0; line-height:1.5; max-width:42ch;}

/* ============================ SPINE RAILS ============================ */
.rail-wrap{position:relative;}
.rail{
  display:flex; align-items:flex-end; gap:2px;
  overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  padding:0.6rem 0.4rem 0;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none;}
.rail-shelf{ /* the wooden lip the spines stand on */
  height:10px; margin:0 0.2rem;
  background:linear-gradient(180deg, oklch(0.30 0.045 50), oklch(0.20 0.04 45));
  border-radius:2px; box-shadow:0 6px 14px -6px rgba(0,0,0,0.7);
}
.spine{
  position:relative; flex-shrink:0; scroll-snap-align:start;
  width:var(--sw,48px); height:var(--sh,236px); min-width:44px;
  border-radius:3px 3px 2px 2px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.38), transparent 22%, transparent 78%, rgba(0,0,0,0.30)),
    linear-gradient(180deg, color-mix(in oklab, var(--edge, #5a4456) 78%, black 8%), color-mix(in oklab, var(--edge, #5a4456) 88%, black 22%));
  box-shadow:0 1px 0 rgba(255,250,235,0.14) inset, 0 14px 22px -12px rgba(0,0,0,0.8);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:12px 0 10px; overflow:hidden;
  transition:transform var(--t-flick) var(--ease-paper);
}
.spine:hover{transform:translateY(-8px);}
.spine.cloth{background-image:var(--grain-cloth), linear-gradient(180deg, color-mix(in oklab, var(--edge) 80%, black 10%), color-mix(in oklab, var(--edge) 85%, black 26%));}
.spine-band{width:70%; height:1px; background:linear-gradient(90deg, transparent, var(--metal-1), transparent); flex-shrink:0;}
.spine-title{
  flex:1; min-height:0; margin:8px 0;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--font-display); font-weight:500; font-size:0.78rem;
  letter-spacing:0.12em; text-transform:uppercase;
  color:oklch(0.93 0.02 85); text-shadow:0 1px 1px rgba(0,0,0,0.65);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-height:100%;
}
.spine-device{color:var(--metal-2); font-size:0.6rem; flex-shrink:0; text-shadow:0 1px 1px rgba(0,0,0,0.6);}
/* The real cover, tipped onto the head of the spine like an onlay plate and
   dissolved into the binding: feathered foot, shared leather grain + key light,
   and edge shadows from the same top-left light — so it reads as printed on the
   spine, never a thumbnail stuck on top. */
.spine.has-cover{padding-top:0;}
.spine-plate{
  position:relative; display:block; width:100%; margin:0 0 5px;
  aspect-ratio:3 / 4; overflow:hidden; border-radius:3px 3px 0 0;
  /* feather the foot of the plate so the art melts into the cloth below */
  -webkit-mask-image:linear-gradient(180deg, #000 76%, transparent 99%);
          mask-image:linear-gradient(180deg, #000 76%, transparent 99%);
}
.spine-cover{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 16%;
}
.spine-plate::after{ /* the binding's grain, blended INTO the art (shared paper) */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:var(--grain-leather);
  mix-blend-mode:soft-light; opacity:0.7;
}
.spine-plate::before{ /* key-light at the head, fade into the cloth, edge shadows */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(180deg, rgba(255,250,235,0.20), rgba(255,250,235,0) 22%),
    linear-gradient(180deg, transparent 54%, color-mix(in oklab, var(--edge,#5a4456) 76%, black 16%) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.34), transparent 15%, transparent 85%, rgba(0,0,0,0.28));
}
/* the metal band reads as the headband just beneath the plate */
.spine.has-cover .spine-band{width:88%; margin-top:0;}
/* the gilding — a newly finished book receives its foil stamp (one-shot) */
.spine .gild, .book-card .gild{
  position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit;
}
.gild::after{
  content:""; position:absolute; inset:-30%;
  background:linear-gradient(112deg, transparent 38%, rgba(255,242,200,0.85) 49%, rgba(255,220,140,0.5) 53%, transparent 64%);
  transform:translateX(-110%);
}
.gild.play::after{transition:transform 1.2s var(--ease-board); transform:translateX(110%);}

.rail-more{
  margin:0.8rem auto 0; display:block; min-height:44px; padding:0.4rem 1.3rem;
  border:1px solid var(--ink-line); border-radius:999px;
  font-variant-caps:small-caps; letter-spacing:0.1em; color:var(--cream-dim);
  transition:all var(--t-flick) var(--ease-paper);
}
.rail-more:hover{color:var(--cream); border-color:var(--metal-0);}

/* ============================ FORTHCOMING ============================ */
/* Pre-orders & announced upcoming books, grouped (pre-ordered / available /
   on the horizon) as tipped-in catalogue slips on the paper. */
.forth-group{margin:1.5rem 0 0;}
.forth-group:first-of-type{margin-top:0.4rem;}
.forth-group-head{
  display:flex; align-items:baseline; gap:0.6rem; margin:0 0 0.8rem;
  padding-bottom:0.4rem; border-bottom:1px solid var(--ink-line);
}
.forth-group-label{font-family:var(--font-display); font-size:0.98rem; letter-spacing:0.05em; color:var(--cream);}
.forth-group-kicker{font-family:var(--font-hand); font-style:italic; color:var(--cream-dim); font-size:0.9rem;}
.forth-group-count{margin-left:auto; color:var(--metal-2); font-size:0.92rem;}
.forth-grid{display:grid; gap:0.85rem; grid-template-columns:repeat(auto-fill, minmax(252px, 1fr));}
.forth-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper-warm); background-image:var(--grain-paper);
  border-radius:7px; overflow:hidden;
  box-shadow:0 14px 30px -18px rgba(0,0,0,0.8), 0 1px 0 rgba(255,250,235,0.30) inset;
  transition:transform var(--t-flick) var(--ease-paper), box-shadow var(--t-flick) var(--ease-paper);
}
.forth-card:hover{transform:translateY(-3px); box-shadow:0 22px 40px -20px rgba(0,0,0,0.85), 0 1px 0 rgba(255,250,235,0.30) inset;}
.forth-main{display:flex; gap:0.85rem; align-items:flex-start; text-align:left; width:100%; padding:0.7rem 0.8rem 0.55rem;}
.forth-cover{flex:0 0 54px; width:54px;}
.forth-cover .cover{width:100%; border-radius:3px; box-shadow:0 5px 12px -6px rgba(0,0,0,0.6);}
.forth-meta{display:flex; flex-direction:column; gap:0.1rem; min-width:0; flex:1;}
.forth-title{
  font-family:var(--font-display); font-size:0.95rem; line-height:1.22; color:var(--paper-ink);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.forth-author{color:var(--paper-soft); font-size:0.85rem;}
.forth-series{color:var(--paper-soft); font-size:0.78rem; font-style:italic;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
.forth-dateline{display:flex; align-items:center; gap:0.5rem; margin-top:0.34rem; flex-wrap:wrap;}
.forth-date{font-weight:600; font-size:0.86rem; color:var(--wax); letter-spacing:0.01em;}
.forth-flag{font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
  padding:0.12rem 0.5rem; border-radius:999px;}
.forth-flag.soon{background:color-mix(in oklab, var(--wax) 15%, var(--paper)); color:var(--wax);
  border:1px solid color-mix(in oklab, var(--wax) 42%, transparent);}
.forth-flag.out{background:color-mix(in oklab, oklch(0.52 0.12 150) 16%, var(--paper)); color:oklch(0.4 0.11 150);
  border:1px solid color-mix(in oklab, oklch(0.52 0.12 150) 42%, transparent);}
.forth-cal{
  align-self:flex-start; margin:0 0.8rem 0.65rem auto;
  display:inline-flex; align-items:center; gap:0.34rem; min-height:34px;
  padding:0.3rem 0.72rem; border-radius:999px;
  border:1px solid var(--paper-line); background:transparent; color:var(--paper-soft); font-size:0.78rem;
  transition:color var(--t-flick) var(--ease-paper), border-color var(--t-flick) var(--ease-paper);
}
.forth-cal:hover{color:var(--wax); border-color:var(--wax);}
@media (max-width:520px){ .forth-grid{grid-template-columns:1fr;} }

/* ============================ NEXT READS — FROM YOUR SHELF ============================ */
.nr-grid{display:grid; gap:0.85rem; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));}
.nr-pick{
  position:relative; display:flex; gap:0.85rem; align-items:flex-start;
  background:var(--paper-warm); background-image:var(--grain-paper);
  border-radius:7px; padding:0.7rem 0.8rem; overflow:hidden;
  box-shadow:0 14px 30px -18px rgba(0,0,0,0.8), 0 1px 0 rgba(255,250,235,0.3) inset;
}
.nr-pick.pinned{box-shadow:0 14px 30px -18px rgba(0,0,0,0.8), 0 0 0 1px var(--metal-1) inset;}
.nr-rank{flex:0 0 auto; min-width:1.4em; font-family:var(--font-display); font-size:1.05rem; color:var(--metal-2); padding-top:0.1rem;}
.nr-cover{flex:0 0 50px; width:50px;}
.nr-cover .cover{width:100%; border-radius:3px;}
.nr-meta{display:flex; flex-direction:column; gap:0.1rem; min-width:0;}
.nr-title{font-family:var(--font-display); font-size:0.95rem; line-height:1.2; color:var(--paper-ink);}
.nr-author{color:var(--paper-soft); font-size:0.85rem;}
.nr-series{color:var(--paper-soft); font-size:0.78rem; font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.nr-why{margin-top:0.25rem; font-family:var(--font-hand); font-style:italic; color:var(--wax); font-size:0.84rem;}
@media (max-width:520px){ .nr-grid{grid-template-columns:1fr;} }

/* the reader chooser for Next Reads */
.nr-chooser{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,3rem) clamp(2rem,6vw,4rem);}
.nr-choose-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,3vw,2rem); max-width:740px; margin:1.4rem auto 0;}
.nr-choose-card{
  display:flex; flex-direction:column; align-items:center; gap:0.7rem; cursor:pointer;
  padding:clamp(1.6rem,4vw,2.8rem) 1.2rem; text-align:center;
  background:linear-gradient(180deg, var(--ink-soft), var(--ink-deep)); background-image:var(--grain-leather);
  border:1px solid var(--ink-line); border-radius:12px;
  box-shadow:0 20px 44px -22px rgba(0,0,0,0.85), 0 1px 0 rgba(255,250,235,0.08) inset;
  transition:transform var(--t-flick) var(--ease-paper), border-color var(--t-flick) var(--ease-paper);
}
.nr-choose-card:hover{transform:translateY(-4px);}
.nr-choose-card.silver{border-color:color-mix(in oklab, var(--slvr-1) 50%, var(--ink-line));}
.nr-choose-card.gold{border-color:color-mix(in oklab, var(--foil-1) 50%, var(--ink-line));}
.nr-choose-mono{
  font-family:var(--font-display); font-size:clamp(2.2rem,7vw,3.2rem); line-height:1;
  width:1.8em; height:1.8em; display:grid; place-items:center; border-radius:50%; border:1px solid currentColor;
}
.nr-choose-card.silver .nr-choose-mono{color:var(--slvr-2);}
.nr-choose-card.gold .nr-choose-mono{color:var(--foil-2);}
.nr-choose-name{font-family:var(--font-display); font-size:1.4rem; letter-spacing:0.08em; color:var(--cream);}
.nr-choose-cta{font-style:italic; color:var(--cream-dim); font-size:0.95rem;}
@media (max-width:560px){ .nr-choose-grid{grid-template-columns:1fr;} }

/* ============================ FACE-OUT GRID ============================ */
.book-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(168px,1fr)); gap:clamp(1.1rem,2.5vw,1.8rem);}
@media (max-width:480px){ .book-grid{grid-template-columns:repeat(2, 1fr); gap:0.9rem;} }
/* width:100% — buttons shrink-to-fit their content, so a card with a short
   title/footline would otherwise render narrower than its grid cell (and its
   cover thumbnail with it). Fill the cell regardless of text length. */
.book-card{position:relative; display:flex; flex-direction:column; gap:0.7rem; text-align:left; width:100%;}
button.book-card{padding:0;}
.book-card .cover{transition:transform var(--t-flick) var(--ease-paper), box-shadow var(--t-flick) var(--ease-paper);}
.book-card:hover .cover{transform:translateY(-5px); box-shadow:0 24px 44px -20px rgba(0,0,0,0.9);}
.book-meta{display:flex; flex-direction:column; gap:0.18rem;}
.book-title{font-family:var(--font-display); font-weight:500; font-size:1.02rem; letter-spacing:0.03em; line-height:1.25; margin:0; color:var(--cream);}
.book-author{margin:0; color:var(--cream-dim); font-size:0.94rem; font-style:italic;}
.book-series{margin:0.1rem 0 0; color:var(--cream-dim); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; opacity:0.85;}
.book-footline{display:flex; align-items:center; justify-content:space-between; gap:0.6rem; margin-top:0.3rem;}
.pages{color:var(--cream-dim); font-size:0.85rem; font-feature-settings:"onum" 1; white-space:nowrap;}

/* star ratings — gold leaf on the page */
.rating{display:inline-flex; gap:1px; font-size:0.9rem; line-height:1;}
.star-full{color:var(--foil-2);}
.star-half{background:linear-gradient(90deg, var(--foil-2) 50%, oklch(0.5 0.02 320 / 0.5) 50%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.star-empty{color:oklch(0.5 0.02 320 / 0.45);}
.paper .star-empty, .cat-pastedown .star-empty{color:oklch(0.66 0.025 85);}
.paper .star-full, .cat-pastedown .star-full{color:oklch(0.62 0.1 80);}

/* shared editions — both bookplates, both ratings */
.shared-marks{display:inline-flex; gap:4px; margin-left:0.4rem; vertical-align:1px;}
.shared-mark{
  width:14px; height:14px; border-radius:50%; display:inline-grid; place-items:center;
  font-size:8px; font-family:var(--font-display); line-height:1;
}
.shared-mark.b{border:1px solid var(--slvr-1); color:var(--slvr-2);}
.shared-mark.t{border:1px solid var(--foil-1); color:var(--foil-2);}
.paper .shared-mark.b, .cat-pastedown .shared-mark.b{color:#6e708a; color:oklch(0.5 0.01 285); border-color:oklch(0.6 0.01 285);}
.paper .shared-mark.t, .cat-pastedown .shared-mark.t{color:oklch(0.55 0.09 80); border-color:oklch(0.62 0.09 80);}
.shared-ratings{display:block; margin-top:0.2rem; font-size:0.82rem; color:var(--cream-dim); font-feature-settings:"onum" 1;}

/* fore-edge fan: Recently Finished arrives edge-out — a wall of stenciled
   sprayed edges — then resolves into the face-out grid, 60ms reading order */
.fan .fan-item .cover::before{
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; opacity:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, color-mix(in oklab, var(--edge, #876) 92%, white 6%), color-mix(in oklab, var(--edge, #876) 86%, black 14%));
  transition:opacity var(--t-leaf) var(--ease-paper);
  transition-delay:var(--fan-delay, 0ms);
  pointer-events:none;
}
.fan .fan-item .cover img, .fan .fan-item .cover .cover-fallback{
  transition:opacity var(--t-leaf) var(--ease-paper);
  transition-delay:var(--fan-delay, 0ms);
}
.fan .fan-item.edge-out .cover::before{opacity:1; transition:none;}
.fan .fan-item.edge-out .cover img, .fan .fan-item.edge-out .cover .cover-fallback{opacity:0 !important; transition:none;}

/* ============================ COVERS ============================ */
.cover{
  position:relative; aspect-ratio:2/3; border-radius:3px 7px 7px 3px; overflow:hidden;
  container-type:inline-size;
  background:var(--ink-soft);
  box-shadow:0 14px 28px -14px rgba(0,0,0,0.85);
}
/* z-index:1 keeps a loaded cover ABOVE the clothbound fallback, so visibility
   never depends on a JS load event (which can be missed for cached images) —
   the image simply paints over the fallback once its bytes arrive. */
.cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:opacity var(--t-leaf) ease;}
.cover-edge{ /* the page block at the fore-edge — makes every card an object */
  position:absolute; top:1.5%; bottom:1.5%; right:0; width:4.5%; min-width:4px; z-index:3;
  background:
    repeating-linear-gradient(180deg, rgba(110,80,50,0.25) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, oklch(0.91 0.02 84), oklch(0.85 0.025 80));
  border-radius:0 4px 4px 0;
  box-shadow:-1px 0 2px rgba(0,0,0,0.35);
}
.cover-edge.sprayed{background:
  repeating-linear-gradient(180deg, rgba(0,0,0,0.14) 0 1px, transparent 1px 3px),
  linear-gradient(180deg, color-mix(in oklab, var(--edge) 90%, white 10%), color-mix(in oklab, var(--edge) 88%, black 12%));}

/* Fallbacks are CLOTHBOUND editions — the rarer ones, never an apology. */
.cover-fallback{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:0.55rem; padding:9% 8%; text-align:center;
  background-image:var(--grain-cloth),
    radial-gradient(120% 90% at 20% 8%, color-mix(in oklab, var(--cloth, #4a3a52) 88%, white 9%), transparent 60%),
    linear-gradient(165deg, var(--cloth, #4a3a52), color-mix(in oklab, var(--cloth, #4a3a52) 78%, black 22%));
}
.cover-fallback::after{ /* blind-tooled frame */
  content:""; position:absolute; inset:6%;
  border:1px solid rgba(0,0,0,0.35);
  box-shadow:0 1px 0 rgba(255,250,235,0.12);
  border-radius:2px; pointer-events:none;
}
.cover-fallback-title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(0.66rem,10.5cqw,1.08rem); line-height:1.3;
  letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(8,5,10,0.34);
  text-shadow:0 1px 0 rgba(255,250,235,0.22), 0 -1px 0 rgba(0,0,0,0.3);
}
.cover-fallback-author{
  font-size:clamp(0.56rem,6cqw,0.8rem); font-style:italic;
  color:rgba(255,250,238,0.78); letter-spacing:0.04em;
}
.cover-fallback-device{color:var(--metal-2); font-size:clamp(0.6rem,7cqw,0.85rem); text-shadow:0 1px 1px rgba(0,0,0,0.5);}

/* legacy empty-cover (landing peek when nothing is featured) */
.cover-empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem; text-align:center;
  background:linear-gradient(165deg, oklch(0.30 0.04 320), oklch(0.2 0.03 320));}
.cover-empty-rune{color:var(--metal-2); font-size:1.1rem;}
.cover-empty-text{font-size:0.58rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--cream-dim); line-height:1.5;}

/* ============================ CATALOGUE CARD (spine pull-out) ============== */
.cat-backdrop{position:fixed; inset:0; z-index:70; background:oklch(0.11 0.02 320 / 0.74);}
.cat-card{
  position:fixed; z-index:71; left:50%; top:50%;
  width:min(780px, calc(100vw - 28px)); max-height:min(86svh, 760px);
  transform:translate(-50%,-50%);
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:0;
  border-radius:6px; overflow:hidden;
  box-shadow:0 50px 110px -40px rgba(0,0,0,0.95);
}
.cat-coverside{
  position:relative; display:grid; place-items:center;
  background:linear-gradient(160deg, oklch(0.20 0.035 318), oklch(0.14 0.028 320));
  padding:clamp(1.2rem,3.5vw,2.2rem);
}
.cat-coverside::before{content:""; position:absolute; inset:0; background-image:var(--grain-leather);}
.cat-coverside .cover{position:relative; width:min(240px, 80%); box-shadow:0 30px 56px -22px rgba(0,0,0,0.9);}
.cat-pastedown{
  background-color:var(--paper); background-image:var(--grain-paper); color:var(--paper-ink);
  padding:clamp(1.3rem,3.5vw,2.1rem); overflow:auto; -webkit-overflow-scrolling:touch;
}
.cat-kicker{font-size:0.6rem; letter-spacing:0.34em; text-transform:uppercase; color:var(--paper-soft); margin:0 0 0.6rem;}
.cat-title{font-family:var(--font-display); font-weight:600; font-size:clamp(1.2rem,3vw,1.6rem); letter-spacing:0.04em; line-height:1.3; margin:0 0 0.2rem;}
.cat-author{font-style:italic; color:var(--paper-soft); margin:0 0 0.9rem; font-size:1.05rem;}
.cat-row{display:flex; align-items:baseline; gap:0.6rem; padding:0.42rem 0; border-top:1px solid var(--paper-line); font-size:1rem;}
.cat-row:last-of-type{border-bottom:1px solid var(--paper-line);}
.cat-row dt{font-variant-caps:small-caps; letter-spacing:0.06em; color:var(--paper-soft); min-width:6.4em;}
.cat-row dd{margin:0; font-feature-settings:"onum" 1;}
.cat-fleurons{color:oklch(0.5 0.09 60); letter-spacing:0.25em;}
.cat-marginalia{margin-top:1rem; display:flex; flex-wrap:wrap; gap:0.5rem 1rem;}
.cat-close{
  position:absolute; top:8px; right:8px; z-index:72;
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  color:var(--cream); font-size:1.3rem; line-height:1;
  background:oklch(0.16 0.03 320 / 0.7);
}
.cat-hint{margin:0.9rem 0 0; font-size:0.85rem; font-style:italic; color:var(--paper-soft); opacity:0.8;}
@media (max-width:640px){
  .cat-card{grid-template-columns:1fr; max-height:88svh; overflow:auto;}
  .cat-coverside{padding:1.2rem;}
  .cat-coverside .cover{width:min(150px, 44vw);}
}

/* ============================ CURRENTLY READING ============================ */
.pageblocks{display:flex; flex-direction:column; gap:1rem;}
.pageblock{
  width:100%; text-align:left; padding:1rem clamp(1rem,3vw,1.5rem) 1.2rem;
  background-color:var(--paper); background-image:var(--grain-paper); color:var(--paper-ink);
  border-radius:4px; box-shadow:0 16px 36px -20px rgba(0,0,0,0.8);
  transition:transform var(--t-flick) var(--ease-paper);
  display:flex; gap:1rem; align-items:flex-start;
}
.pageblock:hover{transform:translateY(-2px);}
.pb-cover{flex:0 0 56px; display:block;}
.pb-cover .cover{width:56px; box-shadow:0 8px 16px -8px rgba(0,0,0,0.6);}
.pb-body{flex:1; min-width:0; display:block;}
.pb-top{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:0.65rem;}
.pb-top-right{display:flex; align-items:center; gap:0.6rem; flex-shrink:0;}
.pb-dnf{ /* keeper-only: set this one aside */
  font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; line-height:1;
  padding:0.3rem 0.6rem; border:1px solid var(--wax); border-radius:999px; color:var(--wax);
  cursor:pointer; transition:all var(--t-flick) var(--ease-paper); white-space:nowrap;
}
.pb-dnf:hover, .pb-dnf:focus-visible{background:var(--wax); color:var(--paper);}
.pb-title{font-family:var(--font-display); font-weight:600; font-size:1.08rem; letter-spacing:0.04em; line-height:1.3;}
.pb-author{font-style:italic; color:var(--paper-soft); font-size:0.95rem; margin-left:0.5rem;}
.pb-pct{font-feature-settings:"onum" 1; font-variant-caps:small-caps; font-size:1.15rem; color:var(--wax); white-space:nowrap;}
.pb-edge{ /* the page block seen from the fore-edge, split at the percent */
  position:relative; height:30px; display:flex; border-radius:2px; overflow:visible;
}
.pb-read, .pb-unread{
  height:100%; background:
    repeating-linear-gradient(90deg, rgba(110,80,50,0.30) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, oklch(0.90 0.018 84), oklch(0.84 0.022 80));
  box-shadow:0 2px 5px -2px rgba(60,35,25,0.5);
}
.pb-read{border-radius:2px 0 0 2px; transform:translateY(-3px);} /* read pages sit proud */
.pb-unread{border-radius:0 2px 2px 0; opacity:0.82;}
.pb-ribbon{ /* the garnet marker emerging at the split */
  position:absolute; top:-9px; bottom:-13px; width:9px; transform:translateX(-50%);
  background:linear-gradient(100deg, var(--wax-deep) 15%, var(--wax-bright) 55%, var(--wax) 88%);
  clip-path:polygon(0 0, 100% 0, 100% 94%, 50% 100%, 0 94%);
  box-shadow:2px 3px 6px -2px rgba(0,0,0,0.45);
}
.pb-detail{display:none; margin-top:0.9rem; padding-top:0.8rem; border-top:1px solid var(--paper-line);}
.pageblock.open .pb-detail{display:flex; gap:1rem; align-items:flex-start;}
.pb-detail-lines{display:flex; flex-direction:column; gap:0.3rem; font-size:0.98rem;}
.pb-detail-lines .datum{color:var(--paper-soft);}
.pb-detail-note{font-family:var(--font-hand); font-style:italic; color:oklch(0.36 0.05 290);}

/* ============================ TAG CHIPS (public: marginalia) =============== */
.tag-chips{display:flex; flex-wrap:wrap; gap:0.3rem 0.7rem; margin-top:0.5rem;}
.tag-chip{
  font-family:var(--font-hand); font-style:italic; font-size:1rem; line-height:1.25;
  color:var(--chip-fg, var(--cream-dim));
  white-space:nowrap; transform:rotate(-1.4deg);
}
.tag-chip::after{content:""; display:block; height:1px; margin-top:1px;
  background:linear-gradient(90deg, var(--chip-fg, currentColor), transparent); opacity:0.55;}
.tag-chip:nth-child(2n){transform:rotate(0.9deg);}
/* tones — ink-dark on paper, lifted on leather */
.tag-chip[data-tone="violet"]{--chip-fg:oklch(0.78 0.07 300);}
.tag-chip[data-tone="gold"]  {--chip-fg:oklch(0.80 0.09 86);}
.tag-chip[data-tone="rose"]  {--chip-fg:oklch(0.76 0.09 18);}
.tag-chip[data-tone="teal"]  {--chip-fg:oklch(0.78 0.07 195);}
.tag-chip[data-tone="plum"]  {--chip-fg:oklch(0.76 0.09 335);}
.tag-chip[data-tone="silver"]{--chip-fg:oklch(0.78 0.02 285);}
.paper .tag-chip[data-tone="violet"], .cat-pastedown .tag-chip[data-tone="violet"]{--chip-fg:oklch(0.40 0.09 300);}
.paper .tag-chip[data-tone="gold"],   .cat-pastedown .tag-chip[data-tone="gold"]  {--chip-fg:oklch(0.42 0.08 80);}
.paper .tag-chip[data-tone="rose"],   .cat-pastedown .tag-chip[data-tone="rose"]  {--chip-fg:oklch(0.42 0.11 18);}
.paper .tag-chip[data-tone="teal"],   .cat-pastedown .tag-chip[data-tone="teal"]  {--chip-fg:oklch(0.40 0.07 195);}
.paper .tag-chip[data-tone="plum"],   .cat-pastedown .tag-chip[data-tone="plum"]  {--chip-fg:oklch(0.40 0.11 335);}
.paper .tag-chip[data-tone="silver"], .cat-pastedown .tag-chip[data-tone="silver"]{--chip-fg:oklch(0.42 0.015 285);}

/* progress (legacy small bar — admin rows still render it) */
.progress{display:flex; align-items:center; gap:0.6rem; margin-top:0.5rem;}
.progress-track{flex:1; height:3px; border-radius:999px; background:oklch(0.4 0.02 320 / 0.4); overflow:hidden;}
.progress-fill{height:100%; border-radius:999px; background:linear-gradient(90deg, var(--wax), var(--wax-bright));}
.progress-label{font-size:0.8rem; color:var(--cream-dim); font-feature-settings:"onum" 1; min-width:2.4em; text-align:right;}

/* ============================ THE COLOPHON ============================ */
.colophon{
  background-color:var(--paper); background-image:var(--grain-paper); color:var(--paper-ink);
  border-radius:4px; box-shadow:0 22px 50px -26px rgba(0,0,0,0.8);
  padding:clamp(1.6rem,4.5vw,3.2rem) clamp(1.2rem,5vw,3.4rem);
  max-width:840px; margin:0 auto;
}
.colophon-head{text-align:center; margin-bottom:1.6rem;}
.colophon-fleuron{color:oklch(0.5 0.09 60); font-size:1rem; letter-spacing:0.5em; padding-left:0.5em;}
.colophon-title{
  font-family:var(--font-display); font-weight:600; font-size:0.92rem;
  letter-spacing:0.4em; text-transform:uppercase; margin:0.5rem 0 0; color:var(--paper-ink);
}
.colophon-lead{
  font-size:1.18rem; line-height:1.65; text-align:center; max-width:54ch; margin:0 auto 1.8rem;
}
.colophon-lead .datum{color:oklch(0.40 0.08 35); font-weight:500;}
.colophon-facts{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:0; border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line);
  margin-bottom:2rem;
}
.colophon-fact{
  text-align:center; padding:1rem 0.6rem; border-right:1px solid var(--paper-line);
}
.colophon-fact:last-child{border-right:none;}
.colophon-fact .cf-num{
  display:block; font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.1;
  font-feature-settings:"onum" 1; color:var(--paper-ink);
}
.colophon-fact .cf-label{
  display:block; margin-top:0.3rem; font-variant-caps:small-caps; letter-spacing:0.08em;
  font-size:0.9rem; color:var(--paper-soft);
}
.colophon-cols{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(1.4rem,4vw,2.6rem); align-items:start;}
.colophon-subhead{
  font-family:var(--font-display); font-weight:600; font-size:0.72rem; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--paper-soft); margin:0 0 0.9rem;
}
.dist{display:flex; flex-direction:column; gap:0.45rem;}
.dist-row{display:grid; grid-template-columns:4.6em 1fr 2em; align-items:baseline; gap:0.8rem;}
.dist-stars{font-variant-caps:small-caps; font-feature-settings:"onum" 1; color:var(--paper-soft); white-space:nowrap; font-size:0.98rem;}
.dist-fleurons{
  color:oklch(0.46 0.085 60); font-size:0.92rem; letter-spacing:0.18em;
  line-height:1.45; overflow-wrap:anywhere;
}
.inkbleed .dist-fleurons{ /* wet-ink reveal on first scroll into view */
  clip-path:inset(0 100% 0 0);
  transition:clip-path var(--t-leaf) var(--ease-paper);
}
.inkbleed.inked .dist-fleurons{clip-path:inset(0 0 0 0);}
.dist-count{text-align:right; font-feature-settings:"onum" 1; color:var(--paper-soft); font-size:0.95rem;}
.authors{display:flex; flex-direction:column;}
.author-row{
  display:flex; align-items:baseline; gap:0.7rem; padding:0.4rem 0;
  border-bottom:1px dotted var(--paper-line); font-size:1.02rem;
}
.author-row:last-child{border-bottom:none;}
.author-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.author-leader{flex:1;}
.author-count{font-feature-settings:"onum" 1; color:var(--paper-soft);}
.colophon-note{margin:1.8rem auto 0; text-align:center; max-width:46ch;}
@media (max-width:700px){
  .colophon-cols{grid-template-columns:1fr;}
  .colophon-facts{grid-template-columns:repeat(3,1fr);}
  .colophon-fact:nth-child(3n){border-right:none;}
  .colophon-fact{border-bottom:1px solid var(--paper-line);}
  .colophon-fact:nth-last-child(-n+3){border-bottom:none;}
}

/* ============================ THE LETTER (recommend form) ================== */
.recommend{border-top:1px solid var(--ink-line); padding-top:clamp(2.4rem,5vw,3.6rem);}
.letter-wrap{position:relative; max-width:620px; margin:0 auto;}
.letter{
  position:relative;
  background-color:var(--paper); background-image:var(--grain-paper); color:var(--paper-ink);
  border-radius:3px; box-shadow:0 24px 56px -26px rgba(0,0,0,0.85);
  padding:clamp(1.4rem,4vw,2.4rem) clamp(1.2rem,4.5vw,2.6rem) clamp(1.6rem,4vw,2.2rem);
  display:flex; flex-direction:column; gap:1.1rem;
}
.letter-salutation{font-family:var(--font-hand); font-style:italic; font-size:1.2rem; color:oklch(0.36 0.05 290); margin:0;}
.lfield{display:flex; flex-direction:column; gap:0.25rem;}
.lfield-label{font-variant-caps:small-caps; letter-spacing:0.08em; font-size:0.92rem; color:var(--paper-soft);}
.lfield-label em{color:var(--wax); font-style:normal;}
.lfield-input{
  font-family:var(--font-body); font-size:1.08rem; color:var(--paper-ink);
  background:transparent; border:none; border-bottom:1px solid var(--paper-line);
  border-radius:0; padding:0.45rem 0.1rem; min-height:44px;
  transition:border-color var(--t-flick) var(--ease-paper);
}
.lfield-input::placeholder{font-family:var(--font-hand); font-style:italic; color:oklch(0.58 0.03 300); opacity:1;}
.lfield-input:focus{outline:none; border-bottom-color:var(--wax); box-shadow:0 1px 0 var(--wax);}
textarea.lfield-input{resize:vertical; min-height:84px; line-height:1.5;}
.lrow{display:grid; gap:1.1rem;}
.lrow.two{grid-template-columns:1fr 1fr;}
@media (max-width:520px){ .lrow.two{grid-template-columns:1fr;} }
.letter-actions{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:0.2rem;}
.seal-btn{
  display:inline-flex; align-items:center; gap:0.6rem; min-height:48px;
  padding:0.55rem 1.5rem; border-radius:999px;
  background:linear-gradient(160deg, var(--wax-bright), var(--wax) 55%, var(--wax-deep));
  color:oklch(0.93 0.02 85); font-variant-caps:small-caps; letter-spacing:0.1em; font-size:1.1rem;
  box-shadow:0 10px 24px -10px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.25) inset;
  transition:transform var(--t-flick) var(--ease-paper), box-shadow var(--t-flick) var(--ease-paper);
}
.seal-btn:hover{transform:translateY(-2px);}
.seal-btn:disabled{opacity:0.6; transform:none; cursor:default;}
.form-note{font-style:italic; font-size:0.98rem;}
.form-note.ok{color:var(--cream);}
.paper .form-note.ok, .letter .form-note.ok{color:oklch(0.38 0.09 140);}
.form-note.err{color:oklch(0.62 0.14 30);}
.letter .form-note.err{color:oklch(0.45 0.14 30);}

/* the sealing ceremony — a proxy letter folds twice and takes the wax */
.seal-theatre{position:absolute; inset:0; z-index:5; display:none; perspective:1100px;}
.letter-wrap.sealing .seal-theatre{display:block;}
.letter-wrap.sealing .letter{visibility:hidden;}
.fold-sheet{
  position:absolute; left:50%; top:50%; width:78%; height:70%;
  transform:translate(-50%,-50%);
  background-color:var(--paper); background-image:var(--grain-paper);
  border-radius:3px; box-shadow:0 24px 56px -26px rgba(0,0,0,0.85);
  transform-style:preserve-3d;
}
.fold-flap{
  position:absolute; left:0; right:0; height:34%;
  background-color:var(--paper-warm); background-image:var(--grain-paper);
  box-shadow:0 2px 6px -2px rgba(60,35,25,0.4);
}
.fold-flap.top{top:0; transform-origin:bottom center; border-radius:3px 3px 0 0;}
.fold-flap.bottom{bottom:0; transform-origin:top center; border-radius:0 0 3px 3px;}
.wax-blob{
  position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px;
  border-radius:46% 54% 52% 48%;
  background:radial-gradient(circle at 34% 28%, var(--wax-bright), var(--wax) 52%, var(--wax-deep) 92%);
  box-shadow:0 6px 16px -5px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.2) inset;
  display:grid; place-items:center;
  color:oklch(0.9 0.04 35); font-family:var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:0.05em;
  opacity:0;
}
.sealed-note{
  position:absolute; left:0; right:0; bottom:6%; text-align:center;
  font-variant-caps:small-caps; letter-spacing:0.14em; font-size:1.05rem; color:var(--cream);
  opacity:0;
}

/* the shared pile aside */
.recommend-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start;}
.recommend-grid.solo{grid-template-columns:1fr;}
@media (max-width:820px){ .recommend-grid{grid-template-columns:1fr;} }
.recommend-aside{padding:0.4rem 0;}
.aside-title{font-family:var(--font-display); font-weight:600; font-size:0.8rem; letter-spacing:0.26em; text-transform:uppercase; margin:0 0 1rem; color:var(--cream-dim);}
.aside-empty{color:var(--cream-dim); font-style:italic; font-size:0.98rem; margin:0;}
.rec-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.85rem;}
.rec-item{display:flex; flex-direction:column; padding-bottom:0.85rem; border-bottom:1px dotted var(--ink-line);}
.rec-item:last-child{border-bottom:none;}
.rec-book{font-family:var(--font-display); font-weight:500; font-size:1.04rem; letter-spacing:0.03em; color:var(--cream);}
.rec-author{color:var(--cream-dim); font-style:italic; font-size:0.92rem;}
.rec-from{color:var(--cream-dim); font-size:0.85rem; margin-top:0.15rem; opacity:0.85;}

/* ============================ NEXT READS ============================ */
.rec-page{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,3rem) 3rem;}
.rec-hero{text-align:center; padding:clamp(2rem,5vw,3.4rem) 0 clamp(1.2rem,3vw,2rem);}
.rec-intro{color:var(--cream-dim); font-size:1.05rem; max-width:60ch; margin:0.6rem auto 0; line-height:1.55;}
.rec-intro.lead{color:var(--cream); font-style:italic; font-size:1.18rem;}

/* vellum tip-in plates — top 10 */
.rec-spotlights{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(430px,100%),1fr)); gap:clamp(1.2rem,2.5vw,1.8rem);}
.tipin{position:relative; border-radius:4px;}
.tipin-plate{
  position:relative; display:flex; gap:1.1rem; border-radius:4px;
  background-color:var(--paper); background-image:var(--grain-paper); color:var(--paper-ink);
  padding:clamp(1.1rem,2.6vw,1.5rem);
  box-shadow:0 18px 40px -22px rgba(0,0,0,0.85);
}
.tipin-coverwrap{position:relative; width:108px; flex-shrink:0;}
.tipin-rank{
  position:absolute; top:-12px; left:-10px; z-index:3;
  font-family:var(--font-display); font-weight:600; font-size:1.7rem; line-height:1;
  background:linear-gradient(112deg, var(--foil-0), var(--foil-2) 45%, var(--foil-1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(60,35,25,0.5));
  font-feature-settings:"onum" 1;
}
.tipin-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:0.28rem;}
.tipin-title{font-family:var(--font-display); font-weight:600; font-size:1.22rem; letter-spacing:0.03em; line-height:1.25; margin:0;}
.tipin-author{margin:0; font-style:italic; color:var(--paper-soft); font-size:0.98rem;}
.rec-series{color:var(--paper-soft); font-style:normal; font-size:0.9rem;}
.rec-meta{display:flex; align-items:center; flex-wrap:wrap; gap:0.8rem; margin-top:0.25rem;}
.rec-rating{font-feature-settings:"onum" 1; font-size:0.95rem; white-space:nowrap;}
.rec-rating .rec-star{color:oklch(0.6 0.1 80);}
.rec-ratings{color:var(--paper-soft);}
.rec-genres{display:flex; flex-wrap:wrap; gap:0.25rem 0.8rem; margin-top:0.15rem;}
.rec-genre-chip{font-variant-caps:small-caps; letter-spacing:0.05em; font-size:0.88rem; color:var(--paper-soft); white-space:nowrap;}
.rec-blurb{font-size:0.98rem; line-height:1.5; margin:0.45rem 0 0;}
.rec-why{ /* the handwritten margin note */
  margin:0.6rem 0 0; padding-top:0.55rem; border-top:1px solid var(--paper-line);
}
.rec-why .hand{display:block; transform:rotate(-0.8deg);}
.rec-why-label{display:block; font-variant-caps:small-caps; letter-spacing:0.14em; font-size:0.8rem; color:oklch(0.46 0.09 35); margin-bottom:0.15rem;}

.vellum{ /* the translucent interleaf */
  position:absolute; inset:0; z-index:4; border-radius:4px;
  background:oklch(0.95 0.01 90 / 0.86);
  background-image:var(--grain-paper);
  box-shadow:0 6px 18px -8px rgba(0,0,0,0.4);
  display:grid; place-items:center; padding:1rem;
  transition:transform var(--t-leaf) var(--ease-paper), opacity var(--t-leaf) var(--ease-paper),
    clip-path var(--t-flick) var(--ease-paper);
}
.vellum-ghost{
  font-family:var(--font-display); font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  font-size:1rem; color:oklch(0.55 0.02 320 / 0.55); text-align:center; line-height:1.6;
}
.tipin.lift .vellum{clip-path:polygon(0 0, 100% 0, 100% 86%, 92% 100%, 0 100%);} /* corner lifts first */
.tipin.off .vellum{transform:translate(14%,-6%) rotate(2.5deg); opacity:0; pointer-events:none;}

/* spice embers — 1-5 smoldering ✦, static glow, no loop */
.embers{display:inline-flex; gap:3px; font-size:0.85rem; line-height:1;}
.ember{color:oklch(0.62 0.16 40); text-shadow:0 0 6px oklch(0.6 0.18 35 / 0.6);}
.ember.dim{color:oklch(0.62 0.02 60 / 0.4); text-shadow:none;}
.paper .ember.dim, .tipin-plate .ember.dim{color:oklch(0.74 0.02 80);}

/* the ranked bench — a ledger */
.rec-bench{background-color:var(--paper); background-image:var(--grain-paper); color:var(--paper-ink);
  border-radius:4px; box-shadow:0 18px 44px -24px rgba(0,0,0,0.8); padding:0.4rem clamp(1rem,3vw,1.8rem);}
.rec-bench-row{display:grid; grid-template-columns:2.6rem 1fr auto; gap:1rem; align-items:start;
  padding:0.9rem 0; border-bottom:1px solid var(--paper-line);}
.rec-bench-row:last-child{border-bottom:none;}
.rec-bench-rank{font-feature-settings:"onum" 1; font-family:var(--font-display); font-size:1.2rem; color:oklch(0.5 0.07 60); text-align:center; padding-top:0.1rem;}
.rec-bench-main{min-width:0; display:flex; flex-direction:column; gap:0.12rem;}
.rec-bench-titleline{display:flex; flex-wrap:wrap; align-items:baseline; gap:0.5rem;}
.rec-bench-title{font-family:var(--font-display); font-weight:500; font-size:1.08rem; letter-spacing:0.02em;}
.rec-bench-series{color:var(--paper-soft); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em;}
.rec-bench-author{color:var(--paper-soft); font-style:italic; font-size:0.92rem;}
.rec-bench-hook{font-size:0.96rem; line-height:1.45; margin:0.3rem 0 0;}
.rec-bench-genre{font-variant-caps:small-caps; letter-spacing:0.04em; color:var(--paper-soft); font-size:0.88rem; margin-top:0.25rem;}
.rec-bench-meta{display:flex; flex-direction:column; align-items:flex-end; gap:0.35rem; white-space:nowrap;}
@media (max-width:700px){
  .rec-bench-row{grid-template-columns:2.1rem 1fr;}
  .rec-bench-meta{grid-column:2; flex-direction:row; align-items:center; gap:0.8rem;}
}

/* browse by vibe — endpaper swatches */
.vibe-flood{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0;
  background-size:cover; background-position:center;
  transform:translateY(4%);
  transition:opacity var(--t-leaf) var(--ease-paper), transform var(--t-leaf) var(--ease-paper);}
.vibe-flood.on{opacity:0.22; transform:translateY(0);}
.rec-vibes{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr)); gap:1.1rem;}
.rec-vibe{
  position:relative; text-align:left; border-radius:5px; overflow:hidden;
  padding:1.1rem 1.2rem; color:var(--paper);
  background-color:var(--vibe-tint, #4a3a52);
  background-size:cover;
  box-shadow:0 16px 36px -20px rgba(0,0,0,0.85);
  transition:transform var(--t-flick) var(--ease-paper);
  min-height:104px;
}
button.rec-vibe:hover{transform:translateY(-3px);}
.rec-vibe::before{content:""; position:absolute; inset:0;
  background:linear-gradient(165deg, rgba(12,8,14,0.18), rgba(12,8,14,0.62)); pointer-events:none;}
.rec-vibe.open{grid-column:1 / -1;}
.rec-vibe-label{position:relative; font-family:var(--font-display); font-weight:600; font-size:1.06rem; letter-spacing:0.1em; text-transform:uppercase; margin:0 0 0.15rem;
  text-shadow:0 1px 3px rgba(0,0,0,0.7);}
.rec-vibe-note{position:relative; display:block; font-style:italic; font-size:0.92rem; color:oklch(0.9 0.015 85 / 0.92); margin-bottom:0.6rem; text-shadow:0 1px 3px rgba(0,0,0,0.7);}
.rec-vibe-items{position:relative; display:flex; flex-wrap:wrap; gap:0.45rem;}
.rec-vibe-chip{
  font-size:0.86rem; line-height:1.35; color:var(--paper);
  padding:0.22rem 0.65rem; border-radius:999px;
  border:1px solid oklch(0.95 0.01 90 / 0.4); background:rgba(10,6,12,0.4);
}
.vibe-bookchip{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.3rem 0.7rem 0.3rem 0.3rem; border-radius:4px;
  background:oklch(0.95 0.012 86 / 0.94); color:var(--paper-ink);
  box-shadow:0 6px 14px -6px rgba(0,0,0,0.6);
  font-size:0.9rem; max-width:100%;
}
.vibe-bookchip .vb-cover{width:26px; flex-shrink:0;}
.vibe-bookchip .vb-cover .cover{border-radius:2px; box-shadow:none;}
.vibe-bookchip .vb-rank{font-feature-settings:"onum" 1; color:oklch(0.5 0.07 60); font-family:var(--font-display);}
.vibe-bookchip .vb-title{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rec-form-wrap{margin-top:1.8rem;}

/* notes & caveats */
.rec-notes{list-style:none; margin:0; padding:0; max-width:74ch; display:flex; flex-direction:column; gap:0.55rem;}
.rec-note{position:relative; padding-left:1.4rem; color:var(--cream-dim); font-size:1rem; line-height:1.5;}
.rec-note::before{content:"❧"; position:absolute; left:0; color:var(--foil-1); font-size:0.85rem; top:0.1em;}
.rec-note.sub{margin-left:1.5rem; font-size:0.94rem; opacity:0.85;}
.rec-note.sub::before{content:"·";}

/* visitor pile */
.rec-pile-empty{color:var(--cream-dim); font-style:italic; font-size:1.02rem; text-align:center; padding:1.2rem 0;}
.rec-pile{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr)); gap:1rem; margin-bottom:0.5rem;}
.rec-pile-card{
  display:flex; gap:0.9rem; padding:1rem; border-radius:4px;
  background-color:var(--paper); background-image:var(--grain-paper); color:var(--paper-ink);
  box-shadow:0 14px 32px -18px rgba(0,0,0,0.8);
}
.rec-pile-cover{width:56px; flex-shrink:0;}
.rec-pile-body{min-width:0; display:flex; flex-direction:column; gap:0.12rem;}
.rec-pile-title{font-family:var(--font-display); font-weight:600; font-size:1.04rem; letter-spacing:0.02em; margin:0; line-height:1.25;}
.rec-pile-author{color:var(--paper-soft); font-style:italic; font-size:0.9rem; margin:0;}
.rec-pile-note{font-family:var(--font-hand); font-style:italic; font-size:1rem; line-height:1.4; margin:0.35rem 0 0; color:oklch(0.36 0.05 290);}
.rec-pile-from{color:var(--paper-soft); font-size:0.82rem; margin-top:0.35rem; font-variant-caps:small-caps;}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important;}
  .toc-sheet{transition-duration:200ms;}
  .vellum{transition-duration:200ms;}
  .hero[data-loading="true"] .board-sheen{animation:none; opacity:0;}
}

/* ============================================================================
   KEEPER'S CONSOLE — legacy functional skin (out of redesign scope).
   These rules are carried over from v1 so admin.jsx keeps working untouched.
   ========================================================================== */
.app[data-route="admin"]{
  background:linear-gradient(180deg, var(--void-1), #070510);
  min-height:100svh;
}
.display-l{font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,5vw,3.4rem); line-height:1.05; margin:0; letter-spacing:0.04em;}
.shimmer{background:linear-gradient(100deg, var(--silver-dim), var(--silver) 30%, #fff 45%, var(--lavender) 60%, var(--silver-dim));
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;}
.shelf-hero-tag{color:var(--silver-dim); font-style:italic; font-size:1.1rem; margin:0.8rem 0 0;}
.loading-rune{font-size:2rem; color:var(--accent);}
.field{display:flex; flex-direction:column; gap:0.4rem;}
.field-label{text-transform:uppercase; letter-spacing:0.18em; font-size:0.7rem; color:var(--muted);}
.field-input{font-family:var(--font-body); font-size:1.02rem; color:var(--silver);
  background:rgba(16,11,30,0.6); border:1px solid var(--panel-line); border-radius:10px;
  padding:0.7rem 0.9rem; transition:border-color .3s, box-shadow .3s;}
.field-input::placeholder{color:rgba(150,140,175,0.5); font-style:italic;}
.field-input:focus{outline:none; border-color:rgba(180,150,240,0.6); box-shadow:0 0 0 3px rgba(120,86,200,0.18);}
.field-textarea{resize:vertical; min-height:84px;}
.btn-primary{font-family:var(--font-display); font-size:1.05rem; font-weight:600; letter-spacing:0.02em; white-space:nowrap;
  color:#0c0820; padding:0.7rem 1.6rem; border-radius:999px;
  background:linear-gradient(120deg, var(--accent), var(--lavender) 55%, var(--accent-warm));
  transition:transform .3s var(--ease);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-primary:disabled{opacity:0.6; transform:none; cursor:default;}
.btn-ghost{font-family:var(--font-body); font-size:0.92rem; color:var(--silver);
  border:1px solid var(--panel-line); background:rgba(140,110,220,0.08);
  padding:0.42rem 0.95rem; border-radius:999px; transition:all .3s var(--ease); white-space:nowrap;}
.btn-ghost:hover{border-color:rgba(180,160,235,0.5); background:rgba(140,110,220,0.16);}
.feature-btn.on{color:var(--accent-warm); border-color:rgba(220,180,90,0.5); background:rgba(220,180,90,0.12);}
.link-clear{color:var(--muted); font-size:0.82rem; text-decoration:underline; text-underline-offset:2px; padding:0;}
.link-clear:hover{color:var(--silver);}
.admin-gate{max-width:440px; margin:8vh auto 0; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:1rem; padding:2rem; color:var(--silver);}
.admin-gate .shelf-hero-kicker{color:var(--muted);}
.admin-gate-form{display:flex; gap:0.6rem; width:100%; max-width:360px; margin-top:0.5rem;}
.admin-gate-form .field-input{flex:1;}
.admin-gate-form-col{flex-direction:column; max-width:320px;}
.admin-gate-form-col .field-input{width:100%;}
.admin-console{max-width:1100px; margin:0 auto; padding:clamp(1.4rem,3.5vw,2.6rem); color:var(--silver); font-family:var(--font-body);}
.admin-console .shelf-hero-kicker{color:var(--muted);}
.admin-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1.8rem; flex-wrap:wrap;}
.admin-head .shelf-hero-kicker{display:block; margin-bottom:0.3rem;}
.admin-head-actions{display:flex; gap:0.6rem;}
.admin-panel{background:linear-gradient(160deg, rgba(30,22,56,0.4), rgba(16,11,30,0.32));
  border:1px solid var(--panel-line); border-radius:var(--r); padding:1.4rem 1.5rem; margin-bottom:1.6rem;}
.admin-panel-title{font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--silver); margin:0 0 0.3rem; display:flex; align-items:center; gap:0.6rem;}
.admin-count{font-family:var(--font-display); font-size:1rem; color:var(--accent); border:1px solid var(--panel-line); border-radius:999px; padding:0.05rem 0.6rem;}
.admin-hint{color:var(--muted); font-size:0.9rem; font-style:italic; margin:0 0 1rem;}
.changelog-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; background:none; border:none; color:inherit; cursor:pointer; padding:0; text-align:left;}
.changelog-toggle{color:var(--muted); font-size:0.85rem; font-style:italic;}
.changelog{margin-top:0.9rem;}
.changelog-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.55rem;}
.changelog-item{display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:0.7rem; padding:0.55rem 0; border-bottom:1px solid var(--panel-line);}
.change-badge{font-size:0.64rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; padding:0.16rem 0.5rem; border-radius:999px; white-space:nowrap; align-self:center;}
.change-badge.new{background:rgba(120,180,120,0.16); color:oklch(0.78 0.12 150);}
.change-badge.fixed{background:rgba(220,120,120,0.16); color:oklch(0.74 0.13 25);}
.change-badge.improved{background:rgba(168,148,222,0.16); color:var(--lavender);}
.change-badge.changed{background:rgba(168,148,222,0.12); color:var(--silver-dim);}
.change-badge.deprecated, .change-badge.superseded{background:rgba(150,150,150,0.14); color:var(--muted); text-decoration:line-through;}
.change-body{display:flex; flex-direction:column; gap:0.12rem; min-width:0;}
.change-title{color:var(--silver); font-weight:600; font-size:0.95rem;}
.change-detail{color:var(--muted); font-size:0.86rem; line-height:1.4;}
.change-date{color:var(--muted); font-size:0.78rem; white-space:nowrap;}
.changelog-sub{margin:1.1rem 0 0.4rem; color:var(--silver-dim); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.1em;}
.changelog-planned{margin:0; padding-left:1.1rem; color:var(--muted); display:flex; flex-direction:column; gap:0.35rem; font-size:0.88rem;}
.changelog-planned .change-title{font-size:0.9rem;}
@media (max-width:560px){ .changelog-item{grid-template-columns:auto 1fr;} .change-date{grid-column:2; } }
.addbook-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:0.6rem;}
.addbook-actions{display:flex; align-items:center; gap:0.9rem; margin-top:0.7rem; flex-wrap:wrap;}
.addbook-segs{display:flex; gap:0.7rem; flex-wrap:wrap; margin-bottom:0.7rem;}
.addbook-pre{display:flex; gap:0.7rem; align-items:flex-end; flex-wrap:wrap; margin-top:0.7rem;}
.addbook-pre .lfield{flex:1 1 150px; min-width:140px; display:flex; flex-direction:column; gap:0.25rem;}
.addbook-pre .lfield-label{color:var(--muted); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em;}
.admin-pre-edit{display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; margin-top:0.5rem;}
.admin-pre-edit .field-input{flex:1 1 180px; min-width:150px;}
.watchlist{margin-top:0.8rem;}
.wl-person{margin-bottom:0.8rem;}
.wl-row{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:0.55rem 0; border-bottom:1px solid var(--panel-line); flex-wrap:wrap;}
.wl-main{display:flex; flex-direction:column; gap:0.12rem; min-width:0; flex:1 1 240px;}
.wl-series{color:var(--silver); font-weight:600; font-size:0.95rem;}
.wl-next{color:var(--metal-2);}
.wl-author{color:var(--muted); font-size:0.84rem;}
.wl-cand{display:flex; flex-direction:column; margin-top:0.25rem; padding-left:0.7rem; border-left:2px solid var(--panel-line);}
.wl-cand-title{color:var(--lavender); font-size:0.9rem;}
.wl-cand-meta{color:var(--muted); font-size:0.8rem;}
.wl-cand-meta a{color:var(--accent-warm);}
.wl-actions{display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;}
.admin-setting{display:flex; align-items:center; justify-content:space-between; gap:1.2rem;}
.admin-setting-text{display:flex; flex-direction:column; gap:0.2rem; min-width:0;}
.admin-setting-label{color:var(--silver); font-size:1.02rem;}
.toggle{position:relative; width:52px; height:28px; flex-shrink:0; border-radius:999px;
  border:1px solid var(--panel-line); background:rgba(120,104,170,0.2); cursor:pointer;
  transition:background .3s var(--ease), border-color .3s;}
.toggle.on{background:linear-gradient(120deg, var(--violet-soft), var(--lavender)); border-color:transparent;}
.toggle-knob{position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:var(--silver-dim); box-shadow:0 2px 6px rgba(0,0,0,0.5); transition:transform .3s var(--ease), background .3s;}
.toggle.on .toggle-knob{transform:translateX(24px); background:#fff;}
.tag-manager{display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem;}
.tag-add{display:flex; gap:0.6rem; flex-wrap:wrap;}
.tag-add .field-input{flex:1; min-width:200px;}
.tone-pick{flex:0 0 auto; width:auto; min-width:120px;}
.admin-toolbar{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap;}
.admin-filters{display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap;}
.admin-filters .field-input{min-width:220px;}
.seg{display:flex; border:1px solid var(--panel-line); border-radius:999px; overflow:hidden;}
.seg-btn{padding:0.4rem 0.95rem; font-size:0.88rem; color:var(--silver-dim); transition:all .25s var(--ease);}
.seg-btn.on{color:var(--silver); background:rgba(140,110,220,0.18);}
.admin-list{display:flex; flex-direction:column; gap:0.7rem;}
.admin-row{display:flex; gap:1rem; padding:0.9rem; border:1px solid var(--panel-line); border-radius:12px; background:rgba(12,9,24,0.4);}
.admin-row-cover{width:48px; flex-shrink:0;}
.admin-row-cover .cover{box-shadow:none;}
.admin-row-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:0.6rem;}
.admin-row-head{display:flex; justify-content:space-between; gap:1rem; align-items:flex-start;}
.admin-row-titles{display:flex; flex-direction:column; min-width:0;}
.admin-row-title{font-family:var(--font-display); font-size:1.1rem; font-weight:600; color:var(--silver); line-height:1.2;}
.admin-row-author{color:var(--silver-dim); font-size:0.88rem; font-style:italic;}
.admin-row-shelf{color:var(--muted); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; white-space:nowrap; flex-shrink:0;}
.admin-row-controls{display:flex; gap:0.8rem; align-items:center; flex-wrap:wrap;}
.dropdown{position:relative;}
.dropdown-backdrop{position:fixed; inset:0; z-index:30;}
.dropdown-menu{position:absolute; top:calc(100% + 6px); left:0; z-index:31; min-width:230px;
  background:#150f28; border:1px solid var(--panel-line); border-radius:12px; padding:0.4rem;
  box-shadow:0 24px 50px -16px rgba(0,0,0,0.8); max-height:340px; overflow:auto;}
.dropdown-item{display:flex; align-items:center; gap:0.5rem; width:100%; padding:0.35rem 0.4rem; border-radius:8px; transition:background .2s;}
.dropdown-item:hover{background:rgba(140,110,220,0.12);}
.dropdown-item.on{background:rgba(140,110,220,0.08);}
.dropdown-check{width:1rem; color:var(--accent); font-size:0.9rem;}
.admin-progress{display:flex; align-items:center; gap:0.5rem;}
.admin-progress-label{color:var(--muted); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em;}
.admin-progress input[type=range]{width:120px; accent-color:oklch(0.64 0.16 300);}
.admin-progress-val{color:var(--lavender); font-size:0.85rem; min-width:2.6em;}
.admin-cover-edit{display:flex; flex-direction:column; gap:0.3rem;}
.admin-cover-edit .field-input{width:100%;}
.admin-cat{display:flex; align-items:center; gap:0.4rem;}
.admin-cat-label{color:var(--muted); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em;}
.admin-cat-select{padding:0.3rem 0.5rem; font-size:0.85rem; width:auto; min-width:7.2rem; cursor:pointer;}
.del-btn{color:oklch(0.74 0.13 25); border-color:oklch(0.6 0.13 25 / .4);}
.del-btn:hover{color:oklch(0.82 0.15 25); border-color:oklch(0.7 0.14 25 / .6); background:oklch(0.6 0.13 25 / .12);}
.admin-row.hidden{opacity:0.55;}
.hidden-badge{display:inline-block; font-size:0.6rem; text-transform:uppercase; letter-spacing:0.12em;
  color:oklch(0.78 0.12 25); border:1px solid oklch(0.62 0.12 25 / .5); border-radius:999px;
  padding:0.05rem 0.45rem; margin-right:0.35rem;}
/* admin chips keep the v1 dark pill look (the marginalia restyle is public-only) */
.admin-console .tag-chip, .dropdown-menu .tag-chip{
  font-family:var(--font-body); font-style:normal; font-size:0.72rem; letter-spacing:0.03em;
  padding:0.16rem 0.55rem; border-radius:999px; border:1px solid var(--chip-bd);
  color:var(--chip-fg); background:var(--chip-bg); line-height:1.3; white-space:nowrap;
  display:inline-flex; align-items:center; gap:0.3rem; transform:none;}
.admin-console .tag-chip::after, .dropdown-menu .tag-chip::after{display:none;}
.admin-console .tag-chip[data-tone="violet"], .dropdown-menu .tag-chip[data-tone="violet"]{--chip-fg:oklch(0.85 0.09 300); --chip-bd:oklch(0.62 0.13 300 / .55); --chip-bg:oklch(0.6 0.12 300 / .15);}
.admin-console .tag-chip[data-tone="gold"], .dropdown-menu .tag-chip[data-tone="gold"]{--chip-fg:oklch(0.86 0.10 86); --chip-bd:oklch(0.7 0.10 86 / .55); --chip-bg:oklch(0.7 0.10 86 / .14);}
.admin-console .tag-chip[data-tone="rose"], .dropdown-menu .tag-chip[data-tone="rose"]{--chip-fg:oklch(0.84 0.11 18); --chip-bd:oklch(0.64 0.15 18 / .55); --chip-bg:oklch(0.64 0.15 18 / .15);}
.admin-console .tag-chip[data-tone="teal"], .dropdown-menu .tag-chip[data-tone="teal"]{--chip-fg:oklch(0.84 0.09 195); --chip-bd:oklch(0.64 0.11 195 / .55); --chip-bg:oklch(0.64 0.11 195 / .14);}
.admin-console .tag-chip[data-tone="plum"], .dropdown-menu .tag-chip[data-tone="plum"]{--chip-fg:oklch(0.82 0.11 335); --chip-bd:oklch(0.6 0.14 335 / .55); --chip-bg:oklch(0.6 0.14 335 / .15);}
.admin-console .tag-chip[data-tone="silver"], .dropdown-menu .tag-chip[data-tone="silver"]{--chip-fg:oklch(0.84 0.02 285); --chip-bd:oklch(0.7 0.02 285 / .5); --chip-bg:oklch(0.7 0.02 285 / .12);}
.tag-chip-editable{font-size:0.8rem; padding:0.22rem 0.4rem 0.22rem 0.7rem;}
.tag-remove{color:inherit; opacity:0.6; font-size:1rem; line-height:1; padding:0 0.1rem;}
.tag-remove:hover{opacity:1;}
.admin-console .progress-fill{background:linear-gradient(90deg, var(--violet-soft), var(--lavender));}

/* ============================ RESPONSIVE ============================ */
@media (max-width:820px){
  .topnav{padding:0.45rem 0.8rem;}
  .nav-link{font-size:0.95rem; padding:0.5rem 0.7rem;}
  .colophon-lead{font-size:1.08rem;}
  .admin-filters{width:100%;}
  .admin-row-controls{gap:0.5rem;}
  #sec-newread, #sec-forthcoming, #sec-finished, #sec-allread, #sec-insights, #sec-reading, #sec-backburner{scroll-margin-top:58px;}
}
@media (max-width:520px){
  body{font-size:17px;}
  .topnav{padding:0.35rem 0.55rem; gap:0.4rem;}
  .brand{gap:0.4rem; min-width:0;}
  .brand-text{font-size:0.6rem; letter-spacing:0.14em; overflow:hidden; text-overflow:ellipsis;}
  .nav-links{flex-shrink:0;}
  .nav-link{font-size:0.86rem; padding:0.5rem 0.45rem; letter-spacing:0.02em;}
  .nav-link::after{left:0.45rem; right:0.45rem;}
  .section-title{letter-spacing:0.12em;}
  .hero-kicker{font-size:0.6rem; letter-spacing:0.26em; padding:0 1rem;}
  .display-title{letter-spacing:0.14em;}
}
@media (max-width:460px){
  .brand-text{display:none;}
}