/* ============================================================
   Hearthiddlest — a reading life, kept in public
   style.css
   ============================================================ */
:root{
  --paper:#f2f6fd; --paper-2:#e7eefb; --white:#ffffff;
  --ink:#0d1c3a; --ink-soft:#3a4c73; --faded:#7688a8;
  --blue:#2e5ce0; --blue-deep:#12224f; --blue-mid:#6f94e8; --sky:#bcd3f7;
  /* silver accent (replaces the old gold foil) */
  --foil:#8b98ad; --foil-lt:#cdd6e3;
  --line:rgba(13,28,58,.12); --line-soft:rgba(13,28,58,.07);
  --f-display:'Playfair Display',serif;
  --f-body:'Ranade','Segoe UI',sans-serif;
  --f-label:'Ranade','Segoe UI',sans-serif;
  /* printed-page + handwriting, used by the annotated spread */
  --f-book:'EB Garamond',Georgia,'Times New Roman',serif;
  --f-hand:'Caveat','Segoe Script',cursive;
  --page:#fcfaf6; --page-ink:#241f1a; --page-faint:#a89c8b;
  --hl-blue:#c3d9fa; --hl-pink:#f9d2e0; --pen:#3d63c4;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink); font-family:var(--f-body);
  font-weight:400; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--blue);color:#fff}

/* ---------------- silver labels ---------------- */
.foil{
  font-family:var(--f-label); font-weight:500; font-size:.64rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--foil);
  background:linear-gradient(92deg,var(--foil) 0%,var(--foil-lt) 45%,var(--foil) 80%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.chapter-mark{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.1rem; }
.chapter-mark .rn{ font-family:var(--f-display); font-style:italic; font-size:1.15rem; color:var(--foil); -webkit-text-fill-color:var(--foil); }
.chapter-mark .ln{ flex:1; height:1px; background:linear-gradient(90deg,var(--foil),transparent); max-width:120px; }

/* ---------------- nav ---------------- */
.nav{
  position:fixed; top:1rem; left:50%; transform:translateX(-50%); z-index:120;
  display:flex; align-items:center; gap:1.6rem;
  padding:.5rem .9rem .5rem .55rem;
  background:rgba(255,255,255,.62); backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.75); border-radius:100px;
  box-shadow:0 10px 34px rgba(18,34,79,.12);
  transition:transform .5s, box-shadow .4s, background .4s;
}
.nav__brand{ display:flex; align-items:center; gap:.55rem; }
.nav__brand img{ width:30px; height:30px; border-radius:50%; object-fit:cover; 
  background:var(--blue-deep); box-shadow:0 2px 8px rgba(18,34,79,.35); }
.nav__brand b{ font-family:var(--f-display); font-weight:700; font-size:1.05rem; letter-spacing:.01em; color:var(--blue-deep); }
.nav__links{ display:flex; gap:1.1rem; font-family:var(--f-label); font-weight:500; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.nav__links a{ opacity:.72; transition:opacity .25s,color .25s; position:relative; }
.nav__links a::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--foil); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.nav__links a:hover{ opacity:1; color:var(--blue) }
.nav__links a:hover::after{ transform:scaleX(1) }
@media(max-width:900px){ .nav{gap:.6rem} }
@media(max-width:520px){
  .nav__links{ gap:.75rem; font-size:.52rem; }
  .nav{ padding-left:.9rem; padding-right:.9rem; }
  .nav__brand b{ font-size:.9rem; }
}
@media(max-width:360px){
  .nav__brand b{ display:none; }   /* tiny screens: logo only, keep the links */
}

/* ---------------- HERO (Silk background) ---------------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; border-bottom:1px solid var(--line); }
.hero__silk{ position:absolute; inset:0; z-index:0; }
.hero__silk canvas{ width:100%!important; height:100%!important; display:block; }
.hero__veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
   radial-gradient(120% 90% at 50% 20%, transparent 40%, rgba(9,18,42,.5) 100%),
   linear-gradient(180deg, rgba(9,18,42,.14), rgba(9,18,42,.44)); }
.hero__inner{ position:relative; z-index:3; width:min(900px,92vw); margin:0 auto;
  display:flex; flex-direction:column; align-items:center; text-align:center; padding:7.5rem 0 5rem; }

/* hero portrait — bigger, borderless, transparent cutout */
.hero__portrait{ position:relative; width:min(360px,80vw); margin:0 0 .2rem; }
.hero__portrait img{ position:relative; width:100%;
  filter:drop-shadow(0 18px 26px rgba(5,10,26,.55)) drop-shadow(0 2px 6px rgba(5,10,26,.35));
  animation:float 7.5s ease-in-out infinite; }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.hero h1{ font-family:var(--f-display); color:#fff; font-weight:600; line-height:1.02;
  font-size:clamp(2.5rem,6vw,4.8rem); letter-spacing:-.01em; text-shadow:0 2px 40px rgba(9,18,42,.5); margin-top:1.4rem; max-width:16ch; }
.hero h1 em{ font-style:italic; background:linear-gradient(92deg,var(--foil-lt),#fff 42%,var(--foil-lt)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero__lede{ margin-top:1.5rem; max-width:52ch; color:#e9f0fd; font-size:1.08rem; font-weight:300; line-height:1.72; text-shadow:0 1px 12px rgba(9,18,42,.5); }
.hero__lede b{ font-weight:500; color:#fff; }
.hero__meta{ margin-top:2rem; }
.hero__cta{ display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.6rem;
  background:rgba(255,255,255,.95); color:var(--blue-deep); border-radius:100px;
  font-family:var(--f-label); font-weight:500; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 12px 30px rgba(9,18,42,.3); transition:transform .3s, box-shadow .3s; }
.hero__cta:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(9,18,42,.42) }
.hero__scroll{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:4;
  font-family:var(--f-label); font-weight:500; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sky);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; opacity:.9; }
.hero__scroll .bar{ width:1px; height:34px; background:linear-gradient(var(--sky),transparent); animation:drop 1.8s ease-in-out infinite; }
@keyframes drop{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------------- section shell ---------------- */
.wrap{ width:min(1180px,92vw); margin:0 auto; }
.band{ position:relative; z-index:3; padding:7.5rem 0; }
.band--tint{ background:linear-gradient(180deg,var(--paper),var(--paper-2)); border-block:1px solid var(--line-soft); }
.sec-head{ max-width:52ch; margin-bottom:3rem; }
.sec-head h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.1rem,5vw,3.7rem);
  line-height:1.04; letter-spacing:-.015em; color:var(--blue-deep); }
.sec-head h2 em{ font-style:italic; color:var(--blue); }
.sec-head p{ margin-top:1rem; color:var(--ink-soft); font-size:1.08rem; max-width:48ch; }

/* ---------------- book cards ---------------- */
.bcard{ user-select:none; display:block; }
.bcard__cover{ position:relative; aspect-ratio:2/3; border-radius:3px 7px 7px 3px; overflow:hidden; background:#0a1226;
  box-shadow:inset 6px 0 14px rgba(0,0,0,.3), 0 22px 40px rgba(18,34,79,.28); transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.bcard:hover .bcard__cover{ transform:translateY(-8px); }
.bcard__cover img{ width:100%; height:100%; object-fit:cover; pointer-events:none; }
.bcard__cover::before{ content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; z-index:2; background:rgba(0,0,0,.28) }
.bcard__cover::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 45%) }
.bcard__tag{ position:absolute; top:.7rem; left:.7rem; z-index:3; font-family:var(--f-label); font-weight:700; font-size:.5rem; letter-spacing:.13em; text-transform:uppercase; color:#12224f;
  background:linear-gradient(92deg,var(--foil-lt),#fff 55%,var(--foil-lt)); padding:.3rem .55rem; border-radius:100px; box-shadow:0 4px 12px rgba(9,18,42,.3); }
.bcard__gr{ position:absolute; bottom:.6rem; right:.6rem; z-index:3; font-family:var(--f-label); font-weight:700; font-size:.46rem; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:rgba(18,34,79,.82); padding:.28rem .5rem; border-radius:100px; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; }
.bcard:hover .bcard__gr{ opacity:1; transform:none; }
.bcard__meta{ margin-top:.9rem; }
.bcard__ttl{ font-family:var(--f-display); font-weight:700; font-size:1.12rem; line-height:1.12; color:var(--blue-deep); }
.bcard__au{ font-style:italic; opacity:.9; margin-top:.15rem; font-size:.9rem; color:var(--ink-soft); }

/* rail (favorites + excited) */
.excited__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; }
.rail{ margin-top:2.4rem; display:flex; gap:1.8rem; overflow-x:auto; padding:1rem .5rem 2.4rem; scroll-snap-type:x mandatory;
  cursor:grab; scrollbar-width:thin; scrollbar-color:var(--blue-mid) transparent; }
.rail::-webkit-scrollbar{ height:6px } .rail::-webkit-scrollbar-thumb{ background:var(--blue-mid); border-radius:100px }
.rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.rail .bcard{ scroll-snap-align:center; flex:0 0 210px; }

/* ---------------- genre folders (React Bits Folder, ported) ---------------- */
/* soft orbs behind the folders so the glass has something to refract */
#genres{ position:relative; overflow:hidden; }
#genres::before, #genres::after{ content:''; position:absolute; z-index:0; border-radius:50%; pointer-events:none;
  filter:blur(70px); opacity:.55; }
