/* Site stylesheet — see .brain/design-system.md. Layered on tokens.css; never a literal colour
   or font-family, always the --* tokens defined there. No border-radius above 2px anywhere, no
   box-shadow for elevation (institutional-document rhythm, not cards) — depth comes from ground
   colour, rules and spacing only.

   Layout principle: full-bleed coloured band  >  centred .wrap container  >  content anchored to
   the inline-start axis. The band and the container are two different elements on purpose — put
   a max-width on the band itself and the colour stops running edge to edge. */

/* ---------- Foundation ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-fa);
  -webkit-font-smoothing: antialiased;
}
:lang(en), .latin { line-height: var(--leading-latin); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; margin: 0 0 var(--space-4); }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: -3rem;
  z-index: 100;
  background: var(--brick);
  color: var(--paper);
  padding: var(--space-2) var(--space-4);
  transition: top .15s ease;
}
.skip-link:focus { top: var(--space-3); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.mono, .fort-meta .mono { font-family: var(--font-mono); line-height: var(--leading-latin); }

/* ---------- Containers ----------
   Two tiers, and only two. The page frame (nav, masthead, footer, atlas) spans the wide one; a
   band you read spans exactly the measure plus its gutters, so the reading column fills its
   container instead of hugging one edge of a container two-thirds wider than the text in it.
   That gap was the empty inline-end third repeating down every band. */
.wrap {
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--pad);
}
.story .wrap { max-width: calc(var(--measure) + 2 * var(--pad)); }

/* ---------- Bands (full-bleed alternating grounds) ---------- */
/* The ground carries one meaning: ink is the wall itself — the masthead and the one data
   spectacle — and paper is where you read. It changes three times on the whole page and every
   change marks that shift. It used to alternate ink/ink/paper/ink/paper/ink/paper/paper, which
   announced a boundary at points where nothing changed and merged the hero into the first story
   section where something did. */
.band { padding-block: clamp(var(--space-7), 7vw, calc(var(--lh) * 3.5)); }
.band-ink { background: var(--ink); color: var(--paper); }
.band-ink h1, .band-ink h2, .band-ink h3 { color: var(--paper); }
.band-paper { background: var(--paper); }
/* Consecutive same-ground bands share one interval instead of stacking two paddings — that
   interval is the space above the next heading, which is why it stays large. */
.band-paper + .band-paper, .band-ink + .band-ink { padding-block-start: 0; }

/* ---------- The reading column ----------
   The body fills its container (see the container tiers above) rather than being capped at the
   measure inside one two-thirds wider. The old 6rem-numeral + 1fr grid did the opposite: it
   stretched the body column to ~65rem while every child stayed at the measure, so the same void
   sat on the inline-end side of every band down the page. Two widths carry the rhythm now — this
   column, and a figure that breaks out to the page frame (.is-wide below). */
/* minmax(0,1fr), not the default auto column: an auto column sizes to its widest item, so the
   breakout figure below would stretch the column to its own width and drag the whole section to
   the band's start edge instead of overflowing evenly. */
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.story-body { max-width: var(--measure); }
.story-body > :last-child { margin-block-end: 0; }
.story-body p { max-width: none; }

/* ---------- Nav ---------- */
nav[aria-label="ناوبری اصلی"] {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-5);
  max-width: 74rem;
  margin-inline: auto;
  padding: var(--space-5) var(--pad);
}
nav[aria-label="ناوبری اصلی"] a {
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--earth-2);
}
nav[aria-label="ناوبری اصلی"] a:hover,
nav[aria-label="ناوبری اصلی"] a:focus-visible { color: var(--ink); }
nav[aria-label="ناوبری اصلی"] a[aria-current="page"] { color: var(--ink); }
.wordmark {
  font-family: var(--font-display) !important;
  font-size: var(--text-lg) !important;
  font-weight: 700;
  color: var(--ink) !important;
  margin-inline-end: auto;
}

/* ---------- Hero ----------
   The page's largest type says what the site is about. It used to say "join us" while the h1
   naming the subject was visually-hidden — the form is the primary action (D-001) but it is not
   the primary *statement*, and it keeps its place in the second column either way. */
