/* Atlas — home (see docs/EXPLORE-PHASE1-CONTRACT.md): the map home
   (static/js/explore/home.js, .xh), a place's home (explore/place.js, .xp),
   the maps (explore/map.js, .xm) and the view's frame (views/explore.js, .xr).

   Colours are the tokens in tokens.css only; a place's, an era's and a
   theme's hue arrive inline from the data. Cut paper: flat colour, cream
   sheets with torn edges, navy ink, a red thread. Full colour behind text
   only in a hero; elsewhere colour is on tiles, bands, pins and rules. */

/* ── the frame ───────────────────────────────────────────────────────── */

/* the Atlas is paper from edge to edge, and a little wider than a page of reading */
body:has(#view-explore:not([hidden])) { background-color: var(--x-paper); background-image: var(--x-grain); }
.main:has(#view-explore:not([hidden])) { max-width: 1120px; }

.xr { color: var(--text); }
.xr-page { display: block; }
.xr-missing { display: grid; gap: 12px; justify-items: start; padding: 40px 0; max-width: 560px; }
.xr-missing-h { font: 600 clamp(26px, 4vw, 36px)/1.1 var(--serif); color: var(--x-navy); margin: 0; outline: none; }
.xr-missing p { margin: 0; color: var(--x-ink-2); line-height: 1.55; }

/* ── the maps ────────────────────────────────────────────────────────── */

.xm { position: relative; margin: 0; }
.xm-stage {
  position: relative; width: 100%; overflow: hidden; border-radius: 4px;
  background: var(--x-sea) var(--x-grain);
}
.xm-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.xm-c { fill: var(--x-paper-2); stroke: var(--x-line); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.xm-reach { fill: color-mix(in srgb, var(--x-paper-3) 60%, var(--x-paper-2)); }
.xm-node {
  fill: var(--place-mark); stroke: var(--x-paper-2); stroke-width: 1.2; cursor: pointer;
  transition: fill 0.18s, opacity 0.3s;
}
.xm-node.hot { fill: var(--place-fill); }
.xm-labels { position: absolute; inset: 0; pointer-events: none; }

/* a place's name: a torn cream strip pasted on the map */
.xm-label {
  position: absolute; pointer-events: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px 6px 11px; min-height: 30px; white-space: nowrap;
  transform: translate(-14px, -50%) rotate(-1.4deg);
  background: var(--x-paper-2); color: var(--x-navy); text-decoration: none;
  font: 600 14px/1.1 var(--serif); letter-spacing: 0.005em;
  -webkit-mask: var(--x-tear-l) left top / 8px 160px repeat-y, var(--x-tear-r) right top / 8px 160px repeat-y, linear-gradient(#000 0 0) center / calc(100% - 14px) 100% no-repeat;
  mask: var(--x-tear-l) left top / 8px 160px repeat-y, var(--x-tear-r) right top / 8px 160px repeat-y, linear-gradient(#000 0 0) center / calc(100% - 14px) 100% no-repeat;
  transition: background 0.15s, color 0.15s, opacity 0.25s, transform 0.18s;
}
.xm-label:nth-child(even) { transform: translate(-14px, -50%) rotate(1.1deg); }
.xm-swatch { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--place-mark); box-shadow: 0 0 0 2px var(--x-paper-2); }
.xm-label:hover, .xm-label.hot {
  background: var(--place-fill); color: var(--place-on); z-index: 2;
  transform: translate(-14px, calc(-50% - 2px)) rotate(-1.4deg) scale(1.06);
}
.xm-label.hot .xm-swatch { box-shadow: 0 0 0 2px var(--place-on); }
/* a mask would cut a focus ring away: the strip goes square and gets one */
.xm-label:focus-visible { -webkit-mask: none; mask: none; outline: 3px solid var(--x-navy); outline-offset: 2px; border-radius: 2px; }
.xm-stage.zooming .xm-label:not(.hot) { opacity: 0; }
.xm-stage.zooming .xm-node:not(.hot) { opacity: 0.35; }

/* a place opened on the map: the others step back, the places inside it
   come up — a dot and a smaller name each, smaller still a level down */
.xm-stage.is-open .xm-node:not(.hot) { opacity: 0.35; }
.xm-sub { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.xm-sub.is-shown { opacity: 1; pointer-events: auto; fill: var(--place-soft); }
.xm-label[hidden] { display: none; }
.xm-label.is-chosen { background: var(--x-navy); color: var(--x-paper-2); }
.xm-label.is-chosen .xm-swatch { background: var(--place-mark); box-shadow: 0 0 0 2px var(--x-paper-2); }
.xm-label.xm-kid { font-size: 13px; min-height: 26px; padding: 3px 11px 4px 9px; }
.xm-label.xm-kid .xm-swatch { width: 12px; height: 12px; background: var(--x-navy); box-shadow: 0 0 0 2.5px var(--x-paper-2); }
.xm-label.xm-kid.is-deep { font-size: 12px; min-height: 24px; }
.xm-label.xm-kid.is-deep .xm-swatch { width: 9px; height: 9px; }
.xm-label.xm-kid:hover .xm-swatch, .xm-label.xm-kid.hot .xm-swatch { background: var(--place-on); }
.xm-bar {
  position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  pointer-events: none;
}
.xm-bar[hidden] { display: none; }
.xm-bar > * { pointer-events: auto; }
.xm-bar-back, .xm-bar-open {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: var(--x-shadow-lift);
}
.xm-bar-back { background: var(--x-paper-2); color: var(--x-navy); }
.xm-bar-open { background: var(--place-fill); color: var(--place-on); }
.xm-bar-back:hover { background: var(--x-paper); }
.xm-bar-open:hover { background: var(--x-navy); color: var(--x-paper-2); }
.xm-bar-back:focus-visible, .xm-bar-open:focus-visible { outline: 2.5px solid var(--x-red); outline-offset: 2px; }

/* a place's small map */
.xm-locator { border-radius: 2px; }
.xm-own { fill: var(--place-mark); }
.xm-town { position: absolute; display: inline-flex; align-items: center; gap: 4px; transform: translate(-4px, -50%); pointer-events: none; }
.xm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--x-navy); box-shadow: 0 0 0 2px var(--x-paper-2); flex: none; }
.xm-town-name {
  font-size: 11px; font-weight: 600; color: var(--x-navy); white-space: nowrap;
  text-shadow: 0 0 2px var(--x-paper-2), 0 0 3px var(--x-paper-2), 0 0 4px var(--x-paper-2);
}

/* ── the cut paper ───────────────────────────────────────────────────── */

.x-collage { display: block; width: 100%; height: 100%; }
.x-collage .c-soft { fill: var(--place-soft); }
.x-collage .c-fill { fill: var(--place-fill); }
.x-collage .c-two { fill: var(--place2-mark); }
.x-collage .c-paper { fill: var(--x-paper-2); }
.x-collage .c-ink { fill: var(--x-navy); }
.x-collage .c-line { fill: none; stroke: var(--x-navy); }

/* a strip of a place's eras, in their colours */
.x-erastrip { display: flex; gap: 2px; height: 7px; }
.x-erastrip-band { flex-basis: 0; min-width: 6px; background: var(--era-mark); border-radius: 1px; }

/* ── the map home ────────────────────────────────────────────────────── */

.xh { display: flex; flex-direction: column; gap: 34px; }
.xh-top {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.85fr);
  grid-template-areas: "map head" "map world"; grid-template-rows: auto 1fr; gap: 22px 34px; align-items: start;
}
.xh-top.is-wide { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.85fr); grid-template-areas: "head world" "map map"; grid-template-rows: auto auto; }
.xh-top.is-wide .xh-everywhere { align-self: stretch; display: flex; }
.xh-top.is-wide .xh-world { flex: 1; }
.xh-head { grid-area: head; display: grid; gap: 14px; padding-top: 6px; }
.xh-plate { grid-area: map; }
.xh-everywhere { grid-area: world; align-self: end; }
.xh-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; }
.xh-of { font: italic 16px/1.2 var(--serif); color: var(--x-ink-2); }
.xh-title { font-size: clamp(36px, 4.6vw, 54px); }
.xh-line { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--x-navy); max-width: 34ch; }

