/* The reading room keeps its own palette in both site themes. */
#magazine-reader{--reader-ink:#292827;--reader-muted:#77736e;--reader-accent:#8f273b;color:var(--reader-ink);background:#f4f2ed;font-family:inherit;isolation:isolate}
#magazine-reader *{box-sizing:border-box}
#magazine-reader svg{width:20px;height:20px;flex-shrink:0}
.reader-heading{display:grid;grid-template-columns:1fr minmax(0,2fr) 1fr;align-items:center;gap:24px;padding:24px 4%;border-bottom:1px solid #29282710;background:#faf9f6}
.reader-title{text-align:center;min-width:0}.reader-eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:9px;letter-spacing:2.2px;font-weight:600;color:var(--reader-muted)}.reader-eyebrow i{width:3px;height:3px;border-radius:50%;background:#a6937c}.reader-title h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(18px,2vw,27px);font-weight:400;line-height:1.3;margin:8px 0 0;overflow-wrap:anywhere}
.reader-back,.reader-download{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:500;width:fit-content;text-decoration:none;color:var(--reader-ink);transition:background .2s,color .2s}.reader-back{padding:10px 0}.reader-download{justify-self:end;border:1px solid #29282722;border-radius:30px;padding:10px 16px}.reader-download:hover{background:#eae5dd}.reader-back:hover{color:var(--reader-accent)}
.reader-workspace{position:relative;background:radial-gradient(ellipse at 50% 30%,#fff9 0,transparent 65%),#eeece6}.reader-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 4% 0;min-height:42px;color:var(--reader-muted);font-size:10px}.reader-edition{letter-spacing:2px;font-size:9px}.reader-view-label{font-style:italic}.reader-meta>*{flex:1}#reader-status{text-align:center;margin:0;font-size:11px;flex:3}.reader-view-label{text-align:right}
#reader-stage{overflow:auto;height:calc(100dvh - 180px);min-height:500px;padding:16px 20px 24px;perspective:1800px;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:#bdb6ab transparent}#reader-book{display:flex;align-items:flex-start;justify-content:center;width:max-content;min-width:100%;margin:auto;position:relative;perspective:1800px}#reader-book canvas{display:block;background:#fff;box-shadow:0 2px 3px #40332612,0 12px 24px #40332616,0 26px 45px #40332618;max-width:none}#reader-book canvas+canvas{border-left:1px solid #0002}
.reader-bottom{padding:0 20px 18px;display:flex;flex-direction:column;align-items:center;gap:13px}.reader-toolbar{display:flex;align-items:center;gap:10px;background:#fffefaf5;border:1px solid #fff;border-radius:18px;padding:7px 10px;box-shadow:0 4px 8px #29282705,0 12px 35px #2928270c;color:var(--reader-ink)}.reader-nav,.reader-zoom-group,.reader-toolbar form{display:flex;align-items:center;gap:3px}.reader-toolbar button{display:flex;align-items:center;justify-content:center;border:0;border-radius:11px;background:transparent;width:38px;height:38px;padding:0;color:inherit;cursor:pointer;transition:background .2s,color .2s,transform .2s}.reader-toolbar button:hover:not(:disabled){background:#eee8e1}.reader-toolbar button:active:not(:disabled){transform:scale(.94)}.reader-toolbar button:disabled{opacity:.25;cursor:default}#reader-next{background:var(--reader-accent);color:white}#reader-next:hover:not(:disabled){background:#6f1b2c}.reader-toolbar input{appearance:textfield;-moz-appearance:textfield;width:34px;padding:4px 0;text-align:center;color:var(--reader-ink);font-size:12px;background:transparent;border:0;border-radius:5px;font-variant-numeric:tabular-nums}.reader-toolbar input::-webkit-inner-spin-button,.reader-toolbar input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#reader-total,#reader-zoom{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--reader-muted)}#reader-zoom{min-width:40px;text-align:center}#reader-jump button{width:25px}#reader-jump button svg{width:14px}.reader-divider{height:22px;width:1px;background:#29282716}.reader-hint{color:var(--reader-muted);font-size:10px;margin:0;text-align:center}.reader-mobile-hint{display:none}.reader-progress{width:160px;height:2px;overflow:hidden;background:#29282715;border-radius:2px}#reader-progress-fill{display:block;height:100%;width:0;background:var(--reader-accent);transition:width .4s}
#magazine-reader :focus-visible{outline:2px solid var(--reader-accent);outline-offset:4px}.reader-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#magazine-reader:fullscreen{overflow:auto;background:#f4f2ed}#magazine-reader:fullscreen #reader-stage{height:calc(100dvh - 258px)}
.reader-turn{position:absolute;top:0;z-index:2;pointer-events:none;backface-visibility:hidden;transform-origin:left center;animation:turn-forward .48s ease-in-out forwards}.reader-turn.backward{transform-origin:right center;animation-name:turn-backward}@keyframes turn-forward{to{transform:rotateY(-100deg);filter:brightness(.55)}}@keyframes turn-backward{to{transform:rotateY(100deg);filter:brightness(.55)}}
@media(max-width:700px){.reader-heading{grid-template-columns:1fr 1fr;padding:16px 20px;gap:16px}.reader-title{grid-row:2;grid-column:1/-1}.reader-title h1{font-size:22px}.reader-download{padding:8px 12px;font-size:11px}.reader-back{font-size:11px}.reader-eyebrow{font-size:8px;letter-spacing:1.8px}.reader-meta{padding:14px 20px 0;min-height:32px}.reader-edition,.reader-view-label{display:none}#reader-stage{height:calc(100dvh - 370px);min-height:330px;padding:20px 12px 30px}.reader-toolbar{gap:6px;padding:6px;border-radius:15px}.reader-toolbar button{width:34px;height:36px}.reader-toolbar svg{width:18px;height:18px}.reader-divider{margin:0 2px}.reader-bottom{padding:0 10px 17px;gap:12px}.reader-desktop-hint{display:none}.reader-mobile-hint{display:inline}#magazine-reader:fullscreen #reader-stage{height:calc(100dvh - 288px)}}
@media(max-width:380px){.reader-toolbar{gap:2px}.reader-toolbar button{width:30px}#reader-jump button{width:20px}#reader-zoom{min-width:33px}.reader-toolbar input{width:29px}.reader-heading{padding-inline:15px}}
@media(prefers-reduced-motion:reduce){.reader-turn{animation:none}#magazine-reader *{transition:none!important}}

#magazine-reader [hidden]{display:none!important}


/* Reader Actions & Social / Comments Integration */
.reader-heading-actions{justify-self:end;display:inline-flex;align-items:center;gap:8px}
.reader-action-btn{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;width:fit-content;text-decoration:none;color:var(--reader-ink);border:1px solid #29282722;border-radius:30px;padding:9px 14px;background:#faf9f6;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px rgba(0,0,0,0.03)}
.reader-action-btn:hover{background:#eae5dd;color:var(--reader-accent);border-color:#8f273b40;transform:translateY(-1px)}
.reader-action-btn.active{background:var(--reader-accent);color:#fff;border-color:var(--reader-accent)}
.reader-action-badge{background:var(--reader-accent);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;line-height:1.2}
.reader-action-btn.active .reader-action-badge{background:#fff;color:var(--reader-accent)}

@media(max-width:700px){
    .reader-heading-actions{grid-column:2;justify-self:end;gap:6px}
    .reader-action-btn{padding:8px 10px;font-size:11px}
    .reader-action-btn .btn-text{display:none}
}

/* Reader Page & Selectable TextLayer */
.reader-page {
    position: relative;
    display: inline-block;
    background: #fff;
    box-shadow: 0 3px 5px rgba(40,30,20,0.08), 0 14px 28px rgba(40,30,20,0.11), 0 28px 56px rgba(40,30,20,0.13);
    user-select: text;
    -webkit-user-select: text;
    transition: transform 0.2s ease;
}
.reader-page + .reader-page {
    border-left: 1px solid rgba(0,0,0,0.15);
}
.reader-page canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.reader-page .textLayer {
    position: absolute;
    inset: 0;
    overflow: clip;
    opacity: 1;
    line-height: 1;
    z-index: 2;
    pointer-events: auto;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}
.reader-page .textLayer span,
.reader-page .textLayer br {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}
.reader-page .textLayer ::selection {
    background: rgba(133, 6, 11, 0.35) !important;
    color: transparent !important;
}

.reader-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    height: 38px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: var(--reader-ink);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.reader-mode-btn:hover {
    background: #eee8e1;
    color: var(--reader-accent);
}

@media(max-width:700px){
    #reader-stage { height: calc(100dvh - 220px); min-height: 400px; padding: 12px 8px 20px; }
    .reader-mode-btn { display: none; }
}

/* Comments Drawer High-Contrast & Explicit Color Guarantee */
#reader-comments-drawer {
    background-color: #faf9f6;
    color: #1c1917;
}
.dark #reader-comments-drawer {
    background-color: #171515 !important;
    color: #f5f5f4 !important;
}

#reader-comments-drawer .comment-card {
    background-color: #ffffff;
    border: 1px solid #e7e5e4;
    color: #1c1917;
}
.dark #reader-comments-drawer .comment-card {
    background-color: #242222 !important;
    border-color: #383533 !important;
    color: #f5f5f4 !important;
}

#reader-comments-drawer .comment-user-name {
    color: #1c1917 !important;
}
.dark #reader-comments-drawer .comment-user-name {
    color: #ffffff !important;
}

#reader-comments-drawer .comment-body {
    color: #292524 !important;
}
.dark #reader-comments-drawer .comment-body {
    color: #e7e5e4 !important;
}

#reader-comments-drawer .comment-quote-box {
    background-color: #f5f4f0;
    border-left: 3px solid #85060b;
    color: #44403c;
}
.dark #reader-comments-drawer .comment-quote-box {
    background-color: #2c2927 !important;
    border-left-color: #ef4444 !important;
    color: #d6d3d1 !important;
}

#reader-comments-drawer textarea,
#reader-comments-drawer input[type="text"] {
    background-color: #ffffff;
    color: #1c1917;
    border-color: #d6d3d1;
}
.dark #reader-comments-drawer textarea,
.dark #reader-comments-drawer input[type="text"] {
    background-color: #292625 !important;
    color: #ffffff !important;
    border-color: #44403c !important;
}