@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/newsreader-latin.woff2?v=725d78a558') format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/newsreader-latin-ext.woff2?v=aed527cdc1') format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson";font-style:normal;font-weight:200 800;font-display:swap;
  src:url('fonts/atkinson-latin.woff2?v=18b2a1a39a') format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson";font-style:normal;font-weight:200 800;font-display:swap;
  src:url('fonts/atkinson-latin-ext.woff2?v=7dae0c6c66') format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plexmono-latin.woff2?v=08949f728d') format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plexmono-latin-ext.woff2?v=6bc0f226a5') format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;
  --bg:#f3efe6;--bg-2:#e8e2d2;--card:#fbf8f1;
  --ink:#181a17;--ink-2:#3c4038;--muted:#4d5348;
  --rule:#d3cbb4;--rule-2:#b3a888;
  --link:#0f4c6e;--accent:#0f5e73;--mark:#0f4c6e;
  --sky-top:#aec9dc;--sky-low:#efe9da;
  --land-near:#3d4433;--land-mid:#6d7f7a;--land-far:#b9c6cb;
  --ridge:#22271f;--haze:#e2e6e2;--leader:#2b3028;
  --seen:#c2431f;--water-lake:#5f9aa8;--water-sea:#3f7fae;--border-line:rgba(40,40,40,.55);
  --sea-fill:#9fc3d4;--lake-fill:#a9c8cf;--fan:rgba(15,94,115,.20);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --bar:3.1rem;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#141311;--bg-2:#1d1c18;--card:#191814;
  --ink:#f0ece1;--ink-2:#c8c3b4;--muted:#b3ad9c;
  --rule:#33302a;--rule-2:#4c473c;
  --link:#a5d3ec;--accent:#7fd0de;--mark:#a5d3ec;
  --sky-top:#04080e;--sky-low:#1a2632;
  --land-near:#0a0c09;--land-mid:#26383b;--land-far:#6f8b96;
  --ridge:#ccd8d4;--haze:#2a3a42;--leader:#d8ddd2;
  --seen:#ff7a50;--water-lake:#4e7d88;--water-sea:#3a6a8d;--border-line:rgba(230,235,240,.5);
  --sea-fill:#274b5c;--lake-fill:#2c5152;--fan:rgba(127,208,222,.20);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#141311;--bg-2:#1d1c18;--card:#191814;
  --ink:#f0ece1;--ink-2:#c8c3b4;--muted:#b3ad9c;
  --rule:#33302a;--rule-2:#4c473c;
  --link:#a5d3ec;--accent:#7fd0de;--mark:#a5d3ec;
  --sky-top:#04080e;--sky-low:#1a2632;
  --land-near:#0a0c09;--land-mid:#26383b;--land-far:#6f8b96;
  --ridge:#ccd8d4;--haze:#2a3a42;--leader:#d8ddd2;
  --seen:#ff7a50;--water-lake:#4e7d88;--water-sea:#3a6a8d;--border-line:rgba(230,235,240,.5);
  --sea-fill:#274b5c;--lake-fill:#2c5152;--fan:rgba(127,208,222,.20);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + .5rem)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.05rem/1.62 var(--sans)}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2.5px solid var(--link);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:.5rem}
.muted{color:var(--muted)}
[hidden]{display:none!important}

/* top bar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;height:var(--bar);padding:0 clamp(1rem,3vw,2rem);
  background:var(--bg);border-bottom:1px solid var(--rule)}
.topbar .home{color:var(--ink);text-decoration:none;font-size:1.2rem;line-height:1}
.topbar .brand{font:600 .92rem/1 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .lang{margin-left:auto;font-size:.9rem;white-space:nowrap}
.topbar #theme{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--rule-2);background:transparent;color:var(--ink);cursor:pointer;font-size:1rem}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;overflow:hidden}
.sailmark{position:absolute;left:0;top:-.55rem;font-size:.8rem;will-change:transform}

/* reading rail */
.rail{display:none}
@media (min-width:76rem){
  .rail{display:block;position:fixed;right:1.2rem;top:50%;transform:translateY(-50%);z-index:25}
  .rail ol{list-style:none;margin:0;padding:.7rem .8rem;display:flex;flex-direction:column;gap:.85rem;background:var(--card);border:1px solid var(--rule);border-radius:999px}
  .rail a{display:block;width:.6rem;height:.6rem;border-radius:50%;background:var(--rule-2);overflow:hidden;text-indent:-999px;white-space:nowrap}
  .rail a[aria-current]{background:var(--accent);transform:scale(1.4)}
}
@media print{.rail{display:none}}