/* search */
.xh-search { position: relative; margin-top: 4px; }
.xh-search-icon { position: absolute; left: 15px; top: 14px; color: var(--x-ink-2); pointer-events: none; }
.xh-search-input {
  width: 100%; min-height: 48px; padding: 11px 14px 11px 44px; font: inherit; font-size: 15.5px;
  border: 1.5px solid var(--x-line); border-radius: 4px; background: var(--x-paper-2); color: var(--x-navy);
  box-shadow: var(--x-shadow);
}
.xh-search-input::placeholder { color: var(--x-ink-2); opacity: 1; }
.xh-search-input:focus { outline: 2.5px solid var(--x-navy); outline-offset: 1px; border-color: transparent; }
.xh-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 25; }
.xh-results:empty { display: none; }
.xh-hit-list { list-style: none; margin: 0; padding: 8px; max-height: min(60vh, 460px); overflow-y: auto; box-shadow: var(--x-shadow-lift); }
.xh-hit-group + .xh-hit-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--x-line); }
.xh-hit-group ul { list-style: none; margin: 0; padding: 0; }
.xh-hit-head { margin: 4px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--x-red); }
.xh-hit {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 9px; padding: 9px 10px; min-height: 40px;
  border-radius: 3px; color: var(--x-navy); text-decoration: none; font-size: 14.5px;
}
.xh-hit .x-pin { align-self: center; width: 10px; height: 10px; }
.xh-hit:hover, .xh-hit:focus-visible { background: var(--place-wash); outline: none; }
.xh-hit:focus-visible { box-shadow: inset 0 0 0 2px var(--x-navy); }
.xh-hit-native { font: italic 14px var(--serif); color: var(--place-ink); }
.xh-hit-where { margin-left: auto; font-size: 12px; color: var(--x-ink-2); }
.xh-hit-year { min-width: 70px; font-size: 12.5px; font-weight: 700; color: var(--x-red); font-variant-numeric: tabular-nums; }
.xh-none { margin: 0; padding: 12px 14px; font-size: 14px; color: var(--x-ink-2); background: var(--x-paper-2); border-radius: 4px; box-shadow: var(--x-shadow); }

