#article-reader { position:fixed; inset:0; width:100%; height:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:#fff; color:#171717; overflow:hidden; box-shadow:none; }
#article-reader[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
#article-reader::backdrop { background:#fff; }
#article-reader * { box-sizing:border-box; }
#article-reader .reader-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 32px; font:12px/1.4 AppstarInter,Arial,sans-serif; }
#article-reader-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#article-reader button { appearance:none; border:0; border-radius:0; background:transparent; color:inherit; padding:12px; font:inherit; cursor:pointer; }
#article-reader button:focus-visible { outline:2px solid #171717; outline-offset:3px; }
#article-reader .reader-close { flex-shrink:0; display:flex; gap:20px; align-items:center; }
#article-reader .reader-close span { font-size:24px; line-height:16px; }
#article-reader .reader-stage { min-height:0; display:flex; align-items:center; justify-content:center; width:100%; overflow:hidden; }
#article-reader .reader-book { flex-shrink:0; transition:margin-left .35s ease; }
#article-reader .reader-page { background:#fff; overflow:hidden; box-shadow:inset 0 0 0 1px #00000018; }
#article-reader .reader-page.even::after,#article-reader .reader-page.odd::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 5px 0 15px -12px #0009; }
#article-reader .reader-page.even::after { box-shadow:inset -5px 0 15px -12px #0009; }
#article-reader .reader-cover-copy { transform-origin:0 0; pointer-events:none; }
#article-reader .reader-art > img { width:100%; height:100%; object-fit:cover; display:block; }
#article-reader .reader-copy { padding:9%; display:flex; flex-direction:column; align-items:flex-start; }
#article-reader .reader-kicker { font:10px/1.5 AppstarInter,Arial,sans-serif; letter-spacing:.08em; }
#article-reader .reader-copy h2 { margin:20% 0 8%; font:500 clamp(24px,3.4vw,52px)/1.04 AppstarInter,Arial,sans-serif; letter-spacing:-.055em; }
#article-reader .reader-copy p { margin:0; font:400 clamp(15px,1.5vw,21px)/1.55 Georgia,serif; max-width:28em; }
#article-reader .reader-folio { position:absolute; bottom:5%; left:9%; right:9%; display:flex; justify-content:space-between; font:10px/1.4 AppstarInter,Arial,sans-serif; }
#article-reader .reader-art .reader-folio { color:#fff; text-shadow:0 1px 4px #000; }
#article-reader .reader-back { padding:9%; display:flex; flex-direction:column; justify-content:space-between; background:#f3f2ee; }
#article-reader .reader-back > span:first-child { font:800 clamp(32px,4.2vw,64px)/.9 AppstarInter,Arial,sans-serif; letter-spacing:-.07em; }
#article-reader .reader-back-note { font:11px/1.8 AppstarInter,Arial,sans-serif; }
#article-reader .reader-navigation { display:flex; align-items:center; justify-content:center; gap:32px; padding:20px 24px max(24px,env(safe-area-inset-bottom)); font:12px/1.4 AppstarInter,Arial,sans-serif; }
#article-reader .reader-position { min-width:128px; text-align:center; font-variant-numeric:tabular-nums; }
#article-reader button:disabled { opacity:.25; cursor:default; }
@media(max-width:720px) { #article-reader .reader-header {padding:12px 16px;gap:12px;} #article-reader .reader-navigation {gap:8px;padding-top:12px;} #article-reader .reader-copy h2 {font-size:clamp(26px,8vw,48px);} #article-reader .reader-copy p {font-size:clamp(14px,4vw,19px);} #article-reader .reader-back > span:first-child {font-size:clamp(30px,10vw,60px);} }
@media(max-height:500px) { #article-reader .reader-header {padding:2px 16px;} #article-reader .reader-navigation {padding:2px 16px;} #article-reader .reader-copy h2 {font-size:22px;margin:7% 0;} #article-reader .reader-copy p {font-size:12px;} #article-reader .reader-kicker,#article-reader .reader-folio {font-size:8px;} }
@media(prefers-reduced-motion:reduce) { #article-reader .reader-book {transition:none;} }
#article-reader .reader-stage { position:relative; display:block; }
#article-reader .reader-placement { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
#article-reader .reader-book { position:relative; }