/* Același sat, patru hărți
   The palette is a surveyor's: pale rag paper and pencil grey in the light theme, the same
   drawing in ink on a dark table at night. Each of the four systems keeps one hue wherever
   it appears -- boundary, chip, name, table row -- so a reader recognises 1930 without
   reading a legend twice. Every colour is declared in a token block and nowhere else, and
   both themes are declared in full. Contrast is measured by scripts/13_check.py against
   the real background of every pairing, including the map fills. */

:root {
  --paper:        #f5f2ea;
  --surface:      #fffdf7;
  --surface-deep: #e9e2d2;
  --rule:         #d4cab4;
  --rule-strong:  #9d9077;

  --text:         #16140f;
  --text-soft:    #3d382d;
  --text-muted:   #494234;

  /* one hue per system */
  --ink-1930:     #8a3010;
  --ink-1938:     #6a3182;
  --ink-1960:     #0f5566;
  --ink-2026:     #1c4f86;

  --line-1930:    #a7532c;
  --line-1938:    #8148a0;
  --line-1960:    #2e7285;
  --line-2026:    #3a6da6;

  --fill-1930:    #ecd9cc;
  --fill-1938:    #e3d7ec;
  --fill-1960:    #cfe2e8;
  --fill-2026:    #d8e3f1;

  --accent:       #8a3010;
  --map-void:     #faf8f2;
  --map-outside:  #e4dfd2;
  --ghost:        #b3a68c;
  --marker:       #16140f;

  --shadow:       0 1px 2px rgba(22, 20, 15, .07), 0 8px 28px rgba(22, 20, 15, .09);
  --focus:        #1c4f86;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --bar: 2.9rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #12130f;
    --surface:      #1b1d18;
    --surface-deep: #262922;
    --rule:         #383c31;
    --rule-strong:  #5b6051;

    --text:         #f4f1e6;
    --text-soft:    #d3cdbc;
    --text-muted:   #c2bba7;

    --ink-1930:     #f0a982;
    --ink-1938:     #d5abe8;
    --ink-1960:     #86cfe0;
    --ink-2026:     #a7c8ec;

    --line-1930:    #d98a5e;
    --line-1938:    #b283c9;
    --line-1960:    #5fadc2;
    --line-2026:    #7ba4d3;

    --fill-1930:    #3a2519;
    --fill-1938:    #2e2338;
    --fill-1960:    #16323a;
    --fill-2026:    #1a2a3e;

    --accent:       #f0a982;
    --map-void:     #16170f;
    --map-outside:  #212319;
    --ghost:        #5d6351;
    --marker:       #f4f1e6;

    --shadow:       0 1px 2px rgba(0, 0, 0, .5), 0 10px 34px rgba(0, 0, 0, .4);
    --focus:        #a7c8ec;
  }
}

:root[data-theme="dark"] {
  --paper:        #12130f;
  --surface:      #1b1d18;
  --surface-deep: #262922;
  --rule:         #383c31;
  --rule-strong:  #5b6051;

  --text:         #f4f1e6;
  --text-soft:    #d3cdbc;
  --text-muted:   #c2bba7;

  --ink-1930:     #f0a982;
  --ink-1938:     #d5abe8;
  --ink-1960:     #86cfe0;
  --ink-2026:     #a7c8ec;

  --line-1930:    #d98a5e;
  --line-1938:    #b283c9;
  --line-1960:    #5fadc2;
  --line-2026:    #7ba4d3;

  --fill-1930:    #3a2519;
  --fill-1938:    #2e2338;
  --fill-1960:    #16323a;
  --fill-2026:    #1a2a3e;

  --accent:       #f0a982;
  --map-void:     #16170f;
  --map-outside:  #212319;
  --ghost:        #5d6351;
  --marker:       #f4f1e6;

  --shadow:       0 1px 2px rgba(0, 0, 0, .5), 0 10px 34px rgba(0, 0, 0, .4);
  --focus:        #a7c8ec;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--serif); font-size: 1.0625rem; line-height: 1.62;
  text-rendering: optimizeLegibility;
}
@media (min-width: 46rem) { body { font-size: 1.125rem; line-height: 1.66; } }

a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.wide { max-width: 60rem; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--text);
  padding: .6rem .9rem; border: 1px solid var(--rule-strong); border-radius: 5px; z-index: 60;
}
.skip:focus { left: .8rem; top: .8rem; }