/* the places, as cards in a row */
.xh-places { display: grid; gap: 14px; }
.xh-places-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xh-along-pair { display: inline-flex; gap: 6px; }
.xh-along {
  width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer;
  border: 0; background: var(--x-paper-2); color: var(--x-navy); box-shadow: var(--x-shadow);
}
.xh-along:hover { background: var(--x-navy); color: var(--x-paper-2); }
.xh-along:focus-visible { outline: 2.5px solid var(--x-red); outline-offset: 2px; }
.xh-cards {
  list-style: none; margin: 0 -6px; padding: 6px 6px 14px; display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(196px, 214px); gap: 14px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--x-line) transparent;
}
.xh-card-li { scroll-snap-align: start; display: flex; }
.xh-card {
  flex: 1; display: flex; flex-direction: column; background: var(--x-paper-2) var(--x-grain); color: var(--x-navy);
  text-decoration: none; border-radius: 4px; box-shadow: var(--x-shadow); overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}
.xh-card:hover, .xh-card.is-chosen { transform: translateY(-4px) rotate(-0.6deg); box-shadow: var(--x-shadow-lift); }
.xh-card:focus-visible { outline: 3px solid var(--x-navy); outline-offset: 3px; }
.xh-card-art { display: block; height: 104px; }
.xh-card-art .x-collage {
  -webkit-mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
  mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
}
.xh-card-body { display: grid; gap: 5px; padding: 10px 15px 15px; }
.xh-card-name { font: 600 21px/1.12 var(--serif); }
.xh-card-native { font: italic 15px/1.2 var(--serif); color: var(--place-ink); margin-top: -2px; }
.xh-card .x-erastrip { margin-top: 6px; }
.xh-card-kids { font-size: 12.5px; line-height: 1.4; color: var(--x-ink-2); }
.xh-card-kids-h { font-weight: 700; color: var(--place-ink); }
.xh-card-count { font-size: 12.5px; color: var(--x-ink-2); font-variant-numeric: tabular-nums; }

/* the whole language: a card with no outline to tap */
.xh-world {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 4px;
  background: var(--place-fill) var(--x-grain); color: var(--place-on); text-decoration: none; box-shadow: var(--x-shadow);
  transition: transform 0.18s, box-shadow 0.18s;
}
.xh-world:hover { transform: translateY(-3px); box-shadow: var(--x-shadow-lift); }
.xh-world:focus-visible { outline: 3px solid var(--x-navy); outline-offset: 3px; }
.xh-world-art { display: block; height: 88px; }
.xh-world-art .x-collage {
  -webkit-mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
  mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
}
.xh-world-body { display: grid; gap: 6px; justify-items: start; padding: 12px 52px 18px 18px; }
.xh-world .x-strip { margin-bottom: 2px; }
.xh-world-name { font: 600 22px/1.15 var(--serif); }
.xh-world-native { font: italic 15px var(--serif); margin-top: -2px; }
.xh-world-line { font-size: 14px; line-height: 1.45; }
.xh-world .xh-card-count { color: var(--place-on); }
.xh-world-go { position: absolute; right: 16px; bottom: 18px; }
.xh-empty { display: grid; gap: 14px; justify-items: start; padding: 30px 0; max-width: 580px; }
.xh-empty p { margin: 0; color: var(--x-ink-2); }

/* ── a place's home ──────────────────────────────────────────────────── */

