/* noviodunum-isaccea: limestone in river haze. */
@font-face { font-family: "Newsreader"; font-weight: 400; font-display: swap;
  src: url("fonts/newsreader-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 400; font-display: swap;
  src: url("fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F,U+1E00-1EFF; }
@font-face { font-family: "Atkinson"; font-weight: 200 800; font-display: swap;
  src: url("fonts/atkinson-latin.woff2") format("woff2"); }
@font-face { font-family: "Atkinson"; font-weight: 200 800; font-display: swap;
  src: url("fonts/atkinson-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F,U+1E00-1EFF; }
@font-face { font-family: "PlexMono"; font-weight: 400; font-display: swap;
  src: url("fonts/plexmono-latin.woff2") format("woff2"); }
@font-face { font-family: "PlexMono"; font-weight: 400; font-display: swap;
  src: url("fonts/plexmono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F,U+1E00-1EFF; }
:root {
  --paper: #faf7ef; --ink: #23211b; --ink-2: #5c584c;
  --stone: #e6dfd0; --line-soft: #d8d0bd;
  --river: #7fa8b8; --brass: #a8762a;
  --sky-top: #a9c6d4; --sky-low: #ece5d3;
  --land-near: #7d8f60; --land-mid: #a3ae8d; --land-far: #c6c9b8;
  --card: #fffdf7;
}
[data-theme="dark"] {
  --paper: #171914; --ink: #e8e4d6; --ink-2: #a9a494;
  --stone: #2a2c26; --line-soft: #383b33;
  --river: #6f9aa9; --brass: #d8a94e;
  --sky-top: #2c3e46; --sky-low: #4a4638;
  --land-near: #3d4a30; --land-mid: #4d563d; --land-far: #5d6350;
  --card: #1e201b;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Newsreader", Georgia, serif; font-size: 1.13rem; line-height: 1.62; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center;
  padding: .6rem 1rem; border-bottom: 1px solid var(--line-soft);
  font-family: "Atkinson", system-ui, sans-serif; font-size: .95rem; }
.topbar a { color: inherit; text-decoration: none; }
.topbar nav { display: flex; gap: 1rem; align-items: center; }
#theme-toggle { background: none; border: 1px solid var(--line-soft); border-radius: 2rem;
  padding: .3rem .9rem; font: inherit; color: inherit; cursor: pointer; min-height: 44px; }
.topbar { position: sticky; top: 0; z-index: 40; background: var(--paper); }
.hero { position: relative; min-height: calc(100svh - 52px); margin: 0; padding: 0; display: flex; align-items: flex-end; }
.hero-fig { position: absolute; inset: 0; margin: 0; }
.hero-fig img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.hero-fig figcaption { position: absolute; right: 12px; bottom: 12px; max-width: min(280px, 30vw); margin: 0;
  padding: 8px 10px; border-radius: 8px; background: rgba(20,16,8,.72); color: #f4efe4; }
figcaption { font-family: "Atkinson", system-ui, sans-serif; font-size: .85rem; color: var(--ink-2); margin-top: .4rem; }
.hero-text { position: relative; z-index: 2; width: min(520px, 42vw); margin: 0 0 5vh 4vw;
  background: color-mix(in srgb, var(--paper) 94%, transparent); border: 1px solid var(--line-soft);
  border-radius: 16px; padding: 22px 24px 16px; }
.hero-text h1 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.08; margin: 0 0 .6rem; font-weight: 600; }
.deck { font-size: 1.2rem; color: var(--ink-2); margin: 0 0 .5rem; }
.shortcut a { font-family: "Atkinson", system-ui, sans-serif; color: var(--brass); }
.layout { max-width: 72rem; margin: 0 auto; padding: 0 1rem; display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
main { min-width: 0; }
.paper { margin: 2.2rem 0; }
.paper h2 { font-size: 1.45rem; line-height: 1.25; margin: 0 0 .8rem; }
.paper p { margin: 0 0 1rem; }
.paper figure { margin: 1.4rem 0; }
.paper figure img { width: 100%; height: auto; display: block; border-radius: .3rem; }
.fig-svg svg { width: 100%; height: auto; display: block; }
/* stage */
.stage { position: sticky; top: 4.125rem; border: 1px solid var(--line-soft); border-radius: .6rem;
  background: var(--card); padding: .9rem; margin: 2.2rem 0; max-height: calc(100svh - 4.875rem); overflow: auto; }
.pano-wrap { position: relative; }
#pano { width: 100%; height: 220px; display: block; border-radius: .35rem; transition: opacity .5s; background: var(--stone); }
.plabels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pmark { position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  font-family: "Atkinson", system-ui, sans-serif; font-size: .72rem; line-height: 1;
  padding: .28rem .5rem; border-radius: 1rem; border: 1px solid var(--brass);
  background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--ink);
  cursor: pointer; white-space: nowrap; }
.pm-limit { border-style: dashed; opacity: .85; }
.picker { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; align-items: end;
  font-family: "Atkinson", system-ui, sans-serif; }
.picker fieldset { border: 1px solid var(--line-soft); border-radius: .5rem; margin: 0; padding: .5rem .7rem .7rem; }
.picker legend { font-size: .8rem; color: var(--ink-2); padding: 0 .3rem; }
.picker label { display: inline-flex; align-items: center; gap: .35rem; margin-right: .8rem;
  min-height: 44px; cursor: pointer; font-size: .95rem; }
.picker input { accent-color: var(--brass); width: 1.1rem; height: 1.1rem; }
#reset { font: inherit; background: none; border: 1px solid var(--line-soft); border-radius: 2rem;
  padding: .3rem 1rem; cursor: pointer; color: inherit; min-height: 44px; }
.counts { font-family: "Atkinson", system-ui, sans-serif; }
.cnum { margin: .2rem 0 .6rem; font-size: 1rem; }
.cnum strong { font-size: 1.5rem; color: var(--brass); }
.crows { list-style: none; margin: 0 0 .4rem; padding: 0; font-size: .88rem;
  font-family: "PlexMono", ui-monospace, monospace; }
.crows li { display: flex; gap: .6rem; padding: .28rem .4rem; border-radius: .25rem; border-left: 3px solid transparent; }
.crow-seen { border-left-color: var(--brass); }
.crow-limit { border-left-color: var(--line-soft); border-left-style: dashed; }
.crow-hidden { opacity: .55; }
.cnm { flex: 1 1 auto; font-family: "Atkinson", system-ui, sans-serif; }
.cdi, .ccl { white-space: nowrap; color: var(--ink-2); }
.sens { white-space: nowrap; font-size: .78em; color: var(--ink-2); opacity: .8; }
.sensleg { font-size: .85rem; color: var(--ink-2); margin: 0 0 .4rem; }
li.flash { background: color-mix(in srgb, var(--brass) 22%, transparent); }
.cmore { font: inherit; background: none; border: 1px solid var(--line-soft); border-radius: 2rem;
  padding: .25rem .9rem; cursor: pointer; color: inherit; margin-bottom: .4rem; min-height: 44px; }
.map-wrap { position: relative; margin-top: .8rem; }
.map-wrap img { width: 100%; height: auto; display: block; border-radius: .35rem; }
.mapvec { position: absolute; inset: 0; width: 100%; height: 100%; }
.w-river, .w-water { fill: none; stroke: var(--river); stroke-width: 2.2; opacity: .9; }
.w-lake { fill: color-mix(in srgb, var(--river) 45%, transparent); stroke: var(--river); stroke-width: 1.4; }
.w-stream, .w-canal, .w-drain { fill: none; stroke: var(--river); stroke-width: 1; opacity: .7; }
.fan-seen { stroke: var(--brass); stroke-width: 1.6; opacity: .85; }
.fan-limit { stroke: var(--brass); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .7; }
.fan-hidden { stroke: var(--ink-2); stroke-width: .8; stroke-dasharray: 2 5; opacity: .45; }
.tgt { fill: var(--card); stroke: var(--ink-2); stroke-width: 1.4; }
.tgt-fort { fill: var(--brass); stroke: var(--brass); }
.tgt-place { fill: var(--ink-2); }
.stand-dot { fill: var(--brass); }
.stand-ring { fill: none; stroke: var(--brass); stroke-width: 2; opacity: 0; }
.stand.cur .stand-ring { opacity: 1; }
.maplab { font-family: "Atkinson", system-ui, sans-serif; font-size: 15px; fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
/* section + chain figures */
.secground { fill: var(--stone); }
.secsight { stroke: var(--brass); stroke-width: 2; }
.wood { fill: #4a6b3f; opacity: .55; }
[data-theme="dark"] .wood { fill: #6f9a5f; }
.seclab { font-family: "Atkinson", system-ui, sans-serif; font-size: 14px; fill: var(--ink); }
.sectick { font-family: "PlexMono", monospace; font-size: 12px; fill: var(--ink-2); }
.secfort line { stroke: var(--ink); stroke-width: 3; }
.secfort circle { fill: var(--brass); }
.chainriver { stroke: var(--river); stroke-width: 3; }
.chain-me { fill: var(--brass); }
.chain-dot { fill: var(--card); stroke: var(--ink-2); stroke-width: 2; }
.chainlab { font-family: "Atkinson", system-ui, sans-serif; font-size: 16px; fill: var(--ink); }
/* footer + share */
.foot { border-top: 1px solid var(--line-soft); margin-top: 3rem; padding: 1.2rem 1rem 3rem;
  font-family: "Atkinson", system-ui, sans-serif; }
.foot a { color: inherit; }
.share-under { margin-top: .8rem; }
.share { --sr-acc: var(--brass); }
.see-also { font-family: "Atkinson", system-ui, sans-serif; }
.small { font-size: .9rem; color: var(--ink-2); }
/* phone */
@media (max-width: 859px) {
  .hero { display: block; min-height: 0; }
  .hero-fig { position: relative; height: 42svh; }
  .hero-fig figcaption { left: 8px; right: 8px; bottom: 8px; max-width: none; }
  .hero-text { width: auto; margin: 0; border-radius: 0; }
}
@media (max-width: 60rem) {
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "story"; gap: 0; }
  .layout > main { grid-area: story; }
  .layout > .stage { grid-area: stage; position: sticky; top: 4.125rem;
    max-height: calc(47svh - 4.125rem); z-index: 5; margin: 0 -1rem;
    border-radius: 0; border-left: 0; border-right: 0; }
  .layout > .stage .pano-wrap { position: sticky; top: 0; z-index: 2; background: var(--card); }
  .step { scroll-margin-top: 47svh; }
  #pano { height: 150px; }
}
@media (max-height: 600px) and (max-width: 60rem) {
  .layout > .stage { max-height: calc(47svh - 4.125rem); }
  #pano { height: 115px; }
}
/* 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}