.hero-grid { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 56rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem); gap: clamp(var(--space-7), 6vw, var(--space-8)); }
}
/* The one kicker style on the site. Interior pages use it too, so a page label is always the
   same object in the same place — there is no second eyebrow mechanism. */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--earth);
  margin: 0 0 var(--space-4);
}
.band-paper .eyebrow, body:not(.home) .eyebrow { color: var(--earth-2); }
/* Morabba is a monumental display face and this is the one place on the site that asks it to
   act like one. Five Persian words, so it is allowed to break over two lines rather than being
   shrunk to fit one. */
.hero-copy h1 { font-size: var(--text-display); max-width: 14ch; text-wrap: balance; margin: 0; }
.join-form-wrap h2 {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-2);
}
.join-note { font-size: var(--text-sm); color: var(--paper-2); margin: 0 0 var(--space-5); }
.rule-brick {
  display: block;
  width: 5rem;
  height: 2px;
  background: var(--brick);
  margin-block: var(--space-5);
}
.lede {
  font-size: var(--text-lg);
  color: var(--paper-2);
  max-width: 32rem;
  margin: 0;
}

/* ---------- Form — an institutional document, not a SaaS card ---------- */
#join-form { display: flex; flex-direction: column; gap: var(--space-4); }
#join-form .field { display: flex; flex-direction: column; gap: var(--space-2); }
#join-form label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--paper-2);
}
.band-paper #join-form label, body:not(.home) #join-form label { color: var(--earth-2); }
#join-form input {
  background: color-mix(in oklab, var(--paper) 6%, transparent);
  border: 1px solid var(--rule-on-ink);
  border-radius: 0;
  padding: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: inherit;
}
.band-paper #join-form input, body:not(.home) #join-form input {
  background: transparent;
  border-color: color-mix(in oklab, var(--ink) 25%, transparent);
}
#join-form input:focus-visible { outline: 2px solid var(--brick); outline-offset: -2px; border-color: var(--brick); }
#join-form input[aria-invalid="true"] { border-color: var(--brick); }
#join-form button {
  align-self: stretch;
  background: var(--brick);
  color: var(--paper);
  border: none;
  border-radius: 0;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  margin-block-start: var(--space-2);
  transition: background .15s ease;
}
#join-form button:hover, #join-form button:focus-visible { background: var(--brick-dim); }
.error { color: #e8907f; font-size: var(--text-sm); margin: 0; }
.band-paper .error, body:not(.home) .error { color: var(--brick); }
.notice {
  border-inline-start: 1px solid var(--brick);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in oklab, var(--brick) 12%, transparent);
  font-size: var(--text-sm);
  max-width: none;
  margin-block-end: var(--space-5);
}

/* ---------- Story sections ----------
   The heading is the section marker. The ۰۱/۰۲ numerals that used to carry that job were set in
   --font-mono, and IBM Plex Mono ships zero Persian digits (verified against the built subset),
   so they rendered in the Arial-backed fallback at 113% — the "wrong font" on the tag. They also
   numbered a set of sections that is not a sequence, so they are gone rather than restyled. */
.story h2 {
  font-size: var(--text-3xl);
  max-width: 16ch;      /* a display heading breaks over two short lines, not one long thin one */
  text-wrap: balance;
  margin: 0 0 var(--space-5);
}
.footnote { font-size: var(--text-sm); color: var(--earth); max-width: var(--measure); }
.band-paper .footnote { color: var(--earth-2); }

/* Key terms inside prose — the wall's names, its materials, its dates. Markazi's own drawn 700
   (tokens.css now declares the file's real 400-700 axis), tinted brick because on this site red
   already means "the wall". Not a highlighter: the word changes, the line does not. */
.story-body strong, .lede strong { font-weight: 700; color: var(--brick); }
.band-ink .story-body strong, .band-ink .lede strong { color: var(--brick-on-ink); }

