/* Nieuwoudtville: the survey sheet and the flower calendar.
   A dark dolerite ground (the plateau at night, where the stars are the attraction) carries
   full-bleed photographs; sandstone-light text; spring saffron and Pride-of-Nieuwoudtville
   blue as the two accents; drainage blue for water on the sheet. Bricolage Grotesque for display
   (width axis for map labels), Archivo for text and controls. Fonts self-hosted (OFL).
   Not the Rooibos World masthead, palette, type or page structure. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/BricolageGrotesque-var.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/Archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/Archivo-Italic-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }

:root {
  --ground: #171c22;        /* dolerite night */
  --ground-2: #1f262e;
  --ground-3: #2a333d;
  --text: #ece4d4;          /* sandstone light, 13.5:1 */
  --text-soft: #c4bba9;     /* 9.0:1 */
  --text-faint: #a79d8c;    /* 6.5:1 */
  --saffron: #f2a93b;       /* spring, 9.2:1 */
  --saffron-deep: #c9851a;
  --pride: #8ea8ef;         /* Pride of Nieuwoudtville blue, 7.6:1 */
  --water: #6fb3d2;
  --rule: #3a4550;
  --paper: #efe7d2;         /* the sheet itself */
  --paper-ink: #2b2f33;
  --paper-rule: #c9bea4;
  --focus: #f2a93b;
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --measure: 44rem;
  --wide: 84rem;
  --s1: 0.25rem; --s2: 0.5rem; --s3: 1rem; --s4: 1.5rem; --s5: 2rem; --s6: 3rem; --s7: 4.5rem; --s8: 7rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); color: var(--text); font-family: var(--body); font-size: 106.25%; line-height: 1.55; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }
p, li, dd, dt, label, figcaption { overflow-wrap: anywhere; }
a { color: var(--saffron); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--text); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--pride); color: var(--ground); }
code { font-family: var(--mono); font-size: 0.9em; }
details > summary { cursor: pointer; }

/* Progressive enhancement: controls that need the script are hidden until it runs. */
html:not(.js) .js-only { display: none !important; }
/* The language toggle hides the other language rather than removing it. Without the script both languages show. */
html[data-lang="af"] [lang="en"] { display: none; }
html[data-lang="en"] [lang="af"] { display: none; }
/* A caption marked lang=both carries two spans; the rule above handles them. */

.skip-link { position: absolute; left: var(--s3); top: -4rem; background: var(--saffron); color: var(--ground); padding: var(--s2) var(--s3); z-index: 20; font-weight: 600; }
.skip-link:hover, .skip-link:focus { color: var(--ground); top: var(--s3); outline-color: var(--text); }

/* ---------- masthead: a sheet margin ---------- */
.masthead { border-bottom: 1px solid var(--rule); background: var(--ground); position: relative; z-index: 2; }
.masthead-row { max-width: var(--wide); margin: 0 auto; padding: var(--s3) var(--s4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.wordmark { margin: 0; font-family: var(--display); line-height: 1; }
.wordmark a { color: var(--text); text-decoration: none; display: inline-flex; flex-direction: column; gap: 0.15rem; }
.wordmark-name { font-size: 1.55rem; font-weight: 700; font-variation-settings: "opsz" 48, "wdth" 90; letter-spacing: 0.04em; text-transform: uppercase; }
.wordmark-sheet { font-size: 0.78rem; font-weight: 500; color: var(--text-faint); letter-spacing: 0.08em; font-variation-settings: "wdth" 85; }
.masthead nav { flex: 1; }
.masthead nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: 0.98rem; font-weight: 500; }
.masthead nav a { color: var(--text-soft); text-decoration: none; padding: var(--s1) 0; border-bottom: 2px solid transparent; }
.masthead nav a:hover { color: var(--text); }
.masthead nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--saffron); }
.lang-switch { display: inline-flex; border: 1px solid var(--text-faint); border-radius: 3px; overflow: hidden; }
.lang-switch button { font: inherit; font-size: 0.85rem; font-weight: 600; padding: var(--s1) var(--s3); border: 0; background: transparent; color: var(--text-soft); cursor: pointer; }
.lang-switch button + button { border-left: 1px solid var(--text-faint); }
.lang-switch button[aria-pressed="true"] { background: var(--text); color: var(--ground); }
.lang-switch button:focus-visible { outline-offset: -3px; }