.xp { display: flex; flex-direction: column; gap: 40px; }
.xp-crumbs ol { list-style: none; margin: 0 0 -24px; padding: 0; display: flex; flex-wrap: wrap; font-size: 13.5px; }
.xp-crumbs li { display: inline-flex; align-items: center; color: var(--x-ink-2); }
.xp-crumbs li + li::before { content: "›"; margin: 0 9px; color: var(--x-ink-2); }
.xp-crumbs a { color: var(--x-navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--place-mark); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* the hero: the place's own colour, with a picture of it pasted on */
.xp-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
  grid-template-areas: "text map"; align-items: center; gap: 24px; min-height: 300px;
  padding: 34px 34px 64px; border-radius: 4px; overflow: hidden;
  background: var(--place-fill) var(--x-grain); color: var(--place-on);
}
.xp-hero-art {
  position: absolute; top: 0; right: 0; bottom: 0; width: 46%;
  -webkit-mask: var(--x-tear-l) left top / 8px 160px repeat-y, linear-gradient(#000 0 0) right top / calc(100% - 7px) 100% no-repeat;
  mask: var(--x-tear-l) left top / 8px 160px repeat-y, linear-gradient(#000 0 0) right top / calc(100% - 7px) 100% no-repeat;
}
.xp-hero-text { grid-area: text; position: relative; display: grid; gap: 6px; justify-items: start; max-width: 30ch; }
.xp-kind { margin: 0 0 6px; }
.xp-name { margin: 0; font: 600 clamp(42px, 6.4vw, 72px)/0.98 var(--serif); letter-spacing: -0.015em; color: var(--place-on); outline: none; }
.xp-name.is-long { font-size: clamp(34px, 4.4vw, 50px); line-height: 1.04; }
.xp-hero-text:has(.is-long) { max-width: 22em; }
.xp-native { margin: 2px 0 0; font: italic 400 clamp(20px, 2.4vw, 26px)/1.2 var(--serif); color: var(--place-on); }
.xp-about { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--place-on); }
.xp-locator {
  grid-area: map; position: relative; margin: 0; justify-self: end; width: 100%;
  padding: 7px; background: var(--x-paper-2); box-shadow: var(--x-shadow-lift); transform: rotate(1.8deg);
}

/* the lede: a cream note pasted over the hero's edge */
.xp-lede-wrap { margin: -66px 26px 0 auto; max-width: 700px; position: relative; filter: drop-shadow(0 8px 14px rgba(40, 25, 5, 0.18)); }
.xp-lede { padding: 18px 24px 28px; transform: rotate(-0.5deg); box-shadow: none; }
.xp-lede-text { margin: 0; font: 400 18px/1.55 var(--serif); color: var(--x-navy); }
.xp-lede-more {
  margin-top: 6px; padding: 4px 0; min-height: 36px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--x-navy);
  text-decoration: underline; text-decoration-color: var(--x-red); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.xp-lede-more:focus-visible { outline: 2.5px solid var(--x-red); outline-offset: 2px; }
.xp-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.xp-fact {
  font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--place-wash); color: var(--place-ink); font-variant-numeric: tabular-nums;
}

/* section heads: a cut rule over a serif title, the way on at the right */
.xp-sec { display: grid; gap: 16px; }
.xp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 16px; }
.xp-head .x-rule { grid-column: 1 / -1; }
.xp-head-act { min-height: 40px; font-size: 14px; }
.xp-sub { margin: -8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--x-ink-2); max-width: 62ch; }
.xp-h3 { margin: 8px 0 -4px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--x-red); }

/* (a) its line: eras as bands, sized by time */
.xp-bands { list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; }
.xp-band-li { flex: var(--w, 1) 1 0; min-width: 92px; display: flex; container-type: inline-size; }
/* many eras (Czechia has eleven): each the same width, or the short ones
   would be too narrow for their names */
