/* Responsive book shelf, aligned with the work and games sections. */
.reading{padding-top:55px;padding-bottom:65px}
.reading-heading{margin-bottom:30px}
.reading-year{margin-left:auto;color:var(--muted);font-size:13px;letter-spacing:.12em}
.reading-shelf{--book-count:3;--book-offset:6;--book-gap:clamp(16px,4vw,64px);position:relative}
.reading-window{overflow:hidden;padding:12px 0 0;touch-action:pan-y}
.reading-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--book-count) - 1) * var(--book-gap))/var(--book-count));gap:var(--book-gap);transform:translateX(calc(-1 * var(--book-offset) * (100% + var(--book-gap))/var(--book-count)));transition:transform 380ms cubic-bezier(.2,.65,.3,1)}
.reading-book{min-width:0;text-align:center;position:relative}
.reading-status{height:32px;margin:0 0 17px;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1.5;letter-spacing:.05em;color:var(--muted)}
.reading-book[data-state="current"] .reading-status{color:var(--amber)}
.reading-book[data-state="current"] .reading-status:before{content:"";width:6px;height:6px;background:var(--amber);margin-right:9px;flex-shrink:0;box-shadow:8px 0 0 #ffc66330}
.reading-cover{position:relative;display:block;width:min(100%,230px);aspect-ratio:2/3;margin:0 auto 25px;padding:0;border:0;border-radius:0;background:#131518;box-shadow:7px 7px 0 #000;cursor:pointer;transition:box-shadow 220ms ease}
.reading-cover img{display:block;width:100%;height:100%;object-fit:fill}
.reading-cover:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0004,transparent 4%,#fff1 5%,transparent 7%);border:1px solid #ffffff16}
.reading-cover:hover{box-shadow:7px 7px 0 #000,0 0 0 1px var(--muted)}


.reading-book h3{font-size:clamp(12px,1.3vw,18px);font-weight:500;line-height:1.5;margin:0 auto 7px;max-width:280px;min-height:3em;overflow-wrap:anywhere}
.reading-author{color:var(--muted);font-size:12px;line-height:1.6;margin:0}
.reading-empty .reading-cover{border:1px dashed #42443f;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;background:repeating-linear-gradient(0deg,transparent,transparent 11px,#ffffff03 11px,#ffffff03 12px);cursor:default;color:#65655f}
.reading-empty .reading-cover:after{display:none}
.reading-question{font-family:Pixel,monospace;font-size:clamp(28px,4vw,56px);color:var(--amber);line-height:1}
.reading-empty-caption{font-size:11px;line-height:1.7;color:var(--muted);padding:0 10px}
.reading-start{display:flex;justify-content:center;align-items:center;flex-direction:column;color:#55585b;font-size:12px;gap:12px;padding-bottom:65px}
.reading-start strong{font-family:Pixel,monospace;font-size:clamp(15px,2.5vw,30px);font-weight:400;color:#7d8083}
.reading-controls{border-top:0;margin-top:24px;padding-top:0;display:flex;align-items:center;justify-content:flex-end;gap:16px}
.reading-history-label{font-size:12px;color:var(--muted)}
.reading-buttons{display:flex;align-items:center;gap:10px}
.reading-arrow{display:flex;align-items:center;justify-content:center;min-width:48px;height:44px;padding:0 10px;border:1px solid var(--line);background:transparent;color:var(--amber);cursor:pointer;font-size:25px;line-height:1}
.reading-arrow:hover:not(:disabled){border-color:var(--amber);background:#ffc66309}
.reading-arrow:disabled{opacity:.25;cursor:default}
.reading-reset{border:0;background:none;color:var(--cyan);font-size:12px;padding:10px 6px;cursor:pointer;min-height:44px}
.reading-reset[hidden]{display:none}
.reading-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:640px){.reading{padding:38px 0 45px}.reading-heading{gap:12px;margin-bottom:20px}.reading-heading h2{font-size:16px}.reading-year{font-size:11px}.reading-shelf{--book-gap:13px}.reading-status{font-size:9px;height:32px;margin-bottom:10px;letter-spacing:0}.reading-book[data-state="current"] .reading-status:before{width:4px;height:4px;margin-right:6px;box-shadow:none}.reading-cover{margin-bottom:18px;box-shadow:3px 3px 0 #000}.reading-book h3{font-size:11px;line-height:1.45;min-height:4.35em}.reading-author{font-size:10px}.reading-empty-caption{font-size:9px;padding:0 5px}.reading-empty .reading-cover{gap:16px}.reading-start{font-size:10px;padding-bottom:80px}.reading-controls{margin-top:20px;padding-top:0;gap:8px}.reading-history-label{font-size:10px}.reading-buttons{gap:6px}.reading-arrow{min-width:42px}.reading-reset{font-size:10px}.reading-start span{text-align:center}}
@media(prefers-reduced-motion:reduce){.reading-track,.reading-cover{transition:none}}
body.paused .reading-track{transition:none}

@media(min-width:900px){.reading-shelf{--book-count:4;--book-offset:6;--book-gap:clamp(24px,3vw,48px)}.reading-cover{width:100%}}

.reading-book[data-state="current"] .reading-status:before{animation:reading-pulse 1.8s ease-in-out infinite}
@keyframes reading-pulse{0%,100%{opacity:1;filter:drop-shadow(0 0 3px var(--amber))}50%{opacity:.22;filter:none}}
@media(prefers-reduced-motion:reduce){.reading-book[data-state="current"] .reading-status:before{animation:none}}
body.paused .reading-book[data-state="current"] .reading-status:before{animation:none}

.reading-cover:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.reading-details{position:absolute;z-index:5;box-sizing:border-box;padding:44px 23px 20px;background:linear-gradient(150deg,#181b1bee,#080909fc 65%),repeating-linear-gradient(0deg,transparent 0 3px,#fff1 3px 4px);border:1px solid #b3945355;border-top:2px solid var(--amber);box-shadow:0 12px 36px #0008;display:flex;flex-direction:column;text-align:left;overflow:auto;cursor:pointer;animation:reading-details-in 180ms ease-out}
.reading-details[hidden]{display:none}
.reading-details-close{position:absolute;top:4px;right:4px;width:40px;height:36px;padding:0;border:0;background:transparent;color:var(--muted);font:26px/1 monospace;cursor:pointer}
.reading-details-close:hover,.reading-details-close:focus-visible{color:var(--amber)}
.reading-details-eyebrow{color:var(--amber);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.reading-details h3{font-size:17px;line-height:1.4;font-weight:500;color:var(--text,#eee);margin:0 0 16px}
.reading-details-text{font-size:13px;line-height:1.75;color:#d0d1ca;margin:0 0 18px}
.reading-details-hint{margin-top:auto;padding-top:10px;color:#858980;font-size:10px;line-height:1.5}
@keyframes reading-details-in{from{opacity:0}to{opacity:1}}
@media(min-width:641px) and (max-width:1050px){.reading-details{padding:35px 14px 12px}.reading-details h3{font-size:14px;margin-bottom:10px}.reading-details-text{font-size:11px;line-height:1.6}.reading-details-eyebrow{margin-bottom:8px}.reading-details-hint{font-size:9px}}
@media(max-width:640px){.reading-details{padding:24px 42px 20px 22px}.reading-details h3{font-size:16px;margin-bottom:12px}.reading-details-eyebrow{margin-bottom:8px}.reading-details-text{font-size:13px;line-height:1.65}.reading-details-hint{font-size:10px}}
@media(prefers-reduced-motion:reduce){.reading-details{animation:none}}
body.paused .reading-details{animation:none}

.reading-start .hero-leek{width:min(100%,245px);height:270px;aspect-ratio:auto;flex-shrink:0;margin:0 auto 8px}
.reading-start .leek-play-icon{right:5%;bottom:5%}
.reading-start{padding-bottom:35px}
@media(max-width:640px){.reading-start .hero-leek{width:100%;height:120px;margin-bottom:0}.reading-start{padding-bottom:48px;gap:8px}.reading-start span:not(.leek-frames):not(.leek-play-icon){font-size:9px;line-height:1.6}}

/* Align the caption with the face at x=400 in the -40..640 sprite viewport. */
.reading-start-caption{width:min(100%,245px);transform:translateX(14.7059%);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
@media(max-width:640px){.reading-start-caption{gap:8px}.reading-start-caption>span{max-width:85%}}

/* Older memories form a separate undated shelf to the left of 2026. */
.reading-before{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;padding-bottom:65px;color:var(--muted);font-size:12px;line-height:1.8}
.reading-before strong{font-family:Pixel,monospace;font-size:clamp(14px,2vw,24px);font-weight:400;color:#aaa}
.reading-start-caption{transform:none}
.reading-arrow[data-end="true"]{opacity:.25;cursor:default}
.reading-arrow[data-end="true"]:hover{border-color:var(--line);background:none}
.reading-end-egg{position:fixed;right:12px;bottom:0;width:min(245px,42vw);z-index:80;line-height:0}
.reading-end-egg[hidden]{display:none}
.reading-end-egg .hero-leek{width:100%;height:auto;aspect-ratio:680/627;margin:0}
@media(max-width:640px){.reading-before{font-size:9px;gap:12px}.reading-before strong{font-size:14px}}

.reading-forgot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding-bottom:65px;text-align:center;color:var(--muted);font-size:12px}
.reading-forgot strong{font-family:Pixel,monospace;font-size:clamp(24px,4vw,48px);font-weight:400;color:#aaa}
@media(max-width:640px){.reading-forgot{font-size:10px;gap:12px}.reading-book[data-era="undated"] .reading-status{font-size:8px}}

.reading-arrow[data-start="true"]{opacity:.25;cursor:default}
.reading-arrow[data-start="true"]:hover{border-color:var(--line);background:none}

/* The reward belongs to the oldest card, directly below its final words. */
.reading-forgot{justify-content:flex-start;padding-top:49px;padding-bottom:0;gap:14px}
.reading-forgot .reading-end-egg{position:relative;inset:auto;width:100%;z-index:auto;margin:5px auto 0;min-height:0}
.reading-memory-direction{margin-top:24px;line-height:1.7;color:var(--muted)}
@media(max-width:640px){.reading-forgot{padding-top:42px;gap:10px}.reading-memory-direction{margin-top:16px;font-size:10px}}

.reading-forgot > strong,.reading-forgot > span,.reading-memory-direction{color:var(--amber)}
.reading-memory-direction{display:inline-block;animation:memory-direction-nudge 4.6s ease-in-out infinite}
@keyframes memory-direction-nudge{0%,75%,100%{transform:translateX(0)}81%,93%{transform:translateX(-2px)}87%{transform:translateX(1px)}}
@media(prefers-reduced-motion:reduce){.reading-memory-direction{animation:none}}

.reading-tabs{display:flex;gap:6px 22px;flex-wrap:wrap;margin:0 0 30px;border-bottom:1px solid var(--line)}
.reading-tabs button{position:relative;border:0;background:none;color:var(--muted);padding:12px 0 15px;font-size:12px;cursor:pointer;white-space:nowrap;min-height:44px}
.reading-tabs button:hover,.reading-tabs button[aria-selected="true"]{color:var(--amber)}
.reading-tabs button[aria-selected="true"]:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--amber)}
.reading-tabs button:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.reading-track>[hidden]{display:none}
@media(max-width:640px){.reading-tabs{gap:0 18px;margin-bottom:18px}.reading-tabs button{font-size:11px;padding:10px 0 12px}}

/* Readable shelf metadata; preserve cover sizes and nostalgic headings. */
.reading-status{font-size:12px;letter-spacing:0}
.reading-author{font-size:13px}
.reading-tabs button{font-size:13px}
@media(max-width:640px){.reading-status,.reading-book[data-era="undated"] .reading-status{font-size:11px}.reading-author{font-size:11px}.reading-tabs button,.reading-reset{font-size:12px}}