/* ---------- page ---------- */
main { max-width: none; margin: 0; padding: 0; }
.frame { max-width: var(--wide); margin: 0 auto; padding: 0 var(--s4) var(--s7); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sr-text { font-size: 1px; fill: transparent; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.8rem); font-variation-settings: "opsz" 96, "wdth" 92; margin: var(--s5) 0 var(--s4); max-width: 24ch; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem); font-variation-settings: "opsz" 48, "wdth" 95; margin: var(--s7) 0 var(--s3); }
h3 { font-size: 1.3rem; font-variation-settings: "opsz" 24; margin: 0 0 var(--s1); }
p { margin: 0 0 var(--s3); max-width: var(--measure); }
ul, ol { padding-left: 1.3rem; margin: 0 0 var(--s3); }
li { margin-bottom: var(--s2); }
.lede { font-size: 1.22rem; line-height: 1.45; color: var(--text); max-width: var(--measure); }
.small { font-size: 0.9rem; color: var(--text-soft); }
.jumps { margin: var(--s3) 0 var(--s4); padding: var(--s3) var(--s4); background: var(--ground-2); border: 1px solid var(--rule); border-radius: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.jumps-label { font-family: var(--display); font-weight: 600; color: var(--text-soft); }
.jumps ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.jumps li { margin: 0; }
.jumps a { font-weight: 600; }
.opening { max-width: var(--measure); }
.opening h2 { margin-top: var(--s5); }

/* ---------- plates and galleries ---------- */
figure.plate { margin: 0; }
figure.plate img { display: block; width: 100%; height: auto; background: var(--ground-3); }
figcaption { font-size: 0.85rem; color: var(--text-soft); margin-top: var(--s2); line-height: 1.4; }
.plate-credit { color: var(--text-faint); }
.plate-credit::before { content: " · "; }
/* the lead plate sits outside the padded frame, so it is simply full width; short enough that the title follows within the first view */
figure.plate.plate-lead { margin: 0 0 var(--s4); width: 100%; max-width: none; }
figure.plate.plate-lead img { width: 100%; height: clamp(16rem, 48vh, 30rem); object-fit: cover; }
.plate-lead figcaption { max-width: var(--wide); margin: var(--s2) auto 0; padding: 0 var(--s4); }
/* studies: preview-origin files at native pixel size, never scaled up */
figure.plate.plate-study { width: max-content; max-width: 100%; }
figure.plate.plate-study img { width: auto; max-width: 100%; height: auto; }
.gallery { margin-top: var(--s7); }
.gallery h2 { margin-top: 0; }
/* galleries are contact sheets: small files sit at their native size in rows on the dark ground; full-resolution features run the full width */
.gallery-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s4) var(--s3); margin-top: var(--s4); padding: var(--s3); background: var(--ground-2); border: 1px solid var(--rule); border-radius: 4px; }
.gallery-grid figure.plate { margin: 0; }
.gallery-grid figure.plate-study { flex: 0 0 auto; }
.gallery-grid figure.plate-feature, .gallery-grid figure.plate-feature-tall { flex: 1 1 100%; }
.gallery-grid figure.plate-feature img { width: 100%; height: auto; }
.gallery-grid figure.plate-tile, .gallery-grid figure.plate-tall { flex: 1 1 22rem; max-width: 36rem; }
.gallery-grid figure.plate-tile img, .gallery-grid figure.plate-tall img { width: 100%; height: auto; }
.gallery-grid figure.plate-feature-tall img { width: auto; max-width: 100%; max-height: 42rem; height: auto; margin: 0 auto; display: block; }
.gallery-grid figcaption { font-size: 0.8rem; max-width: 30rem; }
.gallery-grid figure.plate-study figcaption { max-width: var(--w, 30rem); }