#genres::before{ width:420px; height:420px; left:6%; top:38%;
  background:radial-gradient(circle, rgba(46,92,224,.55), transparent 70%); }
#genres::after{ width:460px; height:460px; right:4%; top:30%;
  background:radial-gradient(circle, rgba(127,148,196,.5), transparent 70%); }
#genres .wrap{ position:relative; z-index:1; }

.folders{ display:flex; flex-wrap:wrap; gap:4rem 4.5rem; justify-content:center; margin-top:2rem; }
.folder-cell{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
/* reserve the scaled folder's real footprint so cells never overlap */
.folder-cell__art{ width:210px; height:180px; display:flex; align-items:center; justify-content:center; }
.folder-cell__name{ font-family:var(--f-display); font-weight:700; font-size:1.25rem; color:var(--blue-deep); }
.folders__note{ margin-top:2.6rem; text-align:center; font-family:var(--f-label); font-weight:500; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faded); }

/* glassmorphism folder — --folder-rgb is set per genre from script.js */
.folder{ --folder-rgb:47,75,179;
  transition:all .2s ease-in; cursor:pointer; }
.folder:not(.open):hover{ transform:translateY(-8px); }
.folder:not(.open):hover .paper{ transform:translate(-50%,0%); }
.folder:not(.open):hover .folder__front{ transform:skew(15deg) scaleY(.6); }
.folder:not(.open):hover .right{ transform:skew(-15deg) scaleY(.6); }
.folder.open{ transform:translateY(-8px); }
.folder.open .paper:nth-child(1){ transform:translate(-120%,-70%) rotateZ(-15deg); }
.folder.open .paper:nth-child(2){ transform:translate(10%,-70%) rotateZ(15deg); height:80%; }
.folder.open .paper:nth-child(3){ transform:translate(-50%,-100%) rotateZ(5deg); height:80%; }
.folder.open .folder__front{ transform:skew(15deg) scaleY(.6); }
.folder.open .right{ transform:skew(-15deg) scaleY(.6); }

.folder__back{ position:relative; width:100px; height:80px;
  background:linear-gradient(135deg, rgba(var(--folder-rgb),.42), rgba(var(--folder-rgb),.20));
  backdrop-filter:blur(9px) saturate(150%); -webkit-backdrop-filter:blur(9px) saturate(150%);
  border:1px solid rgba(255,255,255,.42); border-radius:0 12px 12px 12px;
  box-shadow:0 10px 26px rgba(18,34,79,.16), inset 0 1px 0 rgba(255,255,255,.55); }
.folder__back::after{ position:absolute; z-index:0; bottom:98%; left:0; content:''; width:30px; height:10px;
  background:linear-gradient(135deg, rgba(var(--folder-rgb),.42), rgba(var(--folder-rgb),.24));
  border:1px solid rgba(255,255,255,.42); border-bottom:none; border-radius:6px 6px 0 0; }

.paper{ position:absolute; z-index:2; bottom:10%; left:50%; transform:translate(-50%,10%); width:70%; height:80%;
  background:rgba(255,255,255,.55); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  border:1px solid rgba(255,255,255,.7); border-radius:10px;
  box-shadow:0 4px 14px rgba(18,34,79,.12); transition:all .3s ease-in-out; overflow:hidden; }
.paper:nth-child(2){ background:rgba(255,255,255,.65); width:80%; height:70%; }
.paper:nth-child(3){ background:rgba(255,255,255,.78); width:90%; height:60%; }
.paper img{ width:100%; height:100%; object-fit:cover; opacity:.92; }

.folder__front{ position:absolute; z-index:3; width:100%; height:100%;
  background:linear-gradient(135deg, rgba(var(--folder-rgb),.50), rgba(var(--folder-rgb),.26));
  backdrop-filter:blur(11px) saturate(160%); -webkit-backdrop-filter:blur(11px) saturate(160%);
  border:1px solid rgba(255,255,255,.5); border-radius:7px 12px 12px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -14px 24px rgba(var(--folder-rgb),.16);
  transform-origin:bottom; transition:all .3s ease-in-out; overflow:hidden; }
/* diagonal sheen */
.folder__front::before{ content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.06) 38%, transparent 62%);
  pointer-events:none; }
.folder:focus-visible{ outline:2px solid var(--blue); outline-offset:6px; border-radius:10px; }

