:root { --bg:#fbfaf6; --fg:#171713; --muted:#68665f; --rule:#c9c5b9; --accent:#8b1e1e; --loved:#286a3b; --good:#34688a; --down:#943b35; color-scheme:light dark; } @media (prefers-color-scheme:dark) { :root { --bg:#171714; --fg:#eeeae0; --muted:#aaa69b; --rule:#4c4a44; --accent:#ef8c82; --loved:#75c58a; --good:#75aed0; --down:#e5867d; } } * { box-sizing:border-box; } body { margin:0 auto; padding:0 1rem; background:var(--bg); color:var(--fg); font:1rem/1.55 Georgia,serif; } a { color:var(--accent); } .masthead { max-width:72ch; margin:1.5rem auto .4rem; border-block:3px double var(--fg); padding:.45rem 0; text-align:center; font-size:2rem; font-weight:700; } .masthead a { color:inherit; text-decoration:none; } .primary,.admin,footer { max-width:72ch; margin:.7rem auto; text-align:center; color:var(--muted); } .admin { max-width:1200px; font-family:system-ui,sans-serif; } .flash { max-width:72rem; margin:1rem auto; padding:.75rem 1rem; border:1px solid var(--rule); } main { min-height:70vh; } .reading { max-width:72ch; margin:2rem auto; } .narrow { max-width:34rem; } .dateline,.stats,.byline,.comments,.strap,.meta,.social,.index-meta { color:var(--muted); } .issue section { border-top:1px solid var(--rule); margin-top:2rem; } .issue article { border-bottom:1px solid var(--rule); padding:.4rem 0 .8rem; } .issue .lead h3 { font-size:1.45rem; } .comments a,.downloads a { margin-right:.8rem; } .downloads { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0; } .button { border:1px solid currentColor; padding:.45rem .7rem; text-decoration:none; } .index-list { list-style:none; padding:0; } .index-entry { border-bottom:1px solid var(--rule); padding:.5rem 0 1rem; } .index-entry h3 { margin-bottom:.1rem; } .index-entry p { margin:.35rem 0; } .issue-chapters { border-block:1px solid var(--rule); margin:2rem 0; padding:1rem 0; text-align:center; font-size:1.15rem; } .colophon { max-width:none; margin:2rem 0; text-align:left; } .rule { border:0; border-top:1px solid var(--rule); margin:1.5rem 0; } .article-header h1 a { color:inherit; } .article-body img { display:block; max-width:100%; height:auto; margin:1rem auto; } .article-body pre { max-width:100%; overflow-x:auto; } .discussion { border-top:1px solid var(--rule); margin-top:2rem; padding-top:1rem; } .discussion blockquote { border-left:2px solid var(--rule); margin-left:.5rem; padding-left:1rem; } .discussion blockquote.reply { margin-left:1.5rem; } .comment-meta { color:var(--muted); font-size:.9rem; } .prev-next { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0; } .prev-next a:last-child { text-align:right; } form { display:grid; gap:.8rem; margin:1.5rem 0; } label { display:grid; gap:.25rem; } input,textarea,button { font:inherit; padding:.45rem; } .error { color:var(--down); } .dashboard { max-width:1200px; margin:2rem auto; font-family:system-ui,sans-serif; } .scroll-x { overflow-x:auto; } table { width:100%; border-collapse:collapse; font:0.9rem/1.35 system-ui,sans-serif; } th,td { border-bottom:1px solid var(--rule); padding:.35rem .5rem; text-align:left; } thead { position:sticky; top:0; background:var(--bg); } .badge { border:1px solid currentColor; border-radius:999px; padding:.1rem .45rem; } .badge.selected,.badge.loved { color:var(--loved); } .badge.good,.badge.assessed,.badge.triaged { color:var(--good); } .badge.down,.badge.excluded { color:var(--down); } .badge.shortlisted,.badge.admitted,.badge.eligible,.badge.cleared { color:var(--muted); } .kv { display:grid; grid-template-columns:minmax(10rem,1fr) 3fr; } .kv dt { color:var(--muted); } .funnel > * { background:var(--good); min-width:1px; margin:.2rem 0; } .spark { max-width:100%; height:auto; } .rating { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; } .rating button { border:1px solid var(--rule); background:transparent; color:var(--fg); cursor:pointer; } .rating button.active { background:var(--fg); color:var(--bg); border-color:var(--fg); } .rating button.clear { border:0; color:var(--muted); padding-inline:.25rem; text-decoration:underline; } .rating button.clear.active { background:transparent; color:var(--fg); font-weight:700; } .rating-prompt { margin-right:.25rem; } .rating-note { flex-basis:100%; } @media (max-width:40rem) { .masthead { font-size:1.55rem; } .kv { display:block; } }