:root{--bg:#0c0d12;--surface:#15161d;--muted:#9a9aa9;--text:#f6f5fa;--accent:#d4a8ff;--line:#ffffff1a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}.ambient{position:absolute;top:-360px;left:25%;width:900px;height:800px;background:radial-gradient(ellipse,#6b39762c,transparent 65%);pointer-events:none}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;max-width:1380px;margin:auto;padding:0 42px;position:relative;z-index:4;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-family:Outfit;font-size:24px;font-weight:800;letter-spacing:-1.5px}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:12px;background:linear-gradient(145deg,#e3b5ff,#8465cf);color:#17101f;font-weight:800}.brand-dot{color:var(--accent)}.brand small{display:block;font-family:'DM Sans';font-size:8px;letter-spacing:2.3px;color:var(--muted);font-weight:600;margin-top:-3px}.topbar nav{display:flex;gap:35px}.topbar nav a{font-size:13px;font-weight:600;color:#b6b3c0;transition:.2s}.topbar nav a:hover,.topbar nav a.active{color:white}.top-actions{display:flex;gap:12px;align-items:center}.icon-btn,.ghost,.hamburger{border:1px solid var(--line);background:#ffffff09;color:white;border-radius:11px;padding:11px 18px}.icon-btn{font-size:25px;padding:4px 13px}.ghost{font-size:12px;font-weight:700}.hamburger{display:none}.hero{max-width:1380px;margin:auto;padding:96px 42px 104px;min-height:620px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:35px}.eyebrow,.kicker{font-size:10px;font-weight:800;letter-spacing:2.8px;color:var(--accent)}.eyebrow{display:flex;gap:11px;align-items:center}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Outfit;letter-spacing:-3px}h1{font-size:clamp(57px,6vw,96px);line-height:1.03;margin:27px 0 25px;font-weight:700}h1 em,h2 em{font-style:normal;color:var(--accent)}.hero-copy>p{color:#a6a4b4;font-size:15px;line-height:1.9;max-width:470px}.hero-actions{display:flex;gap:16px;margin:31px 0 55px}.primary,.secondary{padding:16px 23px;border-radius:12px;font-size:13px;font-weight:700}.primary{background:#d5acff;color:#1d1327}.primary span{margin-left:30px}.secondary{border:1px solid #ffffff2a}.secondary span{margin-left:18px}.hero-stats{display:flex;gap:43px}.hero-stats div{display:flex;flex-direction:column;gap:4px}.hero-stats b{font-family:Outfit;font-size:24px}.hero-stats small{font-size:11px;color:var(--muted)}.hero-art{position:relative;height:510px;perspective:1200px}.art-glow{position:absolute;width:450px;height:450px;border-radius:50%;background:#9d65d72d;filter:blur(75px);left:12%;top:6%}.art-card{position:absolute;border:1px solid #ffffff33;border-radius:22px;overflow:hidden;box-shadow:0 35px 90px #0009}.art-card.front{width:340px;height:460px;left:24%;top:8%;transform:rotate(7deg);background:radial-gradient(circle at 72% 38%,#f6a4b3 0%,#bd6b9a 18%,transparent 47%),linear-gradient(145deg,#332545,#121321 65%)}.art-card.back{width:290px;height:405px;left:3%;top:11%;transform:rotate(-13deg);background:radial-gradient(circle at 45% 35%,#9cb3c4,#385a70 28%,transparent 56%),linear-gradient(155deg,#1c4357,#101b30 75%)}.art-label{padding:27px;font-size:10px;letter-spacing:2px;font-weight:800}.art-label span{color:#c8d8e8}.art-title{position:absolute;bottom:58px;left:25px;font-family:Outfit;font-weight:800;font-size:38px;line-height:1;letter-spacing:-1.5px;text-shadow:0 3px 20px #0009}.art-card.front .art-title{font-size:42px;bottom:73px}.art-badge{margin:25px;display:inline-block;border:1px solid #ffffff70;padding:9px 11px;font-size:9px;letter-spacing:1.5px;font-weight:700;border-radius:30px}.art-symbol{position:absolute;right:20px;top:86px;font-size:175px;color:#f8c6dd88;font-weight:700;text-shadow:0 0 30px #ffe1ff77}.art-circle{width:220px;height:220px;border:25px solid #a4d8df55;border-radius:50%;position:absolute;top:80px;left:45px}.art-footer{position:absolute;bottom:25px;left:25px;right:25px;border-top:1px solid #ffffff66;padding-top:14px;font-size:9px;letter-spacing:1.5px}.art-footer span{float:right}.floating-tag{position:absolute;bottom:5px;right:15px;background:#f4edff;color:#31213d;border-radius:30px;padding:13px 21px;font-size:12px;font-weight:800;transform:rotate(-7deg)}.categories,.library,.how{max-width:1380px;margin:auto;padding:30px 42px 100px}.section-intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.section-intro h2,.how h2{font-size:clamp(36px,4vw,55px);margin:12px 0 0}.section-intro p{font-size:12px;color:var(--muted)}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.category{min-height:205px;position:relative;text-align:left;padding:22px;border-radius:17px;border:1px solid var(--line);color:white;background:linear-gradient(140deg,#24202f,#171821);transition:.2s;overflow:hidden}.category:hover{transform:translateY(-5px);border-color:#b998e280}.category:nth-child(2){background:linear-gradient(140deg,#242b37,#171821)}.category:nth-child(3){background:linear-gradient(140deg,#2a2236,#171821)}.category.adult{background:linear-gradient(140deg,#35212a,#171821)}.cat-num{font-size:9px;letter-spacing:2px;color:#c6b8d3}.cat-icon{position:absolute;font-size:95px;right:22px;top:33px;color:#ffffff12;font-family:Outfit;font-weight:800}.category strong{position:absolute;bottom:23px;left:22px;font-family:Outfit;font-size:24px}.cat-arrow{position:absolute;bottom:26px;right:22px}.age-chip{font:700 8px 'DM Sans';letter-spacing:.7px;color:#e6a1aa;vertical-align:middle}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.filters{display:flex;gap:8px;flex-wrap:wrap}.filter{background:#171820;border:1px solid var(--line);color:#b9b7c5;padding:10px 17px;border-radius:30px;font-size:12px}.filter.selected{background:#d4a8ff;color:#1e1729;border-color:transparent;font-weight:800}.searchbox{border:1px solid var(--line);border-radius:11px;background:#15161d;padding:10px 14px;display:flex;gap:10px;align-items:center}.searchbox span{font-size:23px;color:var(--muted)}.searchbox input{border:0;outline:0;background:transparent;color:white;width:185px;font-size:12px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{background:#14151c;border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:.2s}.card:hover{transform:translateY(-5px);border-color:#a77dd080}.cover{height:275px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--cover)}.cover:before{content:'';position:absolute;width:210px;height:210px;border:25px solid #ffffff13;border-radius:50%;transform:rotate(25deg);box-shadow:0 0 0 45px #ffffff08}.cover .glyph{font-family:Outfit;font-size:90px;color:#ffffff80;transform:rotate(-12deg);font-weight:800;text-shadow:0 20px 40px #0006}.cover .cover-title{position:absolute;bottom:20px;left:20px;right:20px;font-family:Outfit;font-size:26px;font-weight:800;line-height:1.1;text-shadow:0 3px 15px #000b}.cover .pill{position:absolute;top:15px;left:15px;background:#0c0d12b9;backdrop-filter:blur(6px);padding:7px 11px;border-radius:20px;font-size:10px;font-weight:800}.card-info{padding:19px}.card-info h3{font-family:Outfit;font-size:16px;margin:0 0 10px;line-height:1.35}.meta{font-size:11px;color:var(--muted);display:flex;justify-content:space-between}.meta .rating{color:#e9c8a5}.empty{padding:45px;text-align:center;color:var(--muted)}.how{margin-top:25px;padding-top:75px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:80px}.how>div>p{color:var(--muted);line-height:1.9;max-width:460px;font-size:14px;margin:25px 0}.text-link{color:var(--accent);font-weight:800;font-size:13px}.how-steps>div{display:flex;gap:22px;padding:22px 0;border-bottom:1px solid var(--line)}.how-steps span{color:var(--accent);font:700 16px Outfit}.how-steps b{font-family:Outfit}.how-steps p{color:var(--muted);font-size:12px;margin:8px 0 0}footer{max-width:1380px;margin:auto;padding:35px 42px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}.footer-brand{color:white}.overlay{position:fixed;inset:0;background:#030307cf;z-index:20;display:grid;place-items:center;padding:20px;backdrop-filter:blur(9px)}[hidden]{display:none!important}.modal{position:relative;background:#191a23;border:1px solid #ffffff30;border-radius:22px;width:min(640px,100%);max-height:90vh;overflow:auto;padding:35px;box-shadow:0 30px 100px #000}.modal-close{position:absolute;right:20px;top:18px;border:0;background:#ffffff13;color:white;border-radius:10px;padding:8px 12px}.modal h2{font:700 32px Outfit;letter-spacing:-1px;margin:15px 0}.modal p{color:var(--muted);line-height:1.7;font-size:13px}.modal .kicker{margin-right:40px}.chapters{display:grid;gap:9px;margin-top:22px}.chapter{background:#ffffff09;border:1px solid var(--line);color:white;border-radius:11px;padding:15px;display:flex;justify-content:space-between;text-align:left}.chapter:hover{border-color:var(--accent)}.modal-note{background:#d4a8ff13;border:1px solid #d4a8ff33;padding:16px;border-radius:12px;color:#d9c5e8;font-size:12px;line-height:1.7}.setting{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}.setting span{color:var(--muted);font-size:12px}.setting input{background:#101117;border:1px solid var(--line);color:white;border-radius:8px;padding:10px;max-width:210px}.setting button{border:0;background:var(--accent);padding:10px 14px;border-radius:8px;font-weight:700}.reader-page{background:linear-gradient(145deg,#3d3458,#151927);min-height:320px;margin:15px 0;border-radius:9px;display:grid;place-items:center;text-align:center;padding:20px}.reader-page b{font:800 32px Outfit}.reader-page span{color:#c9b3dd;font-size:12px}@media(max-width:1050px){.topbar nav{gap:15px}.hero{grid-template-columns:1fr 1fr}.art-card.front{left:18%}.cards{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.topbar{height:75px;padding:0 20px}.topbar nav{display:none;position:absolute;top:75px;left:0;right:0;background:#171820;padding:22px;flex-direction:column}.topbar nav.open{display:flex}.hamburger{display:block}.ghost{display:none}.hero{padding:70px 20px 40px;display:flex;flex-direction:column;align-items:stretch;gap:5px}.hero h1{font-size:58px}.hero-art{height:420px;max-width:450px;width:100%;margin:auto}.art-card.front{width:270px;height:370px;left:25%;top:5%}.art-card.back{width:230px;height:330px}.art-card.front .art-title{font-size:34px}.art-title{font-size:30px}.art-symbol{font-size:130px}.floating-tag{bottom:10px}.categories,.library,.how{padding:50px 20px}.category-grid{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:repeat(2,1fr);gap:12px}.cover{height:225px}.toolbar{flex-direction:column;align-items:stretch}.searchbox input{width:100%}.how{grid-template-columns:1fr;gap:20px}.section-intro{align-items:start;gap:12px}.section-intro p{max-width:110px;text-align:right}footer{padding:30px 20px;gap:20px;flex-wrap:wrap}}@media(max-width:420px){.hero h1{font-size:49px}.hero-stats{gap:22px}.hero-actions{gap:9px}.primary,.secondary{padding:14px}.category{min-height:165px}.category strong{font-size:20px}.cover{height:190px}.cover .cover-title{font-size:20px}.card-info{padding:13px}.card-info h3{font-size:14px}.modal{padding:25px 18px}}

/* v19: mobile-first usability refinements; desktop layout unchanged */
@media(max-width:760px){
 html{scroll-padding-top:72px}body{min-width:0}
 .topbar{height:66px;padding:0 16px;position:sticky;top:0;background:#0c0d12f2;backdrop-filter:blur(16px);z-index:15}
 .topbar nav{top:66px;padding:12px 16px 18px;box-shadow:0 18px 32px #0009;border-bottom:1px solid var(--line);max-height:calc(100dvh - 66px);overflow-y:auto}
 .topbar nav a{display:block;padding:13px 12px;min-height:44px;border-radius:10px}
 .topbar nav a:active{background:#ffffff14}
 .brand{font-size:20px;gap:9px}.brand-mark{height:38px;width:38px}.brand small{font-size:7px}
 .top-actions{gap:8px}.hamburger,.icon-btn{min-width:44px;min-height:44px;display:grid;place-items:center;padding:6px 10px}
 .hero{padding:44px 18px 30px;min-height:auto;gap:0}
 .hero h1{font-size:clamp(39px,10vw,64px);letter-spacing:-2px;margin:19px 0;overflow-wrap:break-word}
 .hero-copy>p{font-size:14px;line-height:1.7}.eyebrow{font-size:9px;letter-spacing:1.6px}
 .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0 27px}
 .hero-actions a{min-width:0;min-height:48px;padding:13px 11px;display:flex;justify-content:space-between;align-items:center;gap:5px;font-size:12px}
 .primary span,.secondary span{margin:0}.hero-stats{justify-content:space-between;gap:8px}.hero-stats b{font-size:20px}.hero-stats small{font-size:10px}
 .hero-art{height:320px;max-width:350px;margin-top:22px}.art-glow{width:300px;height:300px}
 .art-card.front{width:215px;height:288px;left:30%;top:4%}.art-card.back{width:185px;height:262px;left:6%;top:11%}
 .art-card.front .art-title{font-size:27px;bottom:52px}.art-title{font-size:24px;bottom:42px}.art-symbol{font-size:105px;top:70px}
 .art-label{padding:15px;font-size:8px}.art-badge{margin:15px;padding:7px;font-size:7px}.art-circle{width:140px;height:140px;border-width:17px;left:25px}.art-footer{left:15px;right:15px;bottom:15px;font-size:7px}.floating-tag{font-size:10px;padding:9px 13px;right:2px}
 .categories,.library,.how{padding:42px 16px 50px}.section-intro{align-items:flex-start;gap:10px;margin-bottom:20px}
 .section-intro h2,.how h2{font-size:clamp(29px,8vw,42px);letter-spacing:-1.5px}.section-intro p{font-size:10px;max-width:110px}
 .category-grid{gap:10px}.category{min-height:140px;padding:14px;border-radius:13px}.category strong{font-size:20px;bottom:16px;left:14px}.category .cat-icon{right:10px;top:30px;font-size:70px}.cat-num{font-size:8px}.cat-arrow{bottom:17px;right:14px}
 .toolbar{gap:15px}.filters{display:flex;flex-wrap:nowrap;overflow-x:auto;padding-bottom:7px;scrollbar-width:none;overscroll-behavior-x:contain}.filters::-webkit-scrollbar{display:none}
 .filter{flex:0 0 auto;min-height:44px;padding:11px 15px}.searchbox{min-height:48px}.searchbox input{font-size:16px}
 .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card{min-width:0;border-radius:12px}.cover{height:auto;aspect-ratio:3/4}.cover .glyph{font-size:60px}.cover .cover-title{font-size:clamp(15px,4.3vw,22px);left:12px;right:12px;bottom:13px}.cover .pill{font-size:9px;padding:6px 8px;left:9px;top:9px}
 .card-info{padding:12px}.card-info h3{font-size:14px;line-height:1.3;min-height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.meta{font-size:10px;gap:5px;flex-wrap:wrap}
 .how{gap:12px}.how>div>p{font-size:13px}.how-steps>div{gap:15px}footer{padding:26px 16px;gap:14px}
 .overlay{padding:0;align-items:end}.modal{width:100%;max-height:92dvh;border-radius:22px 22px 0 0;padding:28px 18px calc(22px + env(safe-area-inset-bottom));overscroll-behavior:contain}
 .modal h2{font-size:26px;line-height:1.2;padding-right:22px}.modal-close{min-width:44px;min-height:44px;top:10px;right:12px}.chapter{min-height:48px;gap:10px;align-items:center}
 .setting{flex-wrap:wrap}.setting input,.setting select{width:100%;max-width:100%!important;min-height:44px}.setting button{min-height:44px}.reader-page{min-height:260px}
}
@media(max-width:360px){.hero h1{font-size:37px}.hero-art{height:280px}.art-card.front{width:195px;height:260px}.art-card.back{width:170px;height:235px}.category strong{font-size:17px}.hero-stats small{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* v20 editorial redesign: dark ink, vermilion, restrained cream typography */
:root{--bg:#090909;--surface:#171717;--muted:#a8a5a0;--text:#f6f2ea;--accent:#f04439;--line:#ffffff24}
body{background:var(--bg);color:var(--text)}
.ambient{background:radial-gradient(ellipse,#e72c201c,transparent 68%)}
.topbar{border-bottom:1px solid #ffffff30;background:#0a0a0ae8;backdrop-filter:blur(16px)}
.brand{letter-spacing:-1.2px}.brand-mark{background:#e83b31;color:#fff;border-radius:3px;transform:rotate(-5deg)}
.brand-dot{color:#f04439}.topbar nav a:hover,.topbar nav a.active{color:#fff;border-bottom:2px solid #f04439;padding-bottom:6px}
.eyebrow,.kicker{color:#f26759}.live-dot{background:#f04439;box-shadow:0 0 14px #f04439}
.hero{min-height:660px}.hero h1{font-weight:800;text-transform:uppercase;letter-spacing:-5px;line-height:.94}
.hero h1 em{color:#f04439}.hero-copy>p{color:#bbb4af}.primary{background:#f04439;color:#fff;border-radius:4px}
.secondary,.ghost,.icon-btn,.hamburger{border-radius:4px}.secondary{background:#171717}
.hero-stats b{color:#f6f2ea}.art-glow{background:#e8373735}
.art-card{border-radius:5px;box-shadow:18px 22px 0 #0008,0 40px 100px #000a}
.art-card.front{background:radial-gradient(circle at 70% 40%,#f56556 0%,#9b2424 22%,transparent 48%),linear-gradient(145deg,#3e1c1e,#0c0c0c 75%)}
.art-card.back{background:radial-gradient(circle at 50% 30%,#d4bdb5,#4b3638 30%,transparent 55%),linear-gradient(145deg,#343434,#111)}
.art-symbol{color:#f4b6a099}.floating-tag{background:#f04439;color:#fff;border-radius:3px}
.category{border-radius:5px;background:linear-gradient(145deg,#242424,#101010);border-color:#ffffff29}
.category:nth-child(2){background:linear-gradient(145deg,#2d2827,#121212)}
.category:nth-child(3){background:linear-gradient(145deg,#252525,#111)}
.category.adult{background:linear-gradient(145deg,#381c1b,#101010)}
.category:hover{border-color:#f04439;transform:translateY(-3px)}
.category strong{letter-spacing:-.7px}.cat-num{color:#f16b60}
.filter{border-radius:4px;background:#181818}.filter.selected{background:#f04439;color:#fff}
.searchbox{background:#171717;border-radius:4px}.card{border-radius:5px;background:#161616}
.card:hover{border-color:#f04439}.cover .pill{border-radius:3px;background:#141414d9}
.cover:before{border-color:#f044391a}.meta .rating{color:#f66c5c}
.how{border-top-color:#ffffff30}.how-steps span,.text-link{color:#f04439}
.modal{border-radius:7px;background:#161616}.chapter{border-radius:4px}.chapter:hover{border-color:#f04439}
.setting button{background:#f04439;color:#fff}.modal-note{background:#f0443910;border-color:#f0443935;color:#f4c9c4}
@media(max-width:760px){.hero h1{letter-spacing:-2.4px}.topbar{background:#0a0a0af5}.topbar nav{background:#141414}.modal{border-radius:16px 16px 0 0}.art-card.front{transform:rotate(5deg)}.art-card.back{transform:rotate(-8deg)}}

/* v21 - independent responsive category, detail and reader routes */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
.topbar{width:100%}
.route-page{max-width:1280px;margin:auto;padding:40px 42px 100px;min-height:75vh}
.page-breadcrumb{font-size:12px;color:#a8a5a0;margin:0 0 32px;overflow-wrap:anywhere}
.page-breadcrumb a{color:#e7e1db}.page-breadcrumb a:hover{color:var(--accent)}
.category-heading{background:linear-gradient(125deg,#211918,#101010 68%);border:1px solid #ffffff1b;border-radius:8px;padding:55px 58px;min-height:315px;display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:30px;align-items:center;overflow:hidden}
.category-heading h1{font-size:clamp(48px,8vw,96px);margin:15px 0 18px;line-height:1;letter-spacing:-3px;text-transform:uppercase;overflow-wrap:anywhere}
.category-heading h1 em{color:var(--accent);font-style:normal}.category-heading p{font-size:16px;line-height:1.7;color:#bcb6b2;max-width:560px}.collection-meta{font-size:12px;color:#f57c72;font-weight:700;letter-spacing:1px}
.category-graphic{height:200px;width:200px;display:grid;place-items:center;font-size:125px;color:#f04439;background:radial-gradient(circle,#ec3c3429,transparent 72%);font-weight:800}
.listing-heading{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:55px 0 22px;border-bottom:1px solid #ffffff26;padding-bottom:18px}.listing-heading h2{font-size:clamp(25px,4vw,43px);margin:9px 0 0;letter-spacing:-1.5px}.listing-heading>span{color:#b2aca8;font-size:11px;white-space:nowrap}
.category-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.category-cards .card{display:block;min-width:0}.category-cards .cover{aspect-ratio:3/4;height:auto}.category-cards .card-info h3{overflow-wrap:anywhere}.age-note,.demo-notice{font-size:13px;color:#c9b6b2;line-height:1.7}
.detail-hero{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:55px;align-items:start}.detail-poster{width:100%;aspect-ratio:3/4;position:relative;overflow:hidden;border-radius:8px}.detail-info h1{font-size:clamp(38px,5vw,70px);letter-spacing:-2px;line-height:1.08;margin:20px 0;overflow-wrap:anywhere}.detail-info h3{font-size:17px;margin:35px 0 12px}.detail-info p{color:#c5bfba;line-height:1.8;font-size:15px;max-width:650px}.detail-pills{display:flex;gap:9px;flex-wrap:wrap}.detail-pills span{border:1px solid #ffffff30;border-radius:4px;padding:9px 13px;font-size:12px}.detail-cta{display:inline-block;margin-top:18px}.chapter-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.chapter-list .chapter{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;min-width:0}.chapter-list .chapter span:first-child{font-weight:700}.chapter-list .chapter span:last-child{font-size:12px;color:#f57c72;white-space:nowrap}
.reader-header{text-align:center}.reader-header h1{font-size:clamp(30px,5vw,60px);letter-spacing:-1.5px;margin:14px 0}.reader-header p{color:#bdb7b4}.reader-nav{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:24px 0 35px}.reader-nav a{padding:12px 16px;border:1px solid #ffffff38;border-radius:4px}.reader-demo{max-width:750px;margin:auto}.reader-demo .reader-page{min-height:430px;display:grid;place-items:center;text-align:center;padding:20px;margin:0;background:linear-gradient(135deg,#242020,#101010);border:1px solid #ffffff12;color:#999;font-size:13px;letter-spacing:1px}.empty-route{text-align:center;padding:100px 0}
@media(max-width:900px){.route-page{padding:28px 24px 70px}.category-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.category-heading{padding:38px;grid-template-columns:minmax(0,1fr) 125px}.category-graphic{height:125px;width:125px;font-size:85px}.detail-hero{gap:25px}}
@media(max-width:760px){.route-page{padding:24px 16px 65px}.page-breadcrumb{font-size:11px;margin-bottom:20px}.category-heading{padding:26px 20px;min-height:240px;grid-template-columns:minmax(0,1fr) 70px;gap:5px}.category-heading h1{font-size:clamp(34px,9vw,60px);letter-spacing:-1.5px;margin:12px 0}.category-heading p{font-size:13px;line-height:1.6}.category-graphic{height:75px;width:75px;font-size:53px}.listing-heading{margin:33px 0 17px}.listing-heading h2{font-size:clamp(23px,6.5vw,34px)}.category-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.category-cards .card-info{padding:11px}.category-cards .cover .cover-title{font-size:clamp(15px,4.4vw,22px)}.detail-hero{grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:15px}.detail-info h1{font-size:clamp(22px,5.5vw,36px);letter-spacing:-.5px;margin:9px 0 13px}.detail-info h3{font-size:14px;margin:17px 0 8px}.detail-info p{font-size:12px;line-height:1.55}.detail-pills{gap:5px}.detail-pills span{padding:5px 7px;font-size:10px}.detail-cta{font-size:11px;padding:11px}.chapter-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.chapter-list .chapter{font-size:12px;padding:10px;min-height:54px}.chapter-list .chapter span:last-child{font-size:10px}.reader-demo .reader-page{min-height:300px}.topbar nav{z-index:30}}
@media(max-width:380px){.category-heading{grid-template-columns:minmax(0,1fr) 48px}.category-graphic{width:48px;font-size:36px}.detail-hero{grid-template-columns:minmax(0,100px) minmax(0,1fr)}.chapter-list .chapter{font-size:11px}}

/* v22: compact routes, no phantom vertical space below footer */
html,body{min-height:100%;height:auto}body{display:flex;flex-direction:column}main{flex:1 0 auto;min-height:0}footer{flex:0 0 auto;min-height:0!important;height:auto!important;margin-top:0!important;padding-top:26px;padding-bottom:26px}.route-page{min-height:0!important;padding-bottom:32px!important}.route-page .chapter-list{margin-bottom:0}.cover .cover-title,.detail-poster .cover-title{display:none!important}.cover .glyph{opacity:.8}.detail-poster{isolation:isolate}.chapter{cursor:default}.chapter span:last-child{color:#9e9a99!important}.chapter-list .chapter{background:#141414}.detail-info h1{font-weight:800}.detail-info h3{font-weight:800}.listing-heading h2{font-weight:800}.card-info h3{font-weight:800}.kicker,.page-breadcrumb,.chapter span:last-child{font-weight:800;letter-spacing:.4px}
@media(max-width:760px){footer{padding:22px 16px!important;align-items:flex-start!important;gap:10px!important}.route-page{padding-bottom:24px!important}.detail-info h1{font-size:clamp(21px,5.3vw,34px)}.chapter-list{gap:9px}.chapter-list .chapter{padding:12px 10px;min-height:58px}.chapter span:last-child{font-size:10px!important}.detail-poster{aspect-ratio:3/4}.detail-hero{align-items:start}.detail-info .demo-notice{margin-bottom:0}}

/* v23: published catalog, two-column mobile grid, compact footer and account form */
html,body{min-height:100%;}body{display:flex;flex-direction:column}main{flex:1}footer{margin-top:30px;min-height:unset!important;padding-bottom:24px!important}.route-page{min-height:unset!important;padding-bottom:16px!important}.chapter-list{margin-bottom:12px!important}.catalog-state{padding:28px 12px;color:#b8b1ad;font-weight:700}.new-label{position:absolute;top:9px;right:9px;background:#f04439;color:white;padding:5px 9px;font-size:11px;font-weight:900;letter-spacing:1px;z-index:2}.cover{position:relative;overflow:hidden}.cover img{height:100%;width:100%;object-fit:cover}.cover-placeholder{display:grid;place-items:center;height:100%;font-weight:900;font-size:22px;color:#f04439;background:linear-gradient(145deg,#292021,#101010)}.pager{display:flex;gap:15px;align-items:center;justify-content:center;margin:28px auto}.pager button,.auth-buttons button{padding:12px 18px;background:#e84239;color:white;border:0;border-radius:5px;font-weight:800}.pager button:disabled{opacity:.3}.auth-form{display:grid;gap:15px}.auth-form label{display:grid;gap:8px;font-weight:800}.auth-form input{padding:14px;background:#222;border:1px solid #666;color:white;border-radius:6px;width:100%}.auth-buttons{display:flex;gap:10px}.detail-poster img{width:100%;height:100%;object-fit:cover}@media(max-width:760px){.cards,.category-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}.card-info h3{font-size:14px!important}.route-page{padding-bottom:0!important}.detail-hero{gap:18px}.detail-info h1{font-size:clamp(23px,6vw,38px)}footer{padding:24px 16px!important;margin-top:15px!important}}
/* v25 dedicated mobile-first sign-in and sign-up pages */
.account-page{min-height:calc(100vh - 260px);max-width:580px;margin:0 auto;padding:32px 18px 75px}
.account-back{display:inline-block;margin-bottom:28px;color:#aaa;text-decoration:none;font-weight:700}
.account-panel{background:#151515;border:1px solid #333;border-radius:22px;padding:clamp(24px,5vw,42px);box-shadow:0 22px 70px #0006}
.account-panel h1{font-size:clamp(28px,6vw,42px);line-height:1.2;margin:14px 0;font-weight:800}
.account-panel>p{color:#b5b5b5;line-height:1.65}
.account-panel .auth-form{display:flex;flex-direction:column;gap:18px;margin-top:28px}
.account-panel .auth-form label{display:flex;flex-direction:column;gap:9px;font-weight:700}
.account-panel .auth-form input{width:100%;min-height:50px;background:#0a0a0a;color:#fff;border:1px solid #454545;border-radius:10px;padding:12px 14px;font-size:16px}
.account-panel .auth-form input:focus{outline:2px solid #ec4840;outline-offset:1px}
.account-panel .auth-form button{width:100%;min-height:50px;border:0;border-radius:10px;cursor:pointer;font-weight:800}
.account-panel .auth-form button:disabled{opacity:.5;cursor:wait}
.account-switch{margin-top:24px}.account-switch a{color:#ff655c;font-weight:800}
#authFeedback{min-height:20px;color:#ff817a;overflow-wrap:anywhere}
.owner-note{border:1px solid #68403e;border-radius:12px;padding:16px;margin:20px 0;background:#231615}
@media(max-width:600px){.account-page{padding:22px 14px 60px}.account-panel{border-radius:15px}}

/* v26: mobile-first authentication layout */
.account-page{width:min(100%,720px);margin:0 auto;padding:clamp(16px,4vw,32px);box-sizing:border-box}
.account-panel{width:100%;max-width:560px;margin:24px auto;padding:clamp(20px,5vw,36px);box-sizing:border-box;min-width:0}
.account-panel h1{font-size:clamp(26px,7vw,42px);line-height:1.18;overflow-wrap:anywhere;margin:18px 0}
.account-panel p,.account-panel label{font-size:clamp(13px,3.5vw,16px);line-height:1.6;overflow-wrap:anywhere}
.auth-form{display:flex;flex-direction:column;gap:12px;min-width:0}
.auth-form input{width:100%;min-width:0;box-sizing:border-box;font-size:16px!important;padding:14px 16px!important;min-height:52px}
.auth-label{display:block;margin-top:10px;font-weight:700}
.password-wrap{display:flex;position:relative;min-width:0}
.password-wrap input{padding-right:90px!important}
.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);min-width:70px;min-height:40px;border:1px solid #454545;border-radius:9px;background:#242424;color:#fff;cursor:pointer;font-weight:700;font-size:12px}
.auth-hint{color:#c7c7c7;margin:0;font-size:13px!important}
.account-switch{margin-top:24px!important}
.auth-form .primary{width:100%;min-height:52px;margin-top:10px}
@media(max-width:480px){.account-page{padding:16px}.account-panel{margin:18px 0;padding:20px 18px}.account-panel h1{letter-spacing:0}.account-back{font-size:13px}}

/* v29: accessible mobile auth and eye visibility controls */
.account-panel h1{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:clamp(25px,6.5vw,39px)!important;letter-spacing:-.025em!important;word-spacing:normal!important;overflow-wrap:normal!important;line-height:1.2!important}
.account-panel .auth-form .password-wrap{position:relative;display:block;width:100%}
.account-panel .auth-form .password-wrap input{padding-right:60px!important}
.account-panel .auth-form .password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:44px!important;min-width:44px!important;height:42px!important;min-height:42px!important;padding:0!important;display:grid;place-items:center;border:1px solid #454545!important;border-radius:9px;background:#242424!important;color:#eee!important}
.password-toggle.visible{color:#f04439!important;border-color:#f04439!important}
.password-toggle:focus-visible{outline:2px solid #f04439;outline-offset:2px}
.account-panel .auth-form #authFeedback{overflow-wrap:anywhere;line-height:1.5;font-size:14px}
@media(max-width:480px){.account-panel{padding:20px 16px!important}.account-panel .auth-form input{font-size:16px!important}.account-panel h1{font-size:28px!important}}

/* v35: stable mobile auth layout, keyboard/touch accessible controls */
.account-page{width:100%;max-width:640px;min-height:0;margin-inline:auto;padding:clamp(14px,3vw,32px)!important}
.account-panel{max-width:520px;width:100%;margin:12px auto!important;padding:clamp(18px,4vw,34px)!important;overflow:hidden}
.account-panel h1{font-size:clamp(25px,5vw,36px)!important;line-height:1.2!important;letter-spacing:-.02em!important}
.account-panel .auth-form{gap:10px!important;margin-top:18px!important}
.account-panel .auth-form label{margin:8px 0 0!important;font-size:13px!important;line-height:1.5!important}
.account-panel .auth-form input{min-width:0;width:100%;font-size:16px!important;box-sizing:border-box}
.account-panel .auth-form .password-wrap{width:100%;min-width:0;position:relative}
.account-panel .auth-form .password-wrap input{padding-right:64px!important}
.account-panel .auth-form .password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:46px!important;min-width:46px!important;min-height:42px!important;z-index:3;font-size:21px!important}
.account-panel .auth-form .password-toggle:focus-visible{outline:2px solid #ff6258;outline-offset:2px}
.account-panel .auth-form .primary{margin-top:16px!important;min-height:52px!important}
.account-panel .auth-intro,.account-panel .auth-hint{font-size:13px!important;line-height:1.6!important}
.retry-catalog{background:#b92c2b;color:white;border:0;border-radius:9px;padding:12px 18px;cursor:pointer;font-weight:800}
@media(max-width:420px){.account-page{padding:12px!important}.account-panel{padding:18px 15px!important;border-radius:16px}.account-panel h1{font-size:27px!important}}

/* v39 vertical reading experience */
.chapter-list a.chapter{text-decoration:none;color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:border-color .2s,background .2s}
.chapter-list a.chapter:hover,.chapter-list a.chapter:focus-visible{border-color:#ef493f;background:#211819}
.chapter-list a.chapter span:last-child{color:#ef625a!important;white-space:nowrap}
.reader-shell{max-width:1120px;margin:0 auto;padding:0 0 30px}
.reader-toolbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#111e;padding:14px 16px;border-bottom:1px solid #444;backdrop-filter:blur(16px);font-weight:800}
.reader-toolbar a,.reader-bottom{color:#f36b62;text-decoration:none;font-weight:800}
.reader-toolbar strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader-toolbar span{color:#aaa;font-size:12px}
.reader-images{display:flex;flex-direction:column;align-items:center;gap:0;background:#080808;min-height:120px}
.reader-images img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;margin:0;padding:0}
.reader-images img.reader-error{min-height:100px}
.reader-bottom{display:block;text-align:center;padding:26px 10px;background:#161616}
@media(max-width:760px){.reader-shell{width:calc(100% + 32px);margin-left:-16px}.reader-toolbar{padding:12px 14px;font-size:12px}.reader-images{width:100%}}


/* v41: Full-width vertical reader, especially on mobile.
   Reader-only rules do not affect catalog or account pages. */
html.reader-mode,body.reader-mode{width:100%;max-width:100%;overflow-x:clip}
body.reader-mode #home{width:100%;max-width:100%;min-width:0;display:block}
body.reader-mode #routePage{display:block;width:100%;max-width:none;margin:0;padding:0!important;min-width:0}
body.reader-mode #routePage[hidden]{display:none!important}
body.reader-mode .reader-shell{display:block;width:100%;max-width:1100px;min-width:0;margin:0 auto;padding:0;background:#080808}
body.reader-mode .reader-images{display:block;width:100%;max-width:100%;min-width:0;margin:0;padding:0;overflow:hidden;background:#080808}
body.reader-mode .reader-images img{display:block;box-sizing:border-box;width:100%!important;max-width:100%!important;min-width:0;height:auto!important;max-height:none;object-fit:fill;margin:0;padding:0;border:0;border-radius:0;vertical-align:top}
body.reader-mode .reader-toolbar{width:100%;min-width:0;box-sizing:border-box;position:sticky;top:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;padding:12px 16px;background:#111e}
body.reader-mode .reader-toolbar a{justify-self:start;white-space:nowrap}
body.reader-mode .reader-toolbar strong{justify-self:center;text-align:center;min-width:0}
body.reader-mode .reader-toolbar span{justify-self:end;white-space:nowrap}
body.reader-mode .reader-bottom{width:100%;box-sizing:border-box}
@media(max-width:760px){
 body.reader-mode .topbar,body.reader-mode footer{display:none!important}
 body.reader-mode #home,body.reader-mode #routePage,body.reader-mode .reader-shell,body.reader-mode .reader-images{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}
 body.reader-mode .reader-toolbar{padding:12px 10px;font-size:12px;min-height:52px}
 body.reader-mode .reader-images img{width:100%!important;max-width:100%!important;height:auto!important}
 body.reader-mode .reader-bottom{padding:22px 12px}
}


/* v42: Viewport containment and responsive reader overhaul.
   The original .ambient element was 900px wide even on 390px screens.
   On Chrome Android this inflated the layout viewport and made the
   reader appear as a narrow strip beside a large black region. */
html {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}
body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}
#home, #homeContent, #routePage {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.ambient {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  max-width: 100%;
  height: 720px;
  overflow: clip;
  background: radial-gradient(ellipse at 73% 5%, #e72c201c, transparent 65%);
  filter: none;
  pointer-events: none;
}
.topbar, footer, .hero, .categories, .library, .how {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
.hero, .hero-copy, .hero-art, .category-grid, .cards,
.category-cards, .category, .card, .detail-info,
.detail-hero, .chapter-list, .toolbar, .section-intro {
  min-width: 0;
  max-width: 100%;
}
.hero-art {
  isolation: isolate;
}
.art-glow {
  max-width: 85%;
}
/* The 8-category desktop navigation cannot fit at tablet/desktop-site widths.
   Switch to the two-column-safe dropdown rather than letting it expand the page. */
@media (max-width: 1199px) {
  .topbar {
    height: 72px;
    padding: 0 clamp(14px, 2.5vw, 30px);
  }
  .topbar nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    padding: 14px 20px;
    flex-direction: column;
    gap: 0;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 40;
    background: #151414;
    box-shadow: 0 20px 38px #000b;
    border-bottom: 1px solid #ffffff26;
  }
  .topbar nav.open { display: flex; }
  .topbar nav a { width: 100%; min-height: 43px; padding: 12px 10px; }
  .hamburger { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .hero {
    padding: 62px 30px 60px;
    gap: 14px;
    min-height: unset;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .hero h1 { font-size: clamp(42px, 5.2vw, 60px); letter-spacing: -2px; }
  .hero-art { height: 430px; }
  .art-card.front { width: min(65%, 285px); height: 375px; left: 29%; }
  .art-card.back { width: min(58%, 245px); height: 345px; left: 7%; }
  .art-glow { width: 80%; height: 375px; }
  .categories, .library, .how { padding-left: 30px; padding-right: 30px; }
  .category-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cards { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .topbar { height: 66px; }
  .topbar nav { max-height: calc(100dvh - 66px); }
  .hero { width: 100%; overflow: clip; }
  .hero-art { max-width: min(100%, 350px); overflow: clip; }
  .art-glow { width: 82%; max-width: 82%; }
  .categories, .library, .how { width: 100%; }
  .category-grid, .cards, .category-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { max-width: 100%; overflow-x: auto; }
  .route-page { width: 100%; max-width: 100%; }
  .category-heading { max-width: 100%; }
  .detail-hero { width: 100%; }
}

/* Always use an immersive reader page. The image column itself fills the
   viewport, instead of inheriting the old 1100px desktop max-width. */
html.reader-mode, body.reader-mode {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: #080808;
}
body.reader-mode .ambient,
body.reader-mode .topbar,
body.reader-mode footer { display: none !important; }
body.reader-mode #home,
body.reader-mode #routePage,
body.reader-mode .reader-shell,
body.reader-mode .reader-images {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}
body.reader-mode #routePage[hidden] { display: none !important; }
body.reader-mode .reader-shell,
body.reader-mode .reader-images { background: #080808; }
body.reader-mode .reader-images img {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  vertical-align: middle;
  object-fit: contain;
}
body.reader-mode .reader-toolbar {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px clamp(12px, 3vw, 34px);
  min-height: 56px;
  align-items: center;
  z-index: 30;
  background: #121212f5;
  border-bottom: 1px solid #ffffff27;
}
body.reader-mode .reader-toolbar a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  justify-self: start;
}
body.reader-mode .reader-toolbar strong { min-width: 0; text-align: center; }
body.reader-mode .reader-toolbar span { justify-self: end; white-space: nowrap; }
body.reader-mode #readerStatus {
  box-sizing: border-box;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  body.reader-mode .reader-toolbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 9px;
    font-size: 11px;
    padding: 10px 12px;
    min-height: 50px;
  }
  body.reader-mode .reader-toolbar span { font-size: 10px; }
}


/* v43: real provider cover art, accurate synopsis and better mobile poster sizing. */
.cover {position:relative;background:#151515;isolation:isolate;}
.cover > .cover-art {
  display:block;
  width:100%;height:100%;max-height:100%;
  object-fit:cover;object-position:center 22%;
  position:relative;z-index:1;
  border:0;
}
.cover > .cover-art[hidden], .cover > .cover-placeholder[hidden] {display:none!important;}
.cover > .cover-placeholder {position:relative;z-index:1;font-weight:900;letter-spacing:.04em;color:#f24a43;font-size:clamp(18px,4vw,32px);}
.cover:has(.cover-art:not([hidden]))::before {display:none;}
.cover > .new-label {z-index:3;}
.card .cover{aspect-ratio:3/4.35;height:auto;min-height:0;}
.detail-poster.cover {width:100%;height:auto;min-height:0;aspect-ratio:3/4.4;align-self:start;}
.detail-poster .cover-art {height:100%;}
.story-facts {display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 24px;}
.story-facts span {border:1px solid #ffffff24;border-radius:999px;padding:7px 11px;font-size:11px;color:#dfd9d7;font-weight:700;}
.detail-info .story-synopsis {line-height:1.85;white-space:pre-line;overflow-wrap:anywhere;color:#d2c9c9;font-size:clamp(14px,1.3vw,17px);max-width:76ch;}
.detail-info .story-credit {font-size:13px;line-height:1.6;color:#cfc6c6;margin:10px 0;overflow-wrap:anywhere;}
.detail-info .metadata-credit {font-size:11px;color:#9e8d8d;}
@media(max-width:760px){
 .card .cover{aspect-ratio:3/4.2;}
 .detail-hero{grid-template-columns:minmax(104px,32%) minmax(0,1fr);gap:clamp(12px,3.5vw,22px);align-items:start;}
 .detail-poster.cover{width:100%;max-width:100%;aspect-ratio:3/4.35;}
 .detail-info{min-width:0;}
 .detail-info h1{overflow-wrap:anywhere;font-size:clamp(24px,5.5vw,42px);line-height:1.12;}
 .story-facts{gap:5px;margin:9px 0 14px;}
 .story-facts span{font-size:10px;padding:5px 7px;}
}

/* v44: non-blocking catalog partial-outage notice */
.partial-warning{margin:0 0 18px;color:#e5b17d;font-weight:600;font-size:0.88rem;line-height:1.6}

/* v45: reader recovery UI; keep buttons reachable on narrow mobile screens. */
.reader-failure-text { margin: 0 0 20px; line-height: 1.5; overflow-wrap: anywhere; }
.reader-retry { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 150px; padding: 12px 22px; border: 1px solid #e6423a; border-radius: 10px; background: #e6423a; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.reader-retry:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* v46: tap-to-scroll reader controls on page imagery; native vertical swipes remain enabled. */
body.reader-mode .reader-images { touch-action: pan-y pinch-zoom; }
body.reader-mode .reader-images img { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
body.reader-mode .reader-tap-hint {
  text-align: center;
  background: #171717;
  color: #c9c9c9;
  border-bottom: 1px solid #ffffff20;
  font-size: clamp(10px, 2.6vw, 12px);
  font-weight: 800;
  letter-spacing: .04em;
  padding: 9px 10px;
  margin: 0;
}

/* v48: accessible, mobile-first 18+ reader acknowledgement. */
body.reader-mode .adult-confirmation {
  max-width: 490px; width: min(100%, 490px); margin: 32px auto;
  padding: clamp(24px, 5vw, 38px); text-align: center;
  background: linear-gradient(145deg, #251719, #151515);
  color: #f9f4f4; border: 1px solid #703534; border-radius: 16px;
  box-shadow: 0 18px 50px #0005;
}
.adult-confirm-label {color:#ff8c80; font-size:12px; font-weight:800; letter-spacing:1px;}
.adult-confirmation h2 {font-size:clamp(25px,6vw,36px);letter-spacing:-.5px;line-height:1.15;margin:16px 0;}
.adult-confirmation p {line-height:1.65; font-weight:500; color:#d6cacc; font-size:14px;}
.adult-confirm-actions {display:flex;flex-direction:column;gap:12px;margin-top:24px;}
.adult-confirm-yes, .adult-confirm-back {
  display:flex;justify-content:center;align-items:center;min-height:52px;
  padding:12px 16px; border-radius:10px; font:inherit; font-weight:800;
}
.adult-confirm-yes {background:#e7443a; color:#fff; border:1px solid #e7443a;}
.adult-confirm-yes:disabled {opacity:.6;cursor:wait;}
.adult-confirm-back {background:#241d1e; color:#ffe9e9; border:1px solid #65403e; text-decoration:none;}
.adult-confirm-yes:focus-visible, .adult-confirm-back:focus-visible {outline:3px solid #fff;outline-offset:3px;}
.adult-confirmation .adult-confirm-feedback {min-height:1.5em;color:#ffbdb6;overflow-wrap:anywhere;}
@media(max-width:520px){body.reader-mode .adult-confirmation{width:calc(100% - 28px);margin:24px 14px;padding:22px 16px;}}

/* v49: lightweight, accessible progressive reader feedback */
body.reader-mode .reader-progress{max-width:580px;margin:14px auto 18px;padding:18px 20px;text-align:center;line-height:1.6;}
.reader-progress b{display:block;margin-bottom:9px;font-size:15px;}
.reader-progress-track{height:5px;border-radius:6px;overflow:hidden;background:#303030;margin:12px auto;}
.reader-progress-bar{width:0;height:100%;background:#eb4439;transition:width .35s ease;}
#readerProgressText{display:block;overflow-wrap:break-word;font-size:12px;}
body.reader-mode #readerPages:not(:empty){min-height:0;}