/* SlovenskeNoviny - a live world-news daily.
   Identity: cool newsprint white, near-black ink, and one "live wire" ultramarine reserved for things
   that are alive (pulse lines, versions, the Update button, links on hover). Headlines in Schibsted
   Grotesk (a news publisher's own face), reading text in Literata, time and data in Spline Sans Mono. */

:root {
  --paper: #f4f5f2;
  --paper-2: #eaece6;
  --card: #fbfbf9;
  --ink: #12151c;
  --ink-2: #3b4150;
  --muted: #6c7180;
  --rule: #d5d8d0;
  --live: #2a3cf5;
  --live-soft: #e3e6ff;
  --disputed: #b8740a;
  --confirmed: #1c7a57;
  --single: #7a6f5a;
  --al-west: #4a5a82; --al-russia: #a33b32; --al-china: #b8740a; --al-middle_east: #2f7d73; --al-global_south: #7a4fa0; --al-ukraine: #2f6fb8;
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --text: "Literata", Georgia, "Times New Roman", serif;
  --mono: "Spline Sans Mono", ui-monospace, Menlo, monospace;
  --wrap: 1280px;
  --gut: clamp(16px, 3vw, 32px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1218; --paper-2: #161a22; --card: #141821; --ink: #e9ebe6; --ink-2: #c3c7cf; --muted: #8b92a1; --rule: #262c38;
    --live: #7c8aff; --live-soft: #1d2340; --disputed: #e3a23f; --confirmed: #4fc494; --single: #b0a58f;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--text); font-optical-sizing: auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--live); }
:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.mono { font-family: var(--mono); font-size: 0.78em; letter-spacing: 0.01em; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

/* ---- Masthead ------------------------------------------------------------------------------ */
.masthead { border-bottom: 1px solid var(--ink); background: var(--paper); }
.masthead-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-top: 18px; padding-bottom: 12px; }
.dateline { color: var(--muted); text-transform: capitalize; }
.brand { font: 900 clamp(1.9rem, 4.6vw, 3.4rem)/0.95 var(--display); letter-spacing: -0.035em; text-align: center; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand::after { content: ""; display: inline-block; width: 0.22em; height: 0.22em; margin-left: 0.08em; border-radius: 50%; background: var(--live); vertical-align: 0.12em; animation: beat 2.4s ease-in-out infinite; }
.brand-small { font-size: 1.5rem; text-align: left; }
.masthead-tools { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.search-mini input { font: 0.9rem var(--display); background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 4px 2px; width: 12rem; color: var(--ink); }
.search-mini input:focus { outline: none; border-color: var(--live); }
.lang-switch { font: 600 0.88rem var(--display); border: 1px solid var(--ink); border-radius: 999px; padding: 3px 12px 3px 4px; display: inline-flex; gap: 8px; align-items: center; }
.lang-switch .mono { background: var(--ink); color: var(--paper); border-radius: 999px; padding: 1px 7px; }
.lang-switch:hover { border-color: var(--live); }
.sections { display: flex; gap: 2px 22px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 10px; font: 600 0.92rem var(--display); }
.sections a { padding: 4px 0; border-bottom: 2px solid transparent; color: var(--ink-2); }
.sections a[aria-current="page"], .sections a:hover { color: var(--ink); border-bottom-color: var(--live); }
.nav-map { margin-left: auto; }

/* ---- The pulse line (signature) ---------------------------------------------------------------- */
.pulse { position: relative; height: 12px; margin: 10px 0 6px; }
.pulse-track { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
.pulse-tick { position: absolute; top: 2px; width: 2px; height: 8px; margin-left: -1px; background: var(--ink-2); border-radius: 1px; }
.pulse-head { position: absolute; top: 2px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--muted); }
.pulse.is-live .pulse-track { background: linear-gradient(90deg, var(--rule) 0%, var(--rule) 60%, var(--live) 100%); }
.pulse.is-live .pulse-head { background: var(--live); box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); animation: ping 2.4s ease-out infinite; }
.pulse-big { height: 18px; margin: 16px 0 8px; }
.pulse-big .pulse-tick { top: 3px; height: 12px; width: 3px; }
.pulse-big .pulse-head { top: 3px; width: 12px; height: 12px; margin-left: -6px; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes beat { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); margin-right: 6px; vertical-align: 0.05em; animation: beat 2.4s ease-in-out infinite; }

/* ---- Eyebrows, cards ------------------------------------------------------------------------------- */
.eyebrow { font: 700 0.74rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-2); margin: 0 0 6px; }
.eyebrow a:hover { color: var(--live); }
.move { font-family: var(--mono); font-size: 0.72rem; margin-left: 8px; letter-spacing: 0; }
.move-up { color: var(--confirmed); } .move-down { color: var(--muted); }
.card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; background: var(--paper-2); }
.card-title { font: 800 1.2rem/1.14 var(--display); letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
.card-l .card-title { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.card-s .card-title { font-size: 1.02rem; font-weight: 700; }
.card-dek { margin: 0; color: var(--ink-2); font-size: 0.97rem; line-height: 1.5; }
.card-meta { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ---- Front page -------------------------------------------------------------------------------------- */
.front { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 40px; padding: 32px 0 36px; border-bottom: 1px solid var(--rule); }
.lead-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; margin-bottom: 18px; }
.lead-title { font: 900 clamp(2.1rem, 4.6vw, 3.9rem)/1.0 var(--display); letter-spacing: -0.03em; margin: 4px 0 14px; text-wrap: balance; }
.lead-dek { font-size: 1.2rem; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 46ch; }
.stream { border-left: 1px solid var(--rule); padding-left: 24px; }
.rail-title { font: 800 0.8rem var(--display); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.stream .rail-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: beat 2.4s ease-in-out infinite; }
.stream-list { list-style: none; margin: 0; padding: 0; position: relative; }
.stream-list::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px; background: var(--rule); }
.stream-list li { position: relative; padding: 0 0 16px 20px; }
.stream-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink-2); }
.stream-list li:first-child::before { background: var(--live); border-color: var(--live); }
.stream-list time { display: block; color: var(--live); }
.stream-list strong { display: block; font: 700 0.98rem/1.25 var(--display); }
.stream-list span { display: block; font-size: 0.9rem; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.grid-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; padding: 32px 0; }
.grid-top .card-l { grid-column: span 2; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.band { border-top: 1px solid var(--ink); padding: 20px 0 36px; }
.band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.band-head h2 { font: 900 1.6rem var(--display); letter-spacing: -0.02em; margin: 0; }
.band-head p { margin: 0; }
.band-blind { background: var(--paper-2); border-top-color: var(--disputed); margin: 0 calc(-1 * var(--gut)); padding-left: var(--gut); padding-right: var(--gut); }
.headline-list { columns: 2; column-gap: 40px; list-style: none; padding: 0; margin: 0; }
.headline-list li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--rule); font: 600 1rem/1.3 var(--display); }

