/* ============================================
   shared.css — used by all pages
   ============================================ */
/* ── TWEEN LIST THEME: bright teal + coral + sunny yellow ──
   The CSS variable NAMES are kept (rose/sage/plum) so we don't
   touch every page; only the colors changed. Mental map:
     --rose  / --deep-rose  → coral accents      (was cozy rose)
     --sage  / --deep-sage  → teal mid tones     (was sage green)
     --plum  / --deep-plum  → deep teal navy     (was plum/aubergine)
     --midnight             → almost-black teal  (nav background)
     --gold  / --lgold      → sunny yellow       (CTAs + highlights)
*/
:root {
  --cream:#FAFAF6; --warm:#FFFDF6; --parchment:#FFF1E0;
  --rose:#FF8E72; --deep-rose:#E85D4E;
  --sage:#5EEAD4; --deep-sage:#14B8A6;
  --plum:#0E7490; --deep-plum:#0C4A6E; --midnight:#0B2A38;
  --gold:#F59E0B; --lgold:#FCD34D;
  --txt:#1A2B33; --txm:#3D5A66; --txl:#6B7B82;
  --bdr:#D4E3E8; --card:#FFF;
  --ss:0 2px 8px rgba(12,74,110,.10);
  --sm:0 4px 20px rgba(12,74,110,.15);
  --sl:0 12px 40px rgba(12,74,110,.22);
  --star:#FBBF24; --r:14px; --nav:64px;
}

/* ── LAYOUT RESERVATION (prevents CLS) ──
   renderNav()/renderFooter() inject content via JS after DOMContentLoaded. Without reserved
   space, the page renders → nav/footer inject → content shifts. CLS jumps to 0.16 on mobile.
   Reserving min-height keeps the pre-JS layout identical to the post-JS layout.
   navWrap matches the header height exactly; footWrap is approximate (footer varies with
   wrap behavior) but close enough that shifts stay under the 0.1 Core Web Vitals threshold.
*/
#navWrap{min-height:var(--nav);background:var(--midnight);}
#footWrap{min-height:240px;background:var(--midnight);}
@media (max-width:700px){
  #footWrap{min-height:360px;}
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Nunito',sans-serif;background:var(--cream);color:var(--txt);}
html{overflow-x:clip;}
::-webkit-scrollbar{width:7px;}
::-webkit-scrollbar-track{background:var(--parchment);}
::-webkit-scrollbar-thumb{background:var(--plum);border-radius:4px;}
img{max-width:100%;}
a{color:inherit;}

/* NAV */
header{position:relative;top:0;z-index:200;height:var(--nav);background:var(--midnight);background-image:radial-gradient(ellipse at 15% 50%,rgba(245,158,11,.12) 0%,transparent 55%),radial-gradient(ellipse at 85% 50%,rgba(92,61,94,.4) 0%,transparent 55%);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 2px 24px rgba(0,0,0,.4);}
.hi{max-width:1340px;margin:0 auto;padding:0 20px;height:100%;display:flex;align-items:center;gap:14px;}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0;}
.logo-ic{font-size:23px;filter:drop-shadow(0 0 8px rgba(245,158,11,.5));}
.logo-tx{font-family:'Playfair Display',serif;font-size:1.05rem;color:var(--lgold);font-weight:700;line-height:1.1;}
.logo-tx small{display:block;font-family:'Nunito',sans-serif;font-size:.56rem;color:rgba(250,246,240,.4);text-transform:uppercase;letter-spacing:.14em;font-weight:400;}
nav{display:flex;gap:1px;margin-left:8px;}
nav a{display:inline-block;color:rgba(250,246,240,.7);text-decoration:none;font-family:'Nunito',sans-serif;font-size:.78rem;font-weight:700;padding:6px 10px;border-radius:7px;transition:all .18s;white-space:nowrap;}
nav a:hover{color:var(--lgold);background:rgba(255,255,255,.07);}
nav a.active{color:var(--lgold);background:rgba(245,158,11,.15);}
.hr{margin-left:auto;display:flex;align-items:center;gap:9px;}
.si-w{position:relative;}
.si-w input{width:200px;padding:7px 34px 7px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:var(--cream);font-family:'Nunito',sans-serif;font-size:.78rem;outline:none;transition:all .2s;}
.si-w input::placeholder{color:rgba(250,246,240,.4);}
.si-w input:focus{background:rgba(255,255,255,.14);border-color:rgba(245,158,11,.5);width:240px;}
.si-ic{position:absolute;right:10px;top:50%;transform:translateY(-50%);opacity:.4;font-size:12px;pointer-events:none;}
.si-clr{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:rgba(250,246,240,.7);font-size:11px;width:18px;height:18px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:background .15s;}
.si-clr:hover{background:rgba(255,255,255,.28);}

