@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/newsreader-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2212,U+00B0,U+00B7}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/newsreader-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0218-021B,U+1E00-1EFF,U+20AC}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/newsreader-italic-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201E,U+2026,U+2212}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/newsreader-italic-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0218-021B,U+1E00-1EFF}
@font-face{font-family:"PlexMono";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/plexmono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201E,U+2212,U+00B0}
@font-face{font-family:"PlexMono";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/plexmono-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0218-021B}

/* Lime-washed paper by day, dry earth by night. Marks are ink; the step in focus is oxide red. */
:root{--bg:#f3efe6;--panel:#f8f5ee;--fg:#1c1813;--mut:#4a4239;--line:#cdc4b5;--line-soft:#e2dbcf;--acc:#9a3412;--acc-text:#86290c;--link:#7a2a0e;
  --land:#ebe5d8;--land-edge:#b8ad9b;--water:#3f6f8c;--wood:#4d6b3a;--neigh:#e4dfd4;--mark:#2b2119;--dim:.16;--sea-label:#8b8174;
  --col:31rem;--top:46px;--serif:"Newsreader",Georgia,"Times New Roman",serif;--mono:"PlexMono",ui-monospace,Menlo,monospace;--to-top-bg:#f3efe6;--to-top-fg:#1c1813;color-scheme:light}
:root[data-theme=dark]{--bg:#12100d;--panel:#1a1714;--fg:#ece5d9;--mut:#bdb2a3;--line:#3a332b;--line-soft:#2a2520;--acc:#d39a6e;--acc-text:#e2b08a;--link:#e6b48e;
  --land:#1f1b17;--land-edge:#4a4138;--water:#86aecb;--wood:#9cbf82;--neigh:#171411;--mark:#ddd0bd;--dim:.2;--sea-label:#8a7f71;--to-top-bg:#12100d;--to-top-fg:#ece5d9;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#12100d;--panel:#1a1714;--fg:#ece5d9;--mut:#bdb2a3;--line:#3a332b;--line-soft:#2a2520;--acc:#d39a6e;--acc-text:#e2b08a;--link:#e6b48e;--land:#1f1b17;--land-edge:#4a4138;--water:#86aecb;--wood:#9cbf82;--neigh:#171411;--mark:#ddd0bd;--dim:.2;--sea-label:#8a7f71;color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
svg[hidden]{display:none}
html{scroll-padding-top:calc(var(--top) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.125rem/1.62 var(--serif);font-kerning:normal}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
.skip-link{position:absolute;left:-999px;top:0}.skip-link:focus{left:8px;top:8px;z-index:99;background:var(--bg);color:var(--fg);padding:.5rem .8rem}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.topbar{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--top) + var(--browser-safe-top,env(safe-area-inset-top)));padding:var(--browser-safe-top,env(safe-area-inset-top)) .8rem 0;display:flex;align-items:center;gap:.6rem;background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--line-soft);font:500 .9rem/1 var(--serif)}
.topbar a{color:inherit;text-decoration:none}
.brand{display:flex;align-items:center;gap:.5rem;font-style:italic;font-size:1.02rem;white-space:nowrap}
.brand-mark{width:20px;height:20px;color:var(--acc)}
.topnav{display:flex;gap:1.05rem;overflow-x:auto;scrollbar-width:none;margin-left:.9rem;color:var(--mut)}.topnav::-webkit-scrollbar{display:none}
.topnav a{white-space:nowrap;font-size:.86rem}.topnav a:hover{color:var(--acc-text)}
.spacer{flex:1}
.chip{font:500 .76rem/1 var(--mono);padding:.4rem .5rem;border:1px solid var(--line);border-radius:99px;min-height:32px;min-width:36px;justify-content:center;display:inline-flex;align-items:center}
.chip[aria-current=page]{border-color:var(--acc);color:var(--acc-text)}
.icon-btn{background:none;border:1px solid var(--line);border-radius:99px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer}
:root[data-theme=light] .i-moon,:root[data-theme=dark] .i-sun{display:none}
@media (max-width:760px){.topnav{display:none}.brand span{max-width:44vw;overflow:hidden;text-overflow:ellipsis}}

