:root{
  --bg:#efe6d6;--bg2:#e6dbc7;--ink:#2a1c16;--muted:#6b5647;--line:#cdbda5;--line-soft:#dccfba;
  --acc:#9a2b20;--acc2:#2f5a8f;--panel:#f6efe3;--chip:#e3d6c0;
  --mb:#b9a78f;--win:#3f6fae;--sum:#c9913a;--cr:#3f6fae;--ot:#a8957b;
  --serif:'EB Garamond',Georgia,serif;--sans:'IBM Plex Sans',system-ui,sans-serif;
  --topbar:44px;color-scheme:light
}
:root.dark{
  --bg:#1a1210;--bg2:#221815;--ink:#ecdfcb;--muted:#b39f8a;--line:#4a3a32;--line-soft:#3a2d27;
  --acc:#e2826b;--acc2:#8fb3e6;--panel:#241a16;--chip:#33251f;
  --mb:#6f5d4f;--win:#8fb3e6;--sum:#e0ab55;--cr:#8fb3e6;--ot:#7d6a59;color-scheme:dark
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--topbar) + 12px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.18rem/1.6 var(--serif);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
a{color:var(--acc);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
.skip{position:absolute;left:-9999px;top:0}.skip:focus{left:8px;top:8px;z-index:50;background:var(--panel);padding:.4rem .7rem}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* topbar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.9rem;height:calc(var(--topbar) + var(--browser-safe-top,env(safe-area-inset-top)));
  padding:var(--browser-safe-top,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));
  background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--line-soft);font:500 .82rem/1 var(--sans)}
.topbar .home{display:flex;align-items:center;gap:.45rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.motif{width:20px;height:20px}
.topnav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;min-width:0}.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--muted);text-decoration:none;white-space:nowrap}.topnav a:hover{color:var(--ink)}
.spacer{flex:1}
.chip{color:var(--ink);text-decoration:none;background:var(--chip);border-radius:99px;padding:.38rem .7rem;white-space:nowrap}
.icon-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress i{display:block;height:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:640px){.topnav{display:none}.topbar .home span{display:none}}

/* rail */
.rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:10px;opacity:0;transition:opacity .4s}
.past-hero .rail{opacity:1}
.rail-dot{position:relative;display:block;width:12px;height:12px}
.rail-dot .dot{position:absolute;inset:3px;border-radius:50%;background:var(--line)}
.rail-dot[aria-current] .dot{background:var(--acc);inset:2px}
.rail-label{position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;font:500 .75rem/1 var(--sans);color:var(--ink);background:var(--panel);
  padding:.3rem .5rem;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .2s}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1}
@media (max-width:1100px){.rail{display:none}}

/* layout */
.wrap{max-width:40rem;margin:0 auto;padding:0 18px}
.wide{max-width:1240px;margin:0 auto;padding:0 18px}
.block{padding:3.2rem 0 1rem}
h1,h2,h3{font-weight:600;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.6vw,4.2rem);margin:.2rem 0 1.1rem;font-weight:500}
h2{font-size:clamp(1.65rem,3.2vw,2.3rem);margin:0 0 1rem;position:relative}
h3{font-size:1.32rem;margin:2rem 0 .5rem}
.anchor{position:absolute;left:-1.1em;color:var(--line);text-decoration:none;opacity:0;font-weight:400}
h2:hover .anchor,.anchor:focus{opacity:1}
p{margin:0 0 1rem}
.kicker{font:500 .8rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin:0}
.note{font:400 .84rem/1.5 var(--sans);color:var(--muted)}