.xp-bands.is-many .xp-band-li { flex: 1 1 0; min-width: 0; }
.xp-bands.is-many .xp-band { min-width: 0; overflow: hidden; padding-left: 7px; padding-right: 3px; }
.xp-bands.is-many .xp-band-name { font-size: 12px; overflow-wrap: anywhere; }
.xp-bands.is-many .xp-band-dates, .xp-bands.is-many .xp-band-n { font-size: 11px; }
.xp-band {
  flex: 1; display: grid; grid-template-rows: auto auto 1fr auto; gap: 4px; min-height: 168px;
  padding: 16px 11px 10px; text-decoration: none; border-radius: 0 0 3px 3px;
  background-image: var(--x-grain);
  -webkit-mask: var(--x-tear-t) left top / 240px 12px repeat-x, linear-gradient(#000 0 0) left bottom / 100% calc(100% - 11px) no-repeat;
  mask: var(--x-tear-t) left top / 240px 12px repeat-x, linear-gradient(#000 0 0) left bottom / 100% calc(100% - 11px) no-repeat;
  transition: transform 0.18s;
}
.xp-band-li:nth-child(even) .xp-band { -webkit-mask-position: 90px 0, left bottom; mask-position: 90px 0, left bottom; }
.xp-band:hover { transform: translateY(-4px); }
.xp-band:focus-visible { outline: 3px solid var(--era-on); outline-offset: -7px; }
.xp-band-name { font: 600 15.5px/1.18 var(--serif); hyphens: auto; overflow-wrap: break-word; }
.xp-band-short { display: none; }
/* a narrow band says its era's short name */
@container (max-width: 150px) {
  .xp-band-name.has-short { display: none; }
  .xp-band-short { display: block; }
}
.xp-band-dates { font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.xp-hist {
  display: flex; align-items: flex-end; gap: 1px; height: 46px; align-self: end;
  border-bottom: 1.5px solid var(--era-on);
}
.xp-hist-bar { flex: 1; height: calc(var(--v) * 100%); background: var(--era-on); border-radius: 1px 1px 0 0; }
.xp-band-n { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.xp-procs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xp-procs-h { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--x-red); margin-right: 4px; }
.xp-procs .x-chip { white-space: normal; text-align: left; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }

/* (b) its culture: themes as tiles in their colours */
.xp-themes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.xp-themes > li { display: flex; }
.xp-theme {
  flex: 1; display: grid; align-content: start; gap: 6px; min-height: 132px; padding: 14px 14px 22px;
  background: var(--theme-soft) var(--x-grain); color: var(--x-navy); text-decoration: none; border-radius: 3px 3px 0 0;
  -webkit-mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
  mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
  transition: transform 0.18s;
}
.xp-themes > li:nth-child(3n+2) .xp-theme { -webkit-mask-position: -70px bottom, left top; mask-position: -70px bottom, left top; }
.xp-themes > li:nth-child(3n) .xp-theme { -webkit-mask-position: -150px bottom, left top; mask-position: -150px bottom, left top; }
.xp-theme:hover { transform: translateY(-3px) rotate(-0.7deg); }
.xp-theme:focus-visible { outline: 3px solid var(--x-navy); outline-offset: -6px; }
.xp-theme-glyph {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px;
  background: var(--theme-fill); color: var(--theme-on);
}
.xp-theme-name { font: 600 16.5px/1.2 var(--serif); }
.xp-theme-n { font-size: 13px; font-variant-numeric: tabular-nums; }

.xp-topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.xp-topics > li { display: flex; }
.xp-topic {
  flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 18px; color: var(--x-navy);
  text-decoration: none; border-top: 5px solid var(--theme-mark); border-radius: 2px 2px 4px 4px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.xp-topic:hover { transform: translateY(-3px); box-shadow: var(--x-shadow-lift); }
.xp-topic:focus-visible { outline: 3px solid var(--x-navy); outline-offset: 3px; }
.xp-topic-theme { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--theme-ink); }
.xp-topic-name { font: 600 19px/1.2 var(--serif); margin-top: 2px; }
.xp-topic-native { font: italic 15px/1.2 var(--serif); color: var(--theme-ink); }
.xp-topic-sum {
  font-size: 13.5px; line-height: 1.45; color: var(--x-ink-2); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* the places inside this one: a strip of its collage, the name, what it holds */
.xp-kid-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.xp-kid-list > li { display: flex; }
.xp-kid {
  flex: 1; display: grid; grid-template-columns: 76px minmax(0, 1fr) 22px; align-items: center; min-height: 76px; overflow: hidden;
  background: var(--x-paper-2) var(--x-grain); color: var(--x-navy); text-decoration: none; border-radius: 4px; box-shadow: var(--x-shadow);
  transition: transform 0.18s, box-shadow 0.18s;
}
.xp-kid:hover { transform: translateY(-3px); box-shadow: var(--x-shadow-lift); }
.xp-kid:focus-visible { outline: 3px solid var(--x-navy); outline-offset: 3px; }
.xp-kid-art { align-self: stretch; display: block; }
.xp-kid-art .x-collage {
  -webkit-mask: var(--x-tear-r) right top / 8px 160px repeat-y, linear-gradient(#000 0 0) left top / calc(100% - 7px) 100% no-repeat;
  mask: var(--x-tear-r) right top / 8px 160px repeat-y, linear-gradient(#000 0 0) left top / calc(100% - 7px) 100% no-repeat;
}
.xp-kid-text { display: grid; gap: 2px; padding: 10px 6px 10px 12px; min-width: 0; }
.xp-kid-name { font: 600 18px/1.15 var(--serif); }
.xp-kid-native { font: italic 14px/1.2 var(--serif); color: var(--place-ink); }
.xp-kid-n { font-size: 12px; color: var(--x-ink-2); }
.xp-kid-go { display: inline-flex; color: var(--place-ink); }

/* its rhythm: the year, the day, a life — a coloured card each, with a small
   picture of what is inside (month dots, the hours on a clock, beads on a line) */
.xp-when-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.xp-when-list > li { display: flex; }
.xp-when-card {
  flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) 20px; align-items: center; gap: 14px;
  padding: 16px 14px 16px 16px; border-radius: 4px; text-decoration: none; color: var(--x-navy);
  background: var(--place-wash) var(--x-grain); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--place-mark) 40%, transparent);
  transition: transform 0.18s, box-shadow 0.18s;
}
.xp-when-card.is-day { background-color: var(--place2-wash); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--place2-mark) 40%, transparent); }
.xp-when-card.is-life { background-color: var(--x-paper-2); box-shadow: inset 0 0 0 1.5px var(--x-line); }
.xp-when-card:hover { transform: translateY(-3px) rotate(-0.4deg); box-shadow: var(--x-shadow-lift); }
.xp-when-card:focus-visible { outline: 3px solid var(--x-navy); outline-offset: 3px; }
.xp-when-pic { display: grid; place-items: center; width: 96px; min-height: 56px; }
.xp-when-art { display: block; width: 100%; height: auto; max-height: 64px; overflow: visible; }
.xp-when-art .is-on { fill: var(--theme-mark); stroke: var(--x-paper-2); stroke-width: 1.5; }
.xp-when-art .is-off { fill: none; stroke: var(--x-ink-2); stroke-width: 1.2; opacity: 0.55; }
.xp-clock-face { fill: var(--x-paper-2); stroke: var(--x-line); stroke-width: 6; }
.xp-clock-arc { fill: none; stroke: var(--theme-mark); stroke-width: 6; stroke-linecap: butt; }
.xp-clock-noon { fill: var(--x-red); }
.xp-bead-line { stroke: var(--x-ink-2); stroke-width: 1.5; opacity: 0.5; fill: none; }
.xp-when-text { display: grid; gap: 3px; min-width: 0; }
.xp-when-title { font: 600 19px/1.15 var(--serif); }
.xp-when-line { font-size: 13.5px; line-height: 1.4; color: var(--x-ink-2); }
.xp-when-n { font-size: 12px; font-weight: 700; color: var(--place-ink); }
.xp-when-card.is-day .xp-when-n { color: var(--place2-ink); }
.xp-when-go { display: inline-flex; color: var(--x-navy); transition: transform 0.15s; }
.xp-when-card:hover .xp-when-go { transform: translateX(3px); }

/* how it works: the place's infographics as coloured cards, one open in place */
.xp-hiw-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.xp-hiw-list > li { display: flex; }
.xp-hiw-card {
  flex: 1; position: relative; display: grid; align-content: start; gap: 4px; min-height: 150px; padding: 14px 14px 18px;
  border: 0; border-radius: 3px 3px 0 0; cursor: pointer; text-align: left; font: inherit;
  background: var(--theme-soft) var(--x-grain); color: var(--x-navy);
  -webkit-mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
  mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
  transition: transform 0.18s, background-color 0.18s;
}
.xp-hiw-list > li:nth-child(3n+2) .xp-hiw-card { -webkit-mask-position: -70px bottom, left top; mask-position: -70px bottom, left top; }
.xp-hiw-list > li:nth-child(3n) .xp-hiw-card { -webkit-mask-position: -150px bottom, left top; mask-position: -150px bottom, left top; }
.xp-hiw-card:hover { transform: translateY(-3px) rotate(-0.6deg); }
.xp-hiw-card[aria-expanded="true"] { background-color: var(--theme-fill); color: var(--theme-on); transform: none; }
.xp-hiw-card:focus-visible { outline: 3px solid var(--x-navy); outline-offset: -6px; }
.xp-hiw-art {
  display: grid; place-items: center; width: 58px; height: 46px; margin-bottom: 6px; border-radius: 4px;
  background: var(--x-paper-2); color: var(--theme-mark); transform: rotate(-3deg); box-shadow: 2px 2px 0 var(--theme-fill);
}
.xp-hiw-art svg { width: 48px; height: 38px; fill: currentColor; }
.xp-hiw-art .is-soft { fill: var(--theme-wash); stroke: currentColor; stroke-width: 1.5; }
.xp-hiw-art .is-route { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 4 3; stroke-linecap: round; }
.xp-hiw-art .is-ring { fill: none; stroke: currentColor; stroke-width: 3; }
.xp-hiw-card[aria-expanded="true"] .xp-hiw-art { box-shadow: 2px 2px 0 var(--x-navy); }
.xp-hiw-kind { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--x-navy); opacity: 0.8; }
.xp-hiw-card[aria-expanded="true"] .xp-hiw-kind { color: inherit; }
.xp-hiw-title { font: 600 17px/1.2 var(--serif); }
.xp-hiw-topic-name { font-size: 12.5px; opacity: 0.85; }
.xp-hiw-stage { display: grid; gap: 10px; scroll-margin-top: 16px; }
.xp-hiw-stage[hidden] { display: none; }
.xp-hiw-stage > .xw { margin: 0; }
.xp-hiw-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xp-hiw-topic {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--x-navy); font-weight: 600; font-size: 14px;
  text-decoration: underline; text-decoration-color: var(--theme-mark); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.xp-hiw-close {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%;
  background: var(--x-paper-2); color: var(--x-navy); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--x-line);
}
.xp-hiw-close:hover { box-shadow: inset 0 0 0 1.5px var(--x-navy); }
.xp-hiw-close:focus-visible, .xp-hiw-topic:focus-visible { outline: 2.5px solid var(--x-red); outline-offset: 2px; }
.xp-hiw-wait { margin: 0; padding: 14px 0; color: var(--x-ink-2); }