/* the map */
.stage{position:fixed;top:0;left:0;right:0;height:100lvh;z-index:0}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage-key{position:absolute;right:max(1rem,env(safe-area-inset-right));bottom:1.1rem;z-index:2;display:flex;flex-wrap:wrap;max-width:min(60rem,58vw);gap:.25rem .9rem;justify-content:flex-end;font:400 .8rem/1.3 var(--mono);color:var(--fg);background:color-mix(in srgb,var(--bg) 95%,transparent);padding:.5rem .9rem;border-radius:.5rem;border:1px solid var(--line-soft)}
:root[data-scene=all] .stage-key,:root[data-scene=hero] .stage-key{display:none}
.stage-key span{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.stage-key span.on{color:var(--acc-text)}
.stage-key svg{width:14px;height:14px;flex:none}
.zoomout{position:absolute;right:max(1rem,env(safe-area-inset-right));top:calc(var(--top) + 1rem);z-index:3;background:var(--panel);border:1px solid var(--line);border-radius:99px;min-height:44px;padding:.5rem 1rem;cursor:pointer;font:500 .82rem/1 var(--mono)}
.mapcard{position:absolute;z-index:4;width:min(19rem,calc(100vw - 2rem));background:var(--panel);border:1px solid var(--line);border-radius:.7rem;padding:.8rem .95rem .7rem;box-shadow:0 14px 40px rgba(0,0,0,.18);font-size:.95rem;line-height:1.42}
.mapcard h3{font:500 1.02rem/1.25 var(--serif);margin:0 1.6rem .35rem 0}
.mapcard .x{position:absolute;right:.25rem;top:.25rem;width:44px;height:44px;border:0;background:none;cursor:pointer;font-size:1.3rem;color:var(--mut)}
.mapcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.12rem .6rem;font-size:.86rem}
.mapcard dt{color:var(--mut);font-family:var(--mono);font-size:.74rem;padding-top:.15rem}
.mapcard dd{margin:0}

main{position:relative;z-index:1;pointer-events:none}
.hero .col,.step .card,.after{pointer-events:auto}
.col{width:min(var(--col),calc(100vw - 2rem));margin-left:max(1rem,3.5vw)}
.hero{min-height:100vh;display:flex;align-items:flex-start;padding:calc(var(--top) + 2.2rem) 0 3rem}
.hero .col,.step .card{background:var(--panel);border:1px solid var(--line-soft);border-radius:.9rem;padding:1.5rem 1.6rem 1.3rem;box-shadow:0 20px 60px rgba(0,0,0,.08)}
.kicker{font:500 .76rem/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--acc-text);margin:0 0 .7rem}
h1{font:400 clamp(2rem,4.2vw,2.9rem)/1.06 var(--serif);letter-spacing:-.012em;margin:0 0 .9rem}
.deck{font-size:1.18rem;line-height:1.5;margin:0 0 1.1rem}
h2{font:400 1.6rem/1.15 var(--serif);margin:0 0 .7rem}
.anchor{opacity:0;margin-left:.35rem;font-size:.8em;text-decoration:none;color:var(--mut)}h2:hover .anchor,.anchor:focus{opacity:1}
p{margin:0 0 .85rem}
b{font-weight:600}

/* search */
.search label{display:block;font:500 .82rem/1.3 var(--mono);color:var(--mut);margin:0 0 .4rem}
.srow{display:flex;gap:.4rem}
.srow input{flex:1;min-width:0;min-height:48px;border:1px solid var(--line);border-radius:.55rem;background:var(--bg);padding:.55rem .75rem;font-size:1.08rem}
.srow input:focus{border-color:var(--acc)}
.btn{min-height:48px;border:1px solid var(--acc-text);background:var(--acc-text);color:var(--bg);border-radius:.55rem;padding:.5rem 1rem;cursor:pointer;font:500 .9rem/1 var(--mono)}
.btn.ghost{background:none;color:var(--acc-text)}
.hint{font-size:.92rem;color:var(--mut);margin:.5rem 0 0}
.results{margin-top:1rem}
.results h3{font:500 1.02rem/1.3 var(--serif);margin:1rem 0 .4rem}
.fsum{font-size:.95rem;margin:.2rem 0 .6rem;color:var(--fg)}
.fbar{display:flex;height:10px;border-radius:5px;overflow:hidden;margin:.3rem 0 .8rem;background:var(--line-soft)}
.fbar i{display:block;height:100%}
.plist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft)}
.plist li{border-bottom:1px solid var(--line-soft)}
.plist button{all:unset;box-sizing:border-box;display:block;width:100%;padding:.55rem .1rem;cursor:pointer;min-height:44px}
.plist button:focus-visible{outline:2px solid var(--acc)}
.plist .nm{font-weight:600}
.plist .gv{display:block;font-size:.88rem;color:var(--mut);line-height:1.35}
.plist .fs{font-family:var(--mono);font-size:.74rem;color:var(--acc-text)}
.plist .detail{padding:.2rem .1rem .8rem;font-size:.92rem}
.plist .detail dl{margin:.3rem 0;display:grid;grid-template-columns:minmax(7rem,auto) 1fr;gap:.15rem .7rem}
.plist .detail dt{color:var(--mut);font-family:var(--mono);font-size:.74rem;padding-top:.18rem}
.plist .detail dd{margin:0}
.caveat{font-size:.86rem;color:var(--mut);font-style:italic}
.morebtn{margin:.7rem 0 0}
.resbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.9rem 0 0}
.scroll-cue{font:500 .82rem/1.3 var(--mono);color:var(--mut);margin:1.2rem 0 0}
.legend{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.3rem .9rem;font-size:.86rem;color:var(--mut)}
.legend li{display:flex;gap:.45rem;align-items:center}
.legend svg{width:15px;height:15px;flex:none}
.legend-note{font-size:.95rem;color:var(--mut)}