/* ---- Story page ------------------------------------------------------------------------------------------ */
.story { padding: 28px 0 0; }
.story-head { max-width: 900px; }
.story-title { font: 900 clamp(2rem, 4.4vw, 3.5rem)/1.02 var(--display); letter-spacing: -0.03em; margin: 6px 0 14px; text-wrap: balance; }
.story-dek { font-size: 1.28rem; line-height: 1.45; color: var(--ink-2); margin: 0 0 18px; max-width: 52ch; }
.livebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.livebar-state { color: var(--live); font-weight: 600; }
.btn-update { margin-left: auto; font: 700 0.92rem var(--display); color: #fff; background: var(--live); border: 0; border-radius: 999px; padding: 8px 16px 8px 12px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.btn-update:hover { filter: brightness(1.08); }
.btn-update[aria-busy="true"] .btn-update-icon { animation: spin 1s linear infinite; }
.btn-update:disabled { opacity: 0.7; cursor: default; }
@keyframes spin { to { transform: rotate(360deg); } }
.livebar-msg { width: 100%; font: 0.9rem var(--display); color: var(--live); min-height: 0; }
.livebar-msg:empty { display: none; }
.since { border: 1px solid var(--live); background: var(--live-soft); border-radius: 6px; padding: 14px 18px; margin: 18px 0; max-width: 820px; }
.since h2 { font: 800 0.95rem var(--display); margin: 0 0 6px; color: var(--live); }
.since-list { margin: 0; padding-left: 18px; }
.since-list li[hidden] { display: none; }
.view-toggle { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 3px; margin: 18px 0 6px; }
.view-toggle button { font: 600 0.85rem var(--display); background: none; border: 0; border-radius: 999px; padding: 5px 14px; color: var(--ink-2); cursor: pointer; }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.mode-view { max-width: 700px; margin: 18px 0 8px; }
.brief-view p { font-size: 1.22rem; line-height: 1.62; margin: 0 0 1em; }
.brief-facts { padding-left: 20px; margin: 4px 0 0; font-size: 1.02rem; }
.brief-facts li { margin-bottom: 6px; }
.tldr-view { border-left: 3px solid var(--live); padding: 4px 0 4px 20px; }
.tldr-summary { font: 700 1.35rem/1.4 var(--display); letter-spacing: -0.01em; margin: 0 0 12px; }
.tldr-bullets { margin: 0; padding-left: 20px; font-size: 1.08rem; }
.tldr-bullets li { margin-bottom: 8px; }
.tldr-bullets li::marker { color: var(--live); }
.hero { margin: 18px 0 8px; }
.hero img { width: 100%; max-height: 640px; object-fit: cover; border-radius: 3px; }
.hero figcaption { font: 0.82rem var(--display); color: var(--muted); padding-top: 6px; }
.story-grid { display: grid; grid-template-columns: minmax(0, 680px) minmax(260px, 1fr); gap: 56px; padding: 18px 0 28px; }
.kicker { font: 800 0.8rem var(--display); text-transform: uppercase; letter-spacing: 0.1em; margin: 34px 0 10px; }
.whatsnew { border-left: 3px solid var(--live); padding: 2px 0 2px 18px; margin: 18px 0 26px; }
.whatsnew .kicker { margin-top: 0; color: var(--live); }
.whatsnew ul { margin: 0; padding-left: 18px; font-size: 1.04rem; }
.prose { font-size: 1.14rem; line-height: 1.7; }
.prose p { margin: 0 0 1.05em; }
.prose h2 { font: 800 1.45rem/1.2 var(--display); letter-spacing: -0.015em; margin: 1.6em 0 0.5em; }
.lede { font-size: 1.24rem; }
.lede::first-letter { font: 900 3.6em/0.8 var(--display); float: left; margin: 0.06em 0.08em 0 0; color: var(--ink); }
[data-h].is-new { background: linear-gradient(90deg, var(--live-soft), transparent 85%); box-shadow: -14px 0 0 var(--live-soft); border-radius: 2px; }
[data-h].is-new::before { content: attr(data-newlabel); display: block; font: 700 0.7rem var(--display); text-transform: uppercase; letter-spacing: 0.1em; color: var(--live); }
.refs { font-family: var(--mono); font-size: 0.62em; margin-left: 2px; }
.ref { display: inline-block; min-width: 1.5em; text-align: center; border: 1px solid var(--rule); border-radius: 3px; margin-left: 2px; padding: 0 3px; color: var(--muted); line-height: 1.5; }
.ref:hover { border-color: var(--live); color: var(--live); }
.why { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 4px 22px 8px; margin-top: 28px; }
.why .kicker { margin-top: 16px; }
.knowns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.knowns ul { padding-left: 18px; margin: 0; }
.knowns li { margin-bottom: 6px; }
.knowns > div:last-child .kicker { color: var(--disputed); }
.timeline ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--ink); }
.timeline li { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 6px 0 10px 16px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -4px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.tl-when { color: var(--muted); padding-top: 3px; }
.quotes blockquote { margin: 0 0 18px; padding: 0 0 0 18px; border-left: 3px solid var(--ink); }
.quotes blockquote p { font: italic 400 1.2rem/1.5 var(--text); margin: 0 0 4px; }
.quotes footer { font: 600 0.9rem var(--display); }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.video { margin: 0; }
.video-play { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; border-radius: 3px; overflow: hidden; }
.video-play img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: 0.85; }
.video-play span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 2.4rem; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 3px; }
.video figcaption { font: 600 0.9rem/1.3 var(--display); padding-top: 6px; }
.tag { font: 600 0.68rem var(--mono); text-transform: none; letter-spacing: 0; border: 1px solid var(--rule); border-radius: 3px; padding: 1px 6px; color: var(--muted); vertical-align: 0.15em; }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.post { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px; font-size: 0.95rem; }
.post p { margin: 0 0 10px; }
.post footer { font: 0.82rem var(--display); color: var(--muted); }
.stance { color: var(--ink-2); }