/* ---------- top bar: one line, at 1440 and at 390 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: .55rem;
  padding: .3rem var(--gutter); background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: .75rem; min-height: var(--bar);
}
/* Padded to a touchable height rather than left at the height of its own text: the bar is
   one line tall, but a bar link is a control, not a word in a sentence. */
.topbar .home {
  font-weight: 600; text-decoration: none; color: var(--text-soft); flex: none;
  padding: .4rem .25rem;
}
/* The project's own title, beside the portfolio-wide home link rather than replacing it:
   every sibling microsite keeps "mariuscomper.uk" as the bar's first, constant element, so
   this is additive, not a substitute. Dropped first at narrow widths — the bar is already
   one line tall and near capacity with the nav alone at 390px. */
.brand-sep { color: var(--text-muted); flex: none; }
.brand-title {
  font-family: var(--sans); font-size: .78rem; color: var(--text-muted); flex: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 13rem;
}
@media (max-width: 58rem) { .brand-sep, .brand-title { display: none; } }
.topbar .spacer { flex: 1; }
.topnav {
  display: flex; gap: .1rem; overflow-x: auto; scrollbar-width: none;
  -ms-overflow-style: none; margin-left: .25rem; min-width: 0;
  /* A link cut off by the scroll container's edge reads as a typo ("Metoda" -> "Met") unless
     the cut is visibly a fade, not a hard edge. Masks the last ~1.1rem regardless of whether
     the row actually overflows; harmless when it doesn't, since nothing sits under the fade. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.1rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 1.1rem), transparent 100%);
}
.topnav::-webkit-scrollbar { display: none; }
.topnav a {
  padding: .4rem .5rem; border-radius: 999px; text-decoration: none;
  color: var(--text-muted); white-space: nowrap;
}
.topnav a:hover { color: var(--accent); background: var(--surface-deep); }
.topnav a[aria-current="true"] { color: var(--text); background: var(--surface-deep); font-weight: 600; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.85rem; height: 1.85rem; padding: 0; border-radius: 999px; cursor: pointer;
  color: var(--text-muted); background: var(--surface); border: 1px solid var(--rule-strong);
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn svg { display: block; }
/* `hidden` has to beat the rule above, or both icons draw at once. */
.icon-btn svg[hidden] { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .55rem;
  border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--surface);
  color: var(--text-soft); text-decoration: none; font: inherit; cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 34rem) {
  .topbar { gap: .35rem; }
  .topbar .home { max-width: 6.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topnav a { padding: .4rem .4rem; }
}

/* ---------- reading rail ---------- */
.rail {
  display: none; position: fixed; top: 50%; right: 1.4rem; transform: translateY(-50%);
  flex-direction: column; align-items: flex-end; gap: .5rem; z-index: 30;
}
@media (min-width: 76rem) { .rail { display: flex; } }
.rail-dot {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  text-decoration: none; padding: .15rem 0; width: 14px;
}
.rail-dot .dot {
  display: block; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--rule-strong); transition: background-color .15s ease, transform .15s ease;
}
.rail-dot:hover .dot, .rail-dot:focus-visible .dot { background: var(--text-soft); }
.rail-dot.active .dot { background: var(--accent); transform: scale(1.45); }
.rail-label {
  /* Out of flow. In flow an invisible label still takes its width, and a column of dots
     each preceded by a label of a different length lands at a different x. */
  position: absolute; right: 100%; top: 50%; margin-top: -.85rem; margin-right: .5rem;
  font-family: var(--sans); font-size: .75rem; line-height: 1.2; color: var(--text-soft);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  padding: .25rem .55rem; white-space: nowrap; box-shadow: var(--shadow);
  opacity: 0; transform: translateX(6px); pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.rail-dot:hover .rail-label, .rail-dot:focus-visible .rail-label { opacity: 1; transform: none; }
.rail-dot.active .rail-label { color: var(--text); border-color: var(--rule-strong); }
@media (prefers-reduced-motion: reduce) { .rail-dot .dot, .rail-label { transition: none; } }
@media print { .rail { display: none; } }

/* ---------- opening ---------- */
.hero { padding: clamp(2.2rem, 7vw, 4.4rem) 0 1rem; }
.kicker {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-1930); margin: 0 0 .85rem; font-weight: 650;
}
h1 {
  font-size: clamp(2rem, 6.2vw, 3.2rem); line-height: 1.08; letter-spacing: -.022em;
  font-weight: 650; margin: 0 0 1rem; text-wrap: balance;
}
.deck { font-size: 1.1rem; color: var(--text-soft); margin: 0 0 1.2rem; }
@media (min-width: 46rem) { .deck { font-size: 1.22rem; } }
.byline { font-family: var(--sans); font-size: .78rem; color: var(--text-muted); margin: 0; }
.hero-cta { margin: 1.3rem 0 0; }
.btn-accent {
  display: inline-flex; align-items: center; gap: .35rem; font-family: var(--sans);
  font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--paper);
  background: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  padding: .6rem 1.1rem; transition: transform .15s ease;
}
.btn-accent:hover { transform: translateY(-1px); text-decoration: none; }
.btn-accent span { transition: transform .15s ease; }
.btn-accent:hover span { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) {
  .btn-accent, .btn-accent span { transition: none; }
  .btn-accent:hover { transform: none; }
  .btn-accent:hover span { transform: none; }
}

