:root {
  --bg: #faf9f4; --ink: #1c1b17; --muted: #6e6a5e; --rule: #1c1b17;
  --rule-lt: #d9d4c5; --link: #15487f; --box: #f1eee3; --quote: #54504a;
}
/* dark palette: follows the OS unless a manual choice (data-theme) is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161512; --ink: #e4e0d4; --muted: #98937f; --rule: #b5b09e;
    --rule-lt: #3b382f; --link: #9dc3ee; --box: #201f1a; --quote: #b3ad9e;
  }
  :root:not([data-theme="light"]) img { opacity: .88; }
}
:root[data-theme="dark"] {
  --bg: #161512; --ink: #e4e0d4; --muted: #98937f; --rule: #b5b09e;
  --rule-lt: #3b382f; --link: #9dc3ee; --box: #201f1a; --quote: #b3ad9e;
}
:root[data-theme="dark"] img { opacity: .88; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
       line-height: 1.65; }
main { max-width: 46em; margin: 1.5em auto 3em; padding: 0 1.2em;
       transition: margin-left .25s ease; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; margin: .7em 0; }
h1, h2, h3, h4 { line-height: 1.2; }
.meta { color: var(--muted); font-size: .85em;
        font-family: -apple-system, system-ui, sans-serif; }
.meta a { color: var(--muted); }
nav.crumb { font-size: .9em; margin-bottom: 1.5em; }
blockquote { border-left: 2px solid var(--rule); margin-left: 0; padding-left: 1em;
             color: var(--quote); }
pre { overflow-x: auto; background: var(--box); padding: .8em; font-size: .85em; }
code { background: var(--box); }
table { border-collapse: collapse; display: block; overflow-x: auto; }
td, th { border: 1px solid var(--rule-lt); padding: .3em .6em; }
details { margin: .6em 0; }
summary { cursor: pointer; }
hr { border: none; border-top: 1px solid var(--rule-lt); margin: 2em 0; }
ul.weeks, ul.items { padding-left: 1.2em; }
.dl { display: inline-block; margin: .3em 0 .8em; padding: .35em .9em;
      border: 1px solid var(--ink); color: var(--ink); text-decoration: none; }
.dl:hover { background: var(--box); }

/* masthead */
.masthead { text-align: center; border-bottom: 3px double var(--rule);
            margin-bottom: .2em; padding: .4em 0 .6em; }
.mast-title { font-variant: small-caps; letter-spacing: .35em; font-weight: 700;
              font-size: 1.9em; margin: 0; }
.mast-title a { color: var(--ink); text-decoration: none; }
.dateline { margin: .3em 0 0; text-transform: uppercase; letter-spacing: .08em;
            font-size: .72em; color: var(--muted);
            font-family: -apple-system, system-ui, sans-serif; }
.weeknav { display: flex; justify-content: space-between; gap: 1em;
           font-size: .85em; font-family: -apple-system, system-ui, sans-serif;
           margin: .6em 0 1.2em; }

/* front-page "in this issue" box */
.issue { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
         padding: .8em 0 1em; margin: 0 0 2.5em; }
.issue h2 { font-size: .8em; text-transform: uppercase; letter-spacing: .25em;
            text-align: center; margin: 0 0 .8em; font-weight: 600; }
.issue ol { margin: 0; padding: 0 0 0 1.4em; columns: 2; column-gap: 2.5em;
            column-rule: 1px solid var(--rule-lt); font-size: .92em; }
.issue li { break-inside: avoid; margin: 0 0 .55em; }
.issue li a { color: var(--ink); font-weight: 600; text-decoration: none; }
.issue li a:hover { text-decoration: underline; }
@media (max-width: 700px) { .issue ol { columns: 1; } }

article { margin: 0 0 2.5em; padding-bottom: 2em; border-bottom: 1px solid var(--rule); }
article > h2 { margin-top: 1.2em; font-size: 1.55em; }
article h3 { font-size: 1.15em; }
article h4 { font-size: 1.02em; }
details.fetched { background: var(--box); padding: .5em .8em; }

/* slide-in navigation sidebar (checkbox toggle, works without JS) */
#nav-toggle { display: none; }
.nav-btn { position: fixed; top: .8em; left: .8em; z-index: 30; background: var(--bg);
           border: 1px solid var(--muted); padding: .25em .7em;
           cursor: pointer; font-size: .85em; color: var(--muted); user-select: none;
           font-family: -apple-system, system-ui, sans-serif; }
.nav-btn:hover { border-color: var(--ink); color: var(--ink); }
.theme-btn { position: fixed; top: .8em; right: .8em; z-index: 30; background: var(--bg);
             border: 1px solid var(--muted); padding: .25em .6em;
             cursor: pointer; font-size: .85em; color: var(--muted); user-select: none;
             font-family: -apple-system, system-ui, sans-serif; }
.theme-btn:hover { border-color: var(--ink); color: var(--ink); }
#sidenav { position: fixed; top: 0; left: 0; bottom: 0; width: min(330px, 85vw);
           z-index: 20; background: var(--bg); border-right: 1px solid var(--rule-lt);
           padding: 3.2em 1.2em 1.5em; overflow-y: auto; box-sizing: border-box;
           transform: translateX(-105%); transition: transform .2s ease; }
#nav-toggle:checked ~ #sidenav { transform: translateX(0);
                                 box-shadow: 2px 0 12px rgba(0,0,0,.2); }
#sidenav ol { padding-left: 1.2em; font-size: .85em; margin: .5em 0; }
#sidenav li { margin: .4em 0; }
#sidenav .meta { display: block; font-size: .92em; }
/* menu stays open while reading: shift the content out from under it */
#nav-toggle:checked ~ main { margin-left: max(362px, calc((100vw - 46em) / 2)); }
@media (max-width: 900px) {
  #nav-toggle:checked ~ main { margin-left: auto; }  /* overlay on small screens */
}