/* Article preferences are explicit and independent of device appearance. */
:root[data-reading-mode="light"] {
  color-scheme: light;
  --bg: #faf8f3;
  --bg-2: #f0ece4;
  --ink: #252b32;
  --ink-2: #424953;
  --ink-3: #646b72;
  --line: rgba(37,43,50,.19);
  --amber: #8b4b0d;
  --green: #3f6724;
}
:root[data-reading-mode="dark"] {
  color-scheme: dark;
  --bg: #0d1420;
  --bg-2: #131c2b;
  --ink: #f4efe6;
  --ink-2: #c3bdb2;
  --ink-3: #a6a297;
  --line: rgba(244,239,230,.18);
  --amber: #f0a742;
  --green: #7cb342;
}
.reading-mode { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 24px; font:500 13px/1.25 Inter,system-ui,sans-serif; color:var(--ink-3); }
.reading-mode[hidden] { display:none; }
.reading-mode-options { display:flex; padding:3px; gap:3px; border:1px solid var(--line); border-radius:999px; background:var(--bg-2); }
.reading-mode button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:8px 14px; border:1px solid transparent; border-radius:999px; color:var(--ink-2); background:transparent; cursor:pointer; font:inherit; }
.reading-mode button[aria-pressed="true"] { color:var(--ink); background:var(--bg); border-color:var(--line); box-shadow:0 1px 3px rgba(0,0,0,.06); }
.reading-mode button:hover { color:var(--ink); }
.reading-mode button:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
.reading-mode svg { width:16px; height:16px; flex:none; }
:root[data-reading-mode="light"] .essay-body pre { background:var(--bg-2); }
:root[data-reading-mode="light"] .closing-fallback { color:var(--ink-3); }
@media (max-width:620px) { .reading-mode button { min-height:44px; } }
@media print { .reading-mode { display:none; } }

/* Article navigation and appearance share one compact top row. */
.article-topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:34px; }
.article-topbar .back, .article-topbar .article-back, .article-topbar .reading-mode { margin:0; }
.article-topbar .reading-mode { flex:none; }
.article-topbar .back, .article-topbar .article-back { white-space:nowrap; }
@media(max-width:380px) { .article-topbar .reading-mode button { padding-inline:10px; } }

/* Give the article introduction a little room without spreading out the body. */
.essay-sheet .post-meta { margin-bottom:14px; }
.essay-sheet .post-title, .article-shell h1 { line-height:1.18; margin-bottom:28px; }