/* rail */
.story-rail { font-family: var(--display); font-size: 0.95rem; }
.story-rail > section { padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid var(--rule); }
.facts ul { list-style: none; padding: 0; margin: 0; }
.fact { padding: 8px 0 8px 12px; border-left: 3px solid var(--confirmed); margin-bottom: 8px; line-height: 1.4; }
.fact.st-disputed { border-left-color: var(--disputed); }
.fact.st-single_source { border-left-color: var(--single); }
.fact-status { display: block; text-transform: uppercase; letter-spacing: 0.06em; color: var(--confirmed); margin-bottom: 2px; }
.st-disputed .fact-status { color: var(--disputed); }
.st-single_source .fact-status { color: var(--single); }
.pbar { display: flex; height: 26px; border-radius: 4px; overflow: hidden; gap: 2px; margin-bottom: 10px; }
.pbar-seg { display: flex; align-items: center; padding: 0 6px; color: #fff; font: 600 0.72rem var(--display); white-space: nowrap; overflow: hidden; min-width: 22px; }
.pbar-seg em { font-style: normal; overflow: hidden; text-overflow: ellipsis; margin-right: 4px; }
.al-west { background: var(--al-west); } .al-russia { background: var(--al-russia); } .al-china { background: var(--al-china); }
.al-middle_east { background: var(--al-middle_east); } .al-global_south { background: var(--al-global_south); } .al-ukraine { background: var(--al-ukraine); }
.al-text { background: none !important; font-weight: 700; }
.al-text.al-west { color: var(--al-west); } .al-text.al-russia { color: var(--al-russia); } .al-text.al-china { color: var(--al-china); }
.al-text.al-middle_east { color: var(--al-middle_east); } .al-text.al-global_south { color: var(--al-global_south); } .al-text.al-ukraine { color: var(--al-ukraine); }
@media (prefers-color-scheme: dark) { .al-text { filter: brightness(1.5); } }
.persp { list-style: none; padding: 0; margin: 0; }
.persp li { padding: 6px 0; line-height: 1.4; }
.src-list { list-style: none; padding: 0; margin: 0; }
.src-list li { display: grid; grid-template-columns: 1.8em 1fr auto; gap: 2px 8px; padding: 7px 0; border-bottom: 1px dashed var(--rule); scroll-margin-top: 80px; }
.src-list li:target { background: var(--live-soft); }
.src-n { color: var(--muted); padding-top: 2px; }
.src-list a { font-weight: 700; }
.src-title { grid-column: 2 / 4; color: var(--muted); font-size: 0.85rem; line-height: 1.35; }
.tier { color: var(--live); font-size: 0.6rem; letter-spacing: 1px; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; gap: 6px; align-items: baseline; border: 1px solid var(--rule); border-radius: 999px; padding: 3px 10px; font: 600 0.85rem var(--display); background: var(--card); }
.chip:hover { border-color: var(--live); }
.chip-type { font: 0.66rem var(--mono); color: var(--muted); text-transform: uppercase; }

/* ---- Flow diagram --------------------------------------------------------------------------------- */
.flow-wrap { margin-top: 12px; }
.flow { position: relative; overflow: hidden; height: 420px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); }
.flow svg { display: block; width: 100%; height: 100%; font-family: var(--display); }
.flow .axis line { stroke: var(--rule); }
.flow .axis text { fill: var(--muted); font: 10px var(--mono); }
.flow .spine { stroke: var(--ink); stroke-width: 2; }
.flow .spine-live { stroke: var(--live); stroke-width: 2; stroke-dasharray: 4 4; }
.flow .ev circle { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.flow .ev text { fill: var(--ink); font-size: 12px; }
.flow .ev .when { fill: var(--muted); font: 10px var(--mono); }
.flow .ver rect { fill: var(--live); }
.flow .ver text { fill: var(--live); font: 600 10px var(--mono); }
.flow .ent line, .flow .br path { stroke: var(--rule); stroke-width: 1.2; fill: none; }
.flow .ent a rect, .flow .br a rect { fill: var(--paper); stroke: var(--rule); }
.flow .ent a:hover rect, .flow .br a:hover rect, .flow a:focus rect { stroke: var(--live); }
.flow .ent text { fill: var(--ink-2); font-size: 11px; font-weight: 600; }
.flow .br text { fill: var(--ink); font-size: 11px; font-weight: 700; }
.flow .br .kind { fill: var(--live); font: 9px var(--mono); text-transform: uppercase; }

/* ---- Map ------------------------------------------------------------------------------------------------ */
.map { position: relative; width: 100%; aspect-ratio: 2 / 1; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.map-teaser { aspect-ratio: 2.6 / 1; }
.map svg { width: 100%; height: 100%; display: block; }
.map .land { fill: color-mix(in srgb, var(--ink) 9%, var(--card)); stroke: color-mix(in srgb, var(--ink) 22%, var(--card)); stroke-width: 0.5; }
.map .land.hot { cursor: pointer; }
.map .land.hot:hover { stroke: var(--ink); stroke-width: 1; }
.map .heat { mix-blend-mode: multiply; }
.map .dot { fill: var(--ink); fill-opacity: 0.55; stroke: var(--card); stroke-width: 1; cursor: pointer; }
.map .dot:hover, .map .dot:focus { fill-opacity: 0.95; fill: var(--live); }
.heat-legend { position: absolute; left: 12px; bottom: 10px; display: flex; align-items: center; gap: 8px; font: 600 0.75rem var(--display); color: var(--ink-2); background: color-mix(in srgb, var(--card) 85%, transparent); padding: 4px 8px; border-radius: 6px; }
.heat-legend i { display: inline-block; width: 110px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(245,190,150,0.3), rgb(240,140,90), rgb(235,104,52), rgb(150,45,15)); }
@media (prefers-color-scheme: dark) { .map .heat { mix-blend-mode: screen; } }
.map-tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); font: 600 0.85rem var(--display); padding: 6px 10px; border-radius: 4px; max-width: 260px; }
.map-filters { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin: 0 0 16px; font: 0.95rem var(--display); }
.map-filters select { font: inherit; padding: 5px 8px; border: 1px solid var(--rule); border-radius: 4px; background: var(--card); color: var(--ink); }
.map-list { padding: 24px 0; }
.map-list h2 { font: 800 1.4rem var(--display); margin: 0 0 12px; }
.map-list ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 32px; }
.map-list li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--rule); font: 600 0.98rem/1.3 var(--display); }
.btn-quiet { font: 600 0.9rem var(--display); background: var(--ink); color: var(--paper); border: 0; border-radius: 4px; padding: 6px 14px; cursor: pointer; }

