/* Naval-chart atlas: nave-sovietice-scufundate. Semantic tokens, light + dark. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/fraunces-normal-latin.woff2") 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+2074,U+20AC,U+2122,U+2212,U+2215;}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/fraunces-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400 700;font-display:swap;src:url("fonts/fraunces-italic-latin.woff2") 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+2074,U+20AC,U+2122,U+2212,U+2215;}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400 700;font-display:swap;src:url("fonts/fraunces-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/source-serif-4-normal-latin.woff2") 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+2074,U+20AC,U+2122,U+2212,U+2215;}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/source-serif-4-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/archivo-narrow-500.woff2") format("woff2");}
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/archivo-narrow-600.woff2") format("woff2");}
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/archivo-narrow-700.woff2") format("woff2");}

:root{
--paper:#ebefe4;--paper-2:#dde3d4;--ink:#211b11;--ink-soft:#4a4234;
--line:#bcc7b4;--accent:#6b4e0c;--sea:#cfdfe6;--sea-2:#bccfdd;--sea-3:#a9c2d2;
--land:#e2e3cb;--teal:#14503f;--teal-soft:#3f7261;
--badge-confirmed:#1e4d3a;--badge-probable:#6b4e0c;--badge-disputed:#7a3b12;
--card:#f3f6ee;--focus:#0f4fd8;--topbar-h:3rem;
--serif:"Fraunces",Georgia,serif;--body:"Source Serif 4",Georgia,serif;
--narrow:"Archivo Narrow","Arial Narrow",system-ui,sans-serif;
}
[data-theme="dark"]{
--paper:#0f1a1c;--paper-2:#14262b;--ink:#ece4cf;--ink-soft:#c3b99f;
--line:#33484a;--accent:#d9a93c;--sea:#0e2229;--sea-2:#122b33;--sea-3:#173841;
--land:#17251f;--teal:#8fd0bb;--teal-soft:#a8dcc8;
--badge-confirmed:#9fd8bd;--badge-probable:#e3b954;--badge-disputed:#eba06a;
--card:#142021;--focus:#8fb4ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.075rem;line-height:1.65;overflow-x:clip}
h1,h2,h3{font-family:var(--serif);line-height:1.15;letter-spacing:-0.01em}
h1{font-size:clamp(1.7rem,1.1rem + 3.2vw,2.6rem);margin:0 0 0.5rem}
h2{font-size:clamp(1.45rem,1.1rem + 1.8vw,2.1rem);margin:2.6rem 0 0.7rem}
h3{font-size:1.2rem;margin:1.6rem 0 0.4rem}
p{margin:0 0 1rem;max-width:44rem}
a{color:var(--teal);text-underline-offset:0.14em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
[hidden]{display:none!important}
.icon-btn svg[hidden]{display:none!important}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.1rem}
section{scroll-margin-top:calc(var(--topbar-h) + 0.8rem)}
.kicker{font-family:var(--narrow);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;font-size:0.82rem;color:var(--accent)}
.deck{font-family:var(--serif);font-size:clamp(1.02rem,0.95rem + 0.6vw,1.2rem);line-height:1.45;max-width:46rem}
/* top bar */
.topbar{position:sticky;top:0;z-index:60;height:var(--topbar-h);display:flex;align-items:center;gap:0.7rem;background:var(--paper);border-bottom:1px solid var(--line);padding:0 0.9rem}
.topbar .home{font-family:var(--narrow);font-weight:700;font-size:0.95rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.topnav{display:flex;gap:0.15rem;overflow-x:auto;scrollbar-width:none;flex:1}
.topnav::-webkit-scrollbar{display:none}
.topnav a{font-family:var(--narrow);font-weight:600;font-size:0.92rem;color:var(--ink-soft);text-decoration:none;padding:0.55rem 0.6rem;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.topnav a[aria-current="true"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.spacer{flex:0 0 auto;margin-left:auto}
.chip{font-family:var(--narrow);font-weight:600;font-size:0.9rem;border:1px solid var(--line);border-radius:999px;padding:0.32rem 0.8rem;color:var(--ink);text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.icon-btn{width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.icon-btn svg{display:block}
/* hero: compact chart opening, the map below carries the first viewport */
.hero{padding:1.3rem 0 0.9rem;border-bottom:1px solid var(--line)}
.hero .standfirst{font-size:1.02rem;max-width:46rem;color:var(--ink-soft)}
.counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.5rem;margin:0.9rem 0;max-width:56rem}
.count{border-top:3px solid var(--accent);padding-top:0.35rem}
.count b{display:block;font-family:var(--serif);font-size:clamp(1.35rem,1rem + 1.6vw,1.9rem);line-height:1}
.count span{font-family:var(--narrow);font-size:0.8rem;color:var(--ink-soft);line-height:1.3;display:block}
.thesis{border-left:3px solid var(--teal);padding:0.15rem 0 0.15rem 0.9rem;font-family:var(--serif);font-size:1.02rem;max-width:46rem}
/* map: the working chart, present in the first viewport */
#harta h2{margin-top:1.4rem}
.map-about{font-size:0.98rem;max-width:46rem;color:var(--ink-soft)}
.map-shell{position:relative;border:1px solid var(--line);box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px var(--line);background:var(--sea);margin:1rem 0 0}
.map-shell svg{display:block;width:100%;height:auto}
@media (min-width:64rem){.opener .map-shell svg{min-height:420px}}
.map-tools{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;padding:0.7rem 0.8rem;border-top:1px solid var(--line);background:var(--card)}
.tool-group{display:flex;flex-wrap:wrap;gap:0.4rem;align-items:center}
.tool-label{font-family:var(--narrow);font-weight:700;font-size:0.82rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft)}
.fchip{font-family:var(--narrow);font-weight:600;font-size:0.92rem;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:0.42rem 0.85rem;cursor:pointer;min-height:44px}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:0.4rem 1rem;padding:0.6rem 0.8rem;font-family:var(--narrow);font-size:0.88rem;color:var(--ink-soft);border-top:1px dashed var(--line);background:var(--card)}
.legend i{display:inline-block;width:0.8rem;height:0.8rem;border-radius:50%;margin-right:0.3rem;vertical-align:baseline}
.legend .sw-a{background:var(--ink)}
.legend .sw-p{background:transparent;border:3px solid var(--ink)}
.legend .sw-b{background:transparent;border:2px solid var(--ink);border-radius:2px;transform:rotate(45deg) scale(0.85)}
.plink{font-size:0.7em;text-decoration:none;color:var(--ink-soft);margin-left:0.3rem}
.plink:hover{color:var(--teal)}
.dot .swatch{width:0.6rem;height:0.6rem;border-radius:50%;flex:none;background:var(--ink)}
.dot[aria-current="true"] .swatch{background:var(--paper)}
.map-note{font-family:var(--narrow);font-size:0.88rem;color:var(--ink-soft);padding:0 0.2rem}
/* detail panel + bottom sheet */
.detail{border:1px solid var(--line);background:var(--card);margin:0 0 1rem}
.detail-inner{padding:1.2rem 1.2rem 1.4rem;max-width:46rem}
.detail h3{margin-top:0;font-size:1.6rem}
.badge{display:inline-block;font-family:var(--narrow);font-weight:700;font-size:0.85rem;letter-spacing:0.06em;text-transform:uppercase;border:2px solid currentColor;border-radius:4px;padding:0.2rem 0.6rem;margin:0.4rem 0}
.badge.confirmed{color:var(--badge-confirmed)}
.badge.probable{color:var(--badge-probable)}
.badge.disputed{color:var(--badge-disputed)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:0.4rem 1rem;margin:0.8rem 0;font-size:0.98rem}
.facts dt{font-family:var(--narrow);font-weight:700;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft)}
.facts dd{margin:0}
.src-list{margin:0.6rem 0;padding-left:1.2rem;font-size:0.95rem}
.close-btn{font-family:var(--narrow);font-weight:700;font-size:0.92rem;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:6px;padding:0.5rem 1rem;cursor:pointer;min-height:44px}
/* cause bars */
.bars{max-width:46rem;margin:1rem 0}
.bar-row{display:grid;grid-template-columns:11rem 1fr 3rem;gap:0.7rem;align-items:center;margin:0.45rem 0;font-family:var(--narrow);font-size:0.95rem}
.bar-track{background:var(--paper-2);border:1px solid var(--line);height:1.15rem;position:relative}
.bar-fill{background:var(--teal);height:100%}
.bar-fill.w0{width:0%}.bar-fill.w5{width:5%}.bar-fill.w10{width:10%}.bar-fill.w15{width:15%}.bar-fill.w20{width:20%}.bar-fill.w25{width:25%}.bar-fill.w30{width:30%}.bar-fill.w35{width:35%}.bar-fill.w40{width:40%}.bar-fill.w45{width:45%}.bar-fill.w50{width:50%}.bar-fill.w55{width:55%}.bar-fill.w60{width:60%}.bar-fill.w65{width:65%}.bar-fill.w70{width:70%}.bar-fill.w75{width:75%}.bar-fill.w80{width:80%}.bar-fill.w85{width:85%}.bar-fill.w90{width:90%}.bar-fill.w95{width:95%}.bar-fill.w100{width:100%}
.bar-row.disputed .bar-fill{background:transparent;border:2px dashed var(--badge-disputed)}
/* moskva steps */
.steps{list-style:none;margin:1rem 0;padding:0;max-width:46rem;counter-reset:step}
.steps li{border:1px solid var(--line);background:var(--card);padding:0.9rem 1rem;margin:0 0 0.6rem}
.steps li[aria-current="true"]{border-left:5px solid var(--accent)}
.steps h3{margin:0 0 0.3rem;font-size:1.15rem}
.steps h3 .n{font-family:var(--narrow);color:var(--accent);margin-right:0.5rem}
.stepper{display:flex;gap:0.5rem;align-items:center;margin:0.8rem 0;flex-wrap:wrap}
.stepper button{font-family:var(--narrow);font-weight:700;font-size:0.95rem;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:6px;padding:0.55rem 1.1rem;cursor:pointer;min-height:44px}
.stepper button:disabled{opacity:0.4;cursor:default}
.tac{border:1px solid var(--line);background:var(--sea);margin:0.6rem 0}
.tac svg{display:block;width:100%;height:auto}
/* timeline */
.years{display:grid;gap:0.8rem;margin:1rem 0}
.year-row{border:1px solid var(--line);background:var(--card);padding:0.8rem 1rem}
.year-row h3{margin:0 0 0.5rem;font-family:var(--narrow);font-size:1rem;letter-spacing:0.08em}
.dots{display:flex;flex-wrap:wrap;gap:0.45rem}
.dot{font-family:var(--narrow);font-weight:600;font-size:0.88rem;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:0.4rem 0.75rem;cursor:pointer;min-height:44px;text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem}
.dot[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dot .swatch{width:0.6rem;height:0.6rem;border-radius:50%;flex:none}
.empty{border:1px dashed var(--line);padding:1rem;font-family:var(--narrow);color:var(--ink-soft)}
.empty button{margin-left:0.6rem}
/* scale strip */
.scale-strip{border:1px solid var(--line);background:var(--card);padding:1rem;overflow-x:auto;margin:1rem 0}
.scale-strip svg{display:block;min-width:34rem;width:100%;height:auto}
/* units */
.units{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:0.8rem;margin:1rem 0}
.unit{border:1px solid var(--line);background:var(--card);padding:0.9rem 1rem}
.unit h3{margin:0 0 0.2rem;font-size:1.12rem}
.unit .role{font-family:var(--narrow);font-size:0.88rem;color:var(--ink-soft);margin:0 0 0.4rem}
.unit p{font-size:0.95rem;margin:0 0 0.5rem}
.unit .linked{font-family:var(--narrow);font-weight:700;font-size:0.9rem;color:var(--teal)}
/* faq */
.faq details{border:1px solid var(--line);background:var(--card);margin:0 0 0.55rem;padding:0.7rem 1rem;max-width:46rem}
.faq summary{font-family:var(--serif);font-size:1.08rem;cursor:pointer;min-height:44px}
/* method + footer */
.method{max-width:46rem}
footer{border-top:1px solid var(--line);margin-top:3rem;padding:1.4rem 0 2.4rem;font-family:var(--narrow);font-size:0.9rem;color:var(--ink-soft)}
footer nav{display:flex;flex-wrap:wrap;gap:0.4rem 1.2rem;margin-bottom:0.6rem}
/* share */
.share{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;margin:1.2rem 0;font-family:var(--narrow);font-size:0.92rem}
.share a,.share button{border:1px solid var(--line);border-radius:999px;padding:0.45rem 0.95rem;color:var(--ink);text-decoration:none;background:transparent;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-family:var(--narrow);font-weight:600;font-size:0.92rem}
.share [role="status"]{font-size:0.88rem;color:var(--ink-soft)}
/* vessel index */
.vindex{columns:2;column-gap:2rem;font-size:0.95rem;max-width:46rem}
.vindex li{break-inside:avoid;margin-bottom:0.3rem}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:0.6rem 1rem;z-index:99}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:40rem){
.count span{font-size:0.72rem}
.hero{padding:1rem 0 0.7rem}
#harta h2{margin-top:0.8rem}
.share{gap:0.35rem;font-size:0.85rem}
.share a,.share button{padding:0.4rem 0.75rem}
.bar-row{grid-template-columns:8.5rem 1fr 2.6rem}
.vindex{columns:1}
}
/* detail: right-side panel on desktop, bottom sheet below 60rem */
@media (max-width:60rem){
.detail{position:fixed;left:0;right:0;bottom:0;z-index:70;max-height:72vh;overflow:auto;border-top:3px solid var(--accent);border-left:0;border-right:0;border-bottom:0;margin:0;border-radius:0.9rem 0.9rem 0 0}
}
@media (min-width:60rem){
.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:1rem;align-items:start}
.detail{position:sticky;top:calc(var(--topbar-h) + 0.8rem);max-height:calc(100vh - var(--topbar-h) - 2rem);overflow:auto}
}
/* opening: the working chart carries the first viewport beside the header */
@media (min-width:64rem){
.opener{display:grid;grid-template-columns:23rem minmax(0,1fr);gap:1.4rem;align-items:start}
.opener .hero{border-bottom:0;padding:1.6rem 0 0.9rem}
.opener #harta h2{margin-top:1.2rem}
.opener .map-layout{grid-template-columns:minmax(0,1fr) 20rem}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{transition:none!important;animation:none!important}
}
/* chart map */
#chart{font-family:var(--narrow)}
#chart .neatline{fill:none;stroke:var(--ink-soft);stroke-width:1.5;opacity:0.8}
#chart .chart-title{font-size:16px;font-weight:700;letter-spacing:0.1em;fill:var(--ink)}
#chart .chart-sub{font-size:12.5px;fill:var(--ink-soft);letter-spacing:0.04em}
#chart .mk-lab{paint-order:stroke;stroke:var(--sea);stroke-width:3px}
#chart .mk text{pointer-events:none}
/* narrow chart: hide small labels instead of shrinking them into illegibility */
#chart.narrow .mk-lab{display:none}
#chart.narrow .place-lab{display:none}
#chart.narrow .place-lab.major{display:block;font-size:20px}
#chart.narrow .zone-lab{font-size:20px}
#chart.narrow .chart-title{font-size:19px}
#chart.narrow .mk[aria-current="true"] .mk-lab{display:block;font-size:20px}
#chart .depth-1{fill:var(--sea-2);opacity:0.55}
#chart .depth-2{fill:var(--sea-3);opacity:0.5}
#chart .depth-3{fill:var(--sea-3);opacity:0.85}
#chart .grat{stroke:var(--line);stroke-width:1;opacity:0.6}
#chart .grat-lab{font-size:13px;fill:var(--ink-soft)}
#chart .land{fill:var(--land);stroke:var(--ink-soft);stroke-width:1.2}
#chart .coast{fill:none;stroke:var(--ink);stroke-width:2}
#chart .river{stroke:var(--teal);stroke-width:1.6}
#chart .snake{stroke:var(--ink);stroke-width:1.2}
#chart .minezone{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:9 5}
#chart #hatch{color:var(--accent)}
#chart .zone-lab{font-size:15px;font-weight:700;fill:var(--accent)}
:root:not([data-theme="dark"]) #chart .zone-lab{fill:#4a3807}
#chart .op-route{fill:none;stroke:var(--teal);stroke-width:2.4;stroke-dasharray:7 5}
#chart .op-lab{font-size:13px;font-weight:600;fill:var(--teal)}
#chart .op-point{fill:var(--teal);stroke:var(--paper);stroke-width:1.5}
#chart .base-mk{fill:var(--ink)}
#chart .base-lab{font-size:13px;font-weight:700;fill:var(--ink)}
#chart .place-dot{fill:var(--ink-soft)}
#chart .place-lab{font-size:13px;fill:var(--ink-soft)}
#chart .place-lab.major{font-size:14.5px;font-weight:700;fill:var(--ink)}
#chart .scale-line{stroke:var(--ink);stroke-width:2}
#chart .scale-lab{font-size:13px;font-weight:600;fill:var(--ink)}
#chart .compass-ring{fill:none;stroke:var(--ink);stroke-width:1.4}
#chart .compass-n{fill:var(--ink)}
#chart .compass-lab{font-size:13px;font-weight:700;fill:var(--ink)}
#chart .mk{cursor:pointer}
#chart .mk-core{fill:var(--ink)}
#chart .mk-disputed .mk-core{fill:var(--sea);stroke:var(--ink);stroke-width:2.4}
#chart .mk-ring{fill:none;stroke:var(--ink);stroke-width:1.6}
#chart .mk-confirmed .mk-ring{stroke-dasharray:none}
#chart .mk-probable .mk-ring{stroke-dasharray:4 3}
#chart .mk-disputed .mk-ring{stroke-dasharray:3 3}
#chart .mk-ring2{fill:none;stroke:var(--ink);stroke-width:1.2}
#chart .mk-halo{fill:none;stroke:var(--ink-soft);stroke-width:1.2;stroke-dasharray:4 4}
#chart .mk-lab{font-size:14px;font-weight:600;fill:var(--ink)}
#chart .mk[aria-current="true"] .mk-core{fill:var(--accent)}
#chart .mk:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
@media print{
.topbar,.map-tools,.stepper,.share,.close-btn{display:none}
body{font-size:11pt}
.detail{position:static;max-height:none}
}