/* Giurgiu–Ruse. Light theme: dusk on paper. Dark theme: night. The map is a night plate in both. */
:root {
  color-scheme: light;
  --bg: #f5efe4; --bg2: #ece3d3; --card: #fbf7ef; --ink: #1d232b; --muted: #4c5562; --line: #d5c9b4; --line-soft: #e2d8c6;
  --accent: #8f3418; --accent-ink: #fff; --river: #1f5a78; --rb: #c2462a; --focus: #8f3418;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bar: 2.75rem;
  /* scene: dusk */
  --sc-sky0: #41618f; --sc-sky1: #d99c8a; --sc-sky2: #f6cf96; --sc-glow: #ffe2a8; --sc-disc: #fff3d6; --sc-star: #fff; --sc-cloud: #f4c29a;
  --sc-hill: #b9a08e; --sc-bank: #98806f; --sc-town: #6e5b55; --sc-lamp: #ffd27a; --sc-haze: #f2cfa3; --sc-isle: #5b5a43;
  --sc-w0: #d9b190; --sc-w1: #7f8e98; --sc-w2: #3c5468; --sc-ripple: #f6dcc0; --sc-glint: #fff1cf;
  --sc-steel: #2d2a33; --sc-pier: #3b3640; --sc-near0: #4c4a34; --sc-near1: #24251b; --sc-reed: #2b2a1f; --sc-tree: #22231a;
  --sc-hull: #2a2628; --sc-sail: #efe2cb; --sc-ship: #e8dccb; --sc-smoke: #ffffffaa; --sc-car: #7d2f24; --sc-wood: #5a4127; --sc-stone: #8d7a68; --sc-flag: #a6322a; --sc-roof: #6f3427;
  --to-top-bg: #f5efe4; --to-top-fg: #1d232b;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b111d; --bg2: #101828; --card: #111a2a; --ink: #ece6da; --muted: #b3bccb; --line: #263247; --line-soft: #1b2537;
  --accent: #f3a27c; --accent-ink: #0b111d; --river: #8cc4e2; --rb: #ff8a6a; --focus: #f3a27c;
  --sc-sky0: #070b1c; --sc-sky1: #10183a; --sc-sky2: #24305f; --sc-glow: #9fb4e8; --sc-disc: #f1ecd8; --sc-star: #e9eefc; --sc-cloud: #233150;
  --sc-hill: #0d142b; --sc-bank: #05070e; --sc-town: #04060c; --sc-lamp: #ffb35c; --sc-haze: #2a3557; --sc-isle: #0e1420;
  --sc-w0: #1b2650; --sc-w1: #101833; --sc-w2: #080d1c; --sc-ripple: #3a4c74; --sc-glint: #d9e2ff;
  --sc-steel: #56638a; --sc-pier: #0a0e1a; --sc-near0: #1a2236; --sc-near1: #0c111d; --sc-reed: #2a3550; --sc-tree: #1a2236;
  --sc-hull: #05070c; --sc-sail: #9ba7c2; --sc-ship: #aab5cc; --sc-smoke: #9aa6c055; --sc-car: #5a2a2a; --sc-wood: #2d2a2a; --sc-stone: #2a3144; --sc-flag: #7a3030; --sc-roof: #1c1622;
  --to-top-bg: #0b111d; --to-top-fg: #ece6da;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b111d; --bg2: #101828; --card: #111a2a; --ink: #ece6da; --muted: #b3bccb; --line: #263247; --line-soft: #1b2537;
    --accent: #f3a27c; --accent-ink: #0b111d; --river: #8cc4e2; --rb: #ff8a6a; --focus: #f3a27c;
    --sc-sky0: #070b1c; --sc-sky1: #10183a; --sc-sky2: #24305f; --sc-glow: #9fb4e8; --sc-disc: #f1ecd8; --sc-star: #e9eefc; --sc-cloud: #233150;
    --sc-hill: #0d142b; --sc-bank: #05070e; --sc-town: #04060c; --sc-lamp: #ffb35c; --sc-haze: #2a3557; --sc-isle: #0e1420;
    --sc-w0: #1b2650; --sc-w1: #101833; --sc-w2: #080d1c; --sc-ripple: #3a4c74; --sc-glint: #d9e2ff;
    --sc-steel: #56638a; --sc-pier: #0a0e1a; --sc-near0: #1a2236; --sc-near1: #0c111d; --sc-reed: #2a3550; --sc-tree: #1a2236;
    --sc-hull: #05070c; --sc-sail: #9ba7c2; --sc-ship: #aab5cc; --sc-smoke: #9aa6c055; --sc-car: #5a2a2a; --sc-wood: #2d2a2a; --sc-stone: #2a3144; --sc-flag: #7a3030; --sc-roof: #1c1622;
    --to-top-bg: #0b111d; --to-top-fg: #ece6da;
  }
}
/* scene parts that belong to one time of day */
.sc-stars, .sc-lamps, .sc-disc, path.sc-glint { opacity: 0; transition: opacity .4s; }
:root[data-theme="dark"] .sc-stars, :root[data-theme="dark"] .sc-lamps, :root[data-theme="dark"] .sc-disc { opacity: 1; }
:root[data-theme="dark"] path.sc-glint { opacity: .22; }
:root[data-theme="dark"] .sc-sunglow { opacity: 0; }
:root[data-theme="dark"] .sc-clouds { opacity: .45; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc-stars, :root:not([data-theme="light"]) .sc-lamps, :root:not([data-theme="light"]) .sc-disc { opacity: 1; }
  :root:not([data-theme="light"]) path.sc-glint { opacity: .22; }
  :root:not([data-theme="light"]) .sc-sunglow { opacity: 0; }
  :root:not([data-theme="light"]) .sc-clouds { opacity: .45; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
svg[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 1rem); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1.125rem/1.62 var(--serif); overflow-wrap: break-word; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--card); color: var(--ink); padding: .5rem .8rem; z-index: 50; }
.skip:focus { left: .5rem; top: .5rem; }
.wrap { max-width: 70rem; margin: 0 auto; padding: 0 16px; }
.read { max-width: 40rem; margin-left: auto; margin-right: auto; }
.num { font-variant-numeric: tabular-nums; }