/* ---- Other pages ---------------------------------------------------------------------------------------- */
.page-head { padding: 28px 0 8px; max-width: 900px; }
.page-head h1, .entity-head h1, .prose-page h1, .message h1 { font: 900 clamp(2rem, 4vw, 3rem)/1.05 var(--display); letter-spacing: -0.03em; margin: 4px 0 10px; }
.topic-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.topic-nav a { font: 600 0.88rem var(--display); border: 1px solid var(--rule); border-radius: 999px; padding: 3px 12px; }
.topic-nav a:hover { border-color: var(--live); }
.entity-head { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 28px; padding: 28px 0 24px; align-items: start; }
.entity-head:not(:has(figure)) { grid-template-columns: 1fr; }
.entity-img { margin: 0; }
.entity-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.entity-img figcaption { font: 0.75rem var(--display); color: var(--muted); padding-top: 4px; }
.entity-timeline { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--ink); }
.entity-timeline li { display: grid; grid-template-columns: 11em 1fr; gap: 18px; padding: 0 0 22px 18px; position: relative; }
.entity-timeline li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--live); }
.entity-timeline time { color: var(--muted); padding-top: 3px; }
.search-big { display: flex; gap: 8px; margin-top: 8px; }
.search-big input { flex: 1; font: 1.2rem var(--display); padding: 10px 12px; border: 1px solid var(--ink); border-radius: 4px; background: var(--card); color: var(--ink); }
table.outlets { width: 100%; border-collapse: collapse; font: 0.95rem var(--display); margin-bottom: 40px; }
.outlets th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--ink); }
.outlets td { padding: 8px; border-bottom: 1px solid var(--rule); }
.num { text-align: right; }
.prose-page { max-width: 720px; padding-bottom: 48px; }
.prose-page h2 { font: 800 1.3rem var(--display); margin: 1.6em 0 0.4em; }
.impressum { display: grid; grid-template-columns: 10em 1fr; gap: 6px 16px; font-family: var(--display); }
.impressum dt { color: var(--muted); }
.impressum dd { margin: 0; }
.brief { list-style: none; counter-reset: brief; padding: 0; max-width: 760px; }
.brief li { counter-increment: brief; padding: 18px 0 18px 64px; border-bottom: 1px solid var(--rule); position: relative; }
.brief li::before { content: counter(brief); position: absolute; left: 0; top: 10px; font: 900 2.8rem var(--display); color: var(--live); }
.brief h2 { font: 800 1.35rem/1.2 var(--display); margin: 0 0 6px; }
.corrections { list-style: none; padding: 0; }
.corrections li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.message { max-width: 620px; padding: 80px 0; }
.related .mono { margin: 0 0 6px; text-transform: uppercase; }
.versions { padding-left: 18px; }
.versions li { margin-bottom: 6px; }