/* hero */
.hero{padding:2.2rem 0 1rem}
.hero-grid{max-width:1240px;margin:0 auto}
.hero-text{max-width:42rem;margin:0 auto;padding:0 18px}
@media (min-width:1100px){.hero-text{max-width:1240px;display:grid;grid-template-columns:1fr 1.15fr;gap:3.2rem;align-items:start;padding:0 36px}.hero-title{position:sticky;top:80px}.hero h1{font-size:clamp(3rem,4.4vw,4.4rem);margin-top:.5rem}.tale{font-size:1.24rem}.hero{padding-top:2.6rem}}
.tale{font-size:1.3rem;font-style:italic;line-height:1.55}
.tale::first-letter{font-size:3.2em;float:left;line-height:.85;margin:.06em .1em 0 0;color:var(--acc);font-style:normal;font-weight:600}
.src{font:400 .8rem/1.4 var(--sans);color:var(--muted)}
.loom{margin:1.6rem auto 0;padding:0 18px;max-width:1240px}
.rugwrap{position:relative;filter:drop-shadow(0 18px 22px rgba(40,10,5,.28)) drop-shadow(0 2px 3px rgba(40,10,5,.25))}
:root.dark .rugwrap{filter:drop-shadow(0 18px 26px rgba(0,0,0,.6))}
.rug{display:block;width:100%;touch-action:pan-y;cursor:crosshair}
.still{display:block;width:100%;height:auto;position:absolute;inset:0;transition:opacity .6s}
.still.gone{opacity:0;pointer-events:none}
.loom:not(.woven) .rug{min-height:240px}
.loom figcaption,.fig figcaption{font:400 .84rem/1.45 var(--sans);color:var(--muted);margin:.9rem 0 .4rem}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;list-style:none;margin:.3rem 0 0;padding:0;font:400 .8rem/1.3 var(--sans);color:var(--ink)}
.legend li{display:flex;align-items:center;gap:.4rem}.legend li:nth-child(n+5){color:var(--muted);font-size:.74rem}
.sw{width:18px;height:11px;border-radius:2px;display:inline-block;transform:skewX(-18deg)}
.sw.frost{background:#f4eee2;box-shadow:inset 0 0 0 1px #c9bfa8}.sw.mild{background:#2f4c8f}.sw.south{background:#d6983a;opacity:.45}.sw.west{background:#1c1414;opacity:.55}.sw.tassel{background:repeating-linear-gradient(0deg,#efe6d6 0 1px,transparent 1px 3px);transform:none;height:9px;width:22px;border-left:3px solid #cc9c48;border-radius:0}
.sw.cosava{background:#347062}.sw.ne{background:#89342d}.sw.field{background:#8c261e}
.tip{position:absolute;z-index:5;pointer-events:none;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:.4rem .6rem;
  font:400 .8rem/1.35 var(--sans);box-shadow:0 6px 18px rgba(0,0,0,.18);max-width:250px}
.tip b{display:block;font-weight:600}
.page-share{margin-top:.6rem}

/* figures */
.fig{margin:1.4rem 0 1.6rem}
.chart{width:100%;height:auto;display:block;font-family:var(--sans)}
.chart .grid{stroke:var(--line-soft);stroke-width:1}
.chart .ax{fill:var(--muted);font-size:11px}.chart .ax.strong{fill:var(--ink);font-weight:600;font-size:12px}
.chart .lab{fill:var(--ink);font-size:12px;font-weight:600}
.smalls{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.small{margin:0}.small figcaption{margin:0 0 .2rem;font:600 .9rem/1.2 var(--sans);color:var(--ink)}
@media (max-width:760px){.smalls{grid-template-columns:1fr}}
.mb{fill:var(--mb)}.mb.win{fill:var(--win)}.mb.sum{fill:var(--sum)}
.fb.cr{fill:var(--cr)}.fb.ot{fill:var(--ot)}.fb.late{opacity:.55}
.aline{fill:none;stroke-width:2}.aline.a0{stroke:var(--acc)}.aline.a1{stroke:var(--acc2)}.aline.a2{stroke:var(--sum)}.aline.a3{stroke:var(--muted)}
.lab.a0{fill:var(--acc)}.lab.a1{fill:var(--acc2)}.lab.a2{fill:var(--sum)}.lab.a3{fill:var(--muted)}
.tablewrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font:400 .9rem/1.35 var(--sans)}
.data th,.data td{padding:.42rem .5rem;border-bottom:1px solid var(--line-soft);text-align:left}
.data thead th{font-weight:600;color:var(--muted);font-size:.78rem}
.data .num{text-align:right;font-variant-numeric:tabular-nums}
.ratio{position:relative;min-width:7rem}
.rbar{position:absolute;right:3.2rem;top:50%;height:6px;width:calc(var(--w) * .55);transform:translateY(-50%);background:var(--cr);border-radius:3px;opacity:.6}
.rbar.lo{background:var(--ot)}

/* town */
.town-grid{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:2rem;align-items:start;margin-top:1rem}
@media (max-width:860px){.town-grid{grid-template-columns:1fr}}
.mapcol{position:sticky;top:calc(var(--topbar) + 16px)}
@media (max-width:860px){.mapcol{position:static}}
.controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end}
.pick{display:flex;flex-direction:column;gap:.25rem;font:500 .78rem/1 var(--sans);color:var(--muted)}
select{font:500 1rem/1.2 var(--sans);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:.5rem .6rem;min-width:14rem;min-height:44px}
.btn{display:inline-flex;align-items:center;min-height:40px;padding:.45rem .9rem;border-radius:99px;border:1px solid var(--acc);background:var(--acc);color:var(--bg);
  font:500 .9rem/1 var(--sans);text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--acc)}.btn.small{min-height:36px;font-size:.84rem}
