/* An editorial reading surface for the Walter Beuttler archive. */
:root { --bg-page:#faf8f3; --bg-color:#faf8f3; --container-width:1100px; }
:root[data-theme="dark"] { --bg-page:#1e1b18; --bg-color:#1e1b18; }
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg-page:#1e1b18;--bg-color:#1e1b18;}}
* { box-sizing:border-box; }
.container { margin:0 auto; padding:28px 40px 40px; box-shadow:none; border-radius:0; }
header { display:flex; align-items:center; justify-content:space-between; gap:28px; padding-bottom:22px; margin-bottom:36px; text-align:left; }
.site-name { font-family:'Merriweather',serif; font-size:22px; color:var(--primary-color); text-decoration:none; line-height:1.3; flex-shrink:0; }
.site-name span { display:block; font:12px/1.6 'Open Sans',sans-serif; color:var(--text-muted); letter-spacing:.1em; text-transform:uppercase; margin-top:5px; }
header nav ul { gap:18px; }
header nav ul li a { font-size:14px; text-transform:none; letter-spacing:0; }
header nav ul li a.active { border-bottom:1px solid var(--primary-color); }
.announcement-bar { position:relative; font-size:14px; padding:9px 40px; }
h1 { font-size:clamp(30px,4vw,44px); text-align:left; line-height:1.3; margin:0 0 24px; }
h2 { line-height:1.4; }
.archive-intro { padding:24px 0 36px; border-bottom:1px solid var(--cream-border); }
.archive-intro h1 { font-size:clamp(42px,6vw,70px); letter-spacing:-.04em; margin:8px 0 12px; }
.archive-intro p { margin:0 0 18px; max-width:610px; font-size:17px; line-height:1.8; }
.archive-intro .eyebrow { font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--primary-color); }
.archive-intro .intro-deck { font-family:'Merriweather',serif; font-size:clamp(21px,3vw,28px); color:var(--heading-color); }
.intro-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:26px; }
.intro-actions a { font-size:15px; font-weight:600; }
.primary-link { display:inline-block; color:#fff; background:var(--primary-bg); padding:12px 20px; text-decoration:none; }
.primary-link:hover { color:#fff; background:var(--primary-bg-hover); }
.start-reading { padding:26px 0 32px; border-bottom:1px solid var(--cream-border); margin-bottom:42px; }
.start-reading h2 { font-size:20px; margin:0 0 18px; }
.reading-links { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.reading-links a { text-decoration:none; color:var(--heading-color); }
.reading-links span { display:block; font-size:13px; color:var(--text-muted); margin-bottom:8px; }
.reading-links strong { font:700 18px/1.5 'Merriweather',serif; }
.reading-links a:hover strong { color:var(--primary-color); text-decoration:underline; }
.testimony-title,.testimony-subtitle { max-width:720px; margin-left:auto; margin-right:auto; }
.testimony-title { font-size:28px; margin-bottom:8px; }
main > p.testimony-subtitle { font-size:15px; color:var(--text-muted); margin-bottom:24px; }
main > p.testimony-subtitle::first-letter { float:none; font:inherit; padding:0; color:inherit; }
main > p { max-width:720px; }
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--primary-color); outline-offset:5px; }
footer { margin-top:48px; }
@media(max-width:900px){header { flex-wrap:wrap; }header nav { margin-left:auto; }header nav ul { gap:12px; }}
@media(max-width:768px){
.container { padding:20px; margin:0; }
header { flex-wrap:nowrap; gap:12px; margin-bottom:26px; padding-bottom:18px; position:relative; }
.site-name { font-size:20px; }
header nav { margin:0; }
.menu-toggle { margin:0; width:44px; height:44px; }
header nav ul.open { position:absolute; top:100%; left:0; right:0; z-index:20; background:var(--bg-color); padding:18px; border:1px solid var(--cream-border); box-shadow:0 10px 20px #0001; }
header nav ul li a { display:block; padding:7px; }
.announcement-bar { font-size:12px; line-height:1.5; padding:8px 36px 8px 12px; }
.archive-intro { padding:4px 0 26px; }
.archive-intro p { font-size:16px; }
.intro-actions { gap:16px; margin-top:20px; }
.reading-links { grid-template-columns:1fr; gap:18px; }
.reading-links span { margin-bottom:3px; }
.start-reading { padding:22px 0; margin-bottom:32px; }
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important;}}
.skip-link { position:absolute; top:0; left:16px; transform:translateY(-200%); z-index:100; background:var(--bg-color); padding:12px 20px; }
.skip-link:focus { transform:translateY(0); }
.archive-intro { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:44px; align-items:center; }
.archive-portrait { margin:0; }
.archive-portrait img { display:block; width:100%; height:auto; filter:var(--img-dim); }
.archive-portrait figcaption { font-size:12px; color:var(--text-muted); margin-top:8px; }
.messages-page .intro { text-align:left; font-style:normal; font-family:'Open Sans',sans-serif; font-size:17px; margin:0 0 24px; max-width:720px; }
.messages-page .book-banner { padding:12px 16px; margin:0 0 28px; }
.messages-page .book-banner img { max-height:64px; width:auto; }
details.transcriber-note { padding:12px 18px; margin-bottom:22px; }
.transcriber-note summary { cursor:pointer; font-size:14px; font-weight:600; }
.transcriber-note p { margin:12px 0 0; }
.transcript-actions { display:flex; flex-wrap:wrap; gap:12px 22px; margin-bottom:26px; }
.transcript-actions a { margin:0; font-size:15px; }
@media(max-width:768px){.archive-intro { grid-template-columns:1fr; gap:24px; }.archive-portrait { max-width:180px; }.archive-portrait img{width:100%;}.messages-page h1{margin-bottom:14px}.messages-page .intro{font-size:16px}.messages-page .book-banner{margin-bottom:20px}.transcript-byline{font-size:15px;margin-bottom:20px}}