/* topbar: slim, takes the scene's tone over the hero */
.topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--bar); z-index: 30; display: flex; align-items: center; gap: .9rem; padding: 0 12px 0 16px;
  font: 500 .82rem/1 var(--sans); background: var(--bg); border-bottom: 1px solid var(--line-soft); backdrop-filter: saturate(1.2); }
.topbar.over { background: transparent; border-color: transparent; }
.topbar.over .brand, .topbar.over .topnav a, .topbar.over .chip, .topbar.over .icon-btn { color: #fdf7ec; }
.brand { color: var(--ink); text-decoration: none; font-weight: 650; letter-spacing: .01em; white-space: nowrap; display: inline-flex; align-items: center; gap: .45rem; }
.brand svg { width: 22px; height: 14px; }
.topnav { display: flex; gap: .9rem; overflow: hidden; }
.topnav a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.topnav a:hover { color: var(--ink); }
.spacer { flex: 1; }
.chip { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .78rem; padding: .35rem .3rem; min-width: 32px; text-align: center; }
.chip[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; }
.topbar.over .chip[aria-current="page"] { color: #fff; }
.icon-btn { background: none; border: 0; color: var(--ink); width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
@media (max-width: 720px) { .topnav { display: none; } }

/* hero: the scene full-bleed, text over the water */
.hero { position: relative; min-height: min(100svh, 62rem); display: flex; align-items: flex-end; overflow: hidden; color: #fdf7ec; background: #2b3557; }
.hero .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,12,24,.0) 30%, rgba(8,12,24,.38) 62%, rgba(8,12,24,.78) 100%); pointer-events: none; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6,10,22,.62) 0%, rgba(6,10,22,.35) 38%, rgba(6,10,22,0) 62%); pointer-events: none; }
@media (max-width: 700px) { .hero::before { background: linear-gradient(180deg, rgba(6,10,22,0) 30%, rgba(6,10,22,.5) 60%); } }
.hero-text { position: relative; z-index: 2; padding: 0 16px 3.2rem; max-width: 70rem; margin: 0 auto; width: 100%; }
.hero-text > * { max-width: 42rem; }
.kicker { font: 650 .78rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .6rem; }
.hero .kicker { color: #ffd9a8; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
h1 { font-size: clamp(2.05rem, 4.6vw, 3.6rem); line-height: 1.06; margin: 0 0 1rem; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.hero h1, .hero .deck, .hero .cue { text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.45); }
.deck { font-size: clamp(1.08rem, 1.7vw, 1.28rem); line-height: 1.5; margin: 0 0 1rem; }
.deck strong { color: #ffe3b8; }
.cue { margin: 0; font: 600 .95rem/1.4 var(--sans); }
.cue a { color: #ffe3b8; }

/* sections */
.sec { padding: 3.6rem 0 1rem; }
.sec h2 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); line-height: 1.15; margin: .2rem 0 1rem; text-wrap: balance; }
.sec h2 .anchor { color: inherit; text-decoration: none; }
.sec h2 .anchor:hover::after { content: " #"; color: var(--muted); }
.when { display: block; font: 650 .78rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .2rem; }
sup a { text-decoration: none; font: 600 .7em var(--sans); padding: 0 .1em; }
.figure { margin: 1.6rem auto 0; max-width: 70rem; padding: 0 16px; }
.figure svg { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 760; border-radius: 6px; }
@media (max-width: 600px) { .figure svg, .atg .mini svg { aspect-ratio: 5 / 4; } }
.figure figcaption { font: .86rem/1.45 var(--sans); color: var(--muted); margin-top: .5rem; max-width: 40rem; }
.note { font: .95rem/1.5 var(--sans); color: var(--muted); }

/* the river map */
.river { padding-top: 3.2rem; }
.plate { background: #070c18; color: #e9e4d8; border-radius: 10px; padding: 14px 14px 16px; margin-top: 1rem; }
.plate a { color: #ffc28f; }
.mapbox { position: relative; }
.map { display: block; width: 100%; height: auto; aspect-ratio: 2.35 / 1; cursor: crosshair; touch-action: manipulation; border-radius: 6px; }
@media (max-width: 640px) { .map { aspect-ratio: 1.75 / 1; } }
.maphint { font: .8rem/1.4 var(--sans); color: #b8c0d0; margin: .35rem 0 0; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; list-style: none; padding: 0; margin: .4rem 0 0; font: .8rem/1.4 var(--sans); color: #c8cfdc; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; }
.legend .k-b { background: #ffd27a; box-shadow: 0 0 6px #ffb347; }
.legend .k-r { border: 1.5px solid #9aa6bf; }
.legend .k-t { background: #ff8a6a; }
.legend .k-u { border: 1.2px solid #8391b0; }
.legend .k-g { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed #ffd9a8; vertical-align: 3px; }
.legend .k-rb { width: 18px; height: 3px; border-radius: 2px; background: #ff7a5c; vertical-align: 3px; }
.controls { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem .7rem; align-items: center; margin-top: .9rem; font-family: var(--sans); }
.controls .yearnow { font: 700 2.1rem/1 var(--serif); min-width: 4.2ch; color: #fff; }
.slider { width: 100%; accent-color: #ffb46b; height: 32px; }
.btns { display: flex; gap: .4rem; }
.pbtn { font: 600 .85rem/1 var(--sans); color: #fff; background: transparent; border: 1px solid #3a4763; border-radius: 22px; min-height: 40px; padding: 0 .95rem; cursor: pointer; }
.pbtn:hover, .pbtn:focus-visible { border-color: #ffb46b; }
.pbtn[data-on="1"] { background: #ffb46b; color: #1a1206; border-color: #ffb46b; }
@media (max-width: 600px) { .controls { grid-template-columns: auto minmax(0, 1fr); } .btns { grid-column: 1 / -1; } .btns .pbtn { flex: 1; padding: 0 .4rem; } }
.yearbox { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; font: .88rem/1.4 var(--sans); color: #c8cfdc; }
.yearbox select { font: 600 .95rem var(--sans); padding: .45rem .55rem; border-radius: 8px; border: 1px solid #3a4763; background: #0e1626; color: #fff; min-height: 40px; max-width: 100%; }
.yearbox input { font: 600 1rem var(--sans); width: 6.2rem; padding: .45rem .55rem; border-radius: 8px; border: 1px solid #3a4763; background: #0e1626; color: #fff; min-height: 40px; }
.readout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem 1.4rem; margin-top: 1rem; }
@media (max-width: 760px) { .readout { grid-template-columns: 1fr; } }
.says p { margin: 0 0 .45rem; font-size: 1.04rem; line-height: 1.5; }
.says strong { color: #ffd9a8; }
.says .pickline { color: #ffe9cf; }
.atg h3 { font: 650 .76rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #ffb46b; margin: 0 0 .4rem; }
.atg .mini svg { display: block; width: 100%; height: auto; border-radius: 6px; }
.atg p { font: .9rem/1.45 var(--sans); color: #d6dbe5; margin: .5rem 0 .3rem; }
.clear { font: 600 .85rem/1 var(--sans); background: none; color: #ffc28f; border: 1px solid #5a4a3a; border-radius: 22px; min-height: 40px; padding: 0 .9rem; cursor: pointer; }

/* share row: compact round icons */
.share { margin-top: .9rem; }
.share-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.share-label { font: 600 .82rem/1 var(--sans); color: var(--muted); margin-right: .2rem; }
.plate .share-label { color: #b8c0d0; }
.ic { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-soft); background: transparent; color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; }
.plate .ic { border-color: #2f3b55; color: #e9e4d8; }
.ic:hover, .ic:focus-visible { color: var(--accent); border-color: var(--accent); }
.plate .ic:hover, .plate .ic:focus-visible { color: #ffb46b; border-color: #ffb46b; }
@media (pointer: coarse) { .ic { width: 44px; height: 44px; } }
.share-msg { font: .82rem var(--sans); color: var(--muted); min-height: 1.2em; margin: .3rem 0 0; }
.plate .share-msg { color: #c8cfdc; }

/* table */
.table-wrap { overflow-x: auto; margin-top: 1rem; }
table { border-collapse: collapse; width: 100%; font: .93rem/1.45 var(--sans); }
caption { text-align: left; color: var(--muted); font-size: .85rem; padding-bottom: .5rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-weight: 650; color: var(--muted); }
td.y { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) { .carries { display: none; } table { font-size: .86rem; } }
tr.rb td { background: color-mix(in srgb, var(--rb) 9%, transparent); }

/* evidence */
.sources ol { padding-left: 1.3rem; font: .9rem/1.5 var(--sans); }
.sources li { margin-bottom: .45rem; }
.unknowns { font: .95rem/1.5 var(--sans); padding-left: 1.2rem; }
.faq h3 { font-size: 1.12rem; margin: 1.2rem 0 .3rem; }
.faq p { margin: 0; }

/* reading rail */
.rail { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity .4s; pointer-events: none; }
.rail.on { opacity: 1; pointer-events: auto; }
.rail a { position: relative; display: block; width: 20px; height: 20px; }
.rail a .dot { position: absolute; left: 7px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: transform .2s, background .2s; }
.rail a[aria-current="true"] .dot { background: var(--accent); transform: scale(1.4); }
.rail a .lab { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 .74rem var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line-soft); padding: .2rem .45rem; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.rail a:hover .lab, .rail a:focus-visible .lab { opacity: 1; }
@media (max-width: 1180px) { .rail { display: none; } }

footer { margin-top: 3rem; padding: 1.6rem 0 2.6rem; border-top: 1px solid var(--line-soft); font: .88rem/1.6 var(--sans); color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
footer a { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .topbar, .rail, .share, .controls { display: none; } }