/* the pages whose text links here (prose.js mentionedIn) */
.xp > .xl-mentioned { margin: -12px 0 0; }

/* (c) where history and culture meet: a moment, a red thread, a custom */
/* its slot waits for the reader to come near: a line, not a gap of its own */
.xp-meet-slot, .xp-cited-slot { height: 1px; margin-top: -41px; }

/* what waits for a part of the place: the room it will take, in paper */
.xp-locator-wait { background: var(--x-paper-3); }
.xp-when-pic.is-waiting { min-height: 56px; border-radius: 4px; background: color-mix(in srgb, var(--x-paper-3) 55%, transparent); }
.xp-skel {
  min-height: 150px; border-radius: 12px; background: var(--x-paper-2);
  box-shadow: inset 0 0 0 1px var(--x-line);
}
.xp-pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.xp-pair { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); align-items: center; }
.xp-then, .xp-now { display: grid; gap: 3px; padding: 13px 18px 15px; text-decoration: none; border-radius: 3px; transition: transform 0.18s, box-shadow 0.18s; }
.xp-then { background: var(--era-fill) var(--x-grain); color: var(--era-on); transform: rotate(-0.7deg); }
.xp-now { background: var(--x-paper-2) var(--x-grain); color: var(--x-navy); box-shadow: var(--x-shadow); border-left: 7px solid var(--theme-mark); transform: rotate(0.5deg); }
.xp-then:hover, .xp-now:hover { transform: rotate(0deg) translateY(-2px); box-shadow: var(--x-shadow-lift); }
.xp-then:focus-visible, .xp-now:focus-visible { outline: 3px solid var(--x-navy); outline-offset: 3px; }
.xp-then-year { font: 700 24px/1 var(--serif); font-variant-numeric: tabular-nums; }
.xp-then-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.xp-then-date { font-size: 12px; }
.xp-thread { position: relative; height: 2px; margin: 0 6px; background: repeating-linear-gradient(90deg, var(--x-red) 0 7px, transparent 7px 12px); }
.xp-thread::before, .xp-thread::after { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--x-red); }
.xp-thread::before { left: -5px; }
.xp-thread::after { right: -5px; }
.xp-now-theme { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--theme-ink); }
.xp-now-name { font: 600 18px/1.2 var(--serif); }
.xp-now-native { font: italic 14.5px var(--serif); color: var(--theme-ink); }

