/* satul-fara-posta — postal yellow on paper. Semantic tokens only. */
:root{
  --bg:#f8f5ec; --bg-surface:#fffdf6; --bg-band:#f1ead8;
  --text-primary:#1d2831; --text-secondary:#3e4c58; --text-muted:#55636f;
  --line:#d9d0ba; --line-soft:#e7dfca;
  --accent:#8a5f00; --accent-strong:#6e4c00; --accent-soft:#f6e7bd;
  --post-yellow:#f2b01e; --post-yellow-deep:#c98f0a;
  --blue:#1f4e79; --blue-deep:#173d5f;
  --far:#b3451b; --mid:#c98f0a; --near:#3d7a4d; --own:#1f4e79;
  --map-land:#efe8d4; --map-edge:#b3a67f;
  --focus:#b3451b;
  --serif:'Source Serif 4',Georgia,serif; --display:'Fraunces',Georgia,serif;
  --sans:'Atkinson Next',system-ui,sans-serif;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#12181f; --bg-surface:#182129; --bg-band:#161e26;
  --text-primary:#ecf1f5; --text-secondary:#bfccd6; --text-muted:#9db0bf;
  --line:#33424f; --line-soft:#25323e;
  --accent:#f0c05a; --accent-strong:#ffd47e; --accent-soft:#3a2f14;
  --post-yellow:#f2b01e; --post-yellow-deep:#d99e16;
  --blue:#8fc1ea; --blue-deep:#bcdcf7;
  --far:#f0936b; --mid:#f0c05a; --near:#8fd0a2; --own:#8fc1ea;
  --map-land:#1a232d; --map-edge:#46586b;
  --focus:#f0936b;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
svg[hidden]{display:none}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text-primary);font-family:var(--serif);
  font-size:1.0625rem;line-height:1.55;-webkit-text-size-adjust:100%}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:.6rem 1rem;z-index:60}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
a{color:var(--blue-deep)}
[data-theme="dark"] a{color:var(--blue)}
.topbar{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar-in{max-width:72rem;margin:0 auto;padding:calc(.45rem + var(--browser-safe-top,env(safe-area-inset-top))) 1rem .45rem;display:flex;align-items:center;gap:.8rem}
.topbar .home{font-family:var(--display);font-weight:700;text-decoration:none;color:var(--text-primary);font-size:1rem;white-space:nowrap}
.topbar nav{display:flex;gap:.9rem;margin-left:auto;font-family:var(--sans);font-size:.83rem;overflow-x:auto;scrollbar-width:none}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{color:var(--text-secondary);text-decoration:none;white-space:nowrap}
.topbar nav a:hover{color:var(--text-primary);text-decoration:underline}
.topbar .btns{display:flex;gap:.45rem;align-items:center}
.tbtn{min-width:44px;height:44px;border:1px solid var(--line);background:var(--bg-surface);color:var(--text-primary);
  border-radius:999px;font-family:var(--sans);font-size:.85rem;cursor:pointer;padding:0 .8rem;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.tbtn:hover{border-color:var(--accent)}
@media(max-width:640px){.topbar nav{display:none}}
.wrap{max-width:72rem;margin:0 auto;padding:0 1rem}
.col{max-width:44rem}
section{scroll-margin-top:4.2rem;padding:2.2rem 0 1rem;border-bottom:1px solid var(--line-soft)}
h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,5.6vw,3.6rem);line-height:1.05;
  letter-spacing:-.015em;max-width:22ch;margin:.35rem 0 .8rem}
h2{font-family:var(--display);font-weight:700;font-size:clamp(1.55rem,3.2vw,2.25rem);line-height:1.12;margin:0 0 .7rem}
h3{font-family:var(--display);font-size:1.2rem;margin:1.3rem 0 .45rem}
.kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;
  color:var(--accent-strong);font-weight:700;margin:0}
.lede{font-size:1.2rem;line-height:1.5;max-width:62ch}
.muted{color:var(--text-muted)} .small{font-size:.9rem}
.byline{font-family:var(--sans);font-size:.85rem;color:var(--text-muted)}
figure{margin:0}
.hero{padding:1.6rem 0 .6rem}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:1.8rem;align-items:start}
@media(max-width:900px){.hero-grid{display:flex;flex-direction:column}.scenecard{order:-1}}
.scenecard{background:var(--bg-surface);border:1px solid var(--line);border-radius:12px;padding:.7rem}
.scenecard figcaption{font-size:.88rem;color:var(--text-secondary);margin-top:.5rem}
#scene{width:100%;height:auto;display:block;border-radius:8px}
@media(max-width:640px){.scenecard{padding:.5rem}}
.answer{background:var(--accent-soft);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;margin-top:1rem}
.answer strong{font-family:var(--display);font-size:1.12rem}
.searchbox{margin-top:1rem}
.searchbox label{font-family:var(--sans);font-size:.88rem;font-weight:700;display:block;margin-bottom:.35rem}
.searchrow{display:flex;gap:.5rem;flex-wrap:wrap}
#vsearch{flex:1 1 15rem;min-height:48px;font-family:var(--sans);font-size:1rem;padding:.55rem .8rem;
  border:1.5px solid var(--line);border-radius:10px;background:var(--bg-surface);color:var(--text-primary)}
