@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');
:root{--bg:#101112;--panel:#181a1b;--panel2:#202223;--text:#f4f0e8;--muted:#a5a49e;--gold:#d5ad62;--gold2:#f0d69b;--line:#333431;--radius:20px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.65 "DM Sans",sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.gold,.hero h1 em{color:var(--gold)}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,6vw,90px);border-bottom:1px solid #ffffff10;background:#101112ed;position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:20px;line-height:1.1;letter-spacing:-.5px}.brand small{display:block;color:var(--muted);font-size:8px;letter-spacing:2px;margin-top:7px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--gold);border-radius:12px;color:var(--gold);font:700 25px Georgia}.topbar nav{display:flex;align-items:center;gap:28px;color:#c7c5be;font-size:13px}.topbar nav a:hover,.text-link:hover{color:var(--gold)}.nav-btn{background:none;color:inherit;border:1px solid var(--line);border-radius:30px;padding:9px 14px}.nav-btn span{color:var(--gold)}.hero{min-height:590px;padding:75px clamp(20px,9vw,140px) 55px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:45px;background:radial-gradient(ellipse at 80% 50%,#4c3b201c,transparent 55%),linear-gradient(120deg,#101112,#141515)}.eyebrow{font-size:10px;letter-spacing:2.2px;color:var(--gold);font-weight:700}.hero h1{font:600 clamp(52px,6vw,82px)/1.04 "Playfair Display",Georgia;margin:18px 0 20px;letter-spacing:-2px}.hero-copy>p{max-width:500px;color:#b8b6ae;font-size:16px}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:15px;padding:12px 20px;border-radius:8px;border:1px solid transparent;font-weight:700;font-size:13px}.primary{background:var(--gold);color:#17140e}.primary:hover{background:var(--gold2)}.text-link{background:none;border:0;color:var(--gold);font-size:13px}.hero-stats{display:flex;gap:42px;margin-top:50px}.hero-stats strong{display:block;font:600 25px Georgia;color:var(--gold)}.hero-stats span{font-size:11px;color:var(--muted)}.hero-art{height:400px;position:relative;display:grid;place-items:center;overflow:hidden}.orb{position:absolute;width:310px;height:310px;border-radius:50%;background:radial-gradient(circle,#8b682e45,#2d261b15 60%,transparent 70%);border:1px solid #d5ad621f}.book{position:absolute;width:205px;height:300px;border-radius:5px 13px 13px 5px;box-shadow:18px 20px 40px #0008;display:flex;flex-direction:column;justify-content:space-between;padding:24px;color:#211b10}.book-back{transform:translate(52px,0) rotate(9deg);background:linear-gradient(145deg,#a58a59,#6e5731);align-items:center;color:#211b10}.book-back b{font:700 29px Georgia;margin-top:70px}.book-front{transform:translate(-25px,8px) rotate(-8deg);background:linear-gradient(145deg,#e8d6ad,#b99656);border-left:9px solid #8b6b35}.book-front>span{font:700 16px Georgia;border:1px solid #66512e;width:36px;height:36px;display:grid;place-items:center;border-radius:50%}.book-front b{font:700 24px/1.15 Georgia;letter-spacing:1px}.book-front i{font-size:19px;color:#8b5f20}.book small{font-size:8px;letter-spacing:2px}.floating-note{position:absolute;bottom:35px;right:2%;background:#222522;border:1px solid #ffffff18;border-radius:12px;padding:14px 19px;font-size:12px;color:#e9d6ae;box-shadow:0 10px 35px #0006}.section,.continue-section{padding:75px clamp(20px,8vw,120px)}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.section h2,.section-heading h2{font:600 clamp(29px,3.5vw,42px)/1.2 "Playfair Display",Georgia;margin:9px 0}.section-heading p,.section>p{color:var(--muted);margin:8px 0}.toolbar{display:flex;gap:12px;margin:26px 0 18px}.searchbox{display:flex;align-items:center;gap:10px;flex:1;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:0 15px;color:var(--gold)}.searchbox input{width:100%;background:none;border:0;outline:0;color:var(--text);padding:13px 0}.toolbar select{background:var(--panel);color:#ddd;border:1px solid var(--line);border-radius:10px;padding:0 13px;max-width:190px}.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.chip{border:1px solid var(--line);border-radius:30px;padding:7px 14px;background:transparent;color:#aaa;font-size:12px}.chip.active,.chip:hover{background:#d5ad621b;border-color:#9d7c43;color:var(--gold)}.results-line{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:15px}.book-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.book-card{background:var(--panel);border:1px solid #ffffff0c;border-radius:15px;overflow:hidden;transition:.2s;min-width:0}.book-card:hover{transform:translateY(-4px);border-color:#8f733f80}.cover{height:190px;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(145deg,var(--cover),#181818)}.cover:before{content:"";position:absolute;width:190px;height:190px;border:1px solid #ffffff35;border-radius:50%;transform:translate(60px,35px)}.cover:after{content:"";position:absolute;width:145px;height:145px;border:1px solid #ffffff22;border-radius:50%;transform:translate(-55px,-30px)}.cover-title{position:relative;z-index:1;width:70%;font:600 23px/1.15 "Playfair Display",Georgia;color:#fff;text-shadow:0 2px 15px #0007}.cover-author{position:absolute;bottom:16px;left:15%;z-index:2;font-size:9px;letter-spacing:1.5px;color:#ffffffc9;text-transform:uppercase}.card-body{padding:17px}.category-label{color:var(--gold);font-size:9px;text-transform:uppercase;letter-spacing:1.5px}.card-body h3{font:600 19px/1.25 "Playfair Display",Georgia;margin:7px 0 4px}.author{font-size:11px;color:var(--muted)}.tagline{font-size:12px;color:#c6c2b8;min-height:40px;margin:12px 0}.card-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;border-top:1px solid var(--line);padding-top:12px}.card-actions{display:flex;gap:8px;margin-top:14px}.card-actions button{flex:1;padding:9px 8px;border-radius:7px;border:1px solid var(--line);background:transparent;color:#ddd;font-size:11px}.card-actions .read-btn{background:var(--gold);border-color:var(--gold);color:#17140e;font-weight:700}.card-actions button:hover{border-color:var(--gold)}.trending{background:#151616}.category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.category-group-title{grid-column:1/-1;padding:18px 2px 3px;margin-top:10px;border-bottom:1px solid var(--line);color:var(--gold);font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase}.category-group-title:first-child{margin-top:0}.category-tile{padding:23px 17px;background:var(--panel);border:1px solid var(--line);border-radius:12px;text-align:left;color:var(--text)}.category-tile span{display:block;font-size:23px;color:var(--gold);margin-bottom:15px}.category-tile strong{display:block;font-size:13px}.category-tile small{color:var(--muted);font-size:10px}.category-tile:hover{border-color:var(--gold)}.how{border-bottom:1px solid var(--line)}.how>h2{margin-bottom:34px}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.how-grid article{border-top:1px solid #5d4c2d;padding-top:20px}.how-grid article>b{color:var(--gold);font:24px Georgia}.how-grid h3{font:600 21px Georgia;margin:18px 0 8px}.how-grid p{color:var(--muted);font-size:13px}.goal-panel{margin:50px clamp(20px,8vw,120px);padding:35px;background:linear-gradient(120deg,#27231b,#191a19);border:1px solid #66532e;border-radius:18px;display:grid;grid-template-columns:1fr 1fr;gap:40px}.goal-panel h2{font-size:30px}.goal-panel p{color:var(--muted);max-width:430px}.goal-control{align-self:center}.goal-control label{display:block;color:#d4c7aa;font-size:12px;margin-bottom:8px}.goal-input-row{display:flex;gap:10px}.goal-input-row input{width:85px;background:#111;border:1px solid var(--line);border-radius:7px;color:white;padding:10px}.goal-track{height:7px;background:#3c392f;border-radius:9px;margin:20px 0 8px;overflow:hidden}.goal-track span{display:block;width:0;height:100%;background:var(--gold);transition:.3s}.goal-control small{color:var(--muted)}footer{border-top:1px solid var(--line);padding:35px clamp(20px,8vw,120px);display:flex;align-items:center;gap:25px;flex-wrap:wrap}footer>p{color:var(--muted);font-size:12px;margin-right:auto}.footer-links{display:flex;gap:17px;font-size:11px;color:#aaa}footer>small{width:100%;color:#777;font-size:10px}.empty-state{text-align:center;padding:45px;color:var(--muted)}.continue-section{padding-bottom:0}.continue-card{display:flex;align-items:center;gap:20px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.continue-cover{width:80px;height:100px;display:grid;place-items:center;background:var(--cover);font:20px Georgia;color:white;border-radius:5px}.continue-card p{color:var(--muted);font-size:12px}.progress-line{height:5px;background:#353535;border-radius:8px;overflow:hidden;max-width:360px}.progress-line span{display:block;height:100%;background:var(--gold)}#modalRoot:empty{display:none}.modal-overlay{position:fixed;inset:0;z-index:50;background:#000b;display:flex;justify-content:center;align-items:center;padding:20px}.modal{background:#171919;border:1px solid #474237;border-radius:18px;width:min(820px,100%);max-height:92vh;overflow:auto;box-shadow:0 25px 100px #0009}.modal-head{position:sticky;top:0;background:#171919ee;backdrop-filter:blur(10px);padding:18px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;z-index:2}.modal-head button{border:1px solid var(--line);background:none;color:#ddd;border-radius:50%;width:36px;height:36px;font-size:20px}.modal-content{padding:25px clamp(20px,5vw,45px) 35px}.modal-content h1{font:600 34px/1.2 "Playfair Display",Georgia;margin:8px 0}.modal-content h2{font:600 23px Georgia;margin:28px 0 12px}.modal-content p{color:#c6c4bc}.summary-text{font-size:16px;line-height:1.9}.detail-list{padding-left:22px;color:#d0cec6}.detail-list li{margin:9px 0}.concept{padding:13px 15px;background:#202222;border-radius:9px;margin:10px 0}.concept strong{color:var(--gold);display:block}.reader-tools{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}.reader-tools button,.quiz-option{background:#222525;border:1px solid var(--line);color:#ddd;border-radius:8px;padding:10px 13px;font-size:12px}.reader-tools button:hover,.quiz-option:hover{border-color:var(--gold)}.notes-area{width:100%;min-height:110px;background:#101212;border:1px solid var(--line);border-radius:9px;padding:13px;color:#eee;resize:vertical}.note-status{font-size:11px;color:var(--gold)}.quiz-option{display:block;width:100%;text-align:left;margin:8px 0}.quiz-option.correct{border-color:#78aa7d;background:#203126}.quiz-option.wrong{border-color:#b36b60;background:#34211f}.quiz-feedback{color:var(--gold);font-size:13px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#e7cf9e;color:#19150d;padding:11px 20px;border-radius:9px;z-index:80;font-size:13px;box-shadow:0 8px 30px #0008}.page-wrap{max-width:850px;margin:65px auto;padding:0 22px;min-height:55vh}.page-wrap h1{font:600 45px Georgia}.page-wrap h2{font:25px Georgia;margin-top:30px}.page-wrap p,.page-wrap li{color:#c5c3bc}.page-wrap a{color:var(--gold)}@media(max-width:1200px){.book-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.category-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:1000px){.book-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.category-grid{grid-template-columns:repeat(3,1fr)}.hero{padding-inline:6vw}.section,.continue-section{padding-inline:6vw}}@media(max-width:700px){.topbar{height:68px;padding:0 17px}.topbar nav{gap:12px}.topbar nav>a:not(:last-of-type){display:none}.brand{font-size:17px}.brand-mark{width:36px;height:36px}.hero{grid-template-columns:1fr;padding-top:55px;gap:10px}.hero h1{font-size:58px}.hero-art{height:330px}.book{transform:scale(.86)}.book-front{transform:translate(-25px,8px) rotate(-8deg) scale(.86)}.book-back{transform:translate(52px,0) rotate(9deg) scale(.86)}.hero-stats{gap:25px;margin-top:35px}.section,.continue-section{padding:55px 18px}.toolbar{flex-wrap:wrap}.searchbox{flex-basis:100%}.toolbar select{flex:1;max-width:none;padding:12px}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cover{height:155px}.cover-title{font-size:19px}.card-body{padding:12px}.card-body h3{font-size:17px}.category-grid{grid-template-columns:repeat(2,1fr)}.how-grid{grid-template-columns:1fr;gap:20px}.goal-panel{margin:25px 18px;padding:24px;grid-template-columns:1fr;gap:10px}.footer-links{flex-wrap:wrap}.footer-links{order:3}.modal-content{padding:22px 18px}.modal-content h1{font-size:28px}}@media(max-width:390px){.book-grid{grid-template-columns:1fr}.cover{height:190px}.hero h1{font-size:50px}}/* Version 0.2 polish */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.featured-section{background:#111313;border-top:1px solid #ffffff06;border-bottom:1px solid #ffffff06}.hero{position:relative;overflow:hidden}.hero-glow{position:absolute;width:620px;height:620px;border-radius:50%;right:-170px;top:-130px;background:radial-gradient(circle,#d5ad6216,transparent 68%);pointer-events:none}.hero-copy,.hero-art{position:relative;z-index:1}.cover-button{display:block;width:100%;padding:0;border:0;background:none;text-align:left}.cover-button .cover{cursor:pointer}.cover-mini{position:absolute;top:15px;left:16px;border:1px solid #ffffff55;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 11px Georgia;color:#fff}.cover.compact{height:250px;width:170px;flex:0 0 170px;border-radius:8px}.cover.compact .cover-title{font-size:19px}.reader-hero{display:flex;gap:30px;align-items:center;padding:4px 0 10px}.reader-hero>div:last-child{flex:1}.reader-hero h1{margin:8px 0 10px}.reader-hero p{margin:7px 0}.reader-progress{height:4px;background:#34332e;border-radius:8px;overflow:hidden;margin-top:9px;width:min(380px,70vw)}.reader-progress span{display:block;height:100%;background:var(--gold);transition:width .3s}.reader-section{border-top:1px solid var(--line);padding-top:26px;margin-top:30px}.section-kicker{font-size:9px;letter-spacing:2px;color:var(--gold);font-weight:700}.muted{color:var(--muted)!important}.reader-footer{border-top:1px solid var(--line);margin-top:34px;padding-top:24px;display:flex;align-items:center;gap:20px}.reader-footer p{margin-left:auto;max-width:520px;font-size:11px;color:#85847e}.nav-btn.active{border-color:#876d3e;background:#d5ad6212;color:var(--gold)}.save-icon.saved{color:var(--gold);border-color:#8f733f}.toast{opacity:0;pointer-events:none;transition:opacity .2s}.toast.show{opacity:1}.modal-open{overflow:hidden}@media(max-width:700px){.reader-hero{align-items:flex-start;gap:18px}.cover.compact{width:115px;flex-basis:115px;height:175px}.cover.compact .cover-title{font-size:15px}.reader-footer{display:block}.reader-footer p{margin-top:18px}.topbar nav{overflow:hidden}.topbar nav a:nth-child(2){display:none}.topbar nav a:nth-child(3){display:none}.topbar nav a:nth-child(4){display:none}.topbar nav{gap:7px}.nav-btn{padding:8px 10px}.nav-btn span{display:none}}

/* Version 0.5 content UX */
.qc-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}.qc-column{background:#101212;border:1px solid #ffffff0d;border-radius:16px;padding:20px}.qc-column-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}.qc-column-head>span{color:var(--gold);font:600 20px Georgia}.qc-column-head h3{margin:0;font:600 21px Georgia}.qc-column-head p{margin:4px 0 0;color:var(--muted);font-size:11px}.qc-column .book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.summary-highlight{background:linear-gradient(135deg,#262218,#1b1d1c);border:1px solid #705a30;border-radius:14px;padding:18px;margin:16px 0 22px}.summary-highlight-head{display:flex;justify-content:space-between;gap:15px;align-items:center;border-bottom:1px solid #ffffff12;padding-bottom:12px;margin-bottom:10px}.summary-highlight-head span{font-size:9px;letter-spacing:2px;color:var(--gold);font-weight:700}.summary-highlight-head strong{font:600 16px Georgia}.summary-points{display:grid;grid-template-columns:1fr 1fr;gap:10px}.summary-points>div{display:flex;gap:10px;align-items:flex-start;padding:9px 0}.summary-points b{color:var(--gold);font:600 13px Georgia}.summary-points span{font-size:12px;color:#ddd}.summary-paragraphs p{margin:0 0 16px}.section-intro{color:var(--muted)!important;font-size:13px}.takeaway-grid{display:grid;gap:10px}.takeaway-card{display:grid;grid-template-columns:42px 1fr;gap:12px;background:#202222;border:1px solid #ffffff0a;border-radius:11px;padding:14px}.takeaway-no{color:var(--gold);font:600 18px Georgia}.takeaway-card strong{display:block;color:#eee;line-height:1.55}.takeaway-card p{margin:7px 0 0!important;font-size:12px;color:#aaa!important}.takeaway-card p span{color:var(--gold)}.rating-panel{display:flex;align-items:center;justify-content:space-between;gap:25px;background:#1d1f1f;border:1px solid var(--line);border-radius:14px;padding:18px}.rating-panel h3{margin:6px 0 3px;font:600 20px Georgia}.rating-panel p{font-size:12px;margin:0;max-width:520px}.stars{display:flex;gap:2px;white-space:nowrap}.star-btn{border:0;background:transparent;color:#5b5a55;font-size:28px;padding:3px}.star-btn.active,.star-btn:hover{color:var(--gold)}.rating-panel small{color:var(--muted);min-width:82px;text-align:right}.quick-commerce-section{background:#151616}
@media(max-width:900px){.qc-columns{grid-template-columns:1fr}.summary-points{grid-template-columns:1fr}.rating-panel{align-items:flex-start;flex-direction:column}.rating-panel small{text-align:left}.qc-column .book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.qc-column .book-grid{grid-template-columns:1fr}.summary-highlight-head{display:block}.summary-highlight-head strong{display:block;margin-top:5px}}

/* ThreeUI-inspired lightweight motion: only the two primary CTAs use it. */
.threeui-cta{position:relative;overflow:hidden;isolation:isolate;min-width:190px;border-radius:9px;box-shadow:0 8px 24px #0004;transform:translateZ(0);transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.threeui-cta .cta-label,.threeui-cta .cta-arrow{position:relative;z-index:2;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s ease}
.threeui-cta .cta-label{display:inline-block}
.threeui-cta .cta-arrow{display:inline-grid;place-items:center;width:22px;height:22px;font-size:15px}
.threeui-cta .cta-shine{position:absolute;z-index:1;inset:-80% auto -80% -35%;width:28%;background:linear-gradient(90deg,transparent,#fff9,transparent);transform:skewX(-18deg) translateX(-220%);transition:transform .55s ease;pointer-events:none}
.threeui-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px #0007;background:var(--gold2)}
.threeui-cta:hover .cta-label{transform:translateX(4px)}
.threeui-cta:hover .cta-arrow{transform:translateX(5px) rotate(-8deg)}
.threeui-cta:hover .cta-shine{transform:skewX(-18deg) translateX(600%)}
.threeui-cta:active{transform:translateY(0) scale(.985);box-shadow:0 6px 18px #0005}
.hero-copy>*{animation:ybHeroIn .7s both cubic-bezier(.2,.75,.2,1)}
.hero-copy .eyebrow{animation-delay:.05s}.hero-copy h1{animation-delay:.12s}.hero-copy>p{animation-delay:.19s}.hero-copy .hero-actions{animation-delay:.26s}.hero-copy .hero-stats{animation-delay:.33s}
.hero-art{animation:ybHeroArtFade .9s both cubic-bezier(.2,.75,.2,1);animation-delay:.12s}
.book-front{animation:ybBookFloat 5.5s ease-in-out infinite}
.book-back{animation:ybBookBack 6.5s ease-in-out infinite}
.floating-note{animation:ybNoteFloat 4.8s ease-in-out infinite}
@keyframes ybHeroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ybHeroArt{from{opacity:0;transform:translateX(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ybHeroArtFade{from{opacity:0}to{opacity:1}}
@keyframes ybBookFloat{0%,100%{margin-top:0}50%{margin-top:-8px}}
@keyframes ybBookBack{0%,100%{margin-top:0}50%{margin-top:7px}}
@keyframes ybNoteFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.hero-copy>*,.hero-art,.book-front,.book-back,.floating-note{animation:none!important}.threeui-cta,.threeui-cta .cta-label,.threeui-cta .cta-arrow,.threeui-cta .cta-shine{transition:none!important}.threeui-cta:hover{transform:none!important}}
@media(max-width:700px){.threeui-cta{min-width:175px}.hero-art{animation-delay:0s}.book-front,.book-back,.floating-note{animation-duration:8s}}

/* v0.7 creative motion polish — intentionally limited to hero + reading completion CTA */
.hero{isolation:isolate;cursor:default}
.hero-grid{position:absolute;inset:0;opacity:.22;pointer-events:none;background-image:radial-gradient(#d5ad6230 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle at 76% 50%,#000 0%,transparent 62%);-webkit-mask-image:radial-gradient(circle at 76% 50%,#000 0%,transparent 62%);transform:translate3d(calc(var(--pointer-x,0px)*.025),calc(var(--pointer-y,0px)*.025),0);transition:transform .35s ease-out}
.hero-cursor-orb{position:absolute;width:260px;height:260px;border-radius:50%;left:var(--pointer-x,50%);top:var(--pointer-y,50%);transform:translate(-50%,-50%);background:radial-gradient(circle,#d5ad6218 0%,#d5ad6208 34%,transparent 70%);filter:blur(2px);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:0}
.hero:hover .hero-cursor-orb{opacity:1}
.hero-copy,.hero-art{z-index:2}
.hero-art{transform:translate3d(calc(var(--art-x,0px)*.18),calc(var(--art-y,0px)*.18),0);transition:transform .18s ease-out}
.hero-art .orb{transform:translate3d(calc(var(--art-x,0px)*.25),calc(var(--art-y,0px)*.25),0);transition:transform .18s ease-out}
.art-ring{position:absolute;border:1px solid #d5ad6230;border-radius:50%;pointer-events:none;z-index:0}
.ring-one{width:360px;height:360px;transform:rotate(18deg) scaleX(.74);border-style:dashed;animation:ybRingSpin 24s linear infinite}
.ring-two{width:285px;height:285px;transform:rotate(-20deg) scaleX(.8);border-color:#ffffff13;animation:ybRingSpinReverse 19s linear infinite}
.hero-art .book{z-index:2;will-change:transform}
.hero-art .book-front{transform:translate(calc(-25px + var(--book-x,0px)),calc(8px + var(--book-y,0px))) rotate(calc(-8deg + var(--book-rotate,0deg)));}
.hero-art .book-back{transform:translate(calc(52px + var(--back-x,0px)),calc(0px + var(--back-y,0px))) rotate(calc(9deg + var(--back-rotate,0deg)));}
.floating-note{z-index:4;transition:transform .25s ease-out}
.hero-art .book-front:hover,.hero-art .book-back:hover{filter:brightness(1.04)}
.threeui-cta{--cta-x:0px;--cta-y:0px;will-change:transform}
.threeui-cta:hover{transform:translate3d(var(--cta-x),calc(-3px + var(--cta-y)),0)}
.threeui-cta:active{transform:translate3d(0,0,0) scale(.985)}

/* Reading guide: a more tactile, cinematic header + finish action */
.reader-hero{position:relative;overflow:hidden;border-radius:18px;padding:22px 20px;background:radial-gradient(circle at 8% 20%,#d5ad6218,transparent 32%),linear-gradient(135deg,#1b1d1d,#111313);border:1px solid #ffffff0c;box-shadow:inset 0 1px #ffffff08,0 18px 45px #0003}
.reader-hero:before{content:"";position:absolute;width:280px;height:280px;right:-110px;top:-120px;border:1px solid #d5ad6218;border-radius:50%;animation:ybReaderOrbit 18s linear infinite}
.reader-hero:after{content:"";position:absolute;inset:auto 15% -80px auto;width:240px;height:120px;background:#d5ad620d;filter:blur(35px);pointer-events:none}
.reader-hero>div{position:relative;z-index:1}
.reader-hero .cover.compact{transition:transform .18s ease-out,box-shadow .18s ease-out;box-shadow:18px 24px 50px #0009}
.reader-hero .cover.compact:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#fff5 48%,transparent 64%);transform:translateX(-130%);transition:transform .7s ease;pointer-events:none}
.reader-hero:hover .cover.compact:after{transform:translateX(130%)}
.reader-tools{position:relative;z-index:2}
.reader-progress{height:5px;background:#34332e;box-shadow:0 0 0 1px #ffffff06;overflow:visible}
.reader-progress span{position:relative;box-shadow:0 0 13px #d5ad6266}
.reader-progress span:after{content:"";position:absolute;right:-2px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px #d5ad62aa;transform:translateY(-50%)}
.reader-footer .threeui-cta{min-width:205px}
.reader-footer .threeui-cta .cta-arrow{border-radius:50%;border:1px solid #17140e55}

@keyframes ybRingSpin{to{rotate:360deg}}
@keyframes ybRingSpinReverse{to{rotate:-360deg}}
@keyframes ybReaderOrbit{to{rotate:360deg}}
@media(max-width:700px){
  .hero-cursor-orb,.hero-grid{display:none}
  .hero-art{transform:none!important}
  .ring-one{width:300px;height:300px}.ring-two{width:245px;height:245px}
  .reader-hero{padding:17px 14px}
  .reader-hero .cover.compact{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-grid,.hero-cursor-orb,.hero-art .orb,.art-ring,.reader-hero:before{transition:none!important;animation:none!important}
  .hero-art .book-front,.hero-art .book-back{transform:translate(-25px,8px) rotate(-8deg)!important}
  .hero-art .book-back{transform:translate(52px,0) rotate(9deg)!important}
}

/* v0.8 — sketchbook-inspired hero: a lightweight CSS scene, no external assets. */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(circle at 78% 45%,#d5ad6218 0,transparent 34%),
  radial-gradient(circle at 88% 80%,#d5ad620b 0,transparent 28%),
  linear-gradient(120deg,#101112 0%,#141514 56%,#171613 100%)}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;background:linear-gradient(115deg,transparent 0 62%,#d5ad6207 62.1% 62.3%,transparent 62.4% 100%);mix-blend-mode:screen}
.hero-art{height:430px;perspective:1300px;transform-style:preserve-3d;isolation:isolate}
.hero-art .orb{width:360px;height:360px;background:radial-gradient(circle,#d5ad6230 0,#8b682e12 45%,transparent 70%);border:1px solid #d5ad6228;filter:blur(.2px)}
.art-ring{opacity:.8}.ring-one{width:410px;height:410px;transform:rotate(16deg) scaleX(.70);border-color:#d5ad6240}.ring-two{width:320px;height:320px;transform:rotate(-25deg) scaleX(.78);border-color:#ffffff18}
.book-shadow{position:absolute;width:330px;height:92px;left:50%;top:67%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#0009 0, #0005 35%,transparent 72%);filter:blur(13px);z-index:1;pointer-events:none}
.yb-open-book{position:absolute;left:50%;top:50%;width:min(520px,82%);aspect-ratio:1.58/1;transform:translate(calc(-50% + var(--book-scene-x,0px)),calc(-48% + var(--book-scene-y,0px))) rotateX(var(--book-rx,0deg)) rotateY(var(--book-ry,0deg)) rotateZ(-2deg);transform-style:preserve-3d;will-change:transform;z-index:3;transition:transform .22s cubic-bezier(.2,.75,.2,1)}
.book-cover{position:absolute;inset:-10px -7px -9px;background:linear-gradient(135deg,#5b431e,#8b6b35 48%,#4d381d);border-radius:12px 17px 15px 10px;box-shadow:24px 30px 45px #0009;transform:translateZ(-16px) rotateZ(-1deg)}
.book-cover:before{content:"";position:absolute;inset:8px;border:1px solid #d5ad6240;border-radius:9px 14px 12px 7px}
.book-pages{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(160deg,#f5ead0,#dfcba5);box-shadow:inset 0 0 0 1px #9a7d4d33;overflow:hidden;color:#2b2418}
.book-page-left{left:0;border-radius:7px 2px 2px 9px;transform:rotateY(2deg);transform-origin:100% 50%;padding:30px 27px 25px 34px;box-shadow:-7px 0 16px #0001,inset -12px 0 18px #8a6d3b13}
.book-page-right{right:0;border-radius:2px 8px 9px 2px;transform:rotateY(-2deg);transform-origin:0 50%;padding:30px 31px 25px 27px;box-shadow:7px 0 16px #0001,inset 12px 0 18px #8a6d3b13}
.book-pages:after{content:"";position:absolute;inset:0;opacity:.22;background:repeating-linear-gradient(0deg,transparent 0 7px,#7e633a0a 8px,#7e633a0a 9px)}
.page-kicker{position:relative;z-index:1;display:block;font:700 8px/1 Arial,sans-serif;letter-spacing:2px;color:#896b36;margin-bottom:22px}.book-page-left strong{position:relative;z-index:1;display:block;font:600 clamp(22px,3vw,33px)/.95 Georgia,serif;letter-spacing:-1px}.book-page-left small{position:relative;z-index:1;display:block;margin-top:10px;font:400 9px/1.4 Arial,sans-serif;color:#7c6949;max-width:120px}
.page-number{position:absolute;right:22px;top:18px;z-index:1;font:700 8px Arial;color:#987b4a}.book-page-right strong{position:relative;z-index:1;display:block;margin-top:18px;font:700 clamp(26px,3.4vw,38px)/.82 Georgia,serif;letter-spacing:-2px}.book-page-right strong em{font-style:italic;color:#98703a;font-weight:500}.book-page-right small{position:relative;z-index:1;display:block;margin-top:14px;font:400 9px/1.55 Arial,sans-serif;color:#6f6049}
.book-spine{position:absolute;z-index:5;left:50%;top:-2%;bottom:-2%;width:9px;transform:translateX(-50%);background:linear-gradient(90deg,#795c2e,#d1af70 48%,#74572b);box-shadow:0 0 9px #0005;border-radius:5px}.book-bookmark{position:absolute;z-index:6;right:17%;top:6%;width:22px;height:125px;background:linear-gradient(180deg,#b58b43,#7d5524);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);filter:drop-shadow(4px 7px 5px #0005);transform:rotate(2deg) translateZ(9px)}
.page-curl{position:absolute;z-index:7;right:-1px;bottom:-1px;width:82px;height:72px;background:linear-gradient(135deg,transparent 47%,#cdb789 48% 55%,#f7eacf 56% 76%,#b99a62 77%);clip-path:polygon(100% 0,100% 100%,0 100%);opacity:.82;filter:drop-shadow(-3px -2px 3px #6f563022);transform-origin:100% 100%;animation:page-curl-float 4.8s ease-in-out infinite}
.page-line{position:absolute;z-index:1;height:1px;background:#846b4635;left:28px;right:26px;transform-origin:left}.line-1{bottom:58px;transform:scaleX(.8)}.line-2{bottom:47px;transform:scaleX(.65)}.line-3{bottom:36px;transform:scaleX(.72)}.line-4{bottom:51px;transform:scaleX(.75)}.line-5{bottom:40px;transform:scaleX(.56)}.line-6{bottom:29px;transform:scaleX(.68)}
.floating-note{z-index:8;right:0;bottom:26px;display:flex;flex-direction:column;gap:3px;min-width:148px;background:#1d1d1bde;border:1px solid #d5ad6230;border-radius:14px;padding:12px 16px;box-shadow:0 14px 35px #0007;backdrop-filter:blur(8px);transform:translate3d(var(--note-x,0px),var(--note-y,0px),0)}.floating-note b{font-size:10px;letter-spacing:1.5px;color:var(--gold)}.floating-note span{font-size:9px;color:#a9a59a}.floating-tag{position:absolute;z-index:8;padding:7px 10px;border:1px solid #d5ad6233;border-radius:999px;background:#171715cc;color:#cdb27d;font:700 8px Arial;letter-spacing:1.5px;box-shadow:0 8px 24px #0005;backdrop-filter:blur(7px);transition:transform .2s ease}.tag-one{left:6%;top:24%;transform:translate3d(var(--tag1-x,0px),var(--tag1-y,0px),0) rotate(-6deg)}.tag-two{right:4%;top:19%;transform:translate3d(var(--tag2-x,0px),var(--tag2-y,0px),0) rotate(5deg)}
.hero-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#f0d69b;box-shadow:0 0 14px #d5ad62aa;z-index:4;animation:spark-drift 3.8s ease-in-out infinite}.spark-a{left:14%;top:29%;animation-delay:-1s}.spark-b{right:14%;top:61%;width:3px;height:3px;animation-delay:-2.2s}.spark-c{left:23%;bottom:19%;width:4px;height:4px;animation-delay:-3s}
@keyframes page-curl-float{0%,100%{transform:rotate(0deg) translateZ(4px)}50%{transform:rotate(-3deg) translate(-2px,1px) translateZ(7px)}}
@keyframes spark-drift{0%,100%{opacity:.25;translate:0 0}50%{opacity:1;translate:7px -12px}}
.hero:hover .floating-tag{border-color:#d5ad6250}.hero:hover .book-cover{box-shadow:28px 34px 55px #000a}

/* Reading guide: carry the paper/sketchbook language into the second interaction point. */
.reader-hero{background:radial-gradient(circle at 15% 20%,#d5ad621c,transparent 34%),linear-gradient(135deg,#24221d,#141515 62%,#1c1915);border-color:#d5ad6225}
.reader-hero:before{width:340px;height:340px;right:-135px;top:-145px;border-color:#d5ad6220;box-shadow:0 0 70px #d5ad6208}
.reader-hero .cover.compact{position:relative;border:1px solid #d5ad6240;box-shadow:18px 26px 55px #000a;transform-style:preserve-3d}
.reader-hero .cover.compact:before{content:"";position:absolute;inset:7px;border:1px solid #ffffff24;border-radius:6px;pointer-events:none;z-index:3}
.reader-hero .cover.compact:after{background:linear-gradient(110deg,transparent 20%,#fff8 46%,transparent 64%);mix-blend-mode:screen}
.reader-hero:has(.cover.compact:hover){border-color:#d5ad6238}

@media(max-width:900px){.yb-open-book{width:min(500px,90%)}.floating-tag{display:none}.hero-art{height:390px}}
@media(max-width:700px){.hero-art{height:335px}.yb-open-book{width:82%;top:47%}.book-page-left{padding:22px 18px 18px 22px}.book-page-right{padding:22px 20px 18px 18px}.book-page-left strong{font-size:22px}.book-page-right strong{font-size:25px}.book-bookmark{height:92px;width:17px}.page-curl{width:55px;height:48px}.book-shadow{width:250px;height:70px;top:70%}.floating-note{right:1%;bottom:3px;min-width:130px;padding:9px 12px}.hero-spark{display:none}}
@media(prefers-reduced-motion:reduce){.page-curl,.hero-spark{animation:none!important}.yb-open-book{transition:none!important;transform:translate(-50%,-48%) rotateZ(-2deg)!important}.floating-tag,.floating-note{transition:none!important}}


/* v0.8 — simple recommended bookshelf + lightweight movable guide preview */
.recommended-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#171512 0%,#211b15 100%);border-top:1px solid rgba(216,171,93,.14);border-bottom:1px solid rgba(216,171,93,.12)}
.recommended-section:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(201,154,78,.12),transparent 45%);pointer-events:none}
.recommended-heading{position:relative;z-index:1}
.recommended-heading h2{color:#f3e4c5}
.recommended-heading p{max-width:680px}
.recommended-shelf-wrap{position:relative;margin-top:28px;padding:28px 20px 24px;border-radius:24px;background:linear-gradient(180deg,#6c4725 0 8px,#b1783d 8px 13px,#e2bd83 13px 17px,#7a4e2a 17px 21px,#4d301d 21px 100%);box-shadow:inset 0 1px 0 rgba(255,245,218,.24),0 22px 60px rgba(0,0,0,.25);overflow:hidden}
.recommended-shelf-wrap:before{content:"";position:absolute;left:0;right:0;bottom:20px;height:10px;background:#b57c40;box-shadow:0 5px 0 #4b2f1d,0 -2px 0 rgba(255,225,169,.22)}
.recommended-shelf{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:20px;align-items:end;padding:12px 8px 38px}
.recommended-book{min-width:0;transform:rotate(var(--book-angle));transition:transform .18s ease,filter .18s ease;position:relative}
.recommended-book:hover{transform:translateY(-7px) rotate(0deg);filter:brightness(1.05)}
.recommended-cover{display:flex;width:100%;height:235px;padding:20px 14px;border:0;border-radius:5px;background:linear-gradient(145deg,#4f463a,#1c1814);box-shadow:8px 10px 14px rgba(0,0,0,.42),inset 1px 0 rgba(255,255,255,.16);overflow:hidden;cursor:pointer;position:relative;flex-direction:column;align-items:center;justify-content:flex-end;color:#f5e7cc;text-align:center;transform-style:preserve-3d}
.normal-book-scene .cover-mini{position:absolute;top:14px;left:14px;font:700 11px system-ui;letter-spacing:.18em;color:#d5ad62}.normal-book-scene .cover-title{font:700 20px/1.08 Georgia,serif;max-width:95%;text-shadow:0 2px 8px #000}.normal-book-scene .cover-author{font:11px system-ui;color:#d7c9b3;margin-top:8px}.normal-book-scene:after{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.12);border-radius:4px;pointer-events:none}.normal-preview-book{background:linear-gradient(145deg,#514536,#17130f)!important}.normal-preview-book:before{content:"YB";position:absolute;top:20px;left:20px;font:700 12px system-ui;letter-spacing:.18em;color:#d5ad62}.normal-preview-book:after{background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 35%,rgba(0,0,0,.35))}.moveable-book-front span,.moveable-book-front small{pointer-events:none}.recommended-cover .cover-mini,.recommended-cover .cover-title,.recommended-cover .cover-author{position:relative;z-index:2}.recommended-cover:hover{filter:brightness(1.06)}
.recommended-book-info{padding:12px 4px 0;color:#f4e7d1;text-align:center}
.recommended-book-info strong{display:block;font:700 14px Georgia,serif;line-height:1.25;min-height:36px}
.recommended-book-info>span{display:block;color:#c9b89e;font-size:11px;margin:4px 0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recommended-book-info>div{display:flex;justify-content:center;gap:7px}
.mini-open,.mini-save{border:1px solid rgba(228,191,132,.38);background:rgba(22,18,14,.78);color:#f2dfbe;border-radius:999px;padding:7px 10px;font:600 11px system-ui;cursor:pointer}
.mini-open:hover,.mini-save:hover,.mini-save.saved{background:#c28b42;color:#18120c;border-color:#c28b42}
.mini-save{width:32px;padding:7px 0}
.book-preview-overlay{position:fixed;inset:0;z-index:1200;background:rgba(8,7,6,.78);backdrop-filter:blur(7px);display:grid;place-items:center;padding:24px}
.book-preview{width:min(980px,96vw);min-height:520px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:46px;border:1px solid rgba(223,184,121,.24);border-radius:28px;background:radial-gradient(circle at 75% 30%,rgba(193,145,72,.16),transparent 35%),linear-gradient(135deg,#211b15,#0f0e0d);box-shadow:0 35px 100px rgba(0,0,0,.55)}
.preview-copy h2{font:700 clamp(36px,5vw,64px)/.98 Georgia,serif;color:#f5e7cc;margin:10px 0}
.preview-copy p{color:#c9bdab;max-width:470px;font-size:17px;line-height:1.65}
.preview-author{color:#d2a35e!important;margin-top:0!important}
.preview-actions{display:flex;gap:12px;margin-top:24px}
.preview-close{border:1px solid rgba(255,255,255,.18);background:transparent;color:#eee;border-radius:999px;padding:12px 18px;cursor:pointer}
.moveable-book-stage{min-height:410px;display:grid;place-items:center;position:relative;perspective:1100px}
.moveable-book{width:235px;height:340px;position:relative;transform-style:preserve-3d;transform:rotateY(-7deg) rotateX(1deg);cursor:default;touch-action:none;transition:transform .18s ease-out,box-shadow .15s ease}
.moveable-book-front{position:absolute;inset:0 0 0 18px;border-radius:3px 10px 10px 3px;background-image:var(--book-cover-image),linear-gradient(145deg,#7b613b,#201b16);background-size:cover;background-position:center;box-shadow:12px 18px 28px rgba(0,0,0,.45);transform:translateZ(14px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:24px 14px;color:#fff;text-align:center;overflow:hidden}
.moveable-book-front:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 35%,rgba(0,0,0,.35));pointer-events:none}
.moveable-book-front span,.moveable-book-front small{position:relative;z-index:1;text-shadow:0 2px 8px #000}
.moveable-book-front span{font:700 21px Georgia,serif}.moveable-book-front small{font-size:11px;margin-top:7px}
.moveable-book-spine{position:absolute;left:0;top:0;width:20px;height:100%;background:linear-gradient(90deg,#2d2117,#b18a52,#3a2818);transform-origin:right center;transform:rotateY(90deg) translateZ(0);border-radius:3px 0 0 3px;color:#ead8b5;font-size:9px;writing-mode:vertical-rl;padding:12px 4px;box-sizing:border-box}
.moveable-book-pages{position:absolute;right:-9px;top:7px;width:14px;height:326px;background:repeating-linear-gradient(180deg,#eee1c8 0 2px,#c9b996 2px 3px);transform:rotateY(90deg) translateZ(0);transform-origin:left center;border-radius:0 4px 4px 0}
.preview-open{overflow:hidden}
@media(max-width:900px){.recommended-shelf{grid-template-columns:repeat(5,160px);overflow-x:auto;justify-content:start}.recommended-cover{height:225px}.recommended-book-info{padding-bottom:4px}.book-preview{grid-template-columns:1fr;padding:30px;max-height:90vh;overflow:auto}.moveable-book-stage{min-height:350px}.preview-copy{order:2}.moveable-book-stage{order:1}}
@media(max-width:560px){.recommended-shelf-wrap{padding:20px 12px}.recommended-shelf{gap:14px;padding-left:4px}.recommended-cover{height:205px}.recommended-book{width:145px}.recommended-book-info strong{font-size:13px}.book-preview-overlay{padding:12px}.book-preview{padding:24px;border-radius:20px}.moveable-book{width:190px;height:280px}.moveable-book-pages{height:266px}.preview-copy h2{font-size:36px}.preview-copy p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.recommended-book{transition:none}.book-preview{scroll-behavior:auto}}
.cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}

/* v0.9 — recommended list: no cover art, compact and readable */
.recommended-section{background:linear-gradient(180deg,#171512 0%,#1e1812 100%)}
.recommended-shelf-wrap{padding:18px 16px 20px;margin-top:22px}
.recommended-shelf{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:6px 4px 18px;align-items:stretch}
.recommended-book{min-width:0;transform:rotate(var(--book-angle));background:rgba(20,18,15,.72);border:1px solid rgba(223,184,121,.18);border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.2);transition:transform .18s ease,background .18s ease,border-color .18s ease}
.recommended-book:hover{transform:translateY(-4px) rotate(0deg);background:rgba(31,26,20,.95);border-color:rgba(223,184,121,.38);filter:none}
.recommended-book-info{padding:15px 13px 14px;text-align:left;display:flex;flex-direction:column;height:100%}
.recommended-index{display:block;color:#b99350;font:700 10px/1 Georgia,serif;letter-spacing:1.5px;margin-bottom:9px}
.recommended-title{display:block;width:100%;padding:0;border:0;background:none;color:#f7ead0;text-align:left;font:700 20px/1.12 Georgia,serif;text-shadow:none;cursor:pointer}
.recommended-title:hover{color:#e2bb72}
.recommended-author{display:block;color:#cbbda7;font:500 11px/1.35 system-ui,sans-serif;margin-top:7px}
.recommended-tagline{color:#a9a39a;font-size:11px;line-height:1.5;margin:10px 0 13px;min-height:33px}
.recommended-actions{display:flex;align-items:center;gap:7px;margin-top:auto}
.recommended-actions .mini-open{flex:1;min-width:0}
.recommended-shelf-wrap:before{bottom:10px}
@media(max-width:1200px){.recommended-shelf{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.recommended-shelf{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.recommended-book{width:auto}.recommended-tagline{min-height:0}}
@media(max-width:560px){.recommended-shelf-wrap{padding:14px 10px 18px}.recommended-shelf{grid-template-columns:1fr;gap:10px}.recommended-book-info{padding:14px}.recommended-title{font-size:19px}}

/* SEO-friendly book links retain the existing visual language. */
.book-card h3 a{color:inherit;text-decoration:none}.book-card h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}.read-btn{text-decoration:none;display:inline-flex;align-items:center}