.phelp{font:400 .8rem/1.3 var(--sans);color:var(--muted);margin:.5rem 0}
.map{width:100%;height:auto;display:block;touch-action:manipulation}
.map .ro{fill:var(--bg2);stroke:var(--line);stroke-width:1.5}
.map .st{cursor:pointer}.map .halo{fill:transparent}
.map .pin{fill:var(--muted);stroke:var(--bg);stroke-width:4}
.map .st.cr .pin{fill:var(--cr)}.map .st.cs .pin{fill:#347062}
.map .st:hover .pin{fill:var(--acc)}
.map .st.on .pin{fill:var(--acc);r:21}
.map .mlab{font:600 34px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:8px}
.townline{font-size:1.2rem;line-height:1.5;margin:0 0 1rem;min-height:4.5em}
.town-loom{margin:0;padding:0}
.town-share{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:.6rem}

/* share row */
.share-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.share-row .lbl{font:400 .8rem/1 var(--sans);color:var(--muted);margin-right:.2rem}
.sh{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.sh svg{width:18px;height:18px}.sh:hover,.sh:focus-visible{color:var(--acc);border-color:var(--acc)}
@media (pointer:coarse){.sh{width:44px;height:44px}}
.status{font:400 .8rem/1.2 var(--sans);color:var(--muted);min-height:1.2em;margin:.3rem 0 0}

/* names */
.names{list-style:none;padding:0;margin:.6rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.55rem 1.4rem}
.names li{font-size:1.02rem;line-height:1.35;border-left:3px solid var(--acc);padding-left:.6rem}
.names b{font-weight:600}.names span{color:var(--muted)}
.plain{list-style:none;padding:0}.sources li{font:400 .9rem/1.45 var(--sans);margin:.35rem 0}

footer{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:center;padding:3rem 18px 4rem;font:400 .8rem/1.4 var(--sans);color:var(--muted);border-top:1px solid var(--line-soft);margin-top:3rem}
footer a{color:var(--muted)}
.hpage main{padding:3rem 0}.deck{font-size:1.25rem}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

:root.dark .sw.west,:root.dark .sw.field,:root.dark .sw.ne{box-shadow:0 0 0 1px #ffffff33}
:root:not(.dark) .sw.tassel{background:repeating-linear-gradient(0deg,#8a7560 0 1px,transparent 1px 3px)}