:root{
  --bg:#f6f1e7; --bg2:#efe6d4; --ink:#26221a; --ink2:#574e3d; --line:#d8ccb2;
  --card:#fffaf0; --accent:#9a4a12; --accent2:#31572c;
  --era1:#8c5a2b; --era2:#b0512f; --era3:#476b8f; --era4:#3e7d4e;
  --sky1:#a65e49; --sky2:#ecb57c; --hill:#5f4e3e; --hill2:#9c8f6f;
  --house:#4a3f30; --roof:#3a2519; --win:#2e251c; --lit:#ffc95e; --road:#7f6b52;
  --sky0:#3a3150; --sun:#ffd49a; --star:#fff3d6; --star-op:.0; --moon:#fbeecd; --moon-op:.8;
  --mtn:#7d6a72; --forest:#45392c; --wallS:#3d3127; --wallL:#64503b; --rim:#e09a5f; --plinth:#2c231b;
  --glow:#ffb84d; --glow-op:.38; --shut:#1e150d; --wallE:#3e3329; --wallE2:#2c241d; --wood:#3d2c1e; --woodL:#5a442e; --tree:#353a27; --treeL:#4f5034;
  --roadL:#a38d6d; --verge:#3e3d29;
  --mapland:#e9dfc9; --mapline:#b3a37e; --focus:#7a3803;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Atkinson Hyperlegible Next',system-ui,-apple-system,'Segoe UI',sans-serif;
}
[data-theme="dark"]{
  --bg:#17150f; --bg2:#201d15; --ink:#efe7d3; --ink2:#c9bda0; --line:#453d2c;
  --card:#221e14; --accent:#e8a15c; --accent2:#9cc184;
  --era1:#d29a5b; --era2:#e07a52; --era3:#7fa3c4; --era4:#6fb583;
  --sky1:#1f1d2e; --sky2:#3d2b22; --hill:#1a1913; --hill2:#3b3426;
  --house:#0f0d09; --roof:#3a2c22; --win:#241d13; --lit:#ffd97a; --road:#4a4236;
  --sky0:#0b0c1a; --sun:#5a3a2a; --star:#fff3d6; --star-op:.85; --moon:#f4ead0; --moon-op:.95;
  --mtn:#34334a; --forest:#1d1d17; --wallS:#2c251d; --wallL:#4a3d2e; --rim:#5d5a66; --plinth:#0d0b08;
  --glow:#ffc060; --glow-op:.7; --shut:#120d09; --wallE:#2a231c; --wallE2:#1d1814; --wood:#2a1f15; --woodL:#3d2f20; --tree:#232b1a; --treeL:#34402a;
  --roadL:#6a604e; --verge:#0f0f0a;
  --mapland:#262115; --mapline:#5c5138; --focus:#ffc98a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.13rem;line-height:1.62}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.1rem}
.wrap>p,.wrap>ul,.wrap>table,.wrap>.stats,#scena .wrap{max-width:44rem}
#scena .wrap{margin:0}
.wide{max-width:62rem;margin:0 auto;padding:0 1.1rem}
.skip{position:absolute;left:-9999px;top:0;background:var(--card);color:var(--ink);padding:.5rem 1rem;z-index:50}
.skip:focus{left:.5rem;top:.5rem}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.topbar{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar-in{max-width:62rem;margin:0 auto;padding:.45rem 1.1rem;display:flex;align-items:center;gap:1rem}
.topbar .home{font-family:var(--sans);font-weight:700;color:var(--ink);text-decoration:none;font-size:.95rem}
.topbar nav{display:flex;gap:.9rem;font-family:var(--sans);font-size:.85rem;overflow-x:auto;white-space:nowrap;flex:1 1 auto;min-width:0;scrollbar-width:none}
.topbar nav a{color:var(--ink2);text-decoration:none}
.btns{margin-left:auto;display:flex;gap:.4rem}
.tbtn{font-family:var(--sans);font-size:.82rem;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.28rem .65rem;cursor:pointer;text-decoration:none;line-height:1.2}
.tbtn svg{width:1rem;height:1rem;vertical-align:-.18rem;fill:none;stroke:currentColor;stroke-width:1.7}
[data-theme="light"] .ic-sun{display:none}
[data-theme="dark"] .ic-moon{display:none}
.rail{display:none}
@media(min-width:75rem){.rail{display:flex;flex-direction:column;gap:.35rem;position:fixed;right:1.2rem;top:38%;font-family:var(--sans);font-size:.78rem}
.rail a{color:var(--ink2);text-decoration:none}.rail a.on{color:var(--accent);font-weight:700}}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,6.2vw,3.3rem);line-height:1.08;margin:1.6rem 0 .7rem;letter-spacing:-.01em}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.45rem,4vw,2rem);line-height:1.15;margin:2.6rem 0 .6rem}
.deck{font-size:1.22rem;color:var(--ink2);margin:0 0 1.2rem}
.small{font-size:.92rem;color:var(--ink2)}
figure{margin:1rem 0}
figcaption{font-family:var(--sans);font-size:.88rem;color:var(--ink2);margin-top:.45rem}
.stage{background:linear-gradient(180deg,var(--sky1),var(--sky2));border:1px solid var(--line);border-radius:14px;overflow:hidden}
.stage svg{display:block;width:100%;height:auto;max-height:40svh}
.controls{display:flex;align-items:center;gap:.7rem;margin:.7rem 0 0;font-family:var(--sans)}
.controls input[type=range]{flex:1;accent-color:var(--accent);min-height:2rem}
.play{background:var(--accent);color:var(--bg);border:0;border-radius:999px;width:2.4rem;height:2.4rem;font-size:1rem;cursor:pointer;flex:none}
.yearlab{font-weight:700;font-size:1.05rem;min-width:3.2rem;text-align:center}
.scene-line{font-family:var(--sans);font-size:.95rem;margin:.5rem 0 0}
.scene-line strong{color:var(--accent)}
.searchrow{display:flex;gap:.5rem;flex-wrap:wrap;margin:.8rem 0}
.searchrow input{flex:1;min-width:12rem;font-family:var(--sans);font-size:1rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.results{list-style:none;margin:0;padding:0;font-family:var(--sans)}
.results li{border:1px solid var(--line);border-top:0;background:var(--card)}
.results li:first-child{border-top:1px solid var(--line);border-radius:10px 10px 0 0}
.results li:last-child{border-radius:0 0 10px 10px}
.results button{all:unset;display:block;width:100%;padding:.55rem .8rem;cursor:pointer;font-size:.95rem}
.results button:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.results .cty{color:var(--ink2);font-size:.85rem}
.mapbox{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mapbox svg{display:block;width:100%;height:auto}
.land{fill:var(--mapland);stroke:var(--mapline);stroke-width:.7}
.dot{cursor:pointer;stroke:none}
.dot.e1{fill:var(--era1)}.dot.e2{fill:var(--era2)}.dot.e3{fill:var(--era3)}.dot.e4{fill:var(--era4)}
.dot:focus{outline:none;stroke:var(--focus);stroke-width:1.6}
.dot.sel{stroke:var(--ink);stroke-width:1.4}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-family:var(--sans);font-size:.86rem;color:var(--ink2);margin:.5rem 0 0}
.legend .sw{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin-right:.35rem;vertical-align:-.05rem}
.sw.e1{background:var(--era1)}.sw.e2{background:var(--era2)}.sw.e3{background:var(--era3)}.sw.e4{background:var(--era4)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;margin:1rem 0;position:relative}
.card h3{font-family:var(--serif);font-size:1.5rem;margin:.1rem 0 .3rem}
.card .close{position:absolute;top:.55rem;right:.7rem;background:none;border:0;font-size:1.25rem;color:var(--ink2);cursor:pointer;line-height:1}
.bigstat{font-family:var(--serif);font-size:1.3rem;line-height:1.3}
table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:.92rem;margin:.8rem 0}
th,td{border-bottom:1px solid var(--line);padding:.4rem .45rem;text-align:right}
th:first-child,td:first-child{text-align:left}
td.pk{font-weight:700;color:var(--accent)}
.bars{display:flex;align-items:flex-end;gap:2px;height:9.5rem;margin:1rem 0 .2rem;border-bottom:2px solid var(--line)}
.bar{flex:1;border-radius:3px 3px 0 0;min-width:0}
.bar.e1{background:var(--era1)}.bar.e2{background:var(--era2)}.bar.e3{background:var(--era3)}.bar.e4{background:var(--era4)}
.barlabels{display:flex;gap:2px;font-family:var(--sans);font-size:.68rem;color:var(--ink2)}
.barlabels span{flex:1;text-align:center;writing-mode:vertical-rl;transform:rotate(180deg);height:2.4rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.7rem;margin:1rem 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem}
.stat b{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1;color:var(--accent)}
.stat span{font-family:var(--sans);font-size:.85rem;color:var(--ink2)}
.share{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0;font-family:var(--sans);font-size:.88rem}
.share a,.share button{background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:.4rem .8rem;text-decoration:none;cursor:pointer;font:inherit}
footer{border-top:1px solid var(--line);margin-top:3rem;padding:1.2rem 0 2rem;font-family:var(--sans);font-size:.9rem;color:var(--ink2)}
footer nav{display:flex;gap:1rem;flex-wrap:wrap;margin:.5rem 0}
.chartline{width:100%;height:auto;display:block}
.cl-axis{stroke:var(--line);stroke-width:1}
.cl-line{fill:none;stroke:var(--accent);stroke-width:2.4}
.cl-pt{fill:var(--accent)}
.cl-lab{font-family:var(--sans);font-size:11px;fill:var(--ink2)}
/* village street: lit left faces, shade faces, roof rims; windows glow only when lit */
.stage svg .star{fill:var(--star);opacity:var(--star-op)} .stage svg .moon{fill:var(--moon);opacity:var(--moon-op)}
.stage svg .mtn{fill:var(--mtn)} .stage svg .hillb{fill:var(--hill)} .stage svg .forest{fill:var(--forest)}
.stage svg .wallS{fill:var(--wallS)} .stage svg .wallL{fill:var(--wallL)} .stage svg .roof{fill:var(--roof)}
.stage svg .rim{stroke:var(--rim);stroke-width:1.3;fill:none} .stage svg .plinth{fill:var(--plinth)} .stage svg .vent{fill:var(--plinth)}
.stage svg .win{fill:var(--win);transition:fill .35s} .stage svg .win.lit{fill:var(--lit)}
.stage svg .glow{fill:var(--glow);opacity:0;filter:url(#svblur);transition:opacity .35s;pointer-events:none}
.stage svg .win.lit ~ .glow{opacity:var(--glow-op)}
.stage svg .shut{fill:var(--shut);transition:opacity .35s} .stage svg .win.lit ~ .shut{opacity:0}
.stage svg .win:not(.lit) ~ .mull{opacity:0}
.stage svg .porch{fill:var(--roof);opacity:.55} .stage svg .roofH{fill:var(--wallS)}
.stage svg .hs:not(:has(.win.lit)) .wallL{fill:var(--wallE)} .stage svg .hs:not(:has(.win.lit)) .wallS{fill:var(--wallE2)}
.stage svg .mull{stroke:var(--wallS);stroke-width:.9;fill:none}
.stage svg .wood,.stage svg .pole{fill:var(--wood);stroke:none} .stage svg .pole{stroke:var(--wood);stroke-width:2.6}
.stage svg .woodL{fill:var(--woodL)} .stage svg .plank{stroke:var(--wood);stroke-width:.8} .stage svg .rope,.stage svg .cross{stroke:var(--roof);stroke-width:1.2}
.stage svg .trunk{fill:var(--wood)} .stage svg .tree{fill:var(--tree)} .stage svg .treeL{fill:var(--treeL)}
.stage svg .road{fill:var(--road)} .stage svg .roadL{stroke:var(--roadL);stroke-width:1.2;fill:none;opacity:.6} .stage svg .verge{fill:var(--verge)}
.stage svg .far{opacity:.84}
@media (prefers-reduced-motion:reduce){.stage svg .win,.stage svg .glow{transition:none}}
@media(max-width:40rem){body{font-size:1.06rem}.deck{font-size:1.02rem;line-height:1.5}.stage svg{height:min(36svh,250px);max-height:none}table{display:block;overflow-x:auto}.topbar .home{flex:none}}

.card table{max-width:36rem}
#villageCard,section[id]{scroll-margin-top:4.2rem}
.topbar nav{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}

.stage svg .hs:not(:has(.win.lit)) .roof{opacity:.85}
.ticks{display:flex;justify-content:space-between;font-family:var(--sans);font-size:.72rem;color:var(--ink2);margin:.15rem 3.4rem 0 3.1rem}
.ticks span{width:0;display:flex;justify-content:center;white-space:nowrap}
@media(max-width:40rem){.ticks span:nth-child(even):not(:last-child),.ticks span:nth-child(13){visibility:hidden}}
.scene-line{font-size:1rem}

.card{padding-bottom:3.4rem}
main{padding-bottom:3rem}