.hint{font-family:var(--sans);font-size:.82rem;color:var(--text-muted);margin-top:.35rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.result{margin-top:1rem;border:1px solid var(--line);border-radius:12px;background:var(--bg-surface);padding:1rem 1.1rem}
.result h3{margin-top:0}
.bigkm{font-family:var(--display);font-size:2rem;font-weight:700;line-height:1.1}
.unitline{margin:.3rem 0}
.badge{display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:700;border:1px solid var(--line);
  border-radius:999px;padding:.12rem .55rem;margin-right:.35rem;background:var(--bg-band);color:var(--text-secondary)}
.share-row{display:flex;align-items:center;gap:.45rem;margin-top:.9rem;flex-wrap:wrap}
.share-row .lab{font-family:var(--sans);font-size:.82rem;color:var(--text-muted);margin-right:.2rem}
.sbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;
  color:var(--text-primary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
@media(pointer:coarse){.sbtn{width:44px;height:44px}}
.sbtn:hover,.sbtn:focus-visible{border-color:var(--accent);color:var(--accent-strong)}
.sbtn svg{width:18px;height:18px;fill:currentColor}
.plainbtn{min-height:44px;border:1px solid var(--line);background:var(--bg-surface);color:var(--text-primary);
  border-radius:999px;font-family:var(--sans);font-size:.88rem;padding:.4rem .95rem;cursor:pointer}
.plainbtn:hover{border-color:var(--accent)}
.mapwrap{position:relative;background:var(--bg-surface);border:1px solid var(--line);border-radius:12px;padding:.7rem}
#map{width:100%;height:auto;display:block;cursor:pointer;touch-action:manipulation}
.mapcard-pop{position:absolute;z-index:5;max-width:min(19rem,88%);background:var(--bg-surface);color:var(--text-primary);
  border:1.5px solid var(--line);border-radius:10px;padding:.7rem .85rem;box-shadow:0 8px 28px rgba(0,0,0,.18);font-size:.92rem}
.mapcard-pop .x{position:absolute;top:.25rem;right:.35rem;border:0;background:none;font-size:1.15rem;line-height:1;
  cursor:pointer;color:var(--text-secondary);min-width:36px;min-height:36px}
.legend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;font-family:var(--sans);font-size:.78rem;color:var(--text-secondary);margin-top:.5rem}
.legend .sw{display:inline-block;width:.68rem;height:.68rem;border-radius:50%;vertical-align:-8%;margin-right:.3rem}
.bars{font-family:var(--sans);font-size:.88rem;margin:1rem 0}
.barrow{display:grid;grid-template-columns:9.5rem 1fr 5.5rem;gap:.6rem;align-items:center;margin:.32rem 0}
.bar{height:1.05rem;border-radius:4px;background:var(--blue);min-width:2px}
.bar.old{background:var(--text-muted)}
.bar.now{background:var(--post-yellow-deep)}
@media(max-width:560px){.barrow{grid-template-columns:7.2rem 1fr 4.6rem;font-size:.8rem}}
table{border-collapse:collapse;width:100%;font-size:.95rem;margin:1rem 0}
th,td{border-bottom:1px solid var(--line-soft);padding:.42rem .5rem;text-align:left;vertical-align:top}
th{font-family:var(--sans);font-size:.8rem;color:var(--text-secondary)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tblwrap{overflow-x:auto}
.srcs{font-size:.92rem;color:var(--text-secondary)}
.srcs li{margin:.3rem 0}
footer{padding:2rem 0 3rem;font-family:var(--sans);font-size:.88rem;color:var(--text-secondary)}
footer a{color:var(--text-secondary)}
.rail{position:fixed;right:.55rem;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:.55rem}
.rail a{position:relative;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--text-muted);display:block;background:transparent}
.rail a[aria-current="true"]{background:var(--accent);border-color:var(--accent)}
.rail a .rl{position:absolute;right:1.15rem;top:50%;transform:translateY(-50%);background:var(--bg-surface);
  border:1px solid var(--line);border-radius:6px;padding:.16rem .5rem;font-family:var(--sans);font-size:.72rem;
  color:var(--text-primary);white-space:nowrap;opacity:0;pointer-events:none}
.rail a:hover .rl,.rail a:focus-visible .rl{opacity:1}
@media(max-width:1100px){.rail{display:none}}
@media print{.rail,.topbar,.share-row{display:none}}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.8rem;margin:1.1rem 0}
.stat{border:1px solid var(--line);border-radius:10px;background:var(--bg-surface);padding:.8rem .95rem}
.stat .v{font-family:var(--display);font-size:1.7rem;font-weight:700;line-height:1.15}
.stat .k{font-family:var(--sans);font-size:.8rem;color:var(--text-secondary);margin-top:.2rem}
details{border:1px solid var(--line-soft);border-radius:10px;padding:.6rem .9rem;margin:.7rem 0;background:var(--bg-surface)}
summary{cursor:pointer;font-family:var(--sans);font-weight:700;font-size:.92rem;padding:.25rem 0}
.morebtn{margin:.4rem 0 1rem}