/* TICKER */
.ticker{background:linear-gradient(to right,var(--deep-plum),#1E5B6E,var(--deep-plum));padding:7px 0;overflow:hidden;position:relative;}
.ticker::before,.ticker::after{content:'';position:absolute;top:0;bottom:0;width:50px;z-index:2;}
.ticker::before{left:0;background:linear-gradient(to right,var(--deep-plum),transparent);}
.ticker::after{right:0;background:linear-gradient(to left,var(--deep-plum),transparent);}
.tk-track{display:flex;animation:tk 55s linear infinite;width:max-content;}
.tk-track:hover{animation-play-state:paused;}
@keyframes tk{to{transform:translateX(-50%);}}
.tk-item{white-space:nowrap;padding:0 22px;color:rgba(250,246,240,.7);font-size:.74rem;font-family:'Lora',serif;font-style:italic;cursor:pointer;transition:color .2s;display:flex;align-items:center;gap:6px;}
.tk-item:hover{color:var(--lgold);}
.tk-dot{color:var(--gold);font-size:.4rem;}

/* WRAP */
.wrap{max-width:1340px;margin:0 auto;padding:32px 20px 68px;}

/* PAGE HEADING */
.ph{margin-bottom:26px;}
.ph h1{font-family:'Playfair Display',serif;font-size:clamp(1.4rem,3vw,1.9rem);color:var(--deep-plum);display:flex;align-items:center;gap:9px;margin-bottom:4px;}
.ph p{font-family:'Lora',serif;font-style:italic;color:var(--txl);font-size:.88rem;}

/* AGE TABS */
.age-tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap;}
.age-tab{background:var(--warm);border:1.5px solid var(--bdr);color:var(--txm);font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:700;padding:7px 18px;border-radius:20px;cursor:pointer;transition:all .18s;}
.age-tab:hover{border-color:var(--plum);color:var(--plum);}
.age-tab.on{background:var(--deep-plum);border-color:var(--deep-plum);color:#fff;}

/* FILTER PANEL */
.fp{background:var(--warm);border:1px solid var(--bdr);border-radius:18px;padding:22px 24px;margin-bottom:22px;box-shadow:var(--ss);}
.fp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
.fp-ti{font-family:'Playfair Display',serif;font-size:1rem;color:var(--deep-plum);display:flex;align-items:center;gap:9px;}
.fp-bd{background:var(--deep-plum);color:#fff;font-size:.64rem;font-family:'Nunito',sans-serif;font-weight:800;padding:2px 8px;border-radius:9px;display:none;}
.fp-rt{display:flex;gap:7px;align-items:center;}
.live-p{display:inline-flex;align-items:center;gap:4px;background:rgba(61,92,64,.12);border:1px solid rgba(61,92,64,.3);color:var(--deep-sage);font-size:.64rem;font-weight:800;padding:3px 9px;border-radius:9px;}
.live-d{width:5px;height:5px;border-radius:50%;background:var(--deep-sage);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.btn-clr{background:none;border:1.5px solid var(--bdr);color:var(--txl);font-size:.74rem;font-weight:700;padding:4px 13px;border-radius:18px;cursor:pointer;font-family:'Nunito',sans-serif;transition:all .18s;}
.btn-clr:hover{border-color:var(--rose);color:var(--deep-rose);}
.fg{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px;}
.fgl{font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--txl);margin-bottom:6px;display:block;}
.tr{display:flex;flex-wrap:wrap;gap:4px;}
.ftag{background:var(--parchment);border:1.5px solid var(--bdr);color:var(--txm);font-size:.72rem;font-weight:700;padding:3px 11px;border-radius:18px;cursor:pointer;transition:all .16s;user-select:none;font-family:'Nunito',sans-serif;}
.ftag:hover{border-color:var(--plum);color:var(--plum);}
.ftag.on{background:var(--deep-plum);border-color:var(--deep-plum);color:#fff;}

/* RESULTS BAR */
.rbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:9px;}
.rct{font-size:.84rem;color:var(--txm);font-weight:600;}
.rct strong{color:var(--deep-plum);font-size:.95rem;}
.rsrt{border:1.5px solid var(--bdr);background:#fff;color:var(--txt);font-size:.78rem;font-weight:700;padding:6px 13px;border-radius:9px;cursor:pointer;font-family:'Nunito',sans-serif;outline:none;}

/* BOOK GRID */
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:18px;}
.bc{background:var(--card);border-radius:var(--r);box-shadow:var(--ss);overflow:hidden;border:1px solid rgba(0,0,0,.05);transition:transform .22s cubic-bezier(.25,.46,.45,.94),box-shadow .22s;cursor:pointer;display:flex;flex-direction:column;animation:fu .36s ease both;}
@keyframes fu{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.bc:hover{transform:translateY(-5px);box-shadow:var(--sl);}
.cv{position:relative;background:var(--parchment);aspect-ratio:2/3;overflow:hidden;}
.cv img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.bc:hover .cv img{transform:scale(1.05);}
/* Cover placeholder — shown when a book has no cover URL or its cover URL fails to load.
   Renders inside the same .cv / .m-cov / .sb-cov containers so layout stays unchanged. */
.cover-empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--parchment) 0%,#cce8eb 50%,#a8d4d9 100%);text-align:center;padding:10px;box-sizing:border-box;}
.cover-empty .ce-icon{font-size:2.6rem;opacity:.42;margin-bottom:5px;line-height:1;filter:saturate(.8);}
.cover-empty .ce-text{font-family:'Nunito',sans-serif;font-size:.58rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--plum);opacity:.55;}
.cv-fade{position:absolute;inset:0;background:linear-gradient(to top,rgba(30,15,34,.5) 0%,transparent 50%);opacity:0;transition:opacity .24s;}
.bc:hover .cv-fade{opacity:1;}
.bdg{position:absolute;top:7px;left:7px;font-size:.57rem;font-weight:800;padding:2px 8px;border-radius:9px;text-transform:uppercase;letter-spacing:.06em;color:#fff;}
.bdg-bs{background:var(--gold);}
.bdg-new{background:var(--deep-sage);}
.bdg-s{background:var(--plum);}
.bi{padding:11px 12px 9px;flex:1;display:flex;flex-direction:column;gap:3px;}
.bt{font-family:'Playfair Display',serif;font-size:.86rem;font-weight:600;line-height:1.28;color:var(--txt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ba{font-size:.72rem;color:var(--txl);font-family:'Lora',serif;font-style:italic;}
.bsr{font-size:.64rem;font-weight:800;color:var(--plum);}
.brt{display:flex;align-items:center;gap:4px;margin-top:2px;}
.sts{color:var(--star);font-size:.72rem;letter-spacing:.4px;}
.rn{font-size:.74rem;font-weight:800;color:var(--txm);}
.rc{font-size:.64rem;color:var(--txl);}
.bcs{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px;}
.chip{background:var(--parchment);color:var(--txm);font-size:.58rem;padding:2px 6px;border-radius:6px;font-weight:700;}
.chip-tag{background:rgba(92,61,94,.1);color:var(--plum);}
/* v85+v87: .bpr rendered conditionally — only when book.priceDisplay is present.
   Bestsellers/newreleases live-fetch PA-API and always have prices; /books
   database cards typically don't, so they render no price row at all instead of
   a misleading "See price →" placeholder. */
.bpr{font-size:.86rem;font-weight:800;color:var(--deep-rose);margin-top:auto;padding-top:6px;}
.abtn{display:block;text-align:center;background:linear-gradient(135deg,var(--deep-plum),var(--plum));color:#fff;text-decoration:none;font-size:.72rem;font-weight:800;padding:8px 10px;border-radius:0 0 var(--r) var(--r);transition:background .2s;letter-spacing:.03em;}
.abtn:hover{background:linear-gradient(135deg,var(--plum),#0891B2);}

/* PAGINATION */
.pgn{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:36px;flex-wrap:wrap;}
.pb{background:var(--warm);border:1.5px solid var(--bdr);color:var(--txm);font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:700;padding:7px 16px;border-radius:9px;cursor:pointer;transition:all .18s;}
.pb:hover{border-color:var(--plum);color:var(--plum);}
.pb.cur{background:var(--deep-plum);border-color:var(--deep-plum);color:#fff;}
.pb:disabled{opacity:.35;cursor:not-allowed;}

/* MEDIA GRID */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;}
.mc{background:var(--card);border-radius:var(--r);box-shadow:var(--ss);overflow:hidden;border:1px solid rgba(0,0,0,.05);transition:transform .22s,box-shadow .22s;cursor:pointer;animation:fu .36s ease both;}
.mc:hover{transform:translateY(-5px);box-shadow:var(--sl);}
.mc-poster{position:relative;aspect-ratio:2/3;background:var(--parchment);overflow:hidden;}
.mc-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s;}
.mc:hover .mc-poster img{transform:scale(1.04);}
.mc-type{position:absolute;top:7px;right:7px;background:rgba(0,0,0,.7);color:#fff;font-size:.58rem;font-weight:800;padding:2px 8px;border-radius:8px;text-transform:uppercase;}
.mc-info{padding:11px 12px 10px;}
.mc-title{font-family:'Playfair Display',serif;font-size:.88rem;font-weight:600;line-height:1.28;color:var(--txt);margin-bottom:3px;}
.mc-year{font-size:.72rem;color:var(--txl);}
.mc-rat{display:flex;align-items:center;gap:5px;margin:4px 0;}
.mc-overview{font-family:'Lora',serif;font-style:italic;font-size:.76rem;color:var(--txl);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:5px;}
.mc-providers{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;}
.prov-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:7px;font-size:.62rem;font-weight:800;color:#fff;text-decoration:none;transition:opacity .18s;}
.prov-chip:hover{opacity:.85;}

/* SERIES */
.series-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:22px;}
.sc{background:var(--card);border-radius:16px;box-shadow:var(--ss);overflow:hidden;border:1px solid var(--bdr);transition:box-shadow .2s;}
.sc:hover{box-shadow:var(--sm);}
.sc-head{background:linear-gradient(135deg,var(--deep-plum),var(--plum));padding:16px 18px;display:flex;gap:14px;align-items:flex-start;}
.sc-cover{flex:0 0 60px;height:90px;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.3);}
.sc-cover img{width:100%;height:100%;object-fit:cover;}
.sc-info{flex:1;min-width:0;}
.sc-name{font-family:'Playfair Display',serif;font-size:.98rem;font-weight:700;color:#fff;margin-bottom:3px;line-height:1.2;}
.sc-auth{font-size:.74rem;color:rgba(255,255,255,.7);font-style:italic;font-family:'Lora',serif;margin-bottom:5px;}
.sc-meta{display:flex;gap:6px;flex-wrap:wrap;}
.sc-chip{background:rgba(255,255,255,.15);color:rgba(255,255,255,.85);font-size:.6rem;font-weight:800;padding:2px 8px;border-radius:8px;}
.sc-books{padding:12px 16px;}
.sb-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--parchment);}
.sb-row:last-child{border-bottom:none;}
.sb-num{flex:0 0 23px;height:23px;border-radius:50%;background:var(--parchment);display:flex;align-items:center;justify-content:center;font-size:.64rem;font-weight:800;color:var(--deep-plum);}
.sb-cov{flex:0 0 28px;height:42px;border-radius:4px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.15);}
.sb-cov img{width:100%;height:100%;object-fit:cover;}
.sb-ti{flex:1;font-size:.8rem;font-weight:600;color:var(--txt);}
.sb-ti a{color:inherit;text-decoration:none;}
.sb-ti a:hover{color:var(--plum);text-decoration:underline;}
.sb-st{font-size:.66rem;color:var(--star);font-weight:700;}
.sc-expand{width:100%;background:none;border:none;border-top:1px solid var(--parchment);padding:9px 16px;font-family:'Nunito',sans-serif;font-size:.76rem;font-weight:700;color:var(--plum);cursor:pointer;text-align:center;transition:background .18s;}
.sc-expand:hover{background:var(--parchment);}

/* MODAL */
.overlay{display:none;position:fixed;inset:0;background:rgba(15,5,18,.76);backdrop-filter:blur(6px);z-index:500;justify-content:center;align-items:flex-start;padding:28px 14px;overflow-y:auto;}
.overlay.open{display:flex;}
.modal{background:var(--warm);border-radius:20px;max-width:700px;width:100%;padding:34px;position:relative;box-shadow:0 24px 80px rgba(0,0,0,.5);animation:mp .26s cubic-bezier(.34,1.4,.64,1) both;margin:auto;}
@keyframes mp{from{opacity:0;transform:scale(.93) translateY(18px);}to{opacity:1;transform:scale(1) translateY(0);}}
.mx{position:absolute;top:14px;right:14px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--txl);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .18s;}
.mx:hover{background:var(--parchment);color:var(--txt);}
.mt{display:flex;gap:22px;margin-bottom:18px;}
.m-cov{flex:0 0 120px;height:180px;border-radius:10px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.25);}
.m-cov img{width:100%;height:100%;object-fit:cover;}
.mm{flex:1;min-width:0;}
.msc{display:inline-block;background:var(--plum);color:#fff;font-size:.64rem;font-weight:800;padding:2px 10px;border-radius:8px;margin-bottom:8px;}
.m-title{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;line-height:1.22;color:var(--txt);margin-bottom:4px;}
.m-auth{font-family:'Lora',serif;font-style:italic;color:var(--txm);font-size:.88rem;margin-bottom:10px;}
.m-rat{display:flex;align-items:center;gap:7px;margin-bottom:11px;}
.m-sts{color:var(--star);font-size:.98rem;}
.m-dg{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.m-di strong{display:block;font-size:.61rem;text-transform:uppercase;letter-spacing:.08em;color:var(--txl);margin-bottom:2px;}
.m-di span{font-size:.78rem;font-weight:700;color:var(--txt);}
.m-desc{font-family:'Lora',serif;font-style:italic;font-size:.86rem;line-height:1.72;color:var(--txm);border-left:3px solid var(--parchment);padding-left:14px;margin:16px 0;}
.m-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px;}
.m-tag{background:var(--parchment);border:1px solid var(--bdr);color:var(--txm);font-size:.7rem;font-weight:700;padding:2px 10px;border-radius:10px;}
.m-acts{display:flex;gap:10px;flex-wrap:wrap;}
.btn-amz{background:linear-gradient(135deg,#FBBF24,#F59E0B);color:var(--midnight);text-decoration:none;padding:10px 22px;border-radius:10px;font-weight:800;font-size:.84rem;transition:all .2s;display:inline-flex;align-items:center;gap:5px;box-shadow:0 4px 14px rgba(245,158,11,.3);}
.btn-amz:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(245,158,11,.4);}
.btn-out{background:none;border:2px solid var(--bdr);color:var(--txm);padding:8px 16px;border-radius:10px;font-weight:700;font-size:.8rem;cursor:pointer;transition:all .18s;font-family:'Nunito',sans-serif;}
.btn-out:hover{border-color:var(--plum);color:var(--plum);}
.prov-list h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--txl);margin-bottom:8px;font-weight:800;}
.prov-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.apple-slot{background:var(--parchment);border:2px dashed var(--bdr);border-radius:9px;padding:10px 14px;font-size:.76rem;color:var(--txl);text-align:center;margin-bottom:14px;}
.apple-slot a{color:var(--plum);font-weight:700;}

/* SPINNER / EMPTY */
.sw{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:13px;}
.spn{width:40px;height:40px;border:4px solid var(--parchment);border-top-color:var(--plum);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.sw p{font-family:'Lora',serif;font-style:italic;color:var(--txl);}
.empty{text-align:center;padding:60px 20px;color:var(--txl);}
.empty .ei{font-size:3rem;display:block;margin-bottom:11px;}
.empty h3{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--txm);margin-bottom:6px;}
.empty p{font-family:'Lora',serif;font-style:italic;font-size:.86rem;}

/* v94.10: Dim the grid while loading new results so user can see filtering
   is in progress instead of wondering if it's frozen. The .sw spinner
   appears alongside (above the dimmed grid in DOM order). pointer-events:
   none prevents accidental clicks on stale results during the load. */
.book-grid.is-loading,
.series-grid.is-loading,
.authors-grid.is-loading { opacity: .4; pointer-events: none; transition: opacity .15s; }

/* FOOTER */
footer{background:var(--midnight);color:rgba(250,246,240,.6);padding:40px 24px;text-align:center;font-size:.76rem;line-height:1.9;}
.fl{font-family:'Playfair Display',serif;font-size:1rem;color:var(--lgold);margin-bottom:8px;}
footer a{color:rgba(245,158,11,.8);text-decoration:none;transition:color .18s;}
footer a:hover{color:var(--lgold);}
.flinks{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:8px 0;}
.fdisc{max-width:600px;margin:11px auto 0;font-size:.68rem;line-height:1.6;}
.fxlink{margin:14px auto 0;text-align:center;}
.fxlink a{display:inline-block;padding:8px 18px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);border-radius:18px;color:var(--lgold);font-family:'Nunito',sans-serif;font-size:.82rem;font-weight:700;text-decoration:none;transition:all .18s;}
.fxlink a:hover{background:rgba(245,158,11,.22);border-color:var(--lgold);color:var(--lgold);}

/* AI TAGGING */
.ai-tag-wrap{display:flex;align-items:center;gap:4px;font-size:.64rem;color:var(--txl);margin-top:3px;}
.ai-spin{width:8px;height:8px;border:1.5px solid var(--bdr);border-top-color:var(--plum);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;}

/* ── HAMBURGER (hidden on desktop) ─────────────────── */
.hamb{display:none;background:none;border:none;padding:10px;margin-left:6px;cursor:pointer;width:40px;height:40px;flex-direction:column;justify-content:space-between;align-items:center;}
.hamb span{display:block;width:22px;height:2.5px;background:var(--lgold);border-radius:2px;transition:transform .25s,opacity .2s;}
.hamb.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamb.open span:nth-child(2){opacity:0;}
.hamb.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ── MOBILE DRAWER (hidden on desktop, slides down on mobile tap) ── */
.mnav{max-height:0;overflow:hidden;background:var(--midnight);transition:max-height .28s ease;border-top:1px solid rgba(255,255,255,.08);}
.mnav.open{max-height:560px;}
.mnav-inner{display:flex;flex-direction:column;padding:8px 16px 14px;gap:2px;}
.mnav-inner a{color:rgba(250,246,240,.85);text-decoration:none;font-family:'Nunito',sans-serif;font-size:.95rem;font-weight:700;padding:12px 14px;border-radius:8px;border:1px solid transparent;}
.mnav-inner a:hover,.mnav-inner a:focus{background:rgba(255,255,255,.06);color:var(--lgold);}
.mnav-inner a.active{background:rgba(245,158,11,.18);color:var(--lgold);border-color:rgba(245,158,11,.3);}

/* RESPONSIVE */
@media(max-width:960px){
  nav{display:none;}
  .hamb{display:flex;}
}
@media(max-width:800px){
  .si-w input{width:140px;}
  .book-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;}
  .fg{grid-template-columns:1fr 1fr;}
  .modal{padding:20px 15px;}
  .mt{flex-direction:column;}
  .m-cov{flex:0 0 auto;width:100px;height:150px;}
  .series-grid{grid-template-columns:1fr;}
  .media-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:13px;}
}
@media(max-width:480px){
  .book-grid,.media-grid{grid-template-columns:repeat(2,1fr);}
  .fg{grid-template-columns:1fr;}
  .logo-tx small{display:none;}  /* Give the hamburger breathing room on narrow phones */
  .si-w input{width:100px;}
}

