:root { color-scheme: light; --ink: #292923; --muted: #64645a; --accent: #75531a; --line: #deded4; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fafaf6; color: var(--ink); font: 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.page { max-width: 1040px; margin: auto; padding: 56px 32px 28px; }
header { padding-bottom: 28px; }
h1 { margin: 0 0 8px; color: var(--accent); font: bold clamp(36px, 5vw, 48px)/1.15 Georgia, serif; letter-spacing: -1.5px; }
.tagline { margin: 0; font-size: 20px; }
.intro { margin: 8px 0 0; max-width: 650px; color: var(--muted); }
nav { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 18px 0; border-block: 1px solid var(--line); font-size: 14px; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #322309; text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.skip { position: absolute; top: -100px; left: 16px; background: white; padding: 8px 16px; }
.skip:focus { top: 12px; }
main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 64px; padding: 36px 0 40px; }
section { scroll-margin-top: 24px; }
h2 { margin: 0 0 14px; font: bold 24px/1.3 Georgia, serif; }
ul { list-style: none; padding: 0; margin: 0; }
li { margin: 0 0 13px; }
li a { font-weight: 550; text-decoration: none; }
.description { display: block; color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 2px; }
footer { border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); font-size: 13px; }
footer p { margin: 0; }
.quote { color: var(--muted); font-family: Georgia, serif; max-width: 650px; }
@media (max-width: 640px) { .page { padding: 32px 22px 24px; } main { grid-template-columns: 1fr; gap: 30px; padding-top: 28px; } nav { gap: 8px 18px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

main { display: block; padding-top: 30px; }
.brand { display: inline-block; margin-bottom: 22px; font: bold 22px/1.3 Georgia, serif; text-decoration: none; }
h1 { max-width: 850px; overflow-wrap: break-word; }
.top-ad { margin-bottom: 28px; }
.top-ad img, .reading img { max-width: 100%; height: auto; }
.alphabet { gap: 5px; }
.alphabet a { min-width: 36px; padding: 6px 10px; text-align: center; border-radius: 3px; }
.alphabet a[aria-current] { font-weight: bold; background: #eee8dc; }
.notice { max-width: 800px; border-left: 3px solid var(--line); padding: 10px 16px; color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.reading { max-width: 760px; font: 20px/1.75 Georgia, serif; overflow-wrap: break-word; }
.reading p { margin: 0 0 1.2em; }
.reading table { display: block; max-width: 100%; overflow-x: auto; }
.ranges { margin-bottom: 24px; font-size: 14px; line-height: 2; }
.entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; }
.entries > a { display: block; padding: 7px 0; text-decoration: none; overflow-wrap: anywhere; }
.entries > br { display: none; }
.entries > p { grid-column: 1 / -1; margin: 18px 0 0; }
.article-day { max-width: 760px; font: 22px/1.7 Georgia, serif; }
.collection-note { max-width: 760px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.extras { margin: 28px 0; }
.back { margin-top: 32px; font-size: 14px; }
@media(max-width: 800px) { .entries { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(max-width: 480px) { .entries { grid-template-columns: 1fr; } .reading { font-size: 19px; } }