.story{padding-bottom:20vh}
.step{min-height:105vh;display:flex;align-items:center}
.step .card{width:min(var(--col),calc(100vw - 2rem));margin-left:max(1rem,3.5vw)}

.after{background:var(--bg);position:relative;border-top:1px solid var(--line-soft)}
.prose{width:min(40rem,calc(100vw - 2rem));margin:0 auto;padding:3.5rem 0 2rem}
.prose section{margin:0 0 2.6rem}
.steps{padding-left:1.1rem}.steps li{margin:0 0 .7rem}
.sources{font-size:.92rem;padding-left:1.1rem;color:var(--mut)}.sources li{margin:0 0 .35rem}
.share{margin:1.4rem 0}
.share-row{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.share-label{font:500 .8rem/1 var(--mono);color:var(--mut);margin-right:.3rem}
.ic{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:99px;background:none;color:var(--fg);cursor:pointer;text-decoration:none}
.ic:hover{border-color:var(--acc);color:var(--acc-text)}
.share-msg{font-size:.85rem;color:var(--mut);min-height:1.2em;margin:.3rem 0 0}
.site-footer{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;padding:1.6rem 1rem 2.4rem;font-size:.9rem;color:var(--mut);border-top:1px solid var(--line-soft)}

/* desktop: the map sits right of the text column */
@media (min-width:900px){
  .step .card{max-height:none}
}
/* phones: map on top (40% of the screen), text below it */
@media (max-width:899px){
  :root{--col:100vw}
  .stage{position:sticky;top:calc(var(--top) + var(--browser-safe-top,env(safe-area-inset-top)));height:44svh;border-bottom:1px solid var(--line-soft);background:var(--bg);z-index:5}
  .chip{min-width:32px;padding:.3rem .4rem;font-size:.72rem}.brand span{max-width:30vw}.topbar{gap:.35rem;padding-left:.6rem;padding-right:.6rem}
  main{margin-top:0}
  .hero{min-height:0;padding:1.2rem 0 1rem}
  .hero .col,.step .card{width:auto;margin:0 1rem;padding:1.2rem 1.15rem 1rem;box-shadow:none}
  .step{min-height:78vh;align-items:flex-start;padding-top:1.2rem}
  .stage-key{left:.5rem;right:.5rem;bottom:.4rem;max-width:none;flex-wrap:wrap;justify-content:flex-start;font-size:.7rem;gap:.15rem .6rem;padding:.3rem .45rem}
  @media (max-width:420px){.brand span{display:none}}
  .zoomout{top:.5rem;right:.5rem}
  :root[data-scene=lorca] .stage-key{display:none}
  .langbar{width:calc(100vw - 2rem);font-size:.88rem}
  :root.typing .stage{height:18svh}:root.typing .stage-key{display:none}
  .legend{grid-template-columns:1fr}
  body{padding-top:var(--top)}
  .story{padding-bottom:10vh}
  .mapcard{left:.5rem!important;right:.5rem;width:auto;top:auto!important;bottom:.5rem}
}
.langbar{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:60;display:flex;gap:.7rem;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:.7rem;padding:.4rem .5rem .4rem 1rem;box-shadow:0 10px 30px rgba(0,0,0,.15);font-size:.95rem;max-width:calc(100vw - 2rem)}
.langbar a{font-weight:600}.langbar button{width:44px;height:44px;border:0;background:none;cursor:pointer;font-size:1.2rem;color:var(--mut)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}