:root{
  --paper:#f3ecdf; --ink:#1c1a16; --muted:#6b6257; --line:#d8cdb8;
  --card:#faf6ec; --accent:#8a2b1d; --accent-ink:#fff8ee; --mark:#e7dcc3;
}
html[data-theme="dark"]{
  --paper:#14110d; --ink:#ece4d4; --muted:#a89f8d; --line:#3a332a;
  --card:#1e1a14; --accent:#d98a68; --accent-ink:#14110d; --mark:#2c2619;
}
*{box-sizing:border-box}
html{scroll-padding-top:3.2rem}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Georgia,"Times New Roman",Times,serif; line-height:1.6;
}
main{display:block; max-width:46rem; margin:0 auto; padding:0 1rem 3rem}
h1,h2,h3{line-height:1.2; text-wrap:balance}
a{color:var(--accent)}
img{max-width:100%; height:auto; border:1px solid var(--line)}
.skip{position:absolute; left:-999px}
.skip:focus{left:0.5rem; top:0.5rem; background:var(--accent); color:var(--accent-ink); padding:0.4rem 0.8rem; z-index:50}
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:0.7rem;
  padding:0.4rem 0.8rem; background:var(--paper); border-bottom:1px solid var(--line);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:0.85rem;
}
.topbar .home{font-weight:700; text-decoration:none; color:var(--ink); white-space:nowrap}
.topnav{display:flex; gap:0.55rem; overflow-x:auto; white-space:nowrap}
.topnav a{color:var(--muted); text-decoration:none}
.spacer{flex:1}
.langmenu summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:0.25rem}
.langmenu ul{position:absolute; margin:0.3rem 0 0; padding:0.4rem 0.7rem; list-style:none; background:var(--card); border:1px solid var(--line)}
.langmenu li{margin:0.15rem 0}
.icon-btn{background:none; border:1px solid var(--line); border-radius:999px; width:1.9rem; height:1.9rem; cursor:pointer; color:var(--ink); display:inline-flex; align-items:center; justify-content:center}
.kicker{font-family:system-ui,sans-serif; font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin:2.2rem 0 0.2rem}
.hero{display:grid; grid-template-columns:1.4fr 1fr; gap:1.2rem; align-items:start}
.hero h1{font-size:2.1rem; margin:0.2rem 0}
.deck{font-size:1.12rem}
.byline{font-family:system-ui,sans-serif; font-size:0.82rem; color:var(--muted)}
.hero-fig{margin:2.2rem 0 0}
figure{margin:1.2rem 0}
figcaption{font-family:system-ui,sans-serif; font-size:0.8rem; color:var(--muted); margin-top:0.3rem}
.answer{border-left:4px solid var(--accent); padding:0.2rem 0 0.2rem 1rem; margin-top:1.4rem}
.birth-note{font-family:system-ui,sans-serif; font-size:0.85rem; color:var(--muted)}
.lede{font-size:1.05rem}
.mapwrap{border:1px solid var(--line); background:var(--card); padding:0.8rem}
#harta-svg{width:100%; height:auto; display:block}
.map-bg{fill:var(--paper)}
.map-river{fill:none; stroke:#7ba7bc; stroke-width:7; opacity:0.55}
.map-street{fill:none; stroke:var(--line); stroke-width:3}
.dot circle{fill:var(--accent)}
.dot text{fill:var(--ink); font-family:system-ui,sans-serif; font-size:15px}
html.js .dot{cursor:pointer}
html.js .dot circle{opacity:0.45}
html.js .dot.active circle{opacity:1; stroke:var(--ink); stroke-width:2}
.map-facts{display:grid; gap:0.6rem; margin-top:0.8rem}
.map-fact{border:1px solid var(--line); padding:0.6rem 0.8rem; margin:0}
.map-fact h3{margin:0 0 0.2rem; font-size:1rem}
.map-fact p{margin:0}
html.js .map-fact{display:none}
html.js .map-fact.active{display:block}
.chapter{border-top:2px solid var(--ink); margin-top:2rem; padding-top:0.4rem}
.numeral{font-size:2.4rem; color:var(--accent); margin:0.4rem 0 0}
.chapter h3{font-size:1.5rem; margin:0}
.dates{font-family:system-ui,sans-serif; font-size:0.85rem; color:var(--muted)}
.scene{border-left:4px solid var(--accent); margin:1rem 0; padding:0.2rem 0 0.2rem 1rem}
.scene blockquote{margin:0; font-style:italic}
.meanwhile{background:var(--mark); padding:0.6rem 0.9rem; font-size:0.95rem}
.scene-label{font-family:system-ui,sans-serif; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted)}
.arch img{width:100%}
.lic{white-space:nowrap}
.cards{display:grid; grid-template-columns:1fr 1fr; gap:0.8rem}
.card{border:1px solid var(--line); background:var(--card); padding:0.8rem; margin:0}
.card blockquote{margin:0 0 0.5rem; font-size:1.02rem}
.pick{font-family:system-ui,sans-serif; font-size:0.8rem; color:var(--muted); margin:0 0 0.4rem}
.choices{display:flex; gap:0.5rem; flex-wrap:wrap}
.choices button, #din-nou, .btn{
  font-family:system-ui,sans-serif; font-size:0.9rem; padding:0.4rem 0.9rem;
  border:1px solid var(--accent); background:transparent; color:var(--accent);
  cursor:pointer; border-radius:2px; text-decoration:none; display:inline-block;
}
.choices button:disabled{opacity:0.45; cursor:default}
.card.right{border-color:#2e7d32}
.card.wrong{border-color:var(--accent)}
.reveal{font-size:0.92rem; border-top:1px dashed var(--line); margin-top:0.6rem; padding-top:0.4rem; transition:opacity 0.25s ease}
.score{font-family:system-ui,sans-serif; font-weight:700}
.key{margin-top:1rem; border:1px solid var(--line); padding:0.5rem 0.8rem}
.key summary{cursor:pointer; font-family:system-ui,sans-serif}
html:not(.js) .choices, html:not(.js) .pick, html:not(.js) #scor, html:not(.js) #din-nou{display:none}
html:not(.js) .reveal[hidden]{display:block}
.numgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:0.7rem; margin:0}
.num{border:1px solid var(--line); background:var(--card); padding:0.6rem; display:flex; flex-direction:column; gap:0.2rem}
.num dt{order:2; font-family:system-ui,sans-serif; font-size:0.78rem; color:var(--muted)}
.num dd{order:1; margin:0; font-size:1.9rem; color:var(--accent)}
.myth{border-top:1px solid var(--line); padding:0.4rem 0}
.sgroup h3{font-size:1rem; margin:1rem 0 0.2rem}
.sgroup ul{margin:0.2rem 0; padding-left:1.2rem; font-size:0.95rem}
.method{font-size:0.95rem}
.footer{border-top:1px solid var(--line); padding:1rem; text-align:center; font-family:system-ui,sans-serif; font-size:0.82rem; color:var(--muted)}
.nf-main{max-width:34rem; margin:8vh auto; text-align:center}
@media (max-width:40rem){
  .hero{grid-template-columns:1fr}
  .hero-fig{margin-top:0}
  .cards{grid-template-columns:1fr}
  .numgrid{grid-template-columns:1fr 1fr}
  .topnav{display:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}