/* ---------- the sheet ---------- */
.sheet { margin-top: var(--s7); }
.sheet h2 { margin-top: 0; }
.sheet-lede { font-size: 1.05rem; color: var(--text-soft); }
.sheet-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 1fr); gap: var(--s5); align-items: start; }
.atlas-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.atlas-filters, .atlas-zoom { display: flex; flex-wrap: wrap; gap: var(--s1); }
.atlas-controls button { font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.3rem 0.7rem; border: 1px solid var(--text-faint); border-radius: 3px; background: transparent; color: var(--text); cursor: pointer; }
.atlas-controls button[aria-pressed="true"] { background: var(--saffron); border-color: var(--saffron); color: var(--ground); }
.atlas-zoom button { min-width: 2.2rem; }
html:not(.js) .atlas-controls { display: none; }
.atlas-map { width: 100%; height: auto; display: block; border-radius: 3px; font-family: var(--body); cursor: grab; touch-action: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.atlas-map:active { cursor: grabbing; }
.atlas-map .sheet-paper { fill: var(--paper); }
.atlas-map .atlas-view { transform-origin: 0 0; }
.atlas-map path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.atlas-map .coast { stroke: var(--paper-ink); stroke-width: 1.2; }
.atlas-map .province { stroke: #6b6358; stroke-width: 1; stroke-dasharray: 8 4; }
.atlas-map .road { stroke: #a8402c; stroke-width: 1; }
.atlas-map .road-major { stroke: #a8402c; stroke-width: 1.8; }
.atlas-map .river { stroke: #3f7fa8; stroke-width: 1.1; }
.atlas-map .grat { stroke: #b9ad8f; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.atlas-map .grat-label { fill: #6b6358; font-size: 10px; font-variation-settings: "wdth" 80; }
.atlas-map .scalebar line { stroke: var(--paper-ink); stroke-width: 1.5; }
.atlas-map .scalebar text { fill: var(--paper-ink); font-size: 11px; }
.atlas-map .sheet-name { fill: var(--paper-ink); font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: 0.12em; }
.atlas-map .sheet-sub { fill: #6b6358; font-size: 10px; letter-spacing: 0.06em; }
.atlas-map .north { fill: var(--paper-ink); font-size: 14px; font-weight: 700; }
.atlas-map .north-arrow { stroke: var(--paper-ink); stroke-width: 1.5; }
.atlas-map .town-mark circle { fill: none; stroke: var(--paper-ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.atlas-map .town-mark circle:last-child { fill: var(--paper-ink); }
.atlas-map .place { cursor: pointer; }
.atlas-map .place .mark { fill: #a8402c; stroke: var(--paper); stroke-width: 1.5; }
.atlas-map .place-reserve .mark { fill: #2f6b3a; }
.atlas-map .place-town .mark { fill: #6b5a2a; }
.atlas-map .place-label { fill: var(--paper-ink); font-size: 11.5px; font-weight: 600; font-variation-settings: "wdth" 85; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.atlas-map .place:hover .place-label, .atlas-map .place.is-selected .place-label { fill: #a8402c; }
.atlas-map .place.is-selected .mark { stroke: var(--paper-ink); stroke-width: 3; }
.atlas-map .place.is-dimmed { opacity: 0.22; }
.atlas-map .place:focus-visible { outline: none; }
.atlas-map .place:focus-visible .mark { stroke: var(--saffron-deep); stroke-width: 4; }
.atlas-attribution { font-size: 0.8rem; color: var(--text-faint); margin: var(--s2) 0; }
.atlas-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: 0.85rem; color: var(--text-soft); }
.atlas-legend li { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; }
.legend-mark { width: 0.8rem; height: 0.8rem; display: inline-block; background: #a8402c; transform: rotate(45deg); }
.legend-nature .legend-mark { background: #2f6b3a; clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: none; }
.legend-geology .legend-mark { background: #6b5a2a; border-radius: 50%; transform: none; }
.atlas-detail { background: var(--ground-2); border: 1px solid var(--rule); border-radius: 4px; padding: var(--s4); margin-bottom: var(--s4); min-height: 6rem; }
.atlas-detail h3 { margin-bottom: var(--s1); }
.atlas-detail .place-kind { display: block; font-size: 0.8rem; color: var(--text-faint); margin-bottom: var(--s2); }
.atlas-detail .detail-plate img { display: block; width: auto; max-width: 100%; height: auto; border-radius: 2px; margin: var(--s2) 0 var(--s3); }
.atlas-detail-empty { color: var(--text-faint); margin: 0; }
html:not(.js) .atlas-detail { display: none; }
.sheet-index { list-style: none; padding: 0; margin: 0; max-height: 40rem; overflow: auto; border-top: 1px solid var(--rule); }
.sheet-index li { padding: var(--s2) 0; border-bottom: 1px solid var(--rule); margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.sheet-index li.is-selected { background: var(--ground-2); }
.place-link { font: inherit; font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--saffron); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 0.16em; }
.place-kind { font-size: 0.78rem; color: var(--text-faint); }
.place-jump { font-size: 0.8rem; margin-left: auto; }
.detail-photo, .detail-story { display: none; }

/* ---------- place entries ---------- */
.places { margin-top: var(--s7); }
.places h2 { margin-top: 0; }
.guide-note { margin-bottom: var(--s4); }
.place { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--rule); }
.place:last-of-type { border-bottom: 1px solid var(--rule); }
.place figure.plate img { border-radius: 2px; }
.place figure.plate-study { justify-self: start; }
.place-text { min-width: 0; }
.place:not(:has(figure)) .place-text { grid-column: 1 / -1; }
.direction { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pride); margin: 0 0 var(--s2); font-weight: 600; }
.place-story { font-size: 0.95rem; color: var(--text-soft); margin-bottom: var(--s3); }
.place-story summary { color: var(--saffron); }
.place-story p { margin-top: var(--s2); }
.story-source { font-size: 0.85rem; color: var(--text-faint); }
.place-links { font-size: 0.92rem; line-height: 1.7; }
.place-links .sep { color: var(--text-faint); padding: 0 var(--s2); }
.toggle { font: inherit; font-size: 0.92rem; font-weight: 600; padding: var(--s2) var(--s3); border: 2px solid var(--pride); border-radius: 3px; background: transparent; color: var(--pride); cursor: pointer; }
.toggle:hover { background: var(--ground-2); }
.toggle[aria-pressed="true"] { background: var(--pride); color: var(--ground); }
.toggle .when-on { display: none; }
.toggle[aria-pressed="true"] .when-on { display: inline; }
.toggle[aria-pressed="true"] .when-off { display: none; }

/* ---------- shortlist ---------- */
.shortlist { background: var(--ground-2); border: 1px solid var(--rule); padding: var(--s4); margin: var(--s6) 0; border-radius: 4px; }
.shortlist h2 { margin-top: 0; }
.shortlist-groups h3 { font-family: var(--body); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pride); margin: var(--s3) 0 var(--s1); }
.shortlist-groups ul { list-style: none; padding: 0; }
.field { margin: var(--s4) 0 var(--s3); }
label { display: block; font-weight: 600; margin-bottom: var(--s1); font-size: 0.95rem; }
textarea { display: block; width: 100%; max-width: 100%; font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; color: var(--text); background: var(--ground); border: 1px solid var(--text-faint); border-radius: 3px; padding: var(--s2) var(--s3); resize: vertical; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: 0 0 var(--s2); }
.button { display: inline-block; font: inherit; font-size: 0.92rem; font-weight: 600; line-height: 1.3; padding: var(--s2) var(--s4); border-radius: 3px; border: 2px solid var(--text); background: transparent; color: var(--text); cursor: pointer; text-decoration: none; text-align: center; }
.button:hover { background: var(--ground-3); color: var(--text); }
.button.primary { background: var(--saffron); border-color: var(--saffron); color: var(--ground); }
.button.primary:hover { background: var(--saffron-deep); border-color: var(--saffron-deep); color: var(--ground); }
.button.quiet { border-color: var(--text-faint); color: var(--text-soft); }
.button.quiet:hover { color: var(--text); }
.status { min-height: 1.5rem; font-size: 0.9rem; color: var(--text-soft); }
.checklist li { margin-bottom: var(--s2); }

/* ---------- explorers ---------- */
.explorer { margin: var(--s7) 0; }
.explorer h2 { margin-top: 0; }
.explorer-lede { font-size: 1.05rem; color: var(--text-soft); }
.explorer-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 1fr); gap: var(--s5); align-items: start; }
.explorer-strata .explorer-layout { grid-template-columns: minmax(0, 1fr); }
.explorer-stage { width: 100%; height: auto; display: block; background: var(--ground-2); border: 1px solid var(--rule); border-radius: 4px; }
.explorer-stage path, .explorer-stage circle { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.explorer-stage text { fill: var(--text); font-family: var(--body); font-size: 13px; stroke: none; }
.seasons-wheel .ring { stroke: var(--rule); }
.seasons-wheel .month { fill: var(--text-faint); font-size: 12px; font-variation-settings: "wdth" 85; }
.seasons-wheel .season { cursor: pointer; }
.seasons-wheel .season-arc { stroke-width: 10; stroke: var(--ground-3); }
.seasons-wheel .season-winter .season-arc { stroke: var(--water); }
.seasons-wheel .season-spring .season-arc { stroke: var(--saffron); }
.seasons-wheel .season-summer .season-arc { stroke: #c26a3a; }
.seasons-wheel .season-autumn .season-arc { stroke: #d98bb5; }
.seasons-wheel .season.is-selected .season-arc, .seasons-wheel .season:hover .season-arc { stroke-width: 18; }
.seasons-wheel .season:focus-visible { outline: none; }
.seasons-wheel .season:focus-visible .season-arc { stroke-width: 22; }
.seasons-wheel .ground { stroke: var(--text-faint); }
.seasons-wheel .rain { stroke: var(--water); }
.seasons-wheel .bulb { fill: #6b4a2a; stroke: #a07a4a; }
.seasons-wheel .shoot, .seasons-wheel .stem { stroke: #8aa271; }
.seasons-wheel .bud { fill: #d98bb5; stroke: none; }
.seasons-wheel .petal { fill: var(--saffron); stroke: none; }
.seasons-wheel .petal-pink { fill: #d98bb5; }
.seasons-wheel .disc { fill: #6b4a2a; stroke: none; }
.seasons-wheel .sun { fill: var(--saffron); stroke: none; }
.seasons-wheel .rays { stroke: var(--saffron); }
.seasons-wheel .crack { stroke: #c26a3a; }
.seasons-wheel .wheel-centre { font-family: var(--display); font-size: 20px; font-weight: 600; }
.strata-section .stratum { cursor: pointer; }
.strata-section .stratum-shape { stroke: var(--ground); stroke-width: 1; fill: var(--ground-3); }
.strata-section .stratum-malmesbury .stratum-shape { fill: #4a4f55; }
.strata-section .stratum-cape-sandstone .stratum-shape { fill: #a8906a; }
.strata-section .stratum-dwyka .stratum-shape { fill: #7f8a8c; }
.strata-section .stratum-dolerite .stratum-shape { fill: #8a3a2c; }
.strata-section .stratum-ecca .stratum-shape { fill: #5b6b5c; }
.strata-section .stratum.is-selected .stratum-shape, .strata-section .stratum:hover .stratum-shape { stroke: var(--saffron); stroke-width: 3; }
.strata-section .stratum:focus-visible { outline: none; }
.strata-section .stratum:focus-visible .stratum-shape { stroke: var(--saffron); stroke-width: 4; }
.strata-section .stratum-label { font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--ground); stroke-width: 3px; }
.strata-section .section-label { fill: var(--text-faint); font-size: 12px; }
.strata-section .town-tick { stroke: var(--saffron); stroke-width: 2; }
.strata-section .skyline { stroke: var(--text); stroke-width: 2; }
.explorer-controls { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.explorer-controls button { font: inherit; font-size: 0.92rem; font-weight: 600; padding: var(--s2) var(--s3); border: 1px solid var(--text-faint); border-radius: 3px; background: transparent; color: var(--text); cursor: pointer; }
.explorer-controls button[aria-pressed="true"] { background: var(--saffron); border-color: var(--saffron); color: var(--ground); }
.stage-detail { background: var(--ground-2); border: 1px solid var(--rule); border-radius: 4px; padding: var(--s4); }
.stage-detail h3 { margin-bottom: var(--s2); }
.stage-detail p { margin-bottom: 0; }
html:not(.js) .stage-detail[hidden] { display: block; }
html:not(.js) .explorer-controls { display: none; }
.explorer-text { font-size: 0.92rem; margin-top: var(--s3); color: var(--text-soft); }
.explorer-order { margin-top: var(--s2); }

/* ---------- itineraries ---------- */
.itinerary { margin-top: var(--s6); max-width: var(--measure); }
.itinerary h2 { margin-top: 0; }
.itinerary-intro { color: var(--text-soft); }
.legs { list-style: none; padding: 0; margin: var(--s4) 0 0; border-left: 2px solid var(--rule); }
.leg { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--s3); padding: 0 0 var(--s4) var(--s3); margin: 0; position: relative; }
.leg-number { width: 2rem; height: 2rem; border-radius: 50%; background: var(--saffron); color: var(--ground); font-family: var(--display); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-left: -2.1rem; }
.leg a { font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.leg-note { margin: var(--s1) 0 0; color: var(--text-soft); }

/* ---------- sources, footer ---------- */
.bibliography { padding-left: 1.3rem; }
.bib-title { margin-bottom: var(--s1); }
.bib-note { color: var(--text-soft); font-size: 0.92rem; }
footer { border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--text-soft); }
.footer-inner { max-width: var(--wide); margin: 0 auto; padding: var(--s4) var(--s4) var(--s6); }
footer .meta { font-size: 0.8rem; color: var(--text-faint); }

/* ---------- responsive ---------- */
@media (max-width: 64rem) {
  .sheet-layout, .explorer-layout { grid-template-columns: minmax(0, 1fr); }
  .sheet-index { max-height: none; }
  .place { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  html { font-size: 100%; }
  .frame { padding-left: var(--s3); padding-right: var(--s3); }
  .masthead-row, .footer-inner { padding-left: var(--s3); padding-right: var(--s3); }
  .plate-lead figcaption { padding-left: var(--s3); padding-right: var(--s3); }
  figure.plate.plate-lead img { height: clamp(12rem, 38vh, 20rem); }
  .gallery-grid { padding: var(--s2); gap: var(--s3) var(--s2); }
  .shortlist { padding: var(--s3); margin-left: calc(-1 * var(--s3)); margin-right: calc(-1 * var(--s3)); border-radius: 0; border-left: 0; border-right: 0; }
  .actions .button, .toggle { width: 100%; }
  .explorer-controls button { flex: 1 1 7rem; }
  .atlas-map { cursor: default; }
  h2 { margin-top: var(--s6); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .seasons-wheel .season-arc, .strata-section .stratum-shape, .atlas-map .place .mark, .explorer-controls button, .atlas-controls button { transition: stroke-width 160ms ease-out, stroke 160ms ease-out, background 160ms ease-out; }
}
@media print {
  html { background: #fff; color: #000; }
  .skip-link, nav, .lang-switch, .toggle, .actions, .field, .status, footer .meta, .atlas-controls, .explorer-controls { display: none; }
  .shortlist { background: none; padding: 0; border-top: 1px solid #000; }
  a { color: #000; }
  .gallery-grid { display: block; background: none; border: 0; }
  .gallery-grid figure.plate { margin-bottom: 1rem; }
  .stage-detail[hidden] { display: block; }
  .place-links a::after, .shortlist-groups a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}