/* hero + sections */
main{display:block}
main>header,main>section{scroll-margin-top:calc(var(--bar) + .6rem);max-width:74rem;margin:0 auto;padding:clamp(1.6rem,4vw,3rem) clamp(1rem,3vw,2rem) 0}
h1{font:400 clamp(2.2rem,5.6vw,3.9rem)/1.04 var(--serif);letter-spacing:-.015em;margin:0 0 1rem;text-wrap:balance;max-width:22ch}
h2{font:400 clamp(1.7rem,3.4vw,2.4rem)/1.12 var(--serif);letter-spacing:-.01em;margin:0 0 .8rem;text-wrap:balance}
h3{font:700 1.05rem/1.3 var(--sans);margin:1.5rem 0 .35rem}
.deck{font:400 clamp(1.1rem,1.8vw,1.3rem)/1.5 var(--serif);color:var(--ink-2);margin:0 0 1.4rem;max-width:38rem}
.lede{font:400 1.12rem/1.55 var(--serif);color:var(--ink-2);max-width:38rem}
.kicker{font:600 .82rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 .5rem}
main p{max-width:66ch}
main section p,main header p{font:400 1.08rem/1.62 var(--serif)}
.hero{margin:0}
.hero img{display:block;width:100%;height:auto;border-radius:.3rem}
figure{margin:1.4rem 0}
figure img{display:block;width:100%;height:auto;border-radius:.3rem}
figcaption{font:400 .92rem/1.5 var(--serif);color:var(--muted);margin-top:.5rem}
.scroll-hint{color:var(--muted);font-size:.95rem}
.skipstory{margin:1.2rem 0 0}

/* scrolly story */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(19rem,24rem);gap:2rem;align-items:start;margin-top:1.2rem}
.stage{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));height:calc(100lvh - var(--bar));display:flex;flex-direction:column;gap:.5rem;padding:.8rem 0;min-width:0}
.steps{display:flex;flex-direction:column;gap:0;min-width:0}
.step{min-height:70vh;display:flex;flex-direction:column;justify-content:center;padding:1.2rem 0}
.step h3{font:400 1.35rem/1.25 var(--serif);margin:0 0 .5rem}
.step p{margin:0 0 .8rem}
#pano,#climb{display:block;width:100%;flex:0 0 auto;aspect-ratio:2/1;min-height:0;border:1px solid var(--rule);border-radius:.3rem;touch-action:pan-y;cursor:grab;background:var(--sky-low)}
#climb{transition:opacity .5s ease}
.alt{font:600 .95rem/1 var(--mono);color:var(--ink-2);margin:0}
.legend{font-size:.85rem;color:var(--muted);margin:0}
#labels{position:absolute;left:0;right:0;top:.8rem;pointer-events:none;overflow:hidden;height:40%}
.plabel{position:absolute;top:.4rem;transform:translateX(-50%);pointer-events:auto;display:flex;flex-direction:column;align-items:center;
  padding:.3rem .5rem;border:1px solid var(--rule-2);border-radius:.35rem;cursor:pointer;min-height:44px;justify-content:center;
  background:var(--card);color:var(--ink);white-space:nowrap;font-family:var(--sans)}
.plabel.r2{top:3.4rem}
.plabel .n{font-size:.8rem;line-height:1.2}
.plabel .mm{font:400 .68rem/1.2 var(--mono);color:var(--ink-2)}
.plabel.on{background:var(--ink);color:var(--bg)}
.plabel.on .mm{color:var(--bg)}
.plabel.hid{border-style:dashed}
.controls{display:flex;align-items:center;gap:.6rem;margin:0;flex-wrap:wrap}
.controls label{font-size:.88rem;color:var(--ink-2);display:flex;align-items:center;gap:.4rem}
select{font:400 .95rem/1.2 var(--sans);color:var(--ink);background:var(--card);border:1.5px solid var(--rule-2);border-radius:.5rem;padding:.6rem 2rem .6rem .7rem;appearance:none;min-height:44px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1rem) 55%,calc(100% - .7rem) 55%;background-size:.3rem .3rem;background-repeat:no-repeat}
.reset{font:600 .9rem/1 var(--sans);color:var(--ink);background:var(--card);border:1.5px solid var(--rule-2);border-radius:999px;padding:.7rem 1rem;cursor:pointer;min-height:44px}
.reset:hover{border-color:var(--ink)}
.readout{font:400 1rem/1.5 var(--serif);min-height:3.2em;margin:0;max-width:60ch}
.readout:empty::before{content:" "}
.minimap{position:relative;border:1px solid var(--rule);border-radius:.3rem;overflow:hidden;background:var(--bg-2)}
.minimap svg{display:block;width:100%;height:auto}
#story-watch .minimap svg{height:24vh;min-height:10rem}
.minimap .legend{position:absolute;left:.5rem;bottom:.4rem;background:var(--card);padding:.1rem .5rem;border-radius:.3rem;border:1px solid var(--rule)}

