:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* Layout: newspaper front page — date bar, Mongol-script masthead (seal in footer), section rail, lead story beside a dark subscribe panel, two-column briefing, Japan Desk, three promises. */
:root {
  --paper: #F6F3EB;
  --ink: #1B1A17;
  --muted: #4A4740;
  --rule: #D6D0C2;
  --accent: #9E1F27;
  --panel: #1B1A17;
  --panel-ink: #F6F3EB;
  --panel-muted: #D9D4C7;
  --display: 'Libre Caslon Text', 'PT Serif', Georgia, serif;
  --gothic: 'UnifrakturMaguntia', 'Old English Text MT', Georgia, serif;
  --serif: 'Libre Caslon Text', 'PT Serif', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mong: 'Noto Sans Mongolian', 'Mongolian Baiti', sans-serif;
}
body { background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.6; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body[data-lang="en"] .mn, body[data-lang="mn"] .en { display: none !important; }

.datebar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding-block: 12px; border-bottom: 1px solid var(--rule); font: 13px var(--sans); color: var(--muted); }
.next[hidden] { display: none; }
.next { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--panel-ink); }
.next .dot { width: 8px; height: 8px; border-radius: 50%; background: #E5545B; flex-shrink: 0; }
.lang { display: inline-flex; border: 1px solid var(--rule); }
.lang button { font: 600 12px var(--sans); letter-spacing: .08em; padding: 8px 14px; min-height: 36px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.masthead { display: flex; align-items: center; justify-content: center; gap: 28px; padding-block: 36px 22px; }
.seal { flex-shrink: 0; width: 104px; height: 104px; background: var(--accent); padding: 7px; box-sizing: border-box; display: flex; }
.seal-in { flex: 1; border: 2px solid #F6F3EB; padding: 0 5px 0 12px; display: flex; align-items: center; justify-content: center; gap: 5px; overflow: hidden; }
.seal .bichig { display: block; height: 60px; width: auto; }
.seal .mt { font-family: var(--gothic); font-size: 32px; line-height: 1; color: #F6F3EB; }
.mark { flex-shrink: 0; display: block; width: 60px; height: 132px; }
.f-brand { display: inline-flex; align-items: center; gap: 14px; }
.seal-sm { width: 72px; height: 72px; padding: 5px; }
.seal-sm .seal-in { padding: 0 4px 0 3px; gap: 2px; }
.seal-sm .bichig { height: 39px; transform: translateX(2px); }
.seal-sm .mt { font-size: 22px; }
a.home { color: inherit; text-decoration: none; }
.mark-link { display: block; flex-shrink: 0; }
.f-brand.home:hover .fname, .title a.home:hover { color: var(--accent); }
.title .the { font-family: var(--gothic); letter-spacing: 0; font-size: 0.8em; }
.title .nm { letter-spacing: -0.01em; }
.r-name .g, .fname .g { font-family: var(--gothic); letter-spacing: 0; }
.names { text-align: center; }
.title { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; font-size: clamp(46px, 9vw, 104px); line-height: 1; letter-spacing: .5px; text-wrap: balance; }
.cyr { margin-top: 12px; font-family: 'PT Serif', Georgia, serif; font-size: 15px; letter-spacing: .4em; padding-left: .4em; color: var(--muted); }
.tag { margin: 10px 0 0; font-style: italic; font-size: 17px; color: var(--muted); text-wrap: balance; }

nav.sections { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; padding-block: 12px; border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink); font: 500 14px var(--sans); letter-spacing: .04em; text-transform: uppercase; }
nav.sections a { text-decoration: none; padding-block: 6px; border-bottom: 2px solid transparent; }
nav.sections a:hover { color: var(--accent); }
nav.sections a[aria-current="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.filter-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -8px 0 20px; font: 14px var(--sans); color: var(--muted); }
.filter-note button { font: 600 13px var(--sans); color: var(--accent); background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.empty { padding-block: 24px; border-top: 1px solid var(--ink); font-size: 17px; color: var(--muted); }

.ph { margin: 0 0 16px; }
.ph img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--rule); }
.lead .ph { margin: 6px 0 18px; }
.lead .ph img { aspect-ratio: 2 / 1; }
.lead .r-video { margin: 6px 0 18px; }
.ph figcaption { margin-top: 6px; font: 11px/1.4 var(--sans); color: var(--muted); }
.ph figcaption a { text-decoration: none; }
.ph figcaption a:hover { text-decoration: underline; }

a.open { text-decoration: none; }
a.open:hover { color: var(--accent); }
.ph-link { display: block; }
.more { display: inline-block; margin-top: 4px; font: 600 13px var(--sans); letter-spacing: .02em; color: var(--accent); text-decoration: none; padding-block: 6px; }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.reader { position: fixed; inset: 0; z-index: 50; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; }
.r-bar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; background: var(--paper); border-bottom: 3px double var(--ink); z-index: 1; }
.r-back { font: 600 14px var(--sans); color: var(--ink); background: none; border: 1px solid var(--rule); min-height: 40px; padding: 0 14px; cursor: pointer; }
.r-back:hover { border-color: var(--ink); }
.r-name { font-family: var(--display); font-size: 24px; line-height: 1; }
.r-lang { display: none; }
.r-art { max-width: 760px; padding-block: 28px 64px; }
.r-art h1 { margin: 10px 0 8px; font-size: clamp(28px, 4.5vw, 42px); line-height: 1.15; text-wrap: balance; }
.r-date { font: 13px var(--sans); color: var(--muted); margin-bottom: 20px; }
.r-art .ph { margin-bottom: 24px; }
.r-art .ph img { aspect-ratio: 16 / 9; }
.r-body p { margin: 0 0 18px; font-size: 19px; line-height: 1.7; }
.r-body h3 { margin: 34px 0 12px; font: 700 22px/1.3 var(--serif); }
.r-body .g-dates { margin: 0 0 18px; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.r-body .g-dates li { display: grid; grid-template-columns: 128px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 17px; line-height: 1.55; }
.r-body .g-dates b { font: 600 13px/1.9 var(--sans); color: var(--accent); }
.g-link { display: flex; align-items: baseline; gap: 12px; margin: 28px 0; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.g-link .g-k { flex: none; font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.g-link .g-t { flex: 1; font: 700 17px/1.4 var(--serif); }
.g-link .g-a { flex: none; font: 600 16px var(--sans); color: var(--accent); }
.g-link + .g-link { margin-top: -28px; border-top: 0; }
.g-link:hover .g-t { color: var(--accent); }
@media (max-width: 560px) { .r-body .g-dates li { grid-template-columns: 1fr; gap: 2px; } .g-link { flex-wrap: wrap; gap: 4px 12px; } .g-link .g-k { flex-basis: 100%; } }
.r-art .why { margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--accent); background: #EFEADF; font-size: 17px; }
.r-src { font: 13px/1.6 var(--sans); color: var(--muted); border-top: 1px solid var(--rule); padding-top: 14px; }
.r-src a { color: var(--ink); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0; }
.share-label { margin-right: 4px; font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.share a, .share button { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 36px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); font: 600 13px var(--sans); text-decoration: none; cursor: pointer; }
.share a:hover, .share button:hover { border-color: var(--ink); }
.share-ok { font: 13px var(--sans); color: var(--accent); }
.week60 { margin: 28px 0 8px; padding: 18px 20px 14px; border: 1px solid var(--rule); border-top: 3px solid var(--ink); }
.week60 h2 { margin: 0 0 10px; font: 600 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.week60 ul { margin: 0; padding-left: 1.1em; }
.week60 li { margin: 6px 0; font-size: 16px; line-height: 1.5; }
@media (min-width: 761px) { .week60 ul { columns: 2; column-gap: 48px; } .week60 li { break-inside: avoid; } .week60 li:first-child { margin-top: 0; } }
.week60 a { color: var(--ink); text-decoration: none; }
.week60 a:hover { text-decoration: underline; }
body.archive-mode .week60, body.filtering .week60 { display: none; }
.pw-soon { color: var(--accent); font-weight: 600; }
/* Petition "Why it matters": closed by default, opens the highlight box */
.pw-why { margin: 2px 0 6px; }
.pw-why summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; padding: 4px 0; font: 600 13px var(--sans); color: var(--ink); }
.pw-why summary::-webkit-details-marker { display: none; }
.pw-why summary::before { content: "+"; display: inline-block; width: 12px; text-align: center; font-weight: 700; }
.pw-why[open] summary::before { content: "\2212"; }
.pw-why summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.pw-why p { margin: 4px 0 4px; padding: 7px 12px; border-left: 3px solid var(--accent); background: #EFEADF; font-size: 14px; line-height: 1.45; color: var(--ink); }
.pw-why-f { margin: -6px 0 14px; }
.pw-feat .pw-why-f p { font-size: 16px; line-height: 1.5; padding: 10px 14px; margin: 4px 0 0; }
.pwatch li.soon .pw-bar i { background: var(--accent); }
.pw-feat .pw-soon { font-weight: 600; }
/* Link to the petition itself inside a petition article (Mergen 2026-11-08) */
.pw-go { display: flex; align-items: baseline; gap: 12px; margin: 24px 0; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.pw-go .g-k { flex: none; font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pw-go .g-t { flex: 1; font: 700 17px/1.4 var(--serif); }
.pw-go .g-a { flex: none; font: 600 16px var(--sans); color: var(--accent); }
.pw-go:hover .g-t { color: var(--accent); }
@media (max-width: 560px) { .pw-go { flex-wrap: wrap; gap: 4px 12px; } .pw-go .g-k { flex-basis: 100%; } }
/* Petition watch: petitions on parliament's petition site, under the subscribe box after the week in 60 seconds */
.pwatch{margin:28px 0 8px;padding-top:24px;border-top:3px solid var(--ink)}
.pwatch .sec-head{margin:0}
.pw-grid{display:grid;gap:32px;margin-top:20px}
@media (min-width:900px){.pw-grid{grid-template-columns:1.25fr 1fr;gap:48px}.pw-list{border-left:1px solid var(--rule);padding-left:48px}}
.pw-grid.pw-nofeat{grid-template-columns:1fr}.pw-nofeat .pw-list{border-left:0;padding-left:0}
/* No featured petition: the list runs in two columns on wide screens, like the 60-second box (Mergen 2026-11-11) */
@media (min-width:900px){.pw-nofeat .pw-list ol{grid-template-columns:1fr 1fr;column-gap:48px;row-gap:22px}}
.pw-feat .kicker{font:600 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.pw-feat h3{margin:8px 0 10px;font-size:30px;line-height:1.15}
.pw-feat h3 a{color:var(--ink);text-decoration:none}
.pw-feat p{margin:0 0 16px;font-size:18px;line-height:1.55}
.pw-big{display:flex;align-items:baseline;gap:8px;font-family:var(--sans)}
.pw-bn{font-size:40px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.pw-big .pw-of{font-size:16px}
.pw-bar{height:4px;background:var(--rule);margin:6px 0 5px}
.pw-bar-l{height:8px;margin:10px 0 8px}
.pw-bar i{display:block;height:100%;background:var(--ink)}
.pw-feat .pw-bar i{background:var(--accent)}
.pw-feat .more{display:inline-block;margin-top:12px;font:600 15px var(--sans);color:var(--accent);text-decoration:none}
.pw-list h4{margin:0 0 12px;font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pw-list ol{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.pw-top{display:flex;gap:12px;justify-content:space-between;align-items:baseline}
.pw-t{font-size:16px;line-height:1.4}
.pw-n{font:600 15px var(--sans);white-space:nowrap;font-variant-numeric:tabular-nums}
.pw-of{font-weight:400;color:var(--muted)}
.pw-meta{font:13px/1.4 var(--sans);color:var(--muted)}
.pw-meta a{color:var(--muted)}
.pwatch .pw-note{margin:24px 0 0;padding-top:12px;border-top:1px solid var(--rule);font:13px/1.5 var(--sans);color:var(--muted)}
body.filtering .pwatch,body.archive-mode .pwatch,body.japan-mode .pwatch{display:none}
/* Explainers (Mergen 2026-11-05): their own view (#explainers, like the Japan Desk), opened from the "Тайлбар мэдээлэл / Explainers" link beside the past-stories search. Not on the front page itself. The list is filled from the hidden .guides cards */
.xpl{display:none;padding:24px 0 48px}
body.xpl-mode .xpl:not([hidden]){display:block}
body.xpl-mode .lead, body.xpl-mode .briefing, body.xpl-mode .archive, body.xpl-mode .desk, body.xpl-mode .promise, body.xpl-mode .about{display:none}
.xpl-back{display:inline-block;margin:0 0 6px;padding-block:6px;font:600 13px var(--sans);color:var(--accent);text-decoration:none}
.xpl-back:hover{text-decoration:underline;text-underline-offset:3px}
.xpl .sec-head{margin:0}
.xpl-list{list-style:none;margin:20px 0 0;padding:0;display:grid;column-gap:48px}
@media (min-width:900px){.xpl-list{grid-template-columns:1fr 1fr}}
.xpl-list li{border-top:1px solid var(--rule)}
.xpl-list a{display:block;padding:16px 0 22px;color:var(--ink);text-decoration:none}
.xpl-list .x-t{display:block;margin:6px 0 8px;font:700 22px/1.25 var(--serif)}
.xpl-list .x-d{display:block;font-size:16px;line-height:1.5}
.xpl-list .x-a{color:var(--accent);font:600 16px var(--sans);white-space:nowrap}
.xpl-list a:hover .x-t{color:var(--accent)}
@media (max-width:560px){.xpl-list .x-t{font-size:20px}}
body.xpl-mode nav.sections a[data-filter][aria-current="true"]{color:inherit;border-bottom-color:transparent}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sub2 { margin: 18px 0 8px; padding: 18px 20px; background: var(--panel); color: var(--panel-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.sub2 p { margin: 0; flex: 1 1 260px; font: 600 16px/1.45 var(--sans); }
.sub2 form { flex: 1 1 260px; min-width: 0; display: flex; gap: 8px; }
.sub2 .btn { padding-inline: 16px; }
.sub2 input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid #6B665B; background: var(--paper); color: var(--ink); font: 16px var(--sans); border-radius: 0; box-sizing: border-box; }
.sub2 input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sub2 .btn { border: 0; cursor: pointer; flex: 0 0 auto; }
.sub2 .sub-ok { flex-basis: 100%; }
body.archive-mode .sub2, body.filtering .sub2 { display: none; }
.also-head { grid-column: 1 / -1; margin: 22px 0 0; font: 600 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
body.filtering .also-head { display: none; }
.story.brief figure, .story.brief > p, .story.brief .more { display: none; }
.story.brief h3 { font-size: 17px; line-height: 1.35; }
.about { max-width: 720px; margin: 8px auto 28px; padding: 0 0 4px; font: 14px/1.6 var(--sans); color: var(--muted); }
.about h3 { font: 600 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 6px; }
.about a { color: var(--ink); }
body.archive-mode .about { display: none; }
.lead p.src, .story p.src { margin: 8px 0 0; font: 12px/1.5 var(--sans); color: var(--muted); }
.src a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.src-flag { white-space: nowrap; color: var(--accent); }
.r-src ul { list-style: none; margin: 8px 0 0; padding: 0; }
.r-src li { margin: 4px 0; }
.stag { display: inline-block; min-width: 64px; font: 600 10px/1.8 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stag.prim { color: var(--ink); }
.r-flag { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.r-flag b { color: var(--accent); }
.r-flag ul { margin-top: 4px; }
.r-method { margin: 10px 0 0; font-size: 12px; }
body.reading { overflow: hidden; }
@media (max-width: 560px) { .r-lang { display: none; } .r-name { font-size: 20px; } .r-body p { font-size: 18px; } }

.kicker { font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.why { color: var(--muted); }
.why b { color: var(--ink); }

.lead { display: flex; flex-wrap: wrap; gap: 40px; padding-block: 40px; border-bottom: 1px solid var(--rule); }
.lead article { flex: 999 1 560px; min-width: 0; }
.lead h2 { margin: 12px 0 16px; font-size: clamp(30px, 4vw, 46px); line-height: 1.12; font-weight: 700; text-wrap: balance; }
.lead p { margin: 0 0 14px; font-size: 19px; max-width: 62ch; }
.lead .why { font-size: 17px; }

/* Today bar: weekday briefs, one black line each, under the lead story (after the subscribe box on wide screens, before it on narrow ones) */
.today { order: 3; flex: 1 1 100%; min-width: 0; display: grid; gap: 8px; margin-top: -8px; }
.today:not(:has(.t-item:not([hidden]))) { display: none; }
body.filtering .today, body.filtering .wx { display: none; }
@media (max-width: 960px) { .today { order: 0; margin-top: 0; } }
.t-item { position: relative; display: flex; align-items: center; gap: 18px; padding: 13px 20px; background: var(--panel); color: var(--panel-ink); }
.t-item:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.t-label { flex-shrink: 0; padding: 5px 10px; background: var(--accent); color: #FFFFFF; font: 600 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.t-time { flex-shrink: 0; font: 13px var(--sans); color: var(--panel-muted); }
.t-item h3 { flex: 1; min-width: 0; margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-item h3 a { color: inherit; text-decoration: none; outline: none; }
.t-item h3 a::after { content: ""; position: absolute; inset: 0; }
.t-item:hover h3 a { text-decoration: underline; text-underline-offset: 3px; }
.t-read { flex-shrink: 0; font: 600 13px var(--sans); text-decoration: underline; text-underline-offset: 3px; }
/* Earlier briefs this week: thin plain lines under the black bar */
.today .t-more-h { max-width: none; margin: 12px 0 0; font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.t-item.t-earlier { align-items: baseline; gap: 14px; padding: 10px 0; background: none; color: var(--ink); border-top: 1px solid var(--rule); }
.t-earlier .t-label, .t-earlier .t-read { display: none; }
.t-earlier .t-time { min-width: 52px; color: var(--muted); }
.t-earlier h3 { font-size: 16px; font-weight: 400; }
.t-earlier:hover h3 a { color: var(--accent); }
/* Photo on a brief: a small square in the black bar only; hidden on earlier lines and on phones, full width on the brief page */
.t-item .ph { flex-shrink: 0; width: 46px; margin: -6px 0; }
.t-item .ph img { width: 46px; height: 46px; aspect-ratio: 1; }
.t-item .ph figcaption, .t-earlier .ph { display: none; }
@media (max-width: 560px) { .t-item .ph { display: none; } }
.t-all { justify-self: start; padding-block: 6px; font: 600 13px var(--sans); color: var(--accent); text-decoration: none; }
.t-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.arch-briefs { display: none; margin: 14px 0 0 24px; padding-block: 6px; font: 600 13px var(--sans); color: var(--accent); text-decoration: none; }
body.archive-mode .arch-briefs:not([hidden]) { display: inline-block; }
@media (max-width: 560px) {
  .t-item { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; margin-inline: -16px; padding: 12px 16px; }
  .t-label { font-size: 11px; padding: 4px 8px; }
  .t-time { font-size: 12px; }
  .t-read { grid-column: 3; grid-row: 1; }
  .t-item h3 { grid-column: 1 / -1; grid-row: 2; font-size: 16px; line-height: 1.35; white-space: normal; }
  .t-item.t-earlier { display: grid; grid-template-columns: auto 1fr; margin-inline: 0; padding: 10px 0; }
  .t-earlier h3 { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 400; }
}

/* Right column beside the lead: subscribe box, then Ulaanbaatar weather */
.side { flex: 1 1 320px; min-width: 0; align-self: start; display: flex; flex-direction: column; gap: 20px; }
/* Beside the lead, start the column level with the top of the headline rather than the small kicker above it */
@media (min-width: 961px) { .side { margin-top: 36px; } }
/* Weather box as a window on Ulaanbaatar's sky: the background, clouds, rain or snow follow the current weather. Still for readers who turn motion off */
.wx { position: relative; overflow: hidden; isolation: isolate; min-height: 230px; padding: 22px 32px 24px; box-sizing: border-box; font-family: var(--sans); color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 0, 0, .28); background: linear-gradient(180deg, #2C78C8 0%, #5BA2E2 58%, #A6CFF0 100%); }
.wx > :not(.wx-scene) { position: relative; z-index: 1; }
.wx .kicker { color: rgba(255, 255, 255, .9); }
.wx-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.wx[data-sky="clear-day"] .wx-scene, .wx[data-sky="partly-day"] .wx-scene { background: radial-gradient(circle at 88% 11%, rgba(255, 249, 222, 1) 0 20px, rgba(255, 234, 160, .55) 30px, rgba(255, 234, 160, 0) 100px); }
.wx[data-sky="partly-day"] { background: linear-gradient(180deg, #3A80C6 0%, #6AA8DE 58%, #B2D3EE 100%); }
.wx[data-sky$="-night"] { background: linear-gradient(180deg, #071429 0%, #13294D 60%, #24426E 100%); }
/* The moon as seen from Earth with the naked eye: a real full-moon image (NASA Goddard, public domain, from LRO data), softened and brightened, no glow */
.wx[data-sky$="-night"] .wx-scene::after { content: ""; position: absolute; left: calc(88% - 15px); top: calc(11% - 15px); width: 30px; height: 30px; border-radius: 50%;
  background: url("data:image/webp;base64,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") center / cover no-repeat; }
.wx[data-sky="cloudy"] { background: linear-gradient(180deg, #6E7B88 0%, #8F9AA5 60%, #AEB6BD 100%); }
.wx[data-sky="fog"] { background: linear-gradient(180deg, #7E878C 0%, #9AA1A4 55%, #B5BABB 100%); }
.wx[data-sky="rain"] { background: linear-gradient(180deg, #3F4B57 0%, #5D6A76 60%, #7B8792 100%); }
.wx[data-sky="snow"] { background: linear-gradient(180deg, #5E6C7A 0%, #7D8A97 60%, #A0AAB4 100%); }
.wx[data-sky="storm"] { background: linear-gradient(180deg, #1F252E 0%, #363F4B 60%, #4E5865 100%); }
.wx-cl { position: absolute; left: 0; width: 170px; height: 60px; }
.wx-cl i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, var(--a, .92)), rgba(255, 255, 255, 0)); }
.wx-cl i:nth-child(1) { left: 0; top: 18px; width: 90px; height: 44px; }
.wx-cl i:nth-child(2) { left: 40px; top: 0; width: 90px; height: 60px; }
.wx-cl i:nth-child(3) { left: 85px; top: 14px; width: 85px; height: 46px; }
.wx-haze { position: absolute; left: -20%; width: 140%; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }
.wx-drop { position: absolute; top: -20px; width: 1.5px; height: 16px; background: linear-gradient(rgba(255, 255, 255, 0), rgba(220, 232, 245, .75)); transform: rotate(8deg); }
.wx-flake { position: absolute; top: -10px; border-radius: 50%; background: rgba(255, 255, 255, .92); }
.wx-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #FFFFFF; }
.wx-flash { position: absolute; inset: 0; background: rgba(235, 240, 255, .55); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .wx-cl { animation: wx-drift linear infinite; }
  .wx-haze { animation: wx-haze 14s ease-in-out infinite alternate; }
  .wx-drop { animation: wx-rain linear infinite; }
  .wx-flake { animation: wx-snow linear infinite; }
  .wx-star { animation: wx-twinkle 4s ease-in-out infinite alternate; }
  .wx-flash { animation: wx-flash 9s steps(1) infinite; }
  @keyframes wx-drift { from { transform: translateX(-190px) scale(var(--s, 1)); } to { transform: translateX(380px) scale(var(--s, 1)); } }
  @keyframes wx-haze { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
  @keyframes wx-rain { from { transform: translate(0, 0) rotate(8deg); } to { transform: translate(-40px, 300px) rotate(8deg); } }
  @keyframes wx-snow { 0% { transform: translate(0, 0); } 50% { transform: translate(10px, 130px); } 100% { transform: translate(-6px, 270px); } }
  @keyframes wx-twinkle { from { opacity: .25; } to { opacity: 1; } }
  @keyframes wx-flash { 0%, 100% { opacity: 0; } 80% { opacity: 1; } 81% { opacity: 0; } 83% { opacity: .8; } 85% { opacity: 0; } }
}
.wx-t { font-family: var(--display); font-weight: 700; font-size: 60px; line-height: 1; }
.wx-c { font-size: 18px; font-weight: 600; }
.wx p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .95); }
.wx .wx-src { margin-top: 12px; font-size: 12px; color: rgba(255, 255, 255, .85); }
/* Data credit, required by Open-Meteo: kept quiet in the bottom-right corner */
.wx > .wx-credit { position: absolute; right: 12px; bottom: 8px; font-size: 11px; opacity: .3; text-shadow: none; }
/* The reader's own city, guessed from their device's time zone (no location prompt) */
/* Ulaanbaatar on top, the reader's own city below it, under one sky */
.wx-cols > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 14px; }
.wx-cols .kicker, .wx-cols p, .wx-head { grid-column: 1 / -1; }
.wx-cols p { font-size: 14px; }
.wx-nb { white-space: nowrap; }
.wx-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.wx-cols .wx-t { margin: 8px 0 4px; }
.wx-cols .wx-c { font-size: 18px; font-weight: 600; line-height: 1.3; }
.wx .wx-you { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .45); }
.wx-you .wx-t { margin: 6px 0 2px; font-size: 38px; }
.wx-you .wx-c { font-size: 16px; }
.wx-lab { font-size: 12px; opacity: .85; }
.wx-lab::before { content: "· "; }
/* Fills the space beside the lead only; hidden once the column stacks */
@media (max-width: 960px) { .wx { display: none; } }
.sub { min-width: 0; background: var(--panel); color: var(--panel-ink); padding: 32px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
.sub h3 { margin: 0; font-size: 26px; line-height: 1.2; }
.sub p { margin: 0; font: 15px/1.55 var(--sans); color: var(--panel-muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; background: var(--accent); color: #FFFFFF; font: 600 15px var(--sans); letter-spacing: .04em; text-decoration: none; }
.btn:hover { filter: brightness(1.12); }
.sub-form { display: flex; flex-direction: column; gap: 10px; }
.sub-form label { font: 13px var(--sans); color: var(--panel-muted); }
.sub-form input { height: 48px; padding: 0 14px; border: 1px solid #6B665B; background: var(--paper); color: var(--ink); font: 16px var(--sans); box-sizing: border-box; width: 100%; border-radius: 0; }
.sub-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sub-form .btn { border: 0; cursor: pointer; width: 100%; }
.sub-ok { margin: 2px 0 0; font: 14px/1.5 var(--sans); color: var(--panel-ink); }
.sub .fine { font-size: 13px; }

.briefing { padding-block: 40px; border-bottom: 1px solid var(--rule); }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 24px; }
.sec-head h2 { margin: 0; font-size: 30px; }
.sec-head > span { font: 13px var(--sans); color: var(--muted); }
.stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 40px; }
.story { padding-block: 24px; border-top: 1px solid var(--ink); }
.story h3 { margin: 8px 0 10px; font-size: 22px; line-height: 1.25; text-wrap: balance; }
.story p { margin: 0 0 10px; font-size: 16px; }
.story .why { font-size: 15px; }
/* The Number: weekly original explainer, full width at the end of the briefing grid */
.story.explainer { grid-column: 1 / -1; border-top: 3px solid var(--accent); }
.story.explainer h3 { font-size: 26px; max-width: 34ch; }
.story.explainer > p { max-width: 70ch; }
.big-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 8px 0 6px; }
.big-num .n { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 8vw, 72px); line-height: 1; color: var(--accent); }
.big-num .lbl { font: 13px/1.4 var(--sans); color: var(--muted); max-width: 34ch; }
.r-body .big-num { margin: 0 0 18px; }
/* Petition pages: final signature count under the headline, like The Number (Mergen 2026-11-11) */
.r-body .pw-num { margin-bottom: 22px; }
.pw-num .pw-bar { flex-basis: 100%; height: 8px; margin: 6px 0 0; }
.pw-num .pw-bar i { background: var(--accent); }
/* Video on a brief page: an official clip, full width under the text */
.r-video { margin: 0 0 24px; }
.r-video-frame { position: relative; aspect-ratio: 16 / 9; background: #1B1A17; }
.r-video iframe, .r-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.r-video figcaption { margin-top: 6px; font: 11px/1.4 var(--sans); color: var(--muted); }
.r-video figcaption a { text-decoration: none; }
/* Card shows only the number, its label, the headline and the link; teaser, why and sources stay on the full page */
.story.explainer > p, .story.explainer h3 { display: none; }
/* On wide screens The Number sits under the weather box; the card in the stories grid is the copy shown on phones and while filtering */
.side-num { display: none; border-top: 3px solid var(--accent); padding-top: 12px; }
.side-num .big-num { margin: 6px 0 4px; }
@media (min-width: 961px) { .side:has(.side-num:not(:empty)) { align-self: stretch; } .side-num:not(:empty) { display: flex; flex: 1; flex-direction: column; justify-content: flex-start; padding: 12px 0 24px; } .side-num .kicker { white-space: nowrap; letter-spacing: .05em; } .side-num a.more { align-self: flex-start; } .side-num .big-num .n { font-size: 80px; } body:not(.filtering):has(.side-num:not(:empty)) .stories .story.explainer { display: none; } }
body.filtering .side-num { display: none !important; }
/* Explainers block under The Number (Mergen 2026-11-05): side column on wide screens, inside The Number card on phones */
.xpl-mini { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--rule); align-self: stretch; }
.side-num .xpl-mini.first { margin: 0 0 26px; padding-top: 0; border-top: 0; }
.side-num .xpl-mini.first + .kicker { border-top: 3px solid var(--accent); padding-top: 12px; }
.xpl-mini .x-k { display: block; font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.xpl-mini ul { list-style: none; margin: 0; padding: 0; }
.xpl-mini li { border-bottom: 1px solid var(--rule); }
.xpl-mini li a { display: block; padding: 9px 0; font: 700 15px/1.35 var(--serif); color: var(--ink); text-decoration: none; }
.xpl-mini li a:hover { color: var(--accent); }
.xpl-mini .x-all { display: inline-block; margin-top: 10px; font: 600 13px var(--sans); color: var(--accent); text-decoration: none; }
.xpl-mini .x-all:hover { text-decoration: underline; text-underline-offset: 3px; }

.archive { padding-block: 40px; border-bottom: 1px solid var(--rule); }
.issue + .issue { margin-top: 32px; }
.issue-date { margin: 0 0 4px; font: 600 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.arch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0 32px; }
.arch { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; align-content: start; padding-block: 16px; border-top: 1px solid var(--rule); }
.arch .ph { grid-column: 1; grid-row: 1 / span 3; margin: 2px 0 0; }
.arch .ph img { aspect-ratio: 4 / 3; }
.arch .big-num { grid-column: 1; grid-row: 1 / span 3; flex-direction: column; align-items: flex-start; gap: 6px; margin: 2px 0 0; min-width: 0; }
.arch .big-num .n { font-size: 30px; }
.arch .big-num .lbl { font-size: 11px; line-height: 1.35; }
@media (max-width: 560px) { .arch .big-num .n { font-size: 24px; } }
.arch .ph figcaption, .arch .why { display: none; }
.arch .kicker, .arch h3, .arch > p { grid-column: 2; }
.arch h3 { margin: 4px 0 6px; font-size: 17px; line-height: 1.3; text-wrap: balance; }
.arch > p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.arch > p > span { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body:not(.archive-mode):not(.filtering) .issue ~ .issue { display: none; }
body.archive-mode .lead, body.archive-mode .briefing, body.archive-mode .desk, body.archive-mode .promise { display: none; }
body.archive-mode .archive { padding-top: 24px; }
.arch-top { display: none; margin-bottom: 14px; }
body.archive-mode .arch-top { display: block; }
body.archive-mode .arch-all { display: none; }
.arch-back, .arch-all { display: inline-block; padding-block: 6px; font: 600 13px var(--sans); color: var(--accent); text-decoration: none; }
.arch-back:hover, .arch-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.arch-all { margin-top: 14px; }
.issue-date a { color: inherit; text-decoration: none; }
.issue-date a:hover { color: var(--accent); }
.arch-credit { margin: 14px 0 0; font: 11px var(--sans); color: var(--muted); }
@media (max-width: 560px) { .arch { grid-template-columns: 88px minmax(0, 1fr); } }
.desk { display: flex; flex-wrap: wrap; gap: 32px; padding-block: 40px; border-bottom: 1px solid var(--rule); }
.desk > div:first-child { flex: 1 1 260px; min-width: 0; }
.desk > div:last-child { flex: 999 1 520px; min-width: 0; font-size: 18px; line-height: 1.65; }
.desk h2 { margin: 8px 0 0; font-size: 34px; line-height: 1.15; }
.desk .jp { margin-top: 8px; font-size: 18px; color: var(--muted); }
.desk p { margin: 0; max-width: 62ch; }

.promise { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; padding-block: 40px; }
.promise h3 { margin: 0 0 8px; font-size: 20px; }
.promise p { margin: 0; font: 15px/1.6 var(--sans); color: var(--muted); }

footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-block: 24px 40px; border-top: 3px double var(--ink); font: 13px var(--sans); color: var(--muted); }
footer .fname { font-family: var(--display); font-size: 26px; color: var(--ink); }
.arch-search { position: relative; max-width: 320px; margin: 0 0 22px; }
.arch-search input { box-sizing: border-box; width: 100%; height: 38px; padding: 0 40px 0 12px; font: 16px var(--sans); border: 1px solid var(--rule); border-radius: 0; background: var(--paper); color: var(--ink); -webkit-appearance: none; appearance: none; }
.arch-search input:focus { outline: none; border-color: var(--ink); }
.arch-search .ph { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font: 15px var(--sans); color: var(--muted); pointer-events: none; white-space: nowrap; }
.arch-search input:not(:placeholder-shown) ~ .ph { display: none; }
.arch-search button { position: absolute; right: 0; top: 0; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.arch-search button:hover { color: var(--accent); }
.arch-search svg { width: 17px; height: 17px; }
.search-page .as-row { display: flex; gap: 8px; }
.search-page input { flex: 1; min-width: 0; font: 17px var(--sans); padding: 10px 12px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); }
.search-page button { font: 600 13px var(--sans); letter-spacing: .06em; padding: 10px 16px; border: 0; background: var(--ink); color: var(--paper); cursor: pointer; }
nav.social { display: flex; flex-wrap: wrap; gap: 6px 18px; }
nav.social a { display: inline-flex; align-items: center; gap: 6px; padding-block: 6px; color: var(--ink); text-decoration: none; font: 600 13px var(--sans); }
nav.social a:hover { color: var(--accent); }
nav.social svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 760px) {
  nav.sections { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 0 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  nav.sections::-webkit-scrollbar { display: none; }
  nav.sections a { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 560px) {
  /* Phones: masthead stays centred exactly as before; the Mongol script sits at the left edge beside the title and shrinks to fit the space left of "The Mongol" */
  .masthead { display: block; position: relative; padding-block: 28px 18px; }
  .masthead .mark-link { position: absolute; left: 0; top: 28px; height: calc(2 * max(46px, 9vw)); display: flex; align-items: center; }
  /* Mongolian slogan on two lines, staggered: top line a little left, bottom line a little right */
  .tag .tl1, .tag .tl2 { display: block; }
  .tag .tl1 { transform: translateX(-14px); }
  .tag .tl2 { transform: translateX(14px); }
  .masthead .mark { width: min(60px, calc((100vw - 32px - 5.2 * max(46px, 9vw)) / 2 - 8px)); height: auto; }
  .sub { padding: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  nav.sections a, .btn { transition: color .15s, filter .15s; }
  .next .dot { animation: lv-pulse 2.4s ease-in-out infinite; }
  @keyframes lv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}
.desk-open, .desk-back { display: inline-block; margin-top: 14px; padding-block: 6px; font: 600 13px var(--sans); color: var(--accent); text-decoration: none; }
.desk-open:hover, .desk-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.desk-back { display: none; margin: 0 0 6px; }
.desk-full { display: none; flex: 1 1 100%; min-width: 0; }
.desk-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 28px; }
.desk-topic { padding-block: 16px; border-top: 1px solid var(--ink); }
.desk-topic h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.3; }
.desk-topic p { margin: 0; font: 15px/1.55 var(--sans); color: var(--muted); }
.desk-posts { margin-top: 28px; }
.desk-posts-h { margin: 0 0 4px; font: 600 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.desk-empty { margin: 0; padding-block: 18px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 17px; }
body.japan-mode .lead, body.japan-mode .briefing, body.japan-mode .archive, body.japan-mode .promise, body.japan-mode .about { display: none; }
body.japan-mode .desk { padding-top: 24px; border-bottom: 0; }
body.japan-mode .desk-full, body.japan-mode .desk-back { display: block; }
body.japan-mode .desk-open { display: none; }
/* Night mode, after the business card: follows the reader's system setting; the ☾/☀ button overrides it and is remembered */
.db-tools { display: inline-flex; align-items: center; gap: 8px; }
.theme-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 38px; height: 38px; padding: 0; border: 1px solid var(--rule); background: transparent; color: var(--muted); cursor: pointer; }
.theme-btn:hover { color: var(--ink); border-color: var(--ink); }
.theme-btn svg { display: block; width: 16px; height: 16px; }
.theme-btn .ic-sun { display: none; }
.r-bar .theme-btn { margin-left: 8px; flex-shrink: 0; }
/* This-week strip across the very top: short linked lines pulled from the page itself (lead, newest brief, The Number, an open petition, next issue). Moves slowly, stops on hover, focus or touch. Runs whatever the system motion setting is: Windows with animation effects off showed a scroll box instead (Mergen 2026-11-10) */
.strip { display: flex; align-items: stretch; background: var(--panel); color: var(--panel-ink); font: 13px/1.3 var(--sans); overflow: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.strip[hidden] { display: none; }
.strip-lbl { flex-shrink: 0; display: flex; align-items: center; padding: 0 14px 0 max(16px, env(safe-area-inset-left, 0px)); background: var(--accent); color: #FFFFFF; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.strip-vp { position: relative; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.strip-track { display: flex; width: max-content; }
.strip-set { display: flex; flex-shrink: 0; margin: 0; padding: 0; list-style: none; }
.strip-set li { display: flex; align-items: center; white-space: nowrap; padding: 10px 0; }
.strip-set li::after { content: ""; width: 5px; height: 5px; margin: 0 22px; background: var(--accent); flex-shrink: 0; }
.strip-set a { color: inherit; text-decoration: none; }
.strip-set a:hover, .strip-set a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.strip-k { margin-right: 8px; font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--panel-muted); }
.strip-n { margin-right: 6px; font-weight: 700; color: #F08A90; font-variant-numeric: tabular-nums; }
.strip.run .strip-track { animation: strip-run var(--strip-t, 60s) linear infinite; }
.strip.run:focus-within .strip-track, .strip.run.hold .strip-track { animation-play-state: paused; }
@media (hover: hover) { .strip.run:hover .strip-track { animation-play-state: paused; } }
@keyframes strip-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 560px) { .strip { font-size: 13px; } .strip-lbl { padding-right: 10px; font-size: 10px; letter-spacing: .1em; } .strip-set li::after { margin: 0 16px; } }
body.reading .strip { visibility: hidden; }
.strip-lbl { gap: 8px; }
.strip-sample { padding: 1px 5px; background: #FFFFFF; color: var(--accent); font-size: 9px; letter-spacing: .08em; }
.strip-d { margin-left: 6px; font-size: 11px; color: var(--panel-muted); }
.strip-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --paper: #171615; --ink: #F1ECE0; --muted: #B3AB9C; --rule: #3A3630; --accent: #D8444D; --panel: #23211E; --panel-ink: #F1ECE0; --panel-muted: #B3AB9C; background: var(--paper); }
  :root:not([data-theme="light"]) .datebar { position: relative; z-index: 2; }
  :root:not([data-theme="light"]) .masthead { position: relative; isolation: isolate; }
  :root:not([data-theme="light"]) .masthead::before { content: "MT"; position: absolute; z-index: -1; right: 2%; top: 50%; transform: translateY(-50%); font-family: var(--gothic); font-size: 300px; line-height: 1; color: #211F1C; pointer-events: none; }
  :root:not([data-theme="light"]) .mark { filter: brightness(0) invert(93%) sepia(10%) saturate(200%); }
  :root:not([data-theme="light"]) nav.sections { border-top: 3px solid #9E1F27; border-bottom-color: var(--rule); }
  :root:not([data-theme="light"]) .r-bar { border-bottom: 3px solid #9E1F27; }
  :root:not([data-theme="light"]) .week60, :root:not([data-theme="light"]) .pwatch { border-top-color: #9E1F27; }
  :root:not([data-theme="light"]) .lang button[aria-pressed="true"], :root:not([data-theme="light"]) .lang a[aria-current="true"] { background: #9E1F27; color: #FFFFFF; }
  :root:not([data-theme="light"]) .sub, :root:not([data-theme="light"]) .sub2, :root:not([data-theme="light"]) .t-item:not(.t-earlier) { border-left: 4px solid #9E1F27; }
  :root:not([data-theme="light"]) .sub input, :root:not([data-theme="light"]) .sub2 input { background: #0F0E0D; color: var(--ink); border-color: #4A453E; }
  :root:not([data-theme="light"]) .r-art .why, :root:not([data-theme="light"]) .pw-why p { background: #211F1C; }
  :root:not([data-theme="light"]) .ph img { background: #2A2723; filter: brightness(.92); }
  :root:not([data-theme="light"]) .t-label { background: #9E1F27; }
  :root:not([data-theme="light"]) .seal { background: #9E1F27; }
  :root:not([data-theme="light"]) .btn { background: #A8232C !important; color: #FFFFFF !important; }
  :root:not([data-theme="light"]) .btn:hover { background: #BE2C35 !important; }
  :root:not([data-theme="light"]) .theme-btn .ic-moon { display: none; }
  :root:not([data-theme="light"]) .theme-btn .ic-sun { display: block; }
  :root:not([data-theme="light"]) .story, :root:not([data-theme="light"]) .desk-topic, :root:not([data-theme="light"]) .empty, :root:not([data-theme="light"]) footer { border-top-color: var(--rule); }
  @media (max-width: 560px) {
    :root:not([data-theme="light"]) .masthead::before { font-size: 160px; right: 0; }
  }
}
:root[data-theme="dark"] { color-scheme: dark; --paper: #171615; --ink: #F1ECE0; --muted: #B3AB9C; --rule: #3A3630; --accent: #D8444D; --panel: #23211E; --panel-ink: #F1ECE0; --panel-muted: #B3AB9C; background: var(--paper); }
:root[data-theme="dark"] .datebar { position: relative; z-index: 2; }
:root[data-theme="dark"] .masthead { position: relative; isolation: isolate; }
:root[data-theme="dark"] .masthead::before { content: "MT"; position: absolute; z-index: -1; right: 2%; top: 50%; transform: translateY(-50%); font-family: var(--gothic); font-size: 300px; line-height: 1; color: #211F1C; pointer-events: none; }
:root[data-theme="dark"] .mark { filter: brightness(0) invert(93%) sepia(10%) saturate(200%); }
:root[data-theme="dark"] nav.sections { border-top: 3px solid #9E1F27; border-bottom-color: var(--rule); }
:root[data-theme="dark"] .r-bar { border-bottom: 3px solid #9E1F27; }
:root[data-theme="dark"] .week60, :root[data-theme="dark"] .pwatch { border-top-color: #9E1F27; }
:root[data-theme="dark"] .lang button[aria-pressed="true"], :root[data-theme="dark"] .lang a[aria-current="true"] { background: #9E1F27; color: #FFFFFF; }
:root[data-theme="dark"] .sub, :root[data-theme="dark"] .sub2, :root[data-theme="dark"] .t-item:not(.t-earlier) { border-left: 4px solid #9E1F27; }
:root[data-theme="dark"] .sub input, :root[data-theme="dark"] .sub2 input { background: #0F0E0D; color: var(--ink); border-color: #4A453E; }
:root[data-theme="dark"] .r-art .why, :root[data-theme="dark"] .pw-why p { background: #211F1C; }
:root[data-theme="dark"] .ph img { background: #2A2723; filter: brightness(.92); }
:root[data-theme="dark"] .t-label { background: #9E1F27; }
:root[data-theme="dark"] .seal { background: #9E1F27; }
:root[data-theme="dark"] .btn { background: #A8232C !important; color: #FFFFFF !important; }
:root[data-theme="dark"] .btn:hover { background: #BE2C35 !important; }
:root[data-theme="dark"] .theme-btn .ic-moon { display: none; }
:root[data-theme="dark"] .theme-btn .ic-sun { display: block; }
:root[data-theme="dark"] .story, :root[data-theme="dark"] .desk-topic, :root[data-theme="dark"] .empty, :root[data-theme="dark"] footer { border-top-color: var(--rule); }
@media (max-width: 560px) {
  :root[data-theme="dark"] .masthead::before { font-size: 160px; right: 0; }
}

.story-page .r-bar { position: sticky; top: 0; }
a.r-back { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.r-bar .lang { margin-left: auto; }
.lang a { display: inline-flex; align-items: center; box-sizing: border-box; font: 600 12px var(--sans); letter-spacing: .08em; padding: 8px 14px; min-height: 36px; color: var(--muted); text-decoration: none; }
.lang a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.story-after { max-width: 760px; padding-bottom: 32px; }
.more-issue { margin-top: 28px; }
.more-issue h2 { margin: 0 0 4px; font: 600 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.more-issue ul { list-style: none; margin: 0; padding: 0; }
.more-issue li { padding-block: 12px; border-top: 1px solid var(--rule); font-size: 17px; line-height: 1.4; }
.more-issue a { text-decoration: none; }
.more-issue a:hover { color: var(--accent); }
.issue-page, .lost { padding-block: 24px 40px; }
.issue-page h1, .lost h1 { margin: 8px 0 12px; font-size: 32px; line-height: 1.2; text-wrap: balance; }
.issue-page .arch-all { margin-top: 20px; }
.lost { max-width: 640px; }
.lost p { font-size: 18px; }
.lost-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font: 600 14px var(--sans); }
.lost-links a { color: var(--accent); }
.brief-list { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.brief-list li { display: flex; gap: 18px; padding-block: 12px; border-top: 1px solid var(--rule); font-size: 17px; line-height: 1.4; }
.brief-list .bl-date { flex-shrink: 0; min-width: 120px; font: 13px/1.9 var(--sans); color: var(--muted); }
.about-page { max-width: 720px; padding-block: 24px 48px; }
.about-page h1 { margin: 8px 0 12px; font-size: 32px; line-height: 1.2; }
.about-page h2 { margin: 32px 0 8px; font-size: 22px; line-height: 1.3; }
.about-page p, .about-page li { font-size: 18px; line-height: 1.65; }
.about-page ul { padding-left: 1.2em; }
.about-page li { margin: 6px 0; }
.about-page a { color: var(--accent); }
.topic-page { max-width: 760px; padding-block: 20px 40px; }
.topic-page h1 { margin: 12px 0 16px; font-size: 32px; line-height: 1.2; }
.t-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 600 13px var(--sans); letter-spacing: .04em; }
.t-nav a { color: var(--muted); text-decoration: none; padding-block: 6px; }
.t-nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px var(--accent); }
.t-nav .t-search { margin-left: auto; color: var(--accent); }
.topic-list { list-style: none; margin: 0; padding: 0; }
.topic-list li { display: flex; gap: 18px; padding-block: 14px; border-top: 1px solid var(--rule); }
.topic-list .bl-date { flex-shrink: 0; min-width: 120px; font: 13px/1.9 var(--sans); color: var(--muted); }
.topic-list a { font-size: 19px; line-height: 1.35; font-weight: 600; text-decoration: none; color: var(--ink); }
.topic-list a:hover { color: var(--accent); }
.topic-list p { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.search-page form { margin: 0 0 8px; }
.s-status { font: 14px var(--sans); color: var(--muted); min-height: 1.4em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.t-more { display: inline-block; margin-top: 20px; font: 600 14px var(--sans); color: var(--accent); text-decoration: none; }
@media (max-width: 560px) { .topic-list li { flex-direction: column; gap: 2px; } }
.brief-list a { text-decoration: none; }
.brief-list a:hover { color: var(--accent); }
@media (max-width: 560px) { .brief-list li { flex-direction: column; gap: 2px; } }
@media (max-width: 560px) { .r-bar .r-name { display: none; } }