.more, .cta {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brick);
  text-decoration: none;
  border-block-end: 1px solid currentColor;
  padding-block-end: 2px;
}
.band-ink .more, .band-ink .cta { color: var(--paper); border-block-end-color: var(--brick); }
.more:hover, .cta:hover, .more:focus-visible, .cta:focus-visible { color: var(--brick); }
.band-ink .more:hover, .band-ink .cta:hover { color: var(--paper-2); }

/* The Numbers — a rule-separated row, not cards.
   Grid, not flex: `flex: 1 1 10rem` sized each column to its own content, so three columns whose
   figures are ۱۹۵+ / ۳۰+ / ۵–۶ came out three different widths under a single top rule — the
   ragged thing that read as "out of place". Equal tracks put every figure on the same axis.
   The dividers sit BETWEEN the stats: the first one carries no start rule (it used to be the
   last one that was exempt, which left a stray vertical line hanging off the row's outer edge).
   Logical padding throughout — the physical `... var(--space-5) 0` shorthand only looked right
   because the page happens to be RTL. */
.stat-row {
  display: grid;
  /* 7rem keeps all three figures on one row down to a 390px phone; the dividers only read as
     dividers while the row is one row. */
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  margin: var(--space-6) 0;
  padding: 0;
  border-block-start: 1px solid var(--rule-on-ink);
}
.band-paper .stat-row { border-block-start-color: var(--rule); }
.stat {
  padding-block: var(--space-5);
  padding-inline: clamp(var(--space-3), 2vw, var(--space-5)) 0;
  border-inline-start: 1px solid var(--rule-on-ink);
}
.band-paper .stat { border-inline-start-color: var(--rule); }
.stat:first-child { border-inline-start: none; padding-inline-start: 0; }
.stat dt {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--earth);
  margin: 0 0 var(--space-3);
}
.band-paper .stat dt { color: var(--earth-2); }
/* Baseline-aligned figure + unit. `white-space: nowrap` on the whole dd pushed a long unit
   straight out of its column instead of letting it wrap under the figure. */
.stat dd {
  margin: 0;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}
.stat .figure { font-family: var(--font-display); font-size: var(--text-3xl); white-space: nowrap; }
/* On the ink band the figures are the loudest thing in the section — the heading names it, the
   numbers are the content. Brick-on-ink is the 5.31:1 variant (tokens.css). */
.band-ink .stat .figure { color: var(--brick-on-ink); }
.stat .unit { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--earth); }
.band-paper .stat .unit { color: var(--earth-2); }

/* ---------- Sources ---------- */
.sources { border-block-start: 1px solid var(--rule); }
/* .band-paper + .band-paper collapses the top padding; the rule above needs its interval back. */
.band-paper + .band-paper.sources { padding-block-start: clamp(var(--space-7), 7vw, calc(var(--lh) * 3.5)); }
.sources ul { list-style: none; padding: 0; margin: 0; }
.sources li { font-size: var(--text-sm); margin-block-end: var(--space-3); }
.sources a { color: var(--earth-2); }
main section[aria-labelledby="sources-heading"]:not(.sources) { font-size: var(--text-sm); }
main section[aria-labelledby="sources-heading"]:not(.sources) ul { padding-inline-start: var(--space-5); }
main section[aria-labelledby="sources-heading"]:not(.sources) li { margin-block-end: var(--space-2); }

/* ---------- Interior pages (map / myths / fort detail / dashboard) ---------- */
body:not(.home) main {
  max-width: 74rem;
  margin-inline: auto;
  padding: var(--space-7) var(--pad) var(--space-8);
}
body:not(.home) main > h1 { font-size: var(--text-3xl); margin-block-end: var(--space-6); }
body:not(.home) main > section { margin-block-end: var(--space-7); }
body:not(.home) main > section > h2 { font-size: var(--text-xl); }

/* ---------- Fort list / fort detail ---------- */
.fort-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.fort-list li { border-inline-start: 1px solid var(--brick); padding-inline-start: var(--space-4); }
.fort-list h3 { font-size: var(--text-lg); margin-block-end: var(--space-1); }
.fort-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-7);
  margin: var(--space-5) 0; padding: var(--space-4) 0;
  border-block: 1px solid var(--rule);
}
.fort-meta dt { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--earth-2); margin: 0 0 var(--space-2); }
.fort-meta dd { margin: 0; font-size: var(--text-base); }

