/* Theme tokens: light by default, dark from the system unless the reader picked light. */
:root {
    color-scheme: light;
    font-family: Arial, Helvetica, sans-serif;
    --bg: #fff;
    --fg: #000;
    --muted: #444;
    --faint: #888;
    --red: #ff0000;
    --shadow: #9a9a9a;
    background: var(--bg);
    color: var(--fg);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { color-scheme: dark; --bg: #111; --fg: #e8e8e8; --muted: #bbb; --faint: #888; --red: #ff5a5a; --shadow: #4a4a4a; }
}
:root[data-theme="dark"] { color-scheme: dark; --bg: #111; --fg: #e8e8e8; --muted: #bbb; --faint: #888; --red: #ff5a5a; --shadow: #4a4a4a; }

/* Cormorant Garamond (OFL, self-hosted): the closest free match to Michelangelus. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/fonts/cormorant-garamond-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/fonts/cormorant-garamond-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/fonts/cormorant-garamond-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Font tokens: serif is the default; mono is Drudge (Courier body, Arial splash, Impact nameplate). */
:root {
    --font-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-head: var(--font-body);
    --font-mast: var(--font-body);
    --body-size: 1rem;
    --body-weight: 500;
    --mast-skew: 0deg;
}
:root[data-font="mono"] { --font-body: "Courier New", Courier, monospace; --font-head: Arial, Helvetica, sans-serif; --font-mast: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif; --body-size: .86rem; --body-weight: 400; --mast-skew: -6deg; }
:root[data-font="sans"] { --font-body: Arial, Helvetica, sans-serif; --font-head: var(--font-body); --font-mast: "Arial Black", Arial, sans-serif; --body-size: .86rem; --body-weight: 400; }

* { box-sizing: border-box; }
/* Lining figures: Cormorant's old-style digits read bookish in news numbers. */
body { background: var(--bg); color: var(--fg); font-variant-numeric: lining-nums; margin: 0; padding: 1rem 2vw 2rem; }
a { color: var(--fg); font-family: monospace; }
ul { list-style: none; margin: 0; padding: 0; }
.recents { position: static; margin: 0 0 .75rem; width: min(20rem, 32vw); }
.recents ul { display: block; }
.teletype-link, .topic-link { display: block; font-family: Arial, Helvetica, sans-serif; font-size: .86rem; line-height: 1.25; text-decoration: none; }
.teletype-link:hover, .topic-link:hover { text-decoration: underline; }
.fresh { color: var(--fg); }
.masthead { position: relative; padding: 1rem 0 .65rem; text-align: center; }
.masthead h1 { font-family: Arial, Helvetica, sans-serif; font-size: clamp(2.5rem, 8vw, 7rem); font-style: italic; letter-spacing: .08em; line-height: .9; margin: 0; text-decoration: none; text-shadow: -5px 5px 0 var(--shadow); }
.hero { padding: 1rem 0; text-align: center; }
.hero-story { margin: .65rem auto; max-width: 66rem; }
.hero-link { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: clamp(1.45rem, 3vw, 2.7rem); font-weight: 700; line-height: 1.02; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .1em; }
.hero-story.fresh .hero-link { color: var(--fg); }
.topic-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.topic-column { min-width: 0; padding: 0 1rem; }
.topic-column + .topic-column { border-left: 1px solid var(--fg); }
.topic-section, .directory { border-bottom: 1px solid var(--fg); padding: .9rem 0; }
.topic-link { font-family: Arial, Helvetica, sans-serif; font-size: .92rem; line-height: 1.25; padding: .16rem 0; }
.directory ul { display: grid; gap: .25rem; }
.directory a { font-family: monospace; font-size: .82rem; }
.admin { display: inline-block; font-family: monospace; margin-top: .8rem; }
footer { font-size: .75rem; margin-top: 1rem; padding-top: .5rem; }
footer img { display: none; }
@media (max-width: 48rem) {
    body { padding: .75rem 1rem 1.5rem; }
    .recents { width: min(18rem, 70vw); }
    .topic-columns { display: block; }
    .topic-column { padding: 0; }
    .topic-column + .topic-column { border-left: 0; }
    .hero-link { font-size: 1.55rem; }
}

.barometer-recents { margin: 0 0 .75rem; width: min(32rem, 48vw); }
.barometer-recents ul { display: grid; gap: .32rem; list-style: none; margin: 0; padding: 0; }
.barometer-recents .barometer-link { font-size: .82rem; font-weight: 700; line-height: 1.2; }
/* Drudge's nameplate: heavy condensed italic, tucked right under the splash. */
.barometer-masthead { padding: 0 0 .75rem; text-align: center; }
.barometer-masthead h1 { font-family: var(--font-mast); font-size: clamp(2.5rem, 7vw, 6rem); font-style: italic; font-weight: 900; letter-spacing: -.01em; line-height: .95; margin: 0; text-shadow: -3px 3px 0 var(--shadow); transform: skewX(var(--mast-skew)); }
.barometer-splash { border-bottom: 0; margin: .25rem 0 .2rem; padding: .65rem 1rem .2rem; text-align: center; }
.barometer-columns { border-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.barometer-column { min-width: 0; padding: 0 1rem; }
.barometer-column + .barometer-column { border-left: 1px solid var(--fg); }
.barometer-column p { margin: 0; padding: .45rem 0; }
.barometer-story { padding: .32rem 0; }
.barometer-divider { border: 0; border-top: 1px solid var(--fg); margin: .18rem 0; }
.barometer-link { color: var(--fg); font-family: var(--font-body); font-size: var(--body-size); font-weight: var(--body-weight); line-height: 1.15; }
.barometer-link:hover { text-decoration: underline; }
.barometer-link.normal { font-weight: 700; }
.barometer-link.large { font-size: 1rem; font-weight: 700; }
.barometer-link.splash { font-size: clamp(1.8rem, 4vw, 3.6rem); font-weight: 700; }
/* Splash and its stack share one Arial size and run the full width. */
.barometer-splash .barometer-link { font-family: var(--font-head); font-size: clamp(1.6rem, 3.2vw, 2.8rem); font-weight: 700; line-height: 1.08; text-decoration: underline; }
.barometer-link.tail { font-size: var(--body-size); font-weight: var(--body-weight); }
/* Sources expand from a marker in front of the headline: "▸ Headline..." -> "▾ Headline..." */
.story-sources summary { cursor: pointer; list-style: none; }
.story-sources summary::-webkit-details-marker { display: none; }
.story-sources summary::before { color: var(--faint); content: "\25B8"; display: inline-block; font: .8rem/1 Arial, Helvetica, sans-serif; margin-right: .3em; transition: transform .1s; vertical-align: .1em; }
.story-sources[open] summary::before { transform: rotate(90deg); }
.story-sources summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.story-sources ul { color: var(--muted); display: grid; font: .75rem/1.4 var(--font-head); gap: .5rem; margin: .4rem 0; text-align: left; }
.story-sources ul span { display: block; color: var(--faint); font-size: .7rem; }
.story-sources ul a { font: inherit; overflow-wrap: anywhere; }
/* Secondary headlines stack below the splash. */
.barometer-stack { list-style: none; margin: .15rem 0 0; padding: 0; }
.barometer-stack li { margin: 0 0 .15rem; }
.barometer-splash .story-sources ul { margin: .4rem auto; max-width: 42rem; }
.barometer-splash .story-sources summary::before { font-size: 1.3rem; }
.barometer-image { display: block; max-height: 11rem; max-width: 100%; object-fit: cover; }
.barometer-splash .barometer-image { height: clamp(320px, 34vw, 480px); margin: 0 auto 1.25rem; max-height: 480px; object-fit: cover; width: min(100%, 42rem); }
.barometer-footer { border-top: 1px solid var(--fg); font-family: var(--font-body); font-size: .75rem; margin-top: .8rem; padding: .5rem 0; }
.barometer-footer p { margin: 0 0 .5rem; }
.barometer-footer ul { display: grid; gap: .25rem; }
.barometer-footer a { font-family: var(--font-body); font-weight: 400; }
.barometer-footer small, .view-counter { display: block; margin-top: .4rem; }
.barometer-footer.dws { border-top: 2px solid var(--fg); margin-top: 1.5rem; max-width: 70rem; padding: .75rem 0; }
.barometer-footer.dws p { margin: 0 0 .5rem; }
.barometer-footer.dws small, .barometer-footer.dws a { display: block; margin-top: .5rem; }
.barometer-link.red { color: var(--red); }
.barometer-link.siren { animation: barometer-siren 1s steps(2, end) infinite; }
/* Reader controls: theme over font, pinned top right. */
.reader-controls { display: grid; gap: .3rem; position: absolute; right: 2vw; top: 1rem; }
.reader-controls[hidden] { display: none; }
.reader-controls button { background: var(--bg); border: 1px solid var(--fg); color: var(--fg); cursor: pointer; font: 700 .7rem/1 var(--font-body); letter-spacing: .04em; min-width: 6.5rem; padding: .3rem .5rem; }
.reader-controls button:hover { background: var(--fg); color: var(--bg); }
.reader-controls button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@keyframes barometer-siren { 50% { color: var(--fg); } }
@media (max-width: 48rem) {
    .barometer-recents { width: min(28rem, 90vw); }
    .barometer-columns { display: block; }
    .barometer-column { padding: 0; }
    .barometer-column + .barometer-column { border-left: 0; border-top: 1px solid var(--fg); }
}