section, h3[id] { scroll-margin-top: 3.6rem; }
h2 {
  font-size: clamp(1.38rem, 3.6vw, 1.8rem); line-height: 1.17; letter-spacing: -.015em;
  font-weight: 650; margin: 2.7rem 0 .9rem; text-wrap: balance;
}
h3 { font-size: 1.07rem; font-weight: 650; margin: 1.8rem 0 .5rem; }
p { margin: 0 0 1rem; }
.lede { font-size: 1.06em; }
.note {
  font-family: var(--sans); font-size: .85rem; line-height: 1.55; color: var(--text-muted);
  border-left: 2px solid var(--rule-strong); padding: .1rem 0 .1rem .8rem; margin: 1.3rem 0;
}
.note b { color: var(--text-soft); font-weight: 650; }

/* ---------- the four addresses, as prose furniture ---------- */
.chain {
  list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .5rem;
  font-family: var(--sans); font-size: .9rem;
}
.chain li {
  display: grid; grid-template-columns: 4.4rem 1fr; gap: .7rem; align-items: baseline;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: .55rem .75rem;
}
.chain .when { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chain .what { color: var(--text); font-weight: 600; }
.chain .kind { display: block; font-weight: 400; font-size: .8rem; color: var(--text-muted); }
.chain li.y1930 { border-left: 3px solid var(--line-1930); }
.chain li.y1938 { border-left: 3px solid var(--line-1938); }
.chain li.y1960 { border-left: 3px solid var(--line-1960); }
.chain li.y2026 { border-left: 3px solid var(--line-2026); }

/* ---------- the map ---------- */
.atlas {
  margin: 1.6rem 0 2.2rem; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 9px; padding: .9rem .9rem 1rem;
}
.atlas .state {
  font-family: var(--sans); font-size: .88rem; color: var(--text-muted);
  margin: 0; padding: 2rem .4rem; text-align: center;
}
/* The systems and the search on one row, so the drawing gets the vertical space the two
   of them used to spend stacked. Both are flex rows themselves and both are allowed to
   grow, so the row holds them side by side where they fit and drops the search onto its
   own line where they do not -- which is what happens at a phone's width, and is the
   layout the page had everywhere before. */
.controls {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: .45rem .9rem; margin: 0 0 .7rem;
}
.controls .systems { flex: 0 1 auto; margin: 0; }
.controls .finder { flex: 1 1 17rem; min-width: 0; margin: 0; }

.systems { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .75rem; }
.systems .sys {
  font-family: var(--sans); font-size: .8rem; font-weight: 600; cursor: pointer;
  padding: .34rem .6rem; border-radius: 6px; background: var(--surface);
  border: 1px solid var(--rule-strong); color: var(--text-soft);
}
.systems .sys .years { display: block; font-weight: 400; font-size: .72rem; color: var(--text-muted); }
.systems .sys:hover { border-color: var(--accent); }
.systems .sys[aria-pressed="true"] { background: var(--surface-deep); color: var(--text); }
.systems .sys[data-y="1930"][aria-pressed="true"] { border-color: var(--line-1930); box-shadow: inset 0 -3px 0 var(--line-1930); }
.systems .sys[data-y="1938"][aria-pressed="true"] { border-color: var(--line-1938); box-shadow: inset 0 -3px 0 var(--line-1938); }
.systems .sys[data-y="1960"][aria-pressed="true"] { border-color: var(--line-1960); box-shadow: inset 0 -3px 0 var(--line-1960); }
.systems .sys[data-y="2026"][aria-pressed="true"] { border-color: var(--line-2026); box-shadow: inset 0 -3px 0 var(--line-2026); }

.finder { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .7rem; }
.finder label { font-family: var(--sans); font-size: .78rem; color: var(--text-muted); }
.finder input {
  font: inherit; font-family: var(--sans); font-size: .88rem; flex: 1 1 11rem; min-width: 0;
  padding: .36rem .55rem; border-radius: 6px; border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--text);
}
.finder input::placeholder { color: var(--text-muted); }
.finder .btn {
  font-family: var(--sans); font-size: .8rem; cursor: pointer; padding: .36rem .6rem;
  border-radius: 6px; border: 1px solid var(--rule-strong); background: var(--surface);
  color: var(--text-soft);
}
.finder .btn:hover { border-color: var(--accent); color: var(--accent); }
.matches {
  list-style: none; margin: 0 0 .7rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem;
}
.matches li { margin: 0; }
.matches button {
  font-family: var(--sans); font-size: .8rem; cursor: pointer; padding: .28rem .5rem;
  border-radius: 5px; border: 1px solid var(--rule); background: var(--surface-deep);
  color: var(--text); text-align: left;
}
.matches button:hover { border-color: var(--accent); }
.matches .county { color: var(--text-muted); }