/* ---------- Map: the archaeological atlas ----------
   Colour language from Map-Design-Guide-Images/WallOfGorganMap.md §6:
   red = military system · blue = hydraulic system · earth = geography · ivory = annotation. */
.atlas-head { margin-block-end: var(--space-6); }
.atlas-head h1 { margin-block: var(--space-2) var(--space-3); }
.atlas-strap { font-family: var(--font-ui); color: var(--earth-2); }
.atlas-strap .figure { font-family: var(--font-display); font-size: var(--text-xl); color: var(--brick); }

.atlas-layout { display: grid; gap: var(--space-5); margin-block-end: var(--space-7); }
@media (min-width: 62rem) {
  .atlas-layout { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; }
}

.map-shell { width: 100%; border: 1px solid var(--rule); background: var(--paper); }
.map-caption { font-size: var(--text-sm); color: var(--earth-2); margin-block-start: var(--space-3); }

.atlas { display: block; width: 100%; height: auto; }
.atlas .land { fill: var(--paper); }
.atlas .grid-line { stroke: color-mix(in oklab, var(--ink) 7%, transparent); stroke-width: 0.5; }
.atlas .alborz { fill: color-mix(in oklab, var(--earth) 26%, var(--paper)); stroke: none; }
.atlas .sea { fill: color-mix(in oklab, #5b7d92 16%, var(--paper)); stroke: color-mix(in oklab, #5b7d92 45%, transparent); stroke-width: 1; }
.atlas .sea-hatch-line { stroke: color-mix(in oklab, #5b7d92 22%, transparent); stroke-width: 0.6; }
.atlas .geo-label { font-family: var(--font-fa-ui); font-size: 17px; fill: var(--earth-2); letter-spacing: 0.14em; }
.atlas .sea-label { fill: #4a6b80; }
.atlas .alborz-label { fill: color-mix(in oklab, var(--earth-2) 85%, var(--ink)); }

.atlas .river { fill: none; stroke: #6b8ea3; stroke-width: 1.6; stroke-linejoin: round; opacity: 0.85; }
.atlas .river-label { font-family: var(--font-fa-ui); font-size: 11px; fill: #5c7f95; text-anchor: middle; }

.atlas .wall-line { fill: none; stroke: var(--brick); stroke-linecap: round; stroke-linejoin: round; }
.atlas .wall-line.is-upstanding { stroke-width: 5; }
.atlas .wall-line.is-traced { stroke-width: 3; }
.atlas .wall-line.is-uncertain { stroke-width: 2.5; stroke-dasharray: 7 6; opacity: 0.75; }

.atlas .endpoint { cursor: help; outline: none; }
.atlas .endpoint-ring { fill: none; stroke: var(--brick); stroke-width: 1.5; }
.atlas .endpoint-dot { fill: var(--brick); }
.atlas .endpoint-name { font-family: var(--font-fa-ui); font-size: 11px; fill: var(--brick); text-anchor: middle; letter-spacing: 0.08em; }
.atlas .coord { font-family: var(--font-mono); font-size: 9.5px; fill: var(--earth-2); text-anchor: middle; opacity: 0; transition: opacity .12s ease; }
.atlas .endpoint:hover .coord, .atlas .endpoint:focus .coord { opacity: 1; }
.atlas .sheet-rule { stroke: color-mix(in oklab, var(--earth-2) 40%, transparent); stroke-width: 1; }

.atlas .fort-hit { fill: transparent; }
.atlas .fort-glyph { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.atlas .fort-core { fill: var(--ink); }
.atlas .fort.is-probable .fort-core { fill: var(--earth); }
.atlas .fort.is-potential .fort-glyph { stroke-dasharray: 2 2; }
.atlas .fort.is-surveyed .fort-glyph { stroke: var(--brick); stroke-width: 2; }
.atlas .fort.is-surveyed .fort-core { fill: var(--brick); }
.atlas .fort-label { font-family: var(--font-fa-ui); font-size: 10px; fill: var(--earth-2); text-anchor: middle; opacity: 0; transition: opacity .12s ease; }
.atlas .fort.has-page .fort-label,
.atlas .fort:hover .fort-label,
.atlas .fort:focus .fort-label,
.atlas .fort.is-selected .fort-label { opacity: 1; fill: var(--ink); }
.atlas .fort { cursor: pointer; outline: none; }
.atlas .fort:hover .fort-glyph, .atlas .fort:focus .fort-glyph { stroke: var(--brick); }
.atlas .fort.is-selected .fort-glyph { stroke: var(--brick); stroke-width: 2.5; }
.atlas .fort:focus-visible .fort-hit { stroke: var(--brick); stroke-width: 2; }

.atlas .instrument line { stroke: var(--earth-2); stroke-width: 1; }
.atlas .compass-head { fill: var(--earth-2); }
.atlas .instrument-label { font-family: var(--font-fa-ui); font-size: 10px; fill: var(--earth-2); text-anchor: middle; letter-spacing: 0.1em; }
.atlas .sheet-note { font-family: var(--font-mono); font-size: 10px; fill: var(--earth-2); letter-spacing: 0.08em; }
.atlas .sheet-box { fill: color-mix(in oklab, var(--paper) 88%, transparent); stroke: var(--rule); stroke-width: 1; }
.atlas .sheet-footer { text-anchor: end; font-family: var(--font-fa-ui); }

/* ---------- The invite ----------
   One component on both interactive pages: a bold line saying what the thing IS, and a quiet
   line saying what to do with it. Anchored to the inline-start axis like every other block on
   the site — the old myth-wall hint was the one centred text object on a page of RTL-anchored
   ones, which is what made the two pages feel like they disagreed about their own alignment. */
.wall-invite {
  border-inline-start: 1px solid var(--brick);
  padding-inline-start: var(--space-4);
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
}
.wall-invite strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--brick);
  margin-block-end: var(--space-2);
}
.wall-invite span { display: block; font-size: var(--text-sm); color: var(--earth-2); }

/* legend + contextual detail, beside the map — never a card floating over it */
.atlas-side { display: grid; gap: var(--space-5); }
.atlas-legend h2, .atlas-detail h3 { font-size: var(--text-base); margin-block-end: var(--space-3); }
.atlas-legend ul { list-style: none; padding: 0; margin: 0; font-size: var(--text-sm); }
.atlas-legend li { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-2); color: var(--earth-2); }
.key { width: 28px; height: 12px; flex: none; position: relative; }
.key-upstanding { border-block-start: 5px solid var(--brick); }
.key-traced { border-block-start: 3px solid var(--brick); }
.key-uncertain { border-block-start: 2.5px dashed var(--brick); }
.key-river { border-block-start: 2px solid #6b8ea3; }
.key-fort { width: 12px; height: 12px; border: 1.4px solid var(--ink); background: var(--paper); }
.key-tower { width: 7px; height: 7px; border: 1.4px solid var(--ink); background: var(--paper); }
/* The surveyed-coordinate key is an SVG circle, not a rounded box — the legend mirrors the map's
   real glyph, and "no border-radius above 2px" stays literally true across the stylesheet. */
.key-surveyed { width: 14px; height: 14px; }
.key-surveyed circle { fill: var(--paper); stroke: var(--brick); stroke-width: 2; }

/* ---------- Map focus mode ----------
   A magnifier on the sheet: one transform on <g class="camera">, everything inside it grows
   together, which is the whole point — at 1x the fort numbers are 10px and unreadable. */
.atlas .camera { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.atlas.is-zoomed .fort-label { opacity: 1; fill: var(--ink); }
/* The instruments describe the sheet, not the ground, so they sit outside the camera; the
   scalebar is inside it (it measures the ground) and simply pans away when you zoom in. */

.map-shell { position: relative; }
.map-reset {
  position: absolute;
  inset-block-start: var(--space-3);
  /* Physical `left`, deliberately: the sheet-block marginalia is pinned to the SVG's right edge
     in user space, which does not flip with the page's direction. */
  left: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}
.map-reset:hover, .map-reset:focus-visible { border-color: var(--brick); color: var(--brick); }

.atlas-detail-photo { margin-block: var(--space-4); }
.atlas-detail-photo img { width: 100%; height: auto; border: 1px solid var(--rule); }
/* None of the licensed photographs carries a published coordinate, so the panel says so rather
   than letting the picture imply the claim (content-sources.md: no unsourced archaeology). */
.atlas-detail-photo .photo-scope { display: block; color: var(--earth); margin-block-start: var(--space-1); }

.atlas-detail { border-block-start: 1px solid var(--rule); padding-block-start: var(--space-4); }
.atlas-detail-eyebrow { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--brick); margin-block-end: var(--space-2); }
.atlas-detail-empty, .atlas-detail-note { font-size: var(--text-sm); color: var(--earth-2); }
.atlas-detail-meta { display: grid; gap: var(--space-2); margin-block: var(--space-4); }
.atlas-detail-meta div { display: flex; justify-content: space-between; gap: var(--space-3); border-block-end: 1px solid var(--rule); padding-block-end: var(--space-2); }
.atlas-detail-meta dt { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--earth-2); margin: 0; }
.atlas-detail-meta dd { margin: 0; font-size: var(--text-sm); }

/* ---------- Photographs ---------- */
figure { margin: 0; }
.story-figure { margin-block: var(--space-7) 0; max-width: none; }
/* The one figure whose width IS the content (195 km of wall across a plain). A sibling of
   .story-body, so it breaks out of the reading wrap to the page frame's width — justify-self
   lets a grid item overflow its area evenly on both sides, no negative margins involved. */
.story-grid > .story-figure.is-wide {
  max-width: none;
  width: min(74rem - 2 * var(--pad), 100vw - 2 * var(--pad));
  justify-self: center;
  margin-block-start: var(--space-7);
}
.story-grid > .story-figure.is-wide figcaption { max-width: var(--measure); }
.story-figure img, .photo-strip img { width: 100%; height: auto; border: 1px solid var(--rule); }
.band-ink .story-figure img { border-color: var(--rule-on-ink); }
figcaption { font-size: var(--text-sm); color: var(--earth); margin-block-start: var(--space-3); }
.band-paper figcaption { color: var(--earth-2); }
.credit { display: block; font-family: var(--font-ui); font-size: var(--text-xs); opacity: 0.8; margin-block-start: var(--space-1); }
.photo-strip { display: grid; gap: var(--space-5); margin-block-end: var(--space-7); }
@media (min-width: 48rem) { .photo-strip { grid-template-columns: 1fr 1fr; } }

/* ---------- Dashboard ---------- */
.metric-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.metric-list li { border-block-start: 1px solid var(--rule); padding-block-start: var(--space-2); font-size: var(--text-sm); }
.metric-value { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 600; display: block; }
.chart { display: block; max-width: 100%; height: auto; color: var(--brick); margin-block-end: var(--space-5); }

/* ---------- Footer ---------- */
footer { background: var(--ink); color: var(--paper-2); font-size: var(--text-sm); padding-block: var(--space-7); }
footer > * { max-width: 74rem; margin-inline: auto; padding-inline: var(--pad); }
footer a { color: var(--paper); }
footer p { max-width: none; margin: 0 0 var(--space-2); }
.red-snake-hairline { height: 2px; background: var(--brick); width: 5rem; margin-block-end: var(--space-5); }

/* ---------- Myths page: prose beside an interactive wall ---------- */
.myths-head { margin-block-end: var(--space-6); }
.myths-head h1 { margin-block: var(--space-2) var(--space-3); }

.myths-layout { display: grid; gap: var(--space-6); margin-block-end: var(--space-8); }
@media (min-width: 62rem) {
  .myths-layout { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; }
  /* The wall column was the empty half of this page; sticking it keeps it in view while the
     prose scrolls past, so the two read against each other. */
  .myths-wall-col { position: sticky; top: var(--space-5); }
}
.myths-prose > section { margin-block-end: var(--space-7); }

.myth-wall {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--rule);
  background: color-mix(in oklab, var(--ink) 92%, var(--earth));
}
.myth-wall canvas { display: block; width: 100%; height: 100%; }
.myth-wall:not(.is-live) canvas { display: none; }
.myth-wall-hint {
  position: absolute; inset-inline: 0; bottom: 0; margin: 0;
  padding: var(--space-3);
  font-family: var(--font-ui); font-size: var(--text-xs);
  color: var(--paper-2);
  background: color-mix(in oklab, var(--ink) 70%, transparent);
}
.myth-wall:not(.is-live) .myth-wall-hint { position: static; background: none; color: var(--earth-2); }
/* No WebGL, or Save-Data on: nothing will ever be clickable here, so the whole column folds
   away instead of leaving an empty black frame under an invitation to click it. The fact list
   below the layout is the content either way. */
.myths-wall-col:has(.myth-wall.is-unsupported) { display: none; }
@media (min-width: 62rem) {
  .myths-layout:has(.myth-wall.is-unsupported) { grid-template-columns: minmax(0, 1fr); }
}

.myth-wall-detail { border-block-start: 1px solid var(--rule); margin-block-start: var(--space-4); padding-block-start: var(--space-4); min-height: 8rem; }
.myth-wall-detail h3 { font-size: var(--text-base); margin-block-end: var(--space-2); }
.myth-wall-detail p { font-size: var(--text-sm); }
.myth-detail-empty { color: var(--earth-2); }
.myth-detail-eyebrow { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.12em; margin-block-end: var(--space-2); }
.myth-detail-eyebrow.is-legend { color: var(--earth-2); }
.myth-detail-eyebrow.is-evidence { color: var(--brick); }

/* Two swatch/label pairs, spaced as pairs. They used to be four loose flex items with ad-hoc
   margins, so the gap inside a pair and the gap between pairs were different by accident. */
.myth-wall-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--earth-2); margin-block-start: var(--space-4); }
.myth-wall-key > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.myth-wall-key .swatch { width: 14px; height: 9px; display: inline-block; }
.myth-wall-key .swatch.is-legend { background: var(--earth); }
.myth-wall-key .swatch.is-evidence { background: var(--brick); }

/* ---------- The fact lists (the crawlable, keyboard-navigable copy) ---------- */
.fact-lists { margin-block-end: var(--space-7); }
.fact-columns { display: grid; gap: var(--space-6); margin-block-start: var(--space-5); }
@media (min-width: 48rem) { .fact-columns { grid-template-columns: 1fr 1fr; } }
.fact-column h3 { font-size: var(--text-base); padding-block-end: var(--space-2); border-block-end: 2px solid var(--rule); }
.fact-column.is-legend h3 { border-block-end-color: var(--earth); }
.fact-column.is-evidence h3 { border-block-end-color: var(--brick); }
.fact-list { list-style: none; padding: 0; margin: var(--space-4) 0 0; counter-reset: fact; }
.fact-list li {
  counter-increment: fact;
  border-inline-start: 1px solid var(--rule);
  padding: var(--space-2) var(--space-4);
  margin-block-end: var(--space-4);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.fact-list li:hover, .fact-list li:focus-visible { background: color-mix(in oklab, var(--earth) 8%, transparent); }
.is-legend .fact-list li.is-active { border-inline-start-color: var(--earth); background: color-mix(in oklab, var(--earth) 12%, transparent); }
.is-evidence .fact-list li.is-active { border-inline-start-color: var(--brick); background: color-mix(in oklab, var(--brick) 10%, transparent); }
.fact-list h4 { font-family: var(--font-ui); font-size: var(--text-base); margin: 0 0 var(--space-2); }
.fact-list h4::before { content: counter(fact, persian) '. '; color: var(--earth); font-family: var(--font-ui); }
.fact-list p { font-size: var(--text-sm); margin: 0; }