/* (d) to read */
.xp-pieces { margin-top: 0; }
.xp-more { justify-self: start; }

/* (e) the places on either side */
.xp-neighbours { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 26px; border-top: 1.5px dashed var(--x-line); }
.xp-next {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: stretch; min-height: 84px; overflow: hidden;
  background: var(--x-paper-2) var(--x-grain); color: var(--x-navy); text-decoration: none; border-radius: 4px; box-shadow: var(--x-shadow);
  transition: transform 0.18s, box-shadow 0.18s;
}
.xp-next-next { grid-template-columns: minmax(0, 1fr) 104px; }
.xp-next-next .xp-next-art { order: 2; }
.xp-next-next .xp-next-text { text-align: right; justify-items: end; }
.xp-next:hover { transform: translateY(-3px); box-shadow: var(--x-shadow-lift); }
.xp-next:focus-visible { outline: 3px solid var(--x-navy); outline-offset: 3px; }
.xp-next-art { display: block; min-height: 84px; }
.xp-next-text { display: grid; align-content: center; gap: 3px; padding: 10px 16px; }
.xp-next-dir { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--x-red); }
.xp-next-text strong { font: 600 20px/1.15 var(--serif); }
.xp-tomap {
  grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
  color: var(--x-navy); font-weight: 600; font-size: 14.5px; text-decoration: underline; text-decoration-color: var(--x-red);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.xp-missing { display: grid; gap: 14px; justify-items: start; padding: 30px 0; max-width: 580px; }
.xp-missing p { margin: 0; color: var(--x-ink-2); }

/* on the dark theme a hero is the place's paper, not a lamp: the muted
   colour, cream ink (both pairs are in the contrast test) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .xp-hero, :root:not([data-theme="light"]) .xh-world { background-color: var(--place-soft); color: var(--x-navy); }
  :root:not([data-theme="light"]) :is(.xp-name, .xp-native, .xp-about, .xh-world .xh-card-count) { color: var(--x-navy); }
  :root:not([data-theme="light"]) :is(.xp-hero-art, .xh-world-art) .c-soft { fill: var(--place-wash); }
}
:root[data-theme="dark"] .xp-hero, :root[data-theme="dark"] .xh-world { background-color: var(--place-soft); color: var(--x-navy); }
:root[data-theme="dark"] :is(.xp-name, .xp-native, .xp-about, .xh-world .xh-card-count) { color: var(--x-navy); }
:root[data-theme="dark"] :is(.xp-hero-art, .xh-world-art) .c-soft { fill: var(--place-wash); }

/* ── a narrower page ─────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .xh-top { grid-template-columns: minmax(0, 1fr) minmax(250px, 0.9fr); }
}

@media (max-width: 760px) {
  /* one column: the words, the map, the places as the main list */
  .xh { gap: 26px; }
  .xh-top { display: contents; }
  .xh-head { order: 1; padding-top: 0; }
  .xh-plate { order: 2; }
  .xh-places { order: 3; }
  .xh-everywhere { order: 4; }
  .xh-along-pair { display: none; }
  .xh-cards { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow: visible; margin: 0; padding: 0; gap: 10px; }
  .xh-card { flex-direction: row; }
  .xh-card-art { width: 104px; height: auto; flex: none; }
  .xh-card-art .x-collage {
    -webkit-mask: var(--x-tear-r) right top / 8px 160px repeat-y, linear-gradient(#000 0 0) left top / calc(100% - 7px) 100% no-repeat;
    mask: var(--x-tear-r) right top / 8px 160px repeat-y, linear-gradient(#000 0 0) left top / calc(100% - 7px) 100% no-repeat;
  }
  .xh-card-body { flex: 1; padding: 11px 14px 12px 12px; gap: 4px; }
  .xh-card-name { font-size: 19px; }
  .xh-card:hover { transform: none; }
  .xm-label { font-size: 12.5px; min-height: 26px; padding: 3px 11px 4px 9px; gap: 5px; }
  .xm-swatch { width: 9px; height: 9px; }

  .xp { gap: 32px; }
  .xp-meet-slot, .xp-cited-slot { margin-top: -33px; }
  .xp-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "text"; padding: 0 20px 62px; gap: 18px; min-height: 0; }
  .xp-hero-art {
    position: relative; grid-area: art; width: auto; height: 132px; margin: 0 -20px;
    -webkit-mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
    mask: var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat;
  }
  .xp-locator { grid-area: art; align-self: end; width: 128px; margin-bottom: -16px; padding: 5px; justify-self: end; }
  .xp-name { font-size: 44px; }
  .xp-name.is-long { font-size: 34px; }
  .xp-lede-wrap { margin: -54px 8px 0 8px; }
  .xp-lede { padding: 16px 18px 24px; }
  .xp-lede-text { font-size: 16.5px; }
  .xp-lede-text.is-cut { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
  .xp-locator .xm-town-name { display: none; }
  .xp-head { grid-template-columns: minmax(0, 1fr); }
  .xp-head-act { justify-self: start; }
  .xp-bands { flex-direction: column; gap: 6px; }
  .xp-band-li { min-width: 0; }
  .xp-band {
    grid-template-columns: minmax(0, 1fr) 112px; grid-template-rows: auto auto auto; column-gap: 12px; min-height: 0;
    padding: 14px 12px 10px; border-radius: 0 3px 3px 0;
  }
  .xp-band-name, .xp-band-dates, .xp-band-n { grid-column: 1; }
  .xp-hist { grid-column: 2; grid-row: 1 / span 3; height: 52px; align-self: center; }
  .xp-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .xp-theme { min-height: 118px; }
  .xp-topics { grid-template-columns: minmax(0, 1fr); }
  .xp-pair { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .xp-thread { width: 2px; height: 26px; margin: 4px auto; background: repeating-linear-gradient(180deg, var(--x-red) 0 6px, transparent 6px 10px); }
  .xp-thread::before { left: -4px; top: -5px; }
  .xp-thread::after { left: -4px; right: auto; top: auto; bottom: -5px; }
  .xp-neighbours { grid-template-columns: minmax(0, 1fr); }
  .xp-kid-list, .xp-when-list { grid-template-columns: minmax(0, 1fr); }
  .xp-when-card { gap: 12px; padding: 14px 12px; }
  .xp-when-pic { width: 84px; }
  .xp-hiw-list {
    display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 10px; margin: 0 -16px; padding: 2px 16px 6px;
    scrollbar-width: none; scroll-padding: 0 16px;
  }
  .xp-hiw-list::-webkit-scrollbar { display: none; }
  .xp-hiw-list > li { flex: 0 0 168px; scroll-snap-align: start; }
  .xp-hiw-card { min-height: 158px; }
  /* on a phone the map is small: the open place's bar goes under it, off the names */
  .xm-bar { position: static; margin-top: 8px; }
  .xm-bar-back, .xm-bar-open { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .xp-next, .xp-next-next { grid-template-columns: 84px minmax(0, 1fr); }
  .xp-next-next .xp-next-art { order: 0; }
  .xp-next-next .xp-next-text { text-align: left; justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .xm-node, .xm-label, .xh-card, .xh-world, .xp-band, .xp-theme, .xp-topic, .xp-then, .xp-now, .xp-next,
  .xm-sub, .xp-kid, .xp-when-card, .xp-when-go, .xp-hiw-card { transition: none; }
  .xh-card:hover, .xh-card.is-chosen, .xh-world:hover, .xp-band:hover, .xp-theme:hover, .xp-topic:hover,
  .xp-then:hover, .xp-now:hover, .xp-next:hover, .xp-kid:hover, .xp-when-card:hover, .xp-hiw-card:hover, .xp-hiw-art { transform: none; }
  .xp-locator, .xp-lede, .xp-then, .xp-now { transform: none; }
}