.plate { position: relative; }
.plate svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.plate svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* `hidden` is an HTML content attribute: the HTML user-agent rule that hides it does not
   reach an SVG <g>, whose `display` stays `inline` with the attribute set. Without this
   rule all four layers drew at once, stacked, every one of them in the active layer's
   colour -- which reads as a dense mess of borders rather than as a broken state.
   scripts/14_check.py asserts the computed display, not the property. */
svg g.units[hidden] { display: none; }
.unit { stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Feedback before the click, and in a form that survives both themes: a heavier edge.
   The fill change below carries the rest of it. */
.unit:hover { stroke-width: 1.5; }
svg .frame { fill: var(--map-void); }
svg .lost { fill: var(--map-outside); stroke: none; }
/* The edge of the 1930 extent. Dashed, because it is a border the country no longer has,
   and the one place the ghost token is spent. */
svg .lost-edge {
  fill: none; stroke: var(--ghost); stroke-width: 1; stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}
/* None of the marks over the units may take the pointer. The 1.1px border line and the
   two marker circles sit on top of the layer, and a pointer crossing one of them reports
   a target that is not a unit -- which blinks the name off the map, and loses a click the
   containment grid was meant to answer. */
svg .today, svg .pick, svg .mark, svg .lost-edge { pointer-events: none; }
svg .today { fill: none; stroke: var(--rule-strong); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
svg .pick { fill: none; stroke: var(--marker); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* The marker has to stay visible on any of the four selected-unit fills. It carries its
   own halo for that: the dot and the ring around it are opposite ends of the theme, so
   whichever one the fill approaches, the other separates from it. */
svg .mark { fill: var(--marker); stroke: var(--surface); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.layer-1930 .unit { fill: var(--fill-1930); stroke: var(--line-1930); stroke-width: .8; }
.layer-1938 .unit { fill: var(--fill-1938); stroke: var(--line-1938); stroke-width: .8; }
.layer-1960 .unit { fill: var(--fill-1960); stroke: var(--line-1960); stroke-width: .8; }
.layer-2026 .unit { fill: var(--fill-2026); stroke: var(--line-2026); stroke-width: .8; }
/* The unit under the pointer, carried a step toward its own layer's line colour. An
   opacity change cannot do this in both themes: over the dark map a translucent dark fill
   only gets darker, so the hover reads as nothing at night. Mixing toward the line colour
   moves the fill the same direction in either theme. These rules stay above the selected
   ones: at equal specificity the later block wins, and a selected unit under the pointer
   should keep looking selected. */
.layer-1930 .unit:hover { fill: color-mix(in srgb, var(--fill-1930) 62%, var(--line-1930)); }
.layer-1938 .unit:hover { fill: color-mix(in srgb, var(--fill-1938) 62%, var(--line-1938)); }
.layer-1960 .unit:hover { fill: color-mix(in srgb, var(--fill-1960) 62%, var(--line-1960)); }
.layer-2026 .unit:hover { fill: color-mix(in srgb, var(--fill-2026) 62%, var(--line-2026)); }
/* The selected unit has to be obvious at a glance in all four layers: a tint over a tint
   is not a highlight. */
.unit.on { stroke-width: 2; }
.layer-1930 .unit.on { fill: var(--line-1930); stroke: var(--ink-1930); }
.layer-1938 .unit.on { fill: var(--line-1938); stroke: var(--ink-1938); }
.layer-1960 .unit.on { fill: var(--line-1960); stroke: var(--ink-1960); }
.layer-2026 .unit.on { fill: var(--line-2026); stroke: var(--ink-2026); }
/* The selected unit is already at the top of its layer's colour, so its own hover has
   only the edge left to answer with. */
.unit.on:hover { stroke-width: 2.6; }

/* Switching systems. The hiding stays on the `hidden` attribute and the display rule
   above -- an opacity swap would leave all four layers rendered, which is the defect that
   comment records. A CSS animation restarts whenever an element goes from `display: none`
   to drawn, so the incoming layer fades in without any of that being touched. */
@keyframes layer-in { from { opacity: 0; } to { opacity: 1; } }
svg g.units { animation: layer-in .2s ease both; }

/* The name of the unit, on the drawing itself: what the pointer is over, or what is
   selected. A pill rather than bare letters, because the nine fills of the four layers
   pass underneath it and a letterform on a saturated selection fill is unreadable in one
   theme or the other. It takes its colours from the same tokens as the reading rail's
   label, so the contrast pairing is one already measured.
   `pointer-events: none` is not optional: a pill under the cursor would swallow the click
   that the containment grid has to answer. */
.plate .tag {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  font-family: var(--sans); font-size: .75rem; line-height: 1.25; white-space: nowrap;
  max-width: 92%; overflow: hidden; text-overflow: ellipsis;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: 5px; padding: .2rem .45rem;
  box-shadow: var(--shadow);
  /* Never `display: none`: the pill is measured before it is placed, and an element with
     no box measures zero. Visibility keeps the box and takes it out of the picture. */
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.plate .tag.on { opacity: 1; visibility: visible; }
.plate .tag .tag-name { font-weight: 650; }
.plate .tag .tag-of { color: var(--text-muted); }
.plate .tag .tag-of::before { content: " · "; color: var(--rule-strong); }

@media (prefers-reduced-motion: reduce) {
  svg g.units { animation: none; }
  .plate .tag { transition: none; }
}

.readout {
  margin: .8rem 0 0; border-top: 1px solid var(--rule); padding-top: .8rem;
  font-family: var(--sans);
}
.readout .who { font-size: 1rem; font-weight: 650; margin: 0 0 .1rem; color: var(--text); }
.readout .who .kind { font-weight: 400; font-size: .82rem; color: var(--text-muted); }
.readout .hint { font-size: .82rem; color: var(--text-muted); margin: 0; }
.addresses { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; }
.addresses li {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: .6rem; align-items: baseline;
  font-size: .88rem; padding: .3rem .1rem .3rem .6rem; border-left: 3px solid var(--rule);
}
.addresses .when { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: .8rem; }
.addresses .what { font-weight: 600; }
.addresses .kind { display: block; font-weight: 400; font-size: .78rem; color: var(--text-muted); }
.addresses li.y1930 { border-left-color: var(--line-1930); }
.addresses li.y1938 { border-left-color: var(--line-1938); }
.addresses li.y1960 { border-left-color: var(--line-1960); }
.addresses li.y2026 { border-left-color: var(--line-2026); }
.addresses li.now .what { color: var(--text); }
.caveat {
  margin: .7rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--text-muted);
  background: var(--surface-deep); border-radius: 6px; padding: .5rem .65rem;
}
.caveat b { color: var(--text-soft); font-weight: 650; }
.caveat .shares { font-variant-numeric: tabular-nums; }
.legend {
  font-family: var(--sans); font-size: .78rem; color: var(--text-muted);
  margin: .7rem 0 0; padding-top: .6rem; border-top: 1px solid var(--rule);
}

/* ---------- the raion directory ----------
   Names, never units. Nothing in here takes a hover or a click the way a `.unit` does,
   and nothing carries one of the four system colours: a raion name that lit up under the
   pointer, or wore the 1960 hue of the four-system chain, would read as a fifth selectable
   layer, which is exactly what this list is not. It is set in the source-note register
   instead -- flowing text, muted, with the seat town in parentheses. */
.rns { margin: .4rem 0 0; font-size: .86rem; line-height: 1.65; color: var(--text); }
.rns .seat { color: var(--text-muted); }
.src {
  font-family: var(--sans); font-size: .75rem; color: var(--text-muted); margin: .4rem 0 0;
}
.src a { color: var(--text-muted); }
.src a:hover { color: var(--accent); }
.empty { margin: .4rem 0 0; font-size: .86rem; color: var(--text-muted); }

/* In the map's readout: a sibling of the live region, not part of it. */
.raion-box { font-family: var(--sans); }
.raion-list {
  margin: .7rem 0 0; border: 1px solid var(--rule); border-radius: 6px;
  padding: .5rem .7rem; background: var(--surface-deep);
}
.raion-list > summary {
  font-size: .8rem; font-weight: 650; color: var(--text-soft); cursor: pointer;
  list-style: none;
}
.raion-list > summary::-webkit-details-marker { display: none; }
.raion-list > summary::before {
  content: "▸"; display: inline-block; width: 1em; color: var(--text-muted);
}
.raion-list[open] > summary::before { content: "▾"; }
.raion-list > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.raion-list .caveat { background: none; padding: .35rem 0 0; margin: 0; }

/* In the regiuni section: one era to a block, each region a row inside it. */
details.era {
  border: 1px solid var(--rule); border-radius: 6px; margin: .7rem 0 0;
  background: var(--surface); padding: .6rem .85rem;
}
details.era > summary {
  font-family: var(--sans); font-size: .92rem; color: var(--text); cursor: pointer;
  list-style: none;
}
details.era > summary::-webkit-details-marker { display: none; }
details.era > summary::before {
  content: "▸"; display: inline-block; width: 1.1em; color: var(--text-muted);
}
details.era[open] > summary::before { content: "▾"; }
details.era > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
details.era .howmany { font-weight: 400; color: var(--text-muted); }
details.era > .hint {
  font-family: var(--sans); font-size: .8rem; color: var(--text-muted);
  margin: .5rem 0 0; line-height: 1.55;
}
.directory { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .9rem; }
.directory > li {
  margin: 0; padding: .55rem .1rem .55rem .7rem; border-left: 3px solid var(--rule);
}
.directory h4 {
  font-family: var(--sans); font-size: .88rem; font-weight: 650; color: var(--text);
  margin: 0; line-height: 1.4;
}
.directory .caveat { margin: .45rem 0 0; }

/* ---------- figures ---------- */
figure { margin: 2rem 0; }
figure img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  border: 1px solid var(--rule); background: var(--surface);
}
figcaption {
  font-family: var(--sans); font-size: .8125rem; line-height: 1.5;
  color: var(--text-muted); margin-top: .55rem;
}
figcaption b { color: var(--text-soft); font-weight: 650; }
figcaption .credit { display: block; margin-top: .25rem; font-size: .75rem; }
.gallery { display: grid; gap: 1.6rem; margin: 1.8rem 0; }
@media (min-width: 54rem) { .gallery { grid-template-columns: 1fr 1fr; } }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; margin: 1.5rem 0 .6rem; }
table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: .85rem; }
caption { text-align: left; font-size: .82rem; color: var(--text-muted); margin-bottom: .5rem; }
th, td { text-align: left; padding: .4rem .55rem; border-bottom: 1px solid var(--rule); }
th { color: var(--text-soft); font-weight: 650; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--surface); }
.more {
  font-family: var(--sans); font-size: .82rem; cursor: pointer; padding: .35rem .7rem;
  border-radius: 6px; border: 1px solid var(--rule-strong); background: var(--surface);
  color: var(--text-soft);
}
.more:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--rule); margin-top: 3.2rem; padding: 1.8rem 0 3rem;
  font-family: var(--sans); font-size: .84rem; color: var(--text-muted);
}
footer a { color: var(--text-soft); }
footer ul { margin: .5rem 0 0; padding-left: 1.1rem; }
footer li { margin: .2rem 0; }
.totop { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; color: var(--text-soft); }

@media print {
  .topbar, .controls, .systems, .finder, .matches { display: none; }
  body { background: #fff; color: #000; }
}