.look-inside { padding-block:80px; background:#e9edde; }
.reader [hidden] { display:none!important; }
.reader-picker[hidden] { display:none!important; }
.reader-layout { display:grid; grid-template-columns:205px minmax(0,1fr); gap:30px; align-items:start; }
.reader-layout:has(.reader-picker[hidden]) { grid-template-columns:1fr; }
.reader-layout .reader { width:100%; min-width:0; }
.reader-picker-title { font-size:.9375rem; color:var(--ink); margin-bottom:13px; font-weight:700; }
.reader-section-list { display:flex; flex-direction:column; gap:2px; }
.reader-section-list button { font:inherit; font-size:.9375rem; text-align:left; line-height:1.4; border:1px solid transparent; border-radius:5px; padding:12px; background:transparent; color:var(--ink); cursor:pointer; transition:background 160ms ease; }
.reader-section-list button:hover { background:#dde5d1; }
.reader-section-list button[aria-pressed=true] { background:#244c3b; color:#fff; border-color:#244c3b; }
.reader-picker-note { font-size:.8125rem; line-height:1.65; color:var(--muted); margin:23px 12px 0; }
.reader-mobile-picker { display:none; }
.reader[data-loading] .reader-spread { opacity:.65; }
.reader-section small { max-width:340px; }
@media(max-width:1000px) { .reader-layout { grid-template-columns:175px minmax(0,1fr); gap:20px; } .reader-section-list button { font-size:.875rem; padding:10px; } }
@media(max-width:700px) { .reader-layout { grid-template-columns:1fr; gap:22px; } .reader-section-list,.reader-picker-title,.reader-picker-note { display:none; } .reader-mobile-picker { display:block; color:var(--ink); font-size:.9375rem; font-weight:700; } .reader-mobile-picker select { display:block; appearance:auto; width:100%; padding:13px 12px; margin-top:10px; font:inherit; font-weight:400; border:1px solid #81917d; border-radius:6px; color:#163e31; background:#f7f8ef; } }
.reader-heading { display:flex; justify-content:space-between; align-items:end; gap:35px; margin-bottom:32px; }
.reader-heading p { color:var(--muted); line-height:1.7; max-width:480px; margin-top:18px; }
.reader-section { font-family:var(--serif); font-size:1.25rem; color:var(--green); }
.reader-section small { display:block; margin-top:8px; font-family:var(--sans); font-size:.875rem; color:var(--muted); }
.reader { max-width:960px; margin-inline:auto; }
.reader-spread { position:relative; display:grid; grid-template-columns:1fr 1fr; perspective:2200px; isolation:isolate; filter:drop-shadow(3px 16px 15px #263b2526); }
.reader-slot { min-width:0; aspect-ratio:2/3; background:#fff; position:relative; }
.reader-slot:first-child { border-radius:3px 0 0 3px; }
.reader-slot:last-of-type { border-radius:0 3px 3px 0; }
.reader-slot:after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#0000 90%,#21321e15); }
.reader-slot:nth-child(2):after { background:linear-gradient(90deg,#21321e12,#0000 10%); }
.reader-page-button { display:block; border:0; padding:0; width:100%; height:100%; background:#fff; cursor:zoom-in; }
.reader-page-button img,.turn-face img { display:block; width:100%; height:100%; object-fit:contain; }
.reader-page-button:focus-visible { outline:3px solid #936b3e; outline-offset:4px; position:relative; z-index:2; }
.reader-note { height:100%; display:flex; flex-direction:column; justify-content:center; align-items:start; padding:clamp(20px,4vw,55px); background:#f2f3e8; }
.reader-note h3 { font-size:clamp(1.65rem,3vw,2.5rem); line-height:1.2; letter-spacing:-.025em; }
.reader-note p { color:var(--muted); line-height:1.7; margin-top:22px; font-size:clamp(.875rem,1.3vw,1rem); }
.reader-note p { white-space:pre-line; }
.reader-note .text-button { margin-top:22px; }
.reader-controls { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:25px; }
.reader-controls button,.reader-zoom-close { font:inherit; border:1px solid #81917d; border-radius:7px; background:#f7f8ef; color:#163e31; min-height:46px; padding:10px 19px; cursor:pointer; transition:background 160ms ease; }
.reader-controls button:hover:not(:disabled),.reader-zoom-close:hover { background:#d9e2ce; }
.reader-controls button:disabled { opacity:.42; cursor:default; }
.reader-status { color:var(--ink); font-size:.875rem; text-align:center; }
.reader-hint { text-align:center; color:var(--muted); font-size:.875rem; margin-top:19px; line-height:1.6; }
.reader-error { margin-block:20px; color:#713e25; }
.turn-leaf { position:absolute; top:0; width:50%; height:100%; transform-style:preserve-3d; z-index:5; pointer-events:none; }
.turn-face { position:absolute; inset:0; backface-visibility:hidden; background:#fff; overflow:hidden; }
.turn-face:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#20311f1c,#0000 18%,#0000 70%,#20311f10); }
.turn-back { transform:rotateY(180deg); }
.reader-text { max-width:780px; margin:34px auto 0; border-top:1px solid var(--line); padding-top:20px; }
.reader-text summary { cursor:pointer; color:var(--green); padding:10px 0; }
.reader-text h3 { margin-top:28px; font-size:1.2rem; }
.reader-text p { white-space:pre-line; line-height:1.8; margin-top:18px; }
.reader-zoom { width:min(1100px,96vw); max-width:none; height:94dvh; max-height:94dvh; padding:0; border:0; border-radius:8px; background:#e9edde; }
.reader-zoom::backdrop { background:#10271ddd; }
.reader-zoom-bar { position:sticky; top:0; z-index:2; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; background:#e9edde; border-bottom:1px solid var(--line); }
.reader-zoom-body { padding:20px; overflow:auto; max-height:calc(94dvh - 72px); }
.reader-zoom-actions { display:flex; gap:8px; }
.reader-zoom-fit { display:none; font:inherit; border:1px solid #81917d; border-radius:7px; padding:8px 12px; background:transparent; color:var(--ink); }
.reader-zoom-body img { display:block; width:100%; max-width:100%; height:auto; margin:auto; background:#fff; }
body.reader-zoom-open { overflow:hidden; }
@media(max-width:700px) { .reader-zoom-fit { display:block; } .reader-zoom-body { max-height:calc(100dvh - 70px); overscroll-behavior:contain; } .reader-zoom-body.is-enlarged img { width:760px; max-width:none; } }
@media(max-width:700px) { .look-inside { padding-block:48px; } .reader-heading { display:block; } .reader-section { margin-top:24px; } .reader-spread { grid-template-columns:1fr; max-width:460px; margin-inline:auto; } .reader-slot:nth-child(2) { display:none; } .reader-slot:after { display:none; } .turn-leaf { width:100%; } .reader-controls { gap:8px; } .reader-controls button { padding:10px 12px; font-size:.875rem; } .reader-status { font-size:.8125rem; } .reader-zoom { width:100vw; height:100dvh; max-height:100dvh; border-radius:0; } .reader-zoom-body { padding:8px; } .reader-zoom-bar { padding:10px 14px; } }
@media(prefers-reduced-motion:reduce) { .reader-controls button { transition:none; } }