/* ── AUTHOR SPOTLIGHT ──────────────────────────────── */
.spotlight-section {
  margin: 0 auto 32px;
  max-width: 1200px;
  padding: 0 20px;
}
.spotlight-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.spotlight-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--deep-plum);
  display: flex;
  align-items: center;
  gap: 7px;
}
.spotlight-disclosure {
  font-size: .7rem;
  color: var(--txl);
  font-style: italic;
  font-family: 'Lora', serif;
}
.spotlight-slots {
  font-size: .72rem;
  color: var(--txl);
  margin-left: auto;
}
.spotlight-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  justify-content: center;
}
.spotlight-card {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--ss);
  overflow: hidden;
  border: 2px solid var(--gold);
  transition: transform .22s, box-shadow .22s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  animation: fu .36s ease both;
  width: 200px;
  flex-shrink: 0;
}
.spotlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 28px rgba(245,158,11,.25);
}
.spotlight-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #F59E0B, #FBBF24);
  color: white;
  font-size: .58rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 9px;
  text-transform: uppercase;
  letter-spacing: .07em;
  z-index: 1;
}
.spotlight-cover {
  aspect-ratio: 2/3;
  background: var(--parchment);
  overflow: hidden;
  position: relative;
}
.spotlight-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.spotlight-card:hover .spotlight-cover img {
  transform: scale(1.04);
}
.spotlight-info {
  padding: 12px 13px 9px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.spotlight-book-title {
  font-family: 'Playfair Display', serif;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.28;
  color: var(--txt);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.spotlight-book-author {
  font-size: .74rem;
  color: var(--txl);
  font-family: 'Lora', serif;
  font-style: italic;
}
.spotlight-book-desc {
  font-size: .72rem;
  color: var(--txm);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font-family: 'Lora', serif;
}
/* v66: tag chips on spotlight cards (categories + animals) */
.spotlight-book-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.spotlight-book-tags .chip {
  font-size: .64rem;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--parchment);
  color: var(--txm);
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  white-space: nowrap;
}
.spotlight-book-tags .chip-tag {
  background: #FFE8E0;
  color: #9B3A2A;
}
/* v66: rating row on spotlight cards */
.spotlight-book-rating {
  font-size: .72rem;
  color: var(--txm);
  font-family: 'Nunito', sans-serif;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.spotlight-book-rating .sts {
  letter-spacing: .04em;
  font-size: .76rem;
}
/* v66: title/author become text links to detail/author pages. Subtle styling that
   matches the warm cozy palette — no bare-blue defaults. */
.spotlight-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s;
  display: block;
}
.spotlight-link:hover {
  color: var(--plum);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.spotlight-book-author .spotlight-link {
  display: inline;
}
.spotlight-expires {
  font-size: .64rem;
  color: var(--txl);
  margin-top: 4px;
}
.spotlight-buy {
  display: block;
  text-align: center;
  background: linear-gradient(135deg, #F59E0B, #FBBF24);
  color: var(--midnight);
  text-decoration: none;
  font-size: .74rem;
  font-weight: 800;
  padding: 9px 10px;
  border-radius: 0 0 var(--r) var(--r);
  transition: opacity .2s;
  letter-spacing: .03em;
}
.spotlight-buy:hover { opacity: .88; }
.spotlight-empty {
  background: var(--parchment);
  border: 2px dashed var(--bdr);
  border-radius: var(--r);
  padding: 24px;
  text-align: center;
  color: var(--txl);
  font-size: .8rem;
  font-family: 'Lora', serif;
  font-style: italic;
}

/* AND/OR filter mode toggle */
#filterModeBtn {
  background: var(--parchment);
  border: 1.5px solid var(--bdr);
  color: var(--txm);
  font-size: .7rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 18px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  transition: all .18s;
}
#filterModeBtn:hover {
  border-color: var(--plum);
  color: var(--plum);
}