/* map svg */
.map .relief.th-d{display:none}
:root[data-theme="dark"] .map .relief.th-l{display:none}
:root[data-theme="dark"] .map .relief.th-d{display:inline}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .map .relief.th-l{display:none}
  :root:not([data-theme="light"]) .map .relief.th-d{display:inline}
}
.map .sea{fill:var(--sea-fill)}
.map .lake{fill:var(--lake-fill)}
.map .coast{fill:none;stroke:var(--ink-2);stroke-width:260;opacity:.7}
.map .pt circle{fill:var(--mark);stroke:var(--bg);stroke-width:220}
.map .pt text{font:600 2600px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:700px}
.map .pt.fort circle{fill:var(--accent)}
.map .pt.mark{cursor:pointer}
.map .pt.mark circle{r:520}
.map .pt.mark circle.hit{r:4200;fill:rgba(0,0,0,0);stroke:none}
.map .pt.mark.on circle{fill:var(--seen)}
.map .pt.mouth circle{fill:none;stroke:var(--seen);stroke-width:420;stroke-dasharray:1200 700}
.map .pt.mouth text{font-size:2300px}
.map .pt.mouth text.st{font-size:1900px;font-weight:400}
#fan polygon{fill:var(--fan)}
#shipline{stroke-width:420}
#shipline.ok{stroke:var(--accent)}
#shipline.no{stroke:var(--seen);stroke-dasharray:1400 800}
#ship .hull{fill:var(--ink);stroke:var(--bg);stroke-width:220}
#ship .flag{font-size:3400px;text-anchor:middle}
.map.mouth{margin-top:1.2rem;border:1px solid var(--rule);border-radius:.3rem;max-width:46rem}

/* marks table */
details{margin-top:1.4rem;border-top:1px solid var(--rule)}
details summary{cursor:pointer;font:600 1rem/1.4 var(--sans);padding:.8rem 0;min-height:44px}
.marks{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.marks li{border-top:1px solid var(--rule);padding-top:.6rem}
.marks h4{font:400 1.1rem/1.3 var(--serif);margin:0 0 .2rem}
.marks p{margin:0 0 .2rem;font-size:1rem}
.marks .nums{font:400 .85rem/1.4 var(--mono);color:var(--muted)}

/* related + footer */
.related{max-width:74rem;margin:2.5rem auto 0;padding:0 clamp(1rem,3vw,2rem)}
.related h2{font:400 1.3rem/1.2 var(--serif)}
.related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}
footer{margin-top:3.5rem;border-top:1px solid var(--rule);padding:1.4rem clamp(1rem,3vw,2rem) 5rem;font-size:.9rem;color:var(--muted)}

@media (max-width:60rem){
  .story{grid-template-columns:1fr}
  .stage{position:sticky;top:var(--bar);height:40vh;height:40lvh;z-index:5;background:var(--bg)}
  .step{min-height:0;padding:4rem 0}
  .stage + .steps .step:first-child{padding-top:8rem}
  .readout{min-height:0}
  .minimap{display:none}
  #story-watch .minimap{display:block;max-height:30vh}
  #story-watch .stage{height:40vh;height:40lvh}
}
@media (max-height:740px) and (min-width:60rem){
  .stage{font-size:.92em}
  .readout{min-height:2.2em}
}
@media (max-width:430px){
  .plabel .n{font-size:.72rem}
  .topbar .brand{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  #climb{transition:none}
}
@media print{.topbar,.rail,.stage,.progress{display:none}}

/* share row (standards/v2/tools/share_row.py) */
.share-row{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.share-row .lab{font-size:.95rem;margin-inline-end:.3rem}
.share-row a,.share-row button{display:inline-grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;border:1px solid var(--sr-line,color-mix(in srgb,currentColor 28%,transparent));background:transparent;color:var(--sr-ink,inherit);text-decoration:none;cursor:pointer;font:inherit;transition:color .15s,border-color .15s}
.share-row a:hover,.share-row button:hover,.share-row a:focus-visible,.share-row button:focus-visible{color:var(--sr-acc,inherit);border-color:var(--sr-acc,currentColor)}
.share-row [hidden]{display:none}
@media (pointer:coarse){.share-row a,.share-row button{width:2.75rem;height:2.75rem}}
@media (max-width:30rem){.share-row .lab{flex-basis:100%;margin:0 0 .15rem}}
.share-status{font-size:.92rem;color:var(--sr-ok,inherit);min-height:1.2em;margin:.4rem 0 0}
.share-status:empty{display:none}
.share-field{display:block;width:100%;max-width:36rem;margin-top:.4rem;font:inherit;font-size:.9rem}