:root { color-scheme:light; --paper:#faf7f0; --ink:#24211d; --teal:#2f5d62; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-padding-top:65px; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
button,input,select { font:inherit; }
button,a,input,select { touch-action:manipulation; }
button,select,input { min-height:44px; border:1px solid #d7d0c5; border-radius:10px; padding:8px 12px; background:#fffdf8; color:var(--ink); }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.55; }
a { color:var(--teal); }
:focus-visible { outline:3px solid #e6ae4b; outline-offset:3px; }
.skip-link { position:fixed; top:-100px; z-index:20; background:white; padding:12px; }
.skip-link:focus { top:0; }
.site-header { position:sticky; top:0; z-index:10; border-bottom:1px solid #e5ded2; background:var(--paper); padding:7px max(12px,calc((100vw - 680px)/2)); }
.topline { display:flex; align-items:center; gap:10px; }
.brand { font-weight:750; text-decoration:none; white-space:nowrap; }
.variant { color:#746d62; font-size:11px; margin-right:auto; white-space:nowrap; }
#account-toggle { font-size:13px; padding:7px 10px; }
.account-menu { border:1px solid #d7d0c5; padding:12px; border-radius:12px; margin-top:8px; }
.account-menu p { overflow-wrap:anywhere; margin-top:0; }
.account-menu a { display:inline-block; margin:8px; }
main { max-width:680px; margin:auto; padding:0 10px 36px; }
.intro { margin:14px 4px; color:#6b6458; font-size:13px; }
.scroll-card { margin:0 0 22px; background:#fffdf8; border:1px solid #ddd5c8; border-radius:16px; overflow:hidden; content-visibility:auto; contain-intrinsic-size:auto 650px; }
.card-media { background:#000; color:#fff; }
.image-stage { border:0; border-radius:0; padding:0; background:#000; color:white; cursor:zoom-in; position:relative; display:grid; place-items:center; aspect-ratio:1/1; width:100%; overflow:hidden; }
.image-stage img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; min-width:0; }
.card-text { padding:clamp(22px,7vw,44px) clamp(16px,5vw,34px); }
.poem-lines { font:clamp(17px,4.5vw,20px)/1.65 Georgia,"Times New Roman",serif; margin:0; }
.poem-line { display:block; white-space:pre-wrap; overflow-wrap:anywhere; padding-left:1.15em; text-indent:-1.15em; }
.poem-title { font:600 20px/1.35 Georgia,serif; margin:0 0 22px; overflow-wrap:anywhere; }
.card-caption { padding:16px 20px 20px; text-align:center; font:15px/1.5 Georgia,serif; overflow-wrap:anywhere; }
.card-caption span { display:block; }
.card-caption .source-label { font-style:italic; font-size:14px; opacity:.85; }
.card-caption .book-name { font-style:italic; opacity:.85; }
.votes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:10px; }
.vote-button { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:60px; padding:7px 2px; font-size:11px; white-space:nowrap; }
.vote-button .emoji { font-size:24px; line-height:1.2; }
.vote-button[aria-pressed="true"] { border:2px solid var(--teal); background:#e5f0ed; opacity:1; }
.card-status { font-size:13px; padding:0 12px; margin:0; min-height:0; color:var(--teal); }
.card-status:not(:empty) { padding-bottom:9px; }
.card-details { font-size:13px; border-top:1px solid #ece5db; padding:9px 13px; overflow-wrap:anywhere; }
.card-details summary { cursor:pointer; min-height:28px; }
.card-details p { margin:8px 0; }
.card-details a { display:inline-block; min-height:44px; padding:10px 0; }
.video-stage { min-height:300px; display:grid; place-items:center; }
.video-stage video,.video-stage iframe { width:100%; border:0; aspect-ratio:16/9; }
.video-stage button { margin:30px; }
.feed-footer { text-align:center; padding:6px 10px 40px; overflow-anchor:none; }
.feed-footer button { min-width:150px; }
@media(min-width:760px) { main { padding-top:8px; } .scroll-card { margin-bottom:28px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Interior pages use their full available width without cropping any source pixels. */
.interior-stage { display:block; aspect-ratio:auto; }
.interior-stage img { position:static; height:auto; aspect-ratio:auto 1 / 1; }
.image-stage:focus-visible { outline-offset:-4px; }
#image-viewer { position:fixed; inset:0; margin:0; width:100vw; max-width:none; height:100dvh; max-height:none; padding:0; border:0; background:#000; color:white; overflow:hidden; }
#image-viewer[open] { display:flex; flex-direction:column; }
#image-viewer::backdrop { background:#000; }
.image-viewer-toolbar { display:flex; align-items:center; gap:6px; padding:calc(8px + env(safe-area-inset-top)) 8px 8px; flex-shrink:0; }
#image-viewer-title { flex:1; min-width:0; font-size:13px; overflow-wrap:anywhere; }
.image-viewer-toolbar button { flex-shrink:0; min-width:44px; padding:8px; }
#image-zoom-status { margin:0; padding:0 12px 8px; font-size:12px; flex-shrink:0; }
#image-viewport { flex:1; min-height:0; overflow:auto; touch-action:pan-x pan-y pinch-zoom; overscroll-behavior:contain; padding-bottom:env(safe-area-inset-bottom); }
#enlarged-image { display:block; width:100%; max-width:none; height:auto; }