/* ---------------- circular gallery + modal ---------------- */
.circular-gallery{ width:100%; height:100%; overflow:hidden; cursor:grab; }
.circular-gallery:active{ cursor:grabbing; }
.gm{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:1.2rem; }
.gm.open{ display:flex; }
.gm__scrim{ position:absolute; inset:0; background:rgba(9,18,42,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.gm__panel{ position:relative; z-index:1; width:min(1100px,96vw); height:min(70vh,640px);
  background:linear-gradient(180deg,#182a5c,#0d1a3d); border-radius:20px; padding:1.4rem 1.2rem; box-shadow:0 40px 90px rgba(0,0,0,.55); display:flex; flex-direction:column; }
.gm__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.2rem .6rem 1rem; color:#fff; }
.gm__ttl{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.4rem,3.2vw,2rem); line-height:1.05; }
.gm__ttl small{ display:block; font-family:var(--f-label); font-weight:500; font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--foil-lt); margin-bottom:.2rem; }
.gm__close{ flex:0 0 auto; border:none; background:rgba(255,255,255,.14); color:#fff; width:38px; height:38px; border-radius:50%; font-size:1.15rem; cursor:pointer; transition:background .25s,transform .25s; }
.gm__close:hover{ background:rgba(255,255,255,.28); transform:scale(1.08); }
.gm__stage{ position:relative; flex:1; min-height:0; }
.gm__empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--sky); line-height:1.7; padding:2rem; }

/* ---------------- recommendation spine shelf (vintage) ---------------- */
.shelf{ position:relative; }
.shelf__tags{ display:flex; align-items:flex-end; gap:0; height:40px; padding:0 4%; }
.shelf__tags span{ flex:1; text-align:center; font-family:var(--f-display); font-style:italic; font-size:.9rem; color:var(--ink-soft); padding:0 .3rem; }
.shelf__row{ display:flex; align-items:flex-end; gap:.55rem; padding:0 4%; min-height:340px; }
.spine{ flex:1; border-radius:3px 3px 1px 1px; position:relative; display:flex; align-items:center; justify-content:center;
  box-shadow:inset -6px 0 14px rgba(0,0,0,.22), inset 6px 0 10px rgba(255,255,255,.08), 0 10px 18px rgba(18,34,79,.16);
  transition:transform .4s cubic-bezier(.2,.7,.2,1); cursor:default; color:#fdf7ec; }
.spine:hover{ transform:translateY(-22px); }
.spine::after{ content:''; position:absolute; left:0; right:0; top:10px; height:16px; border-top:1px solid rgba(253,247,236,.28); border-bottom:1px solid rgba(253,247,236,.16); }
.spine__label{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--f-display); font-weight:600;
  font-size:clamp(.78rem,1.4vw,1rem); letter-spacing:.02em; padding:1.1rem 0; text-align:center; text-shadow:0 1px 2px rgba(0,0,0,.35); max-height:82%; overflow:hidden; }
.spine__no{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%); font-family:var(--f-label); font-weight:500; font-size:.5rem; letter-spacing:.1em; opacity:.8; }
.shelf__board{ height:20px; margin:0 2%; border-radius:2px; background:linear-gradient(180deg,#c7b28a,#8a744c); box-shadow:0 20px 30px rgba(18,34,79,.22), inset 0 2px 0 rgba(255,255,255,.35); }
.shelf__board-edge{ height:9px; margin:0 4%; background:linear-gradient(180deg,#6f5b38,#4a3c24); border-radius:0 0 4px 4px; }
@media(max-width:720px){ .shelf__tags{display:none} .spine__label{font-size:.7rem} }

/* ---------------- bookstagrammers (TiltedCard, ported) ---------------- */
.stagram{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:2.4rem 2rem; margin-top:1rem; }
.tc{ position:relative; width:100%; height:300px; perspective:800px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tc__inner{ position:relative; width:240px; height:300px; transform-style:preserve-3d; transition:transform .1s ease-out; will-change:transform; }
.tc__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:16px; box-shadow:0 22px 44px rgba(18,34,79,.3); transform:translateZ(0); }
.tc__overlay{ position:absolute; left:0; right:0; bottom:0; z-index:2; transform:translateZ(34px); padding:1rem 1.1rem;
  border-radius:0 0 16px 16px; background:linear-gradient(180deg,transparent,rgba(9,18,42,.82)); }
.tc__handle{ font-family:var(--f-display); font-weight:700; font-size:1.15rem; color:#fff; }
.tc__sub{ font-family:var(--f-label); font-weight:500; font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sky); }
.tc__cap{ pointer-events:none; position:absolute; left:0; top:0; z-index:3; border-radius:6px; background:#fff; padding:5px 11px; font-size:.7rem; color:#2d2d2d; opacity:0; transition:opacity .2s; box-shadow:0 6px 18px rgba(0,0,0,.2); white-space:nowrap; }

/* ---------------- teams ---------------- */
.teams{ display:flex; flex-wrap:wrap; gap:.9rem; }
.team{ display:inline-flex; align-items:center; gap:.7rem; padding:.7rem 1.1rem .7rem .8rem;
  background:var(--white); border:1px solid var(--line); border-radius:100px;
  box-shadow:0 8px 20px rgba(18,34,79,.08); transition:transform .3s, box-shadow .3s, border-color .3s; }
.team:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(18,34,79,.14); border-color:var(--blue-mid); }
.team__badge{ font-family:var(--f-label); font-weight:700; font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--blue-deep); padding:.28rem .5rem; border-radius:100px; }
.team__name{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; color:var(--blue-deep); }

/* ---------------- reveal ---------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------------- footer ---------------- */
.footer{ position:relative; z-index:3; background:var(--blue-deep); color:var(--sky); padding:4.5rem 0 2.4rem; overflow:hidden; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; align-items:start; }
.footer h4{ font-family:var(--f-label); font-weight:500; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-mid); margin-bottom:1rem; }
.footer__col a{ display:block; color:#dbe6fb; opacity:.8; padding:.28rem 0; transition:opacity .25s, transform .25s; }
.footer__col a:hover{ opacity:1; transform:translateX(4px); color:#fff; }
.footer__mark{ display:flex; align-items:center; gap:.7rem; }
.footer__mark img{ width:42px; height:42px; border-radius:50%; object-fit:cover;  background:#0a1226; }
.footer__mark b{ font-family:var(--f-display); font-size:1.5rem; font-weight:700; color:#fff; }
.footer__base{ margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-family:var(--f-label); font-weight:400; font-size:.6rem; letter-spacing:.08em; color:var(--blue-mid); }
@media(max-width:820px){ .footer__grid{ grid-template-columns:1fr 1fr } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important }
  .reveal{ opacity:1; transform:none }
  .hero__portrait img{ animation:none!important }
}

/* ============================================================
   TBR JAR
   ============================================================ */
.tbr{ display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:center; }
@media(max-width:860px){ .tbr{ grid-template-columns:1fr; gap:1.5rem; text-align:center; } }
.tbr__intro h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:1.04; letter-spacing:-.015em; color:var(--blue-deep); }
.tbr__intro h2 em{ font-style:italic; color:var(--blue); }
.tbr__intro p{ margin-top:1rem; color:var(--ink-soft); font-size:1.05rem; max-width:44ch; }
@media(max-width:860px){ .tbr__intro p{ margin-inline:auto; } .tbr .chapter-mark{ justify-content:center; } }
.tbr__jar{ display:flex; justify-content:center; }

/* --- the jar itself --- */
.jar{ display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:.6rem 1rem 1rem;
  border-radius:18px; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.jar:hover{ transform:translateY(-5px); }
.jar__svg{ width:150px; height:188px; overflow:visible; }
.jar__lid{ fill:#5f6b82; }
.jar__lid2{ fill:#7c8899; }
.jar__glass{ stroke:rgba(255,255,255,.75); stroke-width:2.5; }
.jar__shine{ fill:rgba(255,255,255,.4); }
.jar__books .bk{ transform-box:fill-box; transform-origin:center;
  animation:jarFloat 3.6s ease-in-out infinite; animation-delay:var(--d); }
@keyframes jarFloat{ 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-3px) rotate(1.5deg)} }
.jar:hover .bk{ animation:jarShake .55s ease-in-out infinite; animation-delay:var(--d); }
@keyframes jarShake{ 0%,100%{transform:translate(0,0) rotate(0)} 25%{transform:translate(-1.5px,-2px) rotate(-3deg)}
  75%{transform:translate(1.5px,-1px) rotate(3deg)} }
.jar__label{ font-family:var(--f-display); font-weight:700; font-size:1.25rem; color:var(--blue-deep); }
.jar__sub{ font-family:var(--f-label); font-weight:500; font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faded); }

@media (prefers-reduced-motion: reduce){ .jar__books .bk{ animation:none!important; } }

/* ============================================================
   PAGE HEADER (for sub-pages like now.html)
   ============================================================ */
.pagehead{ position:relative; min-height:46svh; display:flex; align-items:flex-end;
  overflow:hidden; border-bottom:1px solid var(--line); }
.pagehead__silk{ position:absolute; inset:0; z-index:0; }
.pagehead__silk canvas{ width:100%!important; height:100%!important; display:block; }
.pagehead__veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 10%, transparent 35%, rgba(9,18,42,.55) 100%),
             linear-gradient(180deg, rgba(9,18,42,.18), rgba(9,18,42,.5)); }
.pagehead__inner{ position:relative; z-index:2; padding:8rem 0 3rem; }
.pagehead__back{ display:inline-block; font-family:var(--f-label); font-weight:500; font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sky); opacity:.9;
  transition:transform .3s, opacity .3s; }
.pagehead__back:hover{ opacity:1; transform:translateX(-4px); color:#fff; }
.pagehead h1{ font-family:var(--f-display); color:#fff; font-weight:600; line-height:1.04;
  font-size:clamp(2.1rem,5.2vw,3.9rem); letter-spacing:-.01em; margin-top:.9rem;
  text-shadow:0 2px 40px rgba(9,18,42,.5); max-width:18ch; }
.pagehead h1 em{ font-style:italic;
  background:linear-gradient(92deg,var(--foil-lt),#fff 42%,var(--foil-lt));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nav__links a.is-here{ opacity:1; color:var(--blue); }
.nav__links a.is-here::after{ transform:scaleX(1); }
#now.band{ padding-top:4.5rem; }

/* ============================================================
   TOP 5 CHARACTERS — CardSwap (ported from React Bits, no gsap)
   ============================================================ */
.chars{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media(max-width:900px){ .chars{ grid-template-columns:1fr; gap:1rem; } }
.chars__intro h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:1.04; letter-spacing:-.015em; color:var(--blue-deep); }
.chars__intro h2 em{ font-style:italic; color:var(--blue); }
.chars__intro p{ margin-top:1rem; color:var(--ink-soft); font-size:1.05rem; max-width:42ch; }

.chars__stack{ position:relative; height:400px; perspective:900px; overflow:visible; }
.chars__stack .card{
  position:absolute; top:50%; left:50%; width:400px; height:250px;
  display:flex; align-items:stretch; gap:1.1rem;
  padding:1.3rem 1.3rem 1.3rem 1.5rem; border-radius:16px;
  background:linear-gradient(150deg, rgba(255,255,255,.86), rgba(231,238,251,.78));
  backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 22px 48px rgba(18,34,79,.22), inset 0 1px 0 rgba(255,255,255,.9);
  transform-style:preserve-3d; will-change:transform; backface-visibility:hidden;
  -webkit-backface-visibility:hidden; cursor:pointer; }
.chars__stack .card::before{ content:''; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.5) 0%, transparent 45%); }
.card__text{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:.4rem; }
.card__art{ flex:0 0 104px; border-radius:12px; overflow:hidden; background:var(--blue-deep);
  box-shadow:0 8px 20px rgba(18,34,79,.28); }
.card__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.card__rank{ font-family:var(--f-label); font-weight:700; font-size:.56rem; letter-spacing:.2em;
  color:var(--blue); }
.card__name{ font-family:var(--f-display); font-weight:700; font-size:1.42rem; line-height:1.08;
  color:var(--blue-deep); }
.card__from{ font-size:.86rem; color:var(--ink-soft); }
.card__from em{ font-style:italic; }
.card__quote{ margin-top:.35rem; font-family:var(--f-display); font-style:italic; font-size:.92rem;
  line-height:1.4; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; color:var(--blue-deep); border-left:2px solid var(--foil); padding-left:.8rem; }

@media(max-width:900px){
  .chars__stack{ height:330px; }
  .chars__stack .card{ width:340px; height:230px; padding:1.1rem; }
  .card__name{ font-size:1.24rem; }
  .card__art{ flex:0 0 88px; }
}
@media(max-width:420px){
  .chars__stack .card{ width:290px; height:215px; gap:.8rem; }
  .card__art{ flex:0 0 74px; }
  .card__quote{ font-size:.85rem; -webkit-line-clamp:3; }
}
@media (prefers-reduced-motion: reduce){
  .chars__stack .card{ transition:none!important; }
}

/* ---- hero: second CTA to the Right Now page ---- */
.hero__meta{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.hero__cta--ghost{ background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%);
  box-shadow:0 10px 26px rgba(9,18,42,.28); }
.hero__cta--ghost:hover{ background:rgba(255,255,255,.24); border-color:#fff; }
.hero__arrow{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.hero__cta--ghost:hover .hero__arrow{ transform:translateX(5px); }
@media(max-width:420px){ .hero__meta{ flex-direction:column; align-items:stretch; } }

/* ============================================================
   KINDLE HIGHLIGHTS
   ============================================================ */
.kh{ display:grid; grid-template-columns:1.05fr 1fr; gap:3.5rem; align-items:center; }
@media(max-width:900px){ .kh{ grid-template-columns:1fr; gap:2.4rem; text-align:center; } }
.kh__intro h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:1.04; letter-spacing:-.015em; color:var(--blue-deep); }
.kh__intro h2 em{ font-style:italic; color:var(--blue); }
.kh__intro p{ margin-top:1rem; color:var(--ink-soft); font-size:1.05rem; max-width:44ch; }
@media(max-width:900px){ .kh__intro p{ margin-inline:auto; } .kh .chapter-mark{ justify-content:center; } }
.kh__stage{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }

/* --- the e-reader --- */
.kndl{
  position:relative; width:min(390px,84vw); aspect-ratio:100/138;
  padding:22px 19px 60px; border-radius:34px; cursor:pointer;
  background:linear-gradient(157deg,#6389f7 0%,#2e5ce0 44%,#1b3aa4 100%);
  box-shadow:
    0 34px 62px -20px rgba(12,34,79,.55),
    0 2px 0 rgba(255,255,255,.35) inset,
    0 -4px 0 rgba(0,0,0,.22) inset,
    0 0 0 1px rgba(18,34,79,.25);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
}
.kndl:hover{ transform:translateY(-6px); box-shadow:0 40px 70px -20px rgba(12,34,79,.6),
  0 2px 0 rgba(255,255,255,.4) inset, 0 -4px 0 rgba(0,0,0,.22) inset, 0 0 0 1px rgba(18,34,79,.25); }
.kndl::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(130% 70% at 18% -5%, rgba(255,255,255,.3), transparent 58%); }
.kndl__screen{
  position:relative; height:100%; display:flex; align-items:center; overflow:hidden;
  padding:2.1rem 1.35rem; border-radius:3px; background:#fff;
  box-shadow:0 0 0 1px rgba(9,18,42,.22), 0 10px 22px -10px rgba(9,18,42,.5) inset;
}
.kndl__page{ width:100%;
  font-family:Georgia,'Iowan Old Style','Times New Roman',serif; color:#14161c;
  font-size:clamp(.74rem,1.6vw,.93rem); line-height:1.65; text-align:justify; hyphens:auto;
  transition:opacity .24s ease, transform .24s ease; }
.kndl__page.is-out{ opacity:0; transform:translateY(7px); }
.kndl__page p{ text-indent:1.5em; }
.kndl__page p + p{ margin-top:.1rem; }
.kndl__page mark{ background:#f9d2e0; color:inherit; border-radius:1px;
  padding:.14em 0; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
/* Kindle's own four, plus a green. Add more by copying a line and
   picking a name — the JS accepts whatever is listed in HL_COLORS. */
.kndl__page mark.hl--pink  { background:#f9d2e0; }
.kndl__page mark.hl--yellow{ background:#fbeaa6; }
.kndl__page mark.hl--blue  { background:#cfe1fb; }
.kndl__page mark.hl--orange{ background:#fcd9b0; }
.kndl__page mark.hl--green { background:#d2ebcd; }
.kndl__page mark.hl--purple{ background:#e0d3f6; }

/* Underlines use a stronger version of each colour — the pastel highlight
   shades all but vanish when they're only a 2px line. */
.kndl__page u{ text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:3px; }
.kndl__page u.ul--pink  { text-decoration-color:#e2799f; }
.kndl__page u.ul--yellow{ text-decoration-color:#d3a32e; }
.kndl__page u.ul--blue  { text-decoration-color:#5288dd; }
.kndl__page u.ul--orange{ text-decoration-color:#d88836; }
.kndl__page u.ul--green { text-decoration-color:#5fa257; }
.kndl__page u.ul--purple{ text-decoration-color:#8257c8; }
.kndl__name{ position:absolute; left:1rem; right:1rem; bottom:19px; text-align:center;
  font-family:var(--f-label); font-weight:700; font-size:.8rem; letter-spacing:.13em;
  text-transform:uppercase; color:#fff; text-shadow:0 1px 6px rgba(9,18,42,.4);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* --- caption + controls --- */
.kh__ctrls{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.5rem 1.1rem; }
.kh__cite{ font-family:var(--f-label); font-weight:500; font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faded); }
.kh__dots{ display:flex; align-items:center; gap:.42rem; }
.kh__dot{ width:7px; height:7px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(13,28,58,.18); transition:transform .3s, background .3s; }
.kh__dot:hover{ background:var(--blue-mid); }
.kh__dot.is-on{ background:var(--blue); transform:scale(1.35); }
.kh__shuffle{ font-family:var(--f-label); font-weight:500; font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); cursor:pointer;
  padding:.5rem .95rem; border-radius:100px; background:rgba(255,255,255,.7);
  border:1px solid var(--line); transition:color .3s, border-color .3s, transform .3s; }
.kh__shuffle:hover{ color:var(--blue); border-color:var(--blue-mid); transform:translateY(-2px); }

@media (prefers-reduced-motion: reduce){ .kndl, .kndl__page{ transition:none!important; } }

/* ============================================================
   PHONE FIXES — kept last so they win over the earlier blocks
   ============================================================ */

/* Footer: the long Instagram handle was forcing a 199px minimum on
   column 1, pushing the whole grid past the screen where .footer's
   overflow:hidden chopped the right-hand column off. */
@media(max-width:820px){
  .footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.8rem 1.2rem; }
  .footer__col:last-child{ grid-column:1 / -1; }   /* "Also me" gets the full width */
}
@media(max-width:340px){
  .footer__grid{ grid-template-columns:1fr; }
}
.footer__col a, .footer__col h4{ overflow-wrap:anywhere; }
.footer__mark b{ overflow-wrap:anywhere; }

/* Character stack: a bit more headroom now that the fan is centred */
@media(max-width:900px){
  .chars{ gap:1.6rem; }
  .chars__stack{ height:340px; }
}
@media(max-width:420px){
  .chars__stack{ height:320px; }
  /* card width follows the screen so the fan can't clip on narrow phones */
  .chars__stack .card{ width:min(290px,80vw); }
}

/* ============================================================
   FOOTER — silk background, drifting books, Playfair type
   ============================================================ */
.footer{ padding:3.4rem 0 1.7rem; }
.footer__silk{ position:absolute; inset:0; z-index:0; }
.footer__silk canvas{ width:100%!important; height:100%!important; display:block; }
.footer__veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%, transparent 35%, rgba(9,18,42,.52) 100%),
             linear-gradient(180deg, rgba(9,18,42,.22), rgba(9,18,42,.52)); }
.footer__books{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.footer .wrap{ position:relative; z-index:3; }

.bookdot{ position:absolute; border-radius:2px; box-shadow:0 2px 7px rgba(5,10,26,.3);
  transform:rotate(var(--rot));
  animation:bookdrift var(--dur) ease-in-out infinite; animation-delay:var(--del); }
.bookdot::after{ content:''; position:absolute; left:17%; top:0; bottom:0;
  width:1.5px; background:rgba(255,255,255,.26); }
@keyframes bookdrift{
  0%,100%{ transform:translateY(0)    rotate(var(--rot)); }
  50%    { transform:translateY(-10px) rotate(calc(var(--rot) + 4deg)); }
}
@media (prefers-reduced-motion: reduce){ .bookdot{ animation:none!important; } }

/* smaller, and set in Playfair */
.footer h4{ font-size:.55rem; margin-bottom:.7rem; color:var(--sky); opacity:.72; }
.footer__col a{ font-family:var(--f-display); font-size:.96rem; padding:.16rem 0;
  color:#f3f7ff; opacity:.92; text-shadow:0 1px 12px rgba(9,18,42,.85); }
.footer h4, .footer__mark b, .footer__base{ text-shadow:0 1px 12px rgba(9,18,42,.85); }
.footer__mark img{ width:36px; height:36px; }
.footer__mark b{ font-size:1.32rem; }
.footer__base{ margin-top:1.9rem; padding-top:1.05rem;
  font-family:var(--f-display); font-size:.78rem; letter-spacing:.02em; color:var(--sky); opacity:.7; }
@media(max-width:820px){ .footer{ padding:2.8rem 0 1.5rem; } }

/* ============================================================
   AUTHORS I'D LOVE TO MEET — ChromaGrid port
   ============================================================ */
.sec-head--tight{ margin-bottom:2rem; }
.sec-head--tight h2{ font-size:clamp(1.8rem,4vw,2.7rem); }
.sec-head--tight p{ font-size:.98rem; margin-top:.6rem; }

.chroma{ position:relative; display:grid; justify-content:center;
  grid-template-columns:repeat(4,196px); gap:.75rem;
  --x:50%; --y:50%; --r:250px; }
@media(max-width:900px){ .chroma{ grid-template-columns:repeat(2,minmax(0,208px)); } }
@media(max-width:440px){ .chroma{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; } }

.chroma-card{ position:relative; border-radius:16px; overflow:hidden;
  border:1px solid rgba(13,28,58,.14); background:var(--card-gradient);
  box-shadow:0 14px 30px -14px rgba(12,34,79,.45);
  transition:border-color .3s ease, transform .4s cubic-bezier(.2,.7,.2,1);
  --mx:50%; --my:50%; }
.chroma-card:hover{ transform:translateY(-5px); border-color:var(--card-border); }
.chroma-card::before{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .5s ease;
  background:radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.22), transparent 70%); }
.chroma-card:hover::before{ opacity:1; }

.chroma-card__link{ position:relative; z-index:1; display:flex; flex-direction:column; height:100%; }
.chroma-img{ display:block; padding:9px 9px 6px; }
.chroma-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; display:block; }
.chroma-initials{ display:grid; place-items:center; aspect-ratio:1/1; border-radius:10px;
  background:rgba(255,255,255,.09); color:rgba(255,255,255,.7);
  font-family:var(--f-display); font-weight:700; font-size:1.9rem; letter-spacing:.04em; }
.chroma-info{ display:block; padding:.15rem .8rem .8rem; color:#fff; }
.chroma-name{ display:block; font-family:var(--f-display); font-weight:700;
  font-size:1rem; line-height:1.15; }
.chroma-note{ display:block; margin-top:.12rem; font-size:.71rem; color:rgba(255,255,255,.6); }
.chroma-go{ display:block; margin-top:.35rem; font-family:var(--f-label); font-weight:500;
  font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45);
  transition:color .3s; }
.chroma-card:hover .chroma-go{ color:rgba(255,255,255,.85); }

/* the spotlight: everything outside the cursor radius desaturates */
.chroma-overlay, .chroma-fade{ position:absolute; inset:0; pointer-events:none;
  backdrop-filter:grayscale(.72) brightness(.97); -webkit-backdrop-filter:grayscale(.72) brightness(.97);
  background:rgba(0,0,0,.001); border-radius:18px; }
.chroma-overlay{ z-index:3;
  mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),
    transparent 0%, transparent 18%, rgba(0,0,0,.22) 45%, rgba(0,0,0,.5) 72%, #000 100%);
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),
    transparent 0%, transparent 18%, rgba(0,0,0,.22) 45%, rgba(0,0,0,.5) 72%, #000 100%); }
.chroma-fade{ z-index:4; opacity:1; transition:opacity .3s ease;
  mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),
    #fff 0%, #fff 18%, rgba(255,255,255,.75) 45%, rgba(255,255,255,.45) 72%, transparent 100%);
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),
    #fff 0%, #fff 18%, rgba(255,255,255,.75) 45%, rgba(255,255,255,.45) 72%, transparent 100%); }
/* touch devices never hover, so don't leave the grid greyed out */
@media (hover:none){ .chroma-overlay, .chroma-fade{ display:none; } }

/* The fanned character cards overflow their own box by ~30px, which was
   quietly widening the document. clip contains it without creating a
   scroll container (hidden on body alone doesn't stop <html>). */
html{ overflow-x:clip; }
body{ overflow-x:clip; }

/* ============================================================
   BOOKSTAGRAMMERS — smaller, fluid cards so the grid can hold many
   ============================================================ */
.stagram{ grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:1.5rem 1rem; margin-top:1.4rem; }
/* fixed 240x300 → fluid: cards now fill their cell at a fixed ratio */
.tc{ height:auto; perspective:640px; }
.tc__inner{ width:100%; height:auto; aspect-ratio:4/5; }
.tc__img{ border-radius:12px; box-shadow:0 12px 26px -8px rgba(18,34,79,.42); }
.tc__overlay{ padding:.6rem .65rem .55rem; border-radius:0 0 12px 12px; transform:translateZ(26px); }
.tc__handle{ font-size:.82rem; line-height:1.15; overflow-wrap:anywhere; }
.tc__sub{ font-size:.46rem; letter-spacing:.14em; }

/* placeholder for a handle whose photo isn't in the folder yet */
.tc__img--ph{ display:grid; place-items:center; padding:.6rem; text-align:center;
  background:linear-gradient(150deg,#2e5ce0,#0a1226); }
.tc__img--ph span{ font-family:var(--f-display); font-weight:700; font-size:.8rem;
  color:rgba(255,255,255,.72); overflow-wrap:anywhere; }

@media(max-width:520px){
  .stagram{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem .8rem; }
}

/* ============================================================
   PROLOGUE — GET TO KNOW ME
   An open, annotated book spread: highlighter strokes paint
   themselves in as the section scrolls into view.
   ============================================================ */
#about{ padding-bottom:6.5rem; }
#about .sec-head{ margin-bottom:2.4rem; }

.spread{ position:relative; width:min(960px,100%); margin:0 auto; padding:3.4rem 0 0; }

/* the pile of paper the book is resting on */
.spread__stack{ position:absolute; z-index:0; left:1.5%; right:1.5%; top:6.2rem; bottom:-1.1rem; }
.spread__stack::before,.spread__stack::after{ content:''; position:absolute; inset:0; border-radius:5px; }
.spread__stack::before{ transform:rotate(-1.5deg);
  background:linear-gradient(180deg,#dbe6fb,#c4d5f2); box-shadow:0 22px 44px rgba(18,34,79,.20); }
.spread__stack::after{ transform:rotate(1.2deg);
  background:linear-gradient(180deg,#f0f5fe,#dde7fb); box-shadow:0 16px 32px rgba(18,34,79,.14); }

/* ---- the book itself ---- */
/* Four pages, two of them on a single sheet that physically turns:
   pg1 (i) sits on the left, pg4 (iv) waits underneath on the right, and the
   sheet carrying pg2 (ii, front) and pg3 (iii, back) rotates between them.
   Height is set by JS from the tallest page — see initBookFlip(). */
.spread__book{ position:relative; z-index:2; min-height:330px; perspective:2200px;
  background:var(--page); border-radius:3px;
  box-shadow:0 34px 64px -22px rgba(18,34,79,.45), 0 3px 10px rgba(18,34,79,.14); }
/* gutter — the shadowed valley where the pages meet */
.spread__book::before{ content:''; position:absolute; z-index:2; pointer-events:none;
  left:50%; top:0; bottom:0; width:74px; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(36,31,26,.10) 40%,rgba(36,31,26,.17) 50%,rgba(36,31,26,.10) 60%,transparent); }
/* the paper curving away at the outer edges */
.spread__book::after{ content:''; position:absolute; z-index:2; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(36,31,26,.07),transparent 7%,transparent 93%,rgba(36,31,26,.07)); }

.leaf{ position:absolute; top:0; height:100%; width:50%; overflow:hidden;
  background:var(--page); border-radius:3px; }
.leaf--verso{ left:0; }
.leaf--recto{ left:50%; }
.leaf__inner{ position:relative; min-height:100%; padding:4.6rem 2.1rem 3.4rem; }
/* JS adds this for one synchronous tick to read each page's true content
   height — without it the pages just report the height they were given. */
.spread__book.is-measuring{ min-height:0; }
.spread__book.is-measuring .leaf{ height:auto; }
.spread__book.is-measuring .leaf__inner{ min-height:0; }

/* the turning sheet */
.flip{ position:absolute; top:0; left:50%; width:50%; height:100%; z-index:4;
  transform-origin:left center; transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.55,.06,.28,1); }
.spread__book.is-turned .flip{ transform:rotateY(-180deg); }
.leaf--face{ left:0; width:100%; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.leaf--back{ transform:rotateY(180deg); }
/* paper darkens as it lifts, so the turn reads as a physical sheet */
.leaf--face::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(36,31,26,.16), transparent 22%);
  opacity:0; transition:opacity .5s; }
.spread__book.is-moving .leaf--face::after{ opacity:1; }
.leaf__run{ display:block; font-family:var(--f-label); font-weight:500; font-size:.5rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--page-faint); margin-bottom:1.9rem; }
.leaf--l .leaf__run{ text-align:left; } .leaf--r .leaf__run{ text-align:right; }
.leaf__body{ font-family:var(--f-book); font-size:clamp(.95rem,1.15vw,1.06rem); line-height:1.74;
  color:var(--page-ink); text-align:justify; hyphens:auto; }
.leaf__body p + p{ text-indent:1.3em; }
.leaf__no{ position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  font-family:var(--f-book); font-style:italic; font-size:.82rem; color:var(--page-faint); }

/* ---- the annotations ---- */
.leaf mark{ background-color:transparent; color:inherit;
  background-image:linear-gradient(180deg,transparent 12%,var(--hl,var(--hl-blue)) 12%,var(--hl,var(--hl-blue)) 94%,transparent 94%);
  background-repeat:no-repeat; background-size:0% 100%;
  transition:background-size .95s cubic-bezier(.32,.72,.28,1) var(--d,0s);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.leaf mark.hl--pink{ --hl:var(--hl-pink); }
.leaf u{ text-decoration:none;
  background-image:linear-gradient(180deg,transparent 90%,var(--pen) 90%,var(--pen) 95%,transparent 95%);
  background-repeat:no-repeat; background-size:0% 100%;
  transition:background-size .8s cubic-bezier(.32,.72,.28,1) var(--d,.3s);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.spread.in mark, .spread.in u{ background-size:100% 100%; }

/* pen note in the margin */
.leaf__note{ text-indent:0; margin-top:1.3rem; text-align:right; line-height:1.15;
  font-family:var(--f-hand); font-size:1.28rem; color:var(--pen);
  transform:rotate(-1.6deg); transform-origin:right center;
  opacity:0; transition:opacity .7s ease 1.1s; }
.spread.in .leaf__note{ opacity:.92; }

/* ---- desk objects ---- */
.washi{ position:absolute; z-index:4; top:.6rem; left:7%; width:132px; height:34px;
  transform:rotate(-6deg);
  background:linear-gradient(150deg,rgba(196,216,250,.94),rgba(151,183,240,.94));
  box-shadow:0 4px 12px rgba(18,34,79,.20);
  clip-path:polygon(0 6%,4% 0,9% 8%,14% 1%,100% 4%,97% 96%,92% 89%,86% 100%,80% 91%,0 95%); }

.polaroid{ position:absolute; z-index:5; top:-3rem; right:4.5%; width:138px;
  padding:9px 9px 32px; background:#fff; border-radius:2px;
  box-shadow:0 18px 36px rgba(18,34,79,.30), 0 2px 4px rgba(18,34,79,.16);
  transform:rotate(4deg); }
.polaroid img{ width:100%; aspect-ratio:1/1; object-fit:contain; object-position:bottom;
  background:linear-gradient(165deg,#e6eefc,#c6d8f5); border-radius:1px; }
.polaroid figcaption{ position:absolute; left:0; right:0; bottom:7px; text-align:center;
  font-family:var(--f-hand); font-size:1.05rem; color:#2c3d63; }
.clip{ position:absolute; z-index:2; top:-25px; left:50%; width:38px; height:47px;
  transform:translateX(-50%) rotate(-6deg);
  fill:none; stroke:#93a0b3; stroke-width:3; stroke-linejoin:round;
  filter:drop-shadow(0 2px 3px rgba(18,34,79,.38)); }

/* page-edge sticky tabs — now the index for the two spreads */
.tab{ position:absolute; z-index:6; right:-13px; width:27px; height:64px;
  border:0; padding:0; border-radius:0 4px 4px 0; cursor:pointer;
  box-shadow:3px 3px 9px rgba(18,34,79,.16);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), width .3s, box-shadow .3s; }
.tab--1{ top:14%; background:#f3bdd2; }
.tab--2{ top:31%; background:#bcd3f7; }
.tab:hover, .tab:focus-visible{ width:34px; box-shadow:4px 5px 14px rgba(18,34,79,.24); }
.tab:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.tab span{ position:absolute; inset:0; display:grid; place-items:center;
  writing-mode:vertical-rl; font-family:var(--f-label); font-weight:700;
  font-size:.42rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(18,34,79,.62); }
.tab[aria-current="true"]{ width:36px; }

/* ---- corner curls: the thing you actually grab to turn a page ---- */
.curl{ position:absolute; bottom:0; z-index:7; width:74px; height:74px;
  border:0; padding:0; background:transparent; cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .45s; }
.curl::before{ content:''; position:absolute; inset:0;
  box-shadow:0 0 14px rgba(18,34,79,.22);
  transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.curl__hint{ position:absolute; bottom:.5rem; white-space:nowrap;
  font-family:var(--f-hand); font-size:1.02rem; color:var(--pen);
  opacity:0; transition:opacity .3s; }
.curl--fwd{ right:0; }
.curl--fwd::before{ border-radius:3px 0 3px 0;
  background:linear-gradient(315deg, #eee7da 0%, #f8f5ef 42%, var(--page) 60%);
  clip-path:polygon(100% 100%, 0 100%, 100% 0); }
.curl--fwd:hover::before, .curl--fwd:focus-visible::before{ transform:scale(1.22); }
.curl--fwd .curl__hint{ right:4.8rem; }
.curl--back{ left:0; }
.curl--back::before{ border-radius:0 3px 0 3px;
  background:linear-gradient(45deg, #eee7da 0%, #f8f5ef 42%, var(--page) 60%);
  clip-path:polygon(0 100%, 100% 100%, 0 0); }
.curl--back:hover::before, .curl--back:focus-visible::before{ transform:scale(1.22); }
.curl--back .curl__hint{ left:4.8rem; }
.spread.in .spread__book:not(.is-turned) .curl--fwd,
.spread.in .spread__book.is-turned .curl--back{ opacity:1; pointer-events:auto; }
.curl:hover .curl__hint, .curl:focus-visible .curl__hint{ opacity:.95; }
.curl:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* ---- trope lists ---- */
.tropes{ list-style:none; margin:0; padding:0; }
.tropes li{ position:relative; padding-left:1.9rem; margin-bottom:.85rem;
  text-indent:0; text-align:left; }
.tropes li::before{ position:absolute; left:0; top:-.1em;
  font-family:var(--f-hand); font-size:1.35rem; line-height:1; }
.tropes--yes li::before{ content:'\2713'; color:var(--pen); }
.tropes--no li::before{ content:'\2717'; color:#c2557f; }
.tropes--no li{ color:#5c5349; }

/* ---- the promo strip under the book ---- */
.capbar{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center;
  gap:.9rem; width:min(960px,100%); margin:2.6rem auto 0; padding:1.05rem 1.4rem;
  background:var(--blue-deep); color:#fff; border-radius:3px;
  font-family:var(--f-label); font-weight:700; font-size:clamp(.68rem,1.5vw,.92rem);
  letter-spacing:.16em; text-transform:uppercase; text-align:center;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.capbar:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(18,34,79,.28); }
.capbar__pipe{ opacity:.45; font-weight:400; }
.capbar:focus-visible, .cbook:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; }

/* narrow columns + justified text makes rivers — go ragged-right early */
@media(max-width:900px){
  .leaf__inner{ padding:4.9rem 1.7rem 3.2rem; }
  .leaf__body{ text-align:left; }
  .curl{ width:62px; height:62px; }
  .curl--fwd .curl__hint{ right:4rem; } .curl--back .curl__hint{ left:4rem; }
}
/* Phones: no room for a two-page spread, so the sheet stops rotating and the
   two pages of each spread stack. Turning still swaps spread 1 for spread 2. */
@media(max-width:800px){
  .spread{ padding-top:3.4rem; }
  .spread__book{ display:flex; flex-direction:column; height:auto!important;
    min-height:0; perspective:none; }
  .spread__book::before{ display:none; }
  .leaf, .flip{ position:static; width:auto; height:auto; }
  .flip{ display:contents; }
  .leaf--face{ transform:none!important; backface-visibility:visible;
    -webkit-backface-visibility:visible; }
  .leaf--face::after{ display:none; }
  .leaf__inner{ min-height:0; padding:3.4rem 1.5rem 3rem; }
  .leaf__body{ text-align:left; }
  .pg1{ order:1; } .pg2{ order:2; } .pg3{ order:3; } .pg4{ order:4; }
  .pg1 .leaf__inner, .pg3 .leaf__inner{ padding-bottom:2rem; }
  .pg2 .leaf__inner, .pg4 .leaf__inner{ padding-top:.4rem; }
  .pg1 .leaf__no, .pg3 .leaf__no{ display:none; }
  .pg2 .leaf__run, .pg4 .leaf__run{ text-align:left; }
  .pg2 .leaf__inner::before, .pg4 .leaf__inner::before{ content:'';
    position:absolute; top:0; left:0; right:0;
    border-top:1px dashed rgba(36,31,26,.16); }
  /* only one spread on screen at a time */
  .spread__book:not(.is-turned) .pg3, .spread__book:not(.is-turned) .pg4{ display:none; }
  .spread__book.is-turned .pg1, .spread__book.is-turned .pg2{ display:none; }
  /* the curls become plain buttons under the text */
  .curl{ position:static; order:5; width:auto; height:auto; align-self:center;
    margin:0 0 1.6rem; padding:.5rem 1rem; opacity:1; pointer-events:auto; }
  .curl::before{ display:none; }
  .curl__hint{ position:static; opacity:.95; font-size:1.2rem;
    display:inline-flex; align-items:center; gap:.4rem;
    border-bottom:1px solid rgba(61,99,196,.4); }
  .spread__book:not(.is-turned) .curl--back{ display:none; }
  .spread__book.is-turned .curl--fwd{ display:none; }
  .polaroid{ width:104px; right:3%; top:-2.4rem; padding:7px 7px 25px; }
  .polaroid figcaption{ font-size:.88rem; bottom:5px; }
  .clip{ width:27px; height:34px; top:-20px; }
  .washi{ left:4%; width:96px; height:27px; }
  .tab{ display:none; }
  .spread__stack{ top:7rem; }
}
@media (prefers-reduced-motion: reduce){
  .leaf mark, .leaf u{ background-size:100% 100%!important; }
  .leaf__note{ opacity:.92!important; }
  .flip{ transition:none!important; }
}

/* ============================================================
   FAVORITES — covers standing on wooden shelves
   ============================================================ */
.favshelf{ margin-top:2.4rem; }
.cshelf{ position:relative; }
.cshelf + .cshelf{ margin-top:2.6rem; }
.cshelf__row{ display:flex; align-items:flex-end; justify-content:center; gap:.85rem; padding:0 4%; }
.cshelf__board{ height:16px; margin:0 2%; border-radius:2px;
  background:linear-gradient(180deg,#c7b28a,#8a744c);
  box-shadow:0 18px 26px rgba(18,34,79,.18), inset 0 2px 0 rgba(255,255,255,.35); }
.cshelf__edge{ height:8px; margin:0 4%; border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,#6f5b38,#4a3c24); }

.cbook{ flex:1 1 0; min-width:0; max-width:154px; display:block;
  transform:scale(var(--h,1)) rotate(var(--tilt,0deg)); transform-origin:bottom center;
  transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.cbook:hover{ transform:scale(var(--h,1)) translateY(-14px) rotate(0deg); }
.cbook__cover{ position:relative; display:block; aspect-ratio:2/3; overflow:hidden;
  border-radius:2px 5px 5px 2px; background:#0a1226;
  box-shadow:inset 5px 0 12px rgba(0,0,0,.34), 0 10px 16px -4px rgba(18,34,79,.34); }
.cbook__cover img{ width:100%; height:100%; object-fit:cover; }
/* the spine shadow down the binding edge */
.cbook__cover::before{ content:''; position:absolute; z-index:2; left:6px; top:0; bottom:0;
  width:2px; background:rgba(0,0,0,.3); }
.cbook__tag{ position:absolute; z-index:3; top:.4rem; left:.4rem;
  font-family:var(--f-label); font-weight:700; font-size:.42rem; letter-spacing:.11em;
  text-transform:uppercase; color:#12224f; padding:.22rem .4rem; border-radius:100px;
  background:linear-gradient(92deg,var(--foil-lt),#fff 55%,var(--foil-lt));
  box-shadow:0 3px 9px rgba(9,18,42,.3);
  transition:opacity .3s; }
.cbook__info{ position:absolute; z-index:3; inset:auto 0 0 0; display:block;
  padding:1.6rem .55rem .55rem; color:#fff; text-align:left;
  background:linear-gradient(180deg,transparent,rgba(6,12,30,.9));
  opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s; }
.cbook:hover .cbook__info{ opacity:1; transform:none; }
.cbook:hover .cbook__tag{ opacity:0; }
.cbook__info b{ display:block; font-family:var(--f-display); font-weight:700;
  font-size:.78rem; line-height:1.15; }
.cbook__info i{ display:block; margin-top:.1rem; font-family:var(--f-display);
  font-size:.66rem; opacity:.78; }

/* no hover on touch — show the title straight away instead */
@media (hover:none){
  .cbook__info{ opacity:1; transform:none; padding:.95rem .45rem .45rem;
    background:linear-gradient(180deg,transparent,rgba(6,12,30,.88) 45%); }
  .cbook__tag{ display:none; }
}
@media(max-width:560px){
  .cshelf__row{ gap:.55rem; padding:0 3%; }
  .cshelf + .cshelf{ margin-top:2rem; }
}

/* ============================================================
   REVIEWS — reading journal
   Each review is an index-card entry: cover on the left, your
   rating + reaction on lined paper to the right.
   ============================================================ */
.journal{ max-width:760px; margin:2.6rem auto 0; }
.journal__loading, .journal__empty{ text-align:center; padding:3rem 1rem;
  font-family:var(--f-book); font-style:italic; color:var(--ink-soft); }
.journal__empty a{ color:var(--blue); }

.entry{ position:relative; display:grid; grid-template-columns:132px 1fr; gap:1.6rem;
  background:var(--page); border-radius:4px; padding:1.9rem 1.9rem 1.7rem;
  box-shadow:0 18px 40px -20px rgba(18,34,79,.35), 0 2px 6px rgba(18,34,79,.08);
  border:1px solid rgba(18,34,79,.06); }
.entry + .entry{ margin-top:2.1rem; }
/* faint ruled lines, like a journal page */
.entry::after{ content:''; position:absolute; inset:1.9rem 1.9rem 1.7rem 165px; z-index:0;
  background-image:linear-gradient(rgba(18,34,79,.05) 1px, transparent 1px);
  background-size:100% 2.05rem; background-position:0 1.55rem; pointer-events:none; }
.entry > *{ position:relative; z-index:1; }

.entry__cover{ display:block; align-self:start; }
.entry__cover img{ width:100%; border-radius:2px 5px 5px 2px;
  box-shadow:inset 5px 0 12px rgba(0,0,0,.28), 0 8px 16px -4px rgba(18,34,79,.34);
  background:#0a1226; }

.entry__meta{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.35rem; }
.stars{ font-size:.95rem; letter-spacing:.06em; color:var(--blue); }
.stars__off{ color:rgba(18,34,79,.18); }
.entry__spice{ font-size:.8rem; letter-spacing:.05em; }
.entry__date{ font-family:var(--f-label); font-weight:500; font-size:.52rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--page-faint); margin-left:auto; }

.entry__title{ font-family:var(--f-display); font-weight:700; font-size:1.5rem;
  line-height:1.1; color:var(--blue-deep); margin:0; }
.entry__title a{ color:inherit; text-decoration:none; }
.entry__title a:hover{ text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; }
.entry__by{ font-family:var(--f-book); font-style:italic; font-size:.98rem;
  color:var(--ink-soft); margin:.2rem 0 0; }
.entry__by a{ color:var(--blue); text-decoration:none; }
.entry__by a:hover{ text-decoration:underline; }
.entry__series{ font-style:normal; font-family:var(--f-label); font-weight:500;
  font-size:.5rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--page-faint); margin-right:.5rem; }

.entry__pull{ margin:1.2rem 0; padding:.15rem 0;
  font-family:var(--f-book); font-style:italic; font-size:1.12rem; line-height:1.95;
  color:var(--page-ink); border:0; }
/* one continuous highlighter stroke across the whole quote. box-decoration
   -break:clone makes the marker flow across every wrapped line and stop
   cleanly at each line end — a real highlighter, not word-by-word boxes. */
.entry__pull .hl{ background-color:transparent; color:inherit;
  background-image:linear-gradient(180deg,transparent 8%,var(--hl-blue) 8%,var(--hl-blue) 90%,transparent 90%);
  background-repeat:no-repeat; background-position:left center;
  background-size:0% 100%;
  transition:background-size 1.3s cubic-bezier(.4,.5,.2,1);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding:.06em 0; }
.entry.in .entry__pull .hl{ background-size:100% 100%; }
/* a page-marker tab on the left edge, growing in */
.entry__pull{ position:relative; padding-left:1.1rem; }
.entry__pull::before{ content:''; position:absolute; left:0; top:.35em; bottom:.35em;
  width:5px; border-radius:2px; background:var(--blue-mid);
  transform:scaleY(0); transform-origin:top; transition:transform .5s ease .15s; }
.entry.in .entry__pull::before{ transform:scaleY(1); }

.entry__text{ margin-top:1rem; font-family:var(--f-book); font-size:1.04rem;
  line-height:1.72; color:var(--page-ink); }
.entry__text p{ margin:0; }
.entry__text p + p{ margin-top:.7rem; }

.entry__tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem;
  margin:1.1rem 0 0; padding:0; }
.entry__tags li{ font-family:var(--f-label); font-weight:500; font-size:.5rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  background:rgba(188,211,247,.28); padding:.32rem .6rem; border-radius:100px; }

.entry__more{ display:inline-block; margin-top:1.15rem;
  font-family:var(--f-label); font-weight:700; font-size:.56rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--blue);
  text-decoration:none; }
.entry__more:hover{ text-decoration:underline; text-underline-offset:3px; }

@media(max-width:620px){
  .entry{ grid-template-columns:92px 1fr; gap:1.1rem; padding:1.4rem; }
  .entry::after{ display:none; }
  .entry__title{ font-size:1.28rem; }
  .entry__date{ width:100%; margin-left:0; }
}

/* ============================================================
   ADMIN — paste-and-generate review builder (admin.html)
   Never committed with secrets; it just formats JSON for you.
   ============================================================ */
.admin{ max-width:900px; margin:0 auto; padding:2.4rem 1.3rem 5rem; }
.admin__grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
.admin__col h3{ font-family:var(--f-display); font-weight:700; font-size:1.3rem;
  color:var(--blue-deep); margin:0 0 1rem; }
.admin label{ display:block; font-family:var(--f-label); font-weight:500;
  font-size:.55rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft); margin:1rem 0 .35rem; }
.admin input, .admin textarea, .admin select{ width:100%; box-sizing:border-box;
  font-family:var(--f-book); font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid rgba(18,34,79,.18); border-radius:6px;
  padding:.6rem .7rem; }
.admin textarea{ min-height:120px; resize:vertical; line-height:1.6; }
.admin input:focus, .admin textarea:focus, .admin select:focus{
  outline:2px solid var(--blue); outline-offset:1px; border-color:transparent; }
.admin__row{ display:flex; gap:.8rem; }
.admin__row > *{ flex:1; }
.admin__hint{ font-family:var(--f-book); font-style:italic; font-size:.9rem;
  color:var(--faded); margin:.3rem 0 0; }

.admin__paste{ margin-bottom:1.4rem; }
.admin__btn{ font-family:var(--f-label); font-weight:700; font-size:.6rem;
  letter-spacing:.13em; text-transform:uppercase; cursor:pointer;
  border:0; border-radius:100px; padding:.75rem 1.3rem;
  background:var(--blue-deep); color:#fff;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.admin__btn:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(18,34,79,.24); }
.admin__btn--ghost{ background:transparent; color:var(--blue-deep);
  border:1px solid rgba(18,34,79,.28); }
.admin__btns{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.3rem; }

.admin__out{ margin-top:1.4rem; }
.admin__out textarea{ font-family:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
  font-size:.82rem; min-height:220px; background:#0e1a33; color:#dce6ff;
  border-color:#0e1a33; }
.admin__preview{ position:sticky; top:1.5rem; }
.admin__note{ background:rgba(188,211,247,.2); border:1px solid rgba(46,92,224,.2);
  border-radius:8px; padding:1rem 1.15rem; margin-top:1.6rem;
  font-family:var(--f-book); font-size:.96rem; line-height:1.6; color:var(--ink-soft); }
.admin__note b{ color:var(--blue-deep); }
.admin__steps{ margin:.5rem 0 0; padding-left:1.2rem; }
.admin__steps li{ margin:.3rem 0; }
.admin__steps code{ font-family:ui-monospace,Menlo,monospace; font-size:.85rem;
  background:rgba(18,34,79,.08); padding:.1rem .35rem; border-radius:4px; }
.copied{ position:fixed; left:50%; bottom:2rem; transform:translateX(-50%) translateY(20px);
  background:var(--blue-deep); color:#fff; padding:.7rem 1.3rem; border-radius:100px;
  font-family:var(--f-label); font-weight:700; font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s; z-index:50; }
.copied.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media(max-width:760px){
  .admin__grid{ grid-template-columns:1fr; }
  .admin__preview{ position:static; }
}

/* ============================================================
   READING CHALLENGE — compact progress card above the journal
   ============================================================ */
.challenge{ max-width:760px; margin:0 auto 2.4rem; }
.challenge__link{ display:grid;
  grid-template-columns:auto 1fr auto; grid-template-rows:auto auto;
  align-items:center; gap:.1rem 1rem; text-decoration:none;
  background:var(--page); border:1px solid rgba(18,34,79,.08); border-radius:10px;
  padding:1.1rem 1.4rem; box-shadow:0 10px 26px -14px rgba(18,34,79,.3);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.challenge__link:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(18,34,79,.36); }
.challenge__year{ grid-row:1 / span 2; font-family:var(--f-display); font-weight:800;
  font-size:2.1rem; line-height:1; color:var(--blue-deep);
  padding-right:1rem; border-right:1px solid rgba(18,34,79,.12); }
.challenge__label{ font-family:var(--f-label); font-weight:700; font-size:.56rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); align-self:end; }
.challenge__count{ grid-column:2; font-family:var(--f-book); font-size:1rem;
  color:var(--page-ink); align-self:start; }
.challenge__count b{ color:var(--blue-deep); }
.challenge__pct{ grid-row:1 / span 2; grid-column:3; font-family:var(--f-display);
  font-weight:700; font-size:1.2rem; color:var(--blue); }
.challenge__bar{ grid-column:2; grid-row:2; height:8px; margin-top:.15rem;
  background:rgba(18,34,79,.1); border-radius:100px; overflow:hidden; }
.challenge__fill{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--blue-mid),var(--blue));
  border-radius:100px; transition:width 1.1s cubic-bezier(.4,.8,.3,1); }
@media(max-width:520px){
  .challenge__year{ font-size:1.7rem; }
  .challenge__pct{ font-size:1rem; }
}

/* covers that fail to load (OpenLibrary miss) collapse to a slim spine */
.entry__cover.is-empty img{ display:none; }
.entry__cover.is-empty{ align-self:stretch; border-radius:2px 5px 5px 2px;
  background:linear-gradient(160deg,#1a2a52,#0a1226);
  box-shadow:inset 5px 0 12px rgba(0,0,0,.3); min-height:120px; }

/* review dividers (your ______ lines) rendered as a soft rule */
.entry__rule{ border:0; height:1px; margin:1.2rem 0;
  background:linear-gradient(90deg,transparent,rgba(18,34,79,.2),transparent); }
/* a quote paragraph inside the body reuses the pull styling */
.entry__text .entry__pull{ margin:1rem 0; }

/* fractional star — a filled glyph clipped to --f width over a dim base */
.stars__half{ position:relative; display:inline-block; color:rgba(18,34,79,.18); }
.stars__half::before{ content:'\2605'; position:absolute; left:0; top:0;
  width:var(--f,50%); overflow:hidden; color:var(--blue); }

/* reading challenge — goal beaten */
.challenge.is-complete .challenge__fill{
  background:linear-gradient(90deg,var(--blue),var(--blue-mid),var(--blue)); }
.challenge.is-complete .challenge__pct{ color:var(--blue-deep); }
.challenge__over{ font-family:var(--f-label); font-weight:700; font-size:.62rem;
  letter-spacing:.04em; color:var(--blue); white-space:nowrap; }