:root { color-scheme: light; --mist:#ebe7dc; --ink:#2e3328; --ink-soft:#5e6455; --ink-faint:rgba(46,51,40,.18); --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; }
* { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; background:var(--mist); color:var(--ink); font:16px/1.7 ui-sans-serif,system-ui,sans-serif; } a { color:#3d6b3a; text-underline-offset:3px; } :focus-visible { outline:2px solid #3d6b3a; outline-offset:3px; }
.reader-top { max-width:820px; margin:auto; padding:20px max(18px,env(safe-area-inset-left)); display:flex; flex-wrap:wrap; align-items:center; gap:14px; } .reader-top>a { font:22px var(--serif); text-decoration:none; } .languages { display:flex; gap:4px 14px; flex-wrap:wrap; font-size:13px; } .languages a { padding:4px 0; min-height:30px; } .languages a[aria-current] { font-weight:700; color:var(--ink); }
.reader { max-width:780px; margin:0 auto 50px; padding:30px clamp(18px,5vw,44px); border-radius:16px; background:#faf8f0; } h1 { font:500 clamp(28px,5vw,38px)/1.2 var(--serif); margin:0 0 20px; } h2 { font-size:17px; margin:24px 0 8px; } .ab-lede { font:20px/1.5 var(--serif); color:var(--ink-soft); } p { margin:0 0 16px; overflow-wrap:anywhere; } .page-notes,.ab-section { margin:16px 0; border-top:1px solid var(--ink-faint); padding:10px 0 0; } summary { cursor:pointer; min-height:44px; align-content:center; font-weight:600; } summary h2 { display:inline; font-size:16px; margin:0; } .page-notes[open] summary { margin-bottom:8px; } .ab-links { display:flex; flex-wrap:wrap; gap:8px 18px; } .ab-made { color:var(--ink-soft); font-size:13px; } footer { border-top:1px solid var(--ink-faint); padding-top:16px; margin-top:28px; font-size:14px; }
@media(max-width:600px) { .reader { margin:0 10px 24px; padding:24px 18px; } .reader-top { padding:16px 20px; } }