/* ---- Footer -------------------------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--ink); margin-top: 40px; padding: 32px 0 48px; font-family: var(--display); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer nav { display: flex; flex-direction: column; gap: 6px; font-size: 0.95rem; }

/* ---- Responsive ---------------------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .grid-top, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .masthead-top { grid-template-columns: 1fr auto; }
  .dateline { display: none; }
  .brand { text-align: left; }
  .search-mini { display: none; }
  .sections { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .sections a { white-space: nowrap; }
  .front { grid-template-columns: 1fr; gap: 24px; }
  .stream { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 18px; }
  .grid-top, .grid-4 { grid-template-columns: 1fr; }
  .grid-top .card-l { grid-column: auto; }
  .headline-list, .map-list ul { columns: 1; }
  .knowns { grid-template-columns: 1fr; }
  .timeline li, .entity-timeline li { grid-template-columns: 1fr; gap: 2px; }
  .entity-head { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn-update { margin-left: 0; }
  .map { aspect-ratio: 1.4 / 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .masthead-tools, .sections, .livebar button, .view-toggle, .footer, .videos, .flow-wrap { display: none; }
}

/* ---- /adminko gate ------------------------------------------------------------------------------ */
.admin-gate { max-width: 460px; padding-top: 12vh; padding-bottom: 12vh; }
.admin-gate h1 { font: 900 2.4rem/1 var(--display); letter-spacing: -0.03em; margin: 0 0 12px; }
.admin-form { display: grid; gap: 14px; margin-top: 22px; }
.admin-form label { display: grid; gap: 6px; font: 600 0.9rem var(--display); }
.admin-form input { font: 1rem var(--display); padding: 10px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); }
.admin-form input:focus { outline: 2px solid var(--live); border-color: var(--live); }
.admin-form .btn-update { margin: 8px 0 0; justify-content: center; padding: 11px 16px; }
.admin-error { border-left: 3px solid var(--al-russia); padding: 6px 12px; background: var(--card); font-family: var(--display); }

/* ---- Flow diagram: zoom, pan, full screen ------------------------------------------------------- */
.flow-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.flow-head .kicker { margin-bottom: 4px; }
.flow-head p { margin: 0 0 8px; }
.flow-tools { display: inline-flex; gap: 6px; margin-bottom: 8px; }
.flow-tools button { font: 600 0.85rem var(--display); background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; cursor: pointer; min-width: 36px; }
.flow-tools button:hover { border-color: var(--live); color: var(--live); }
.flow { cursor: grab; touch-action: none; overscroll-behavior: contain; }
.flow.is-dragging { cursor: grabbing; user-select: none; }
.flow-wrap.is-full { position: fixed; inset: 0; z-index: 100; margin: 0; padding: 16px var(--gut); background: var(--paper); display: flex; flex-direction: column; }
.flow-wrap:fullscreen { background: var(--paper); }
.flow-wrap.is-full .flow { flex: 1; height: auto; }
.flow-wrap.is-full .flow-head .kicker { margin-top: 0; }

/* ---- Flow diagram on phones: a vertical timeline ------------------------------------------------ */
.flow-vertical .flow-tools { display: none; }
.flow-vertical .flow { height: auto; overflow: visible; border: 0; background: none; cursor: auto; touch-action: auto; }
.vflow { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; font-family: var(--display); }
.vflow::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--ink); border-radius: 1px; }
.vflow li { position: relative; padding: 0 0 18px; }
.vflow li::before { content: ""; position: absolute; left: -21px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); }
.vflow li.vflow-version::before { background: var(--live); border-color: var(--live); border-radius: 2px; transform: rotate(45deg); width: 8px; height: 8px; left: -20px; }
.vflow li.vflow-branch::before { border-color: var(--live); }
.vflow li.vflow-now::before { background: var(--live); border-color: var(--live); animation: beat 2.4s ease-in-out infinite; }
.vflow-day { font: 700 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 2px; }
.vflow-when { font: 0.78rem var(--mono); color: var(--muted); }
.vflow-text { margin: 2px 0 6px; font: 500 1rem/1.45 var(--display); color: var(--ink); }
.vflow-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vflow-chip { font: 600 0.8rem var(--display); border: 1px solid var(--rule); border-radius: 999px; padding: 3px 10px; background: var(--card); }
.vflow-version { margin: 0; font: 600 0.88rem var(--display); color: var(--live); }
.vflow-branch { display: block; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; background: var(--card); font: 700 0.92rem/1.35 var(--display); }
.vflow-kind { display: block; font: 600 0.68rem var(--mono); text-transform: uppercase; color: var(--live); margin-bottom: 2px; }