/* Atlas — tokens (see docs/EXPLORE-PHASE1-CONTRACT.md "Colour").

   The Atlas looks like cut paper: cream sheets with a little grain, torn
   edges, flat colour shapes, navy ink and a red accent (the Reel covers'
   look, carried into the app). Every colour on its pages comes from here.

   HUES COME FROM DATA. A place, an era, a culture theme and a history layer
   each have one hue (0–360, the hsl() hue wheel), set inline from the data:

     style="--place-h: 18; --place-h2: 212"   a place and its second colour (places.json areas)
     style="--era-h: 348"                     an era (periods.json, children ± 12°)
     style="--theme-h: 10"                    a culture theme (places.json categories)
     data-layer="political"                   a history layer (set below), or style="--layer-h: …"

   and everything inside that element uses the derived colours, never the
   hue itself:

     --{family}-fill   a solid colour to put text on, in --x-on (heroes, bands, a chosen chip)
     --{family}-on     the text on a fill (white on the light theme, near-black on the dark)
     --{family}-ink    the hue as text on paper (links, names, years)
     --{family}-mark   shapes with no text on them: map areas, pins, rules, bars (≥ 3:1)
     --{family}-soft   a mid-tone paper colour to put navy ink on (tiles, collage shapes)
     --{family}-wash   a pale tint behind ordinary text (asides, the inside of a card)

   families: place, place2 (the place's second colour), era, theme, layer.

   Why a recipe and not one lightness: the same hsl() lightness is a
   different brightness for every hue (yellow at 40% is far lighter than
   blue at 40%), so a fixed recipe either fails contrast on the yellows or
   turns the blues to ink. --{family}-c is how much lighter or darker a hue
   needs to be to read like the others (three cosines fitted to WCAG
   luminance), and each tier adds it, scaled, to its own lightness. The
   numbers are per theme, below; tests/js/explore-contrast.test.mjs checks
   every hue in the data — and the whole wheel — in both themes: 4.5:1 for
   text, 3:1 for marks.

   ⚠️ A custom property is worked out where it is declared, so the derived
   colours are recomputed on any element that sets a hue inline
   ([style*="--era-h"] below). Setting a hue from a stylesheet rule instead?
   Give that element the family's class too (.x-place, .x-era, .x-theme,
   .x-layer). */

:root {
  /* paper and ink */
  --x-paper: #f3ead8;       /* the page: cream */
  --x-paper-2: #fbf6ec;     /* a sheet laid on it: cards */
  --x-paper-3: #e7d9bd;     /* kraft: sunken, the land on a map (text on it: --x-ink-2, not --muted) */
  --x-sea: #dbe4df;
  --x-navy: #1e2a47;        /* ink */
  --x-ink-2: #4b5470;       /* quieter ink */
  --x-red: #b0302a;         /* the accent: eyebrows, the thread, one thing per screen */
  --x-on: #ffffff;          /* text on any --*-fill */
  --x-line: rgba(30, 42, 71, 0.16);
  --x-shadow: 0 1px 0 rgba(60, 40, 10, 0.08), 0 6px 16px -6px rgba(60, 40, 10, 0.22);
  --x-shadow-lift: 0 2px 0 rgba(60, 40, 10, 0.08), 0 14px 28px -10px rgba(60, 40, 10, 0.32);
  --x-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .27 0 0 0 0 .14 .3 0 0 0 -.11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --x-radius: 6px;

  /* the tiers: saturation, lightness, and how far the hue's own
     brightness moves it (× --{family}-c) */
  --xt-fill-s: 46%;  --xt-fill-l: 38.3%;  --xt-fill-k: 6.6%;
  --xt-ink-s: 55%;   --xt-ink-l: 33.1%;   --xt-ink-k: 9.7%;
  --xt-mark-s: 52%;  --xt-mark-l: 42.8%;  --xt-mark-k: 8.3%;
  --xt-soft-s: 50%;  --xt-soft-l: 60%;    --xt-soft-k: 11.3%;
  --xt-wash-s: 48%;  --xt-wash-l: 92%;    --xt-wash-k: 1.5%;

  /* the hues when nothing has set one: everywhere is navy and red */
  --place-h: 226;
  --place-h2: 356;
  --era-h: 210;
  --theme-h: 30;
  --layer-h: 210;

  --place-on: var(--x-on);
  --place2-on: var(--x-on);
  --era-on: var(--x-on);
  --theme-on: var(--x-on);
  --layer-on: var(--x-on);

  /* torn edges, as masks (.x-torn-*): a ragged line, tiled */
  --x-tear-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='12' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V6L240 6L234.6 11L229.2 9.2L223.9 11L219.1 11L213.6 11L206.7 11L200.6 11L193.9 11L188.1 11L183.4 7.9L177.3 6.6L171.6 8.5L166.7 9.9L162.3 10.9L154.2 10.8L149 9L145.1 10.5L140.6 6L134.5 6.9L129.6 6.2L121.8 11L115.5 11L110.5 6.5L105.5 7.2L100.3 11L95.1 9.6L87.1 11L80.8 11L73.9 11L67.8 6.9L60.3 11L54.5 11L50.6 10.6L43.6 8.4L38.9 9.8L32.2 6.4L26 4.4L18.8 1.6L12.6 3.5L8 1L0 6Z'/%3E%3C/svg%3E");
  --x-tear-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='12' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12H240V6L240 6L236.3 9.4L230.1 11L224.5 8.1L219 11L211.9 8.3L206.3 11L198.1 11L190.4 9.4L186.6 5.2L179.7 1L171.7 1L167.9 3.1L160.9 3.2L153.6 1L147.3 1L142.6 1L135.8 1.7L127.5 1L119.6 1L111.6 2.5L103.6 1L97.7 5.5L89.8 9.6L85 11L80.3 7L74.3 5L69.6 2.4L66 1.1L61.2 5.7L56.3 11L48.4 11L40.5 7.6L32.5 3.4L26 7.3L21.7 7.8L17.1 6.4L13.1 1L7.5 1L0 6Z'/%3E%3C/svg%3E");
  --x-tear-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='160' viewBox='0 0 8 160' preserveAspectRatio='none'%3E%3Cpath d='M8 0V160H4L4 160L4.6 155.3L1 150.5L1 144.8L1 141.3L1.8 134.5L1 131.4L1 128L3.7 124.5L7 117.9L7 112.5L7 109.4L6.3 103.6L3.3 97L1 90.9L3.1 86.2L1.9 82.2L3.4 76.3L5.6 71.2L7 68.1L7 63.6L7 58.6L7 53.5L6.5 49.8L6.9 46.1L7 39.3L7 34.1L7 30.5L7 26.7L7 20.3L7 13.3L4.8 9L7 4.3L4 0Z'/%3E%3C/svg%3E");
  --x-tear-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='160' viewBox='0 0 8 160' preserveAspectRatio='none'%3E%3Cpath d='M0 0V160H4L4 160L7 157.8L6.3 151.8L4.8 145.3L6 142L7 135.1L6.6 130.1L7 123.2L7 116.6L7 111.1L6.4 105.2L5.9 100.2L5.9 95.6L7 90.3L5.9 84.1L2.5 77.7L3 71.6L1 65L1 61.6L1 58.6L4.3 54.3L5 51L1.4 46.1L1 40.5L1 37.2L1 31.8L1.1 28.3L1.1 21.6L3.6 14.7L1.3 10.8L4.5 6.1L4 0Z'/%3E%3C/svg%3E");
}

/* the dark theme: charcoal paper, cream ink; the same hues, lighter */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --x-paper: #1a1713;
    --x-paper-2: #23201b;
    --x-paper-3: #2d2822;
    --x-sea: #172124;
    --x-navy: #f0e7d5;
    --x-ink-2: #c3b8a4;
    --x-red: #f08c7c;
    --x-on: #15120e;
    --x-line: rgba(240, 231, 213, 0.14);
    --x-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
    --x-shadow-lift: 0 2px 0 rgba(0, 0, 0, 0.3), 0 14px 28px -10px rgba(0, 0, 0, 0.75);
    --x-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .9 0 0 0 0 .8 .2 0 0 0 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --xt-fill-s: 46%;  --xt-fill-l: 51.2%;  --xt-fill-k: 10.6%;
    --xt-ink-s: 60%;   --xt-ink-l: 55.3%;   --xt-ink-k: 15.9%;
    --xt-mark-s: 46%;  --xt-mark-l: 48.5%;  --xt-mark-k: 10.2%;
    --xt-soft-s: 34%;  --xt-soft-l: 36.5%;  --xt-soft-k: 7.5%;
    --xt-wash-s: 26%;  --xt-wash-l: 17%;    --xt-wash-k: 2%;
  }
}
:root[data-theme="dark"] {
  --x-paper: #1a1713;
  --x-paper-2: #23201b;
  --x-paper-3: #2d2822;
  --x-sea: #172124;
  --x-navy: #f0e7d5;
  --x-ink-2: #c3b8a4;
  --x-red: #f08c7c;
  --x-on: #15120e;
  --x-line: rgba(240, 231, 213, 0.14);
  --x-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
  --x-shadow-lift: 0 2px 0 rgba(0, 0, 0, 0.3), 0 14px 28px -10px rgba(0, 0, 0, 0.75);
  --x-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .9 0 0 0 0 .8 .2 0 0 0 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --xt-fill-s: 46%;  --xt-fill-l: 51.2%;  --xt-fill-k: 10.6%;
  --xt-ink-s: 60%;   --xt-ink-l: 55.3%;   --xt-ink-k: 15.9%;
  --xt-mark-s: 46%;  --xt-mark-l: 48.5%;  --xt-mark-k: 10.2%;
  --xt-soft-s: 34%;  --xt-soft-l: 36.5%;  --xt-soft-k: 7.5%;
  --xt-wash-s: 26%;  --xt-wash-l: 17%;    --xt-wash-k: 2%;
}

/* ── the derived colours, per family ───────────────────────────────────────
   --{family}-c: the hue's brightness correction, about −1.4 … +1.4
   (cos(h − 288°) + 0.1·cos(2h − 112°) + 0.37·cos(3h − 358°)). The test
   reads these lines, so keep each one on its own line. */

:root, [style*="--place-h"], .x-place {
  --place-c: calc(cos((var(--place-h) - 288) * 1deg) + 0.1 * cos((2 * var(--place-h) - 112) * 1deg) + 0.37 * cos((3 * var(--place-h) - 358) * 1deg));
  --place-fill: hsl(var(--place-h) var(--xt-fill-s) calc(var(--xt-fill-l) + var(--xt-fill-k) * var(--place-c)));
  --place-ink: hsl(var(--place-h) var(--xt-ink-s) calc(var(--xt-ink-l) + var(--xt-ink-k) * var(--place-c)));
  --place-mark: hsl(var(--place-h) var(--xt-mark-s) calc(var(--xt-mark-l) + var(--xt-mark-k) * var(--place-c)));
  --place-soft: hsl(var(--place-h) var(--xt-soft-s) calc(var(--xt-soft-l) + var(--xt-soft-k) * var(--place-c)));
  --place-wash: hsl(var(--place-h) var(--xt-wash-s) calc(var(--xt-wash-l) + var(--xt-wash-k) * var(--place-c)));
  --place2-c: calc(cos((var(--place-h2) - 288) * 1deg) + 0.1 * cos((2 * var(--place-h2) - 112) * 1deg) + 0.37 * cos((3 * var(--place-h2) - 358) * 1deg));
  --place2-fill: hsl(var(--place-h2) var(--xt-fill-s) calc(var(--xt-fill-l) + var(--xt-fill-k) * var(--place2-c)));
  --place2-ink: hsl(var(--place-h2) var(--xt-ink-s) calc(var(--xt-ink-l) + var(--xt-ink-k) * var(--place2-c)));
  --place2-mark: hsl(var(--place-h2) var(--xt-mark-s) calc(var(--xt-mark-l) + var(--xt-mark-k) * var(--place2-c)));
  --place2-soft: hsl(var(--place-h2) var(--xt-soft-s) calc(var(--xt-soft-l) + var(--xt-soft-k) * var(--place2-c)));
  --place2-wash: hsl(var(--place-h2) var(--xt-wash-s) calc(var(--xt-wash-l) + var(--xt-wash-k) * var(--place2-c)));
}
:root, [style*="--era-h"], .x-era {
  --era-c: calc(cos((var(--era-h) - 288) * 1deg) + 0.1 * cos((2 * var(--era-h) - 112) * 1deg) + 0.37 * cos((3 * var(--era-h) - 358) * 1deg));
  --era-fill: hsl(var(--era-h) var(--xt-fill-s) calc(var(--xt-fill-l) + var(--xt-fill-k) * var(--era-c)));
  --era-ink: hsl(var(--era-h) var(--xt-ink-s) calc(var(--xt-ink-l) + var(--xt-ink-k) * var(--era-c)));
  --era-mark: hsl(var(--era-h) var(--xt-mark-s) calc(var(--xt-mark-l) + var(--xt-mark-k) * var(--era-c)));
  --era-soft: hsl(var(--era-h) var(--xt-soft-s) calc(var(--xt-soft-l) + var(--xt-soft-k) * var(--era-c)));
  --era-wash: hsl(var(--era-h) var(--xt-wash-s) calc(var(--xt-wash-l) + var(--xt-wash-k) * var(--era-c)));
}
:root, [style*="--theme-h"], .x-theme {
  --theme-c: calc(cos((var(--theme-h) - 288) * 1deg) + 0.1 * cos((2 * var(--theme-h) - 112) * 1deg) + 0.37 * cos((3 * var(--theme-h) - 358) * 1deg));
  --theme-fill: hsl(var(--theme-h) var(--xt-fill-s) calc(var(--xt-fill-l) + var(--xt-fill-k) * var(--theme-c)));
  --theme-ink: hsl(var(--theme-h) var(--xt-ink-s) calc(var(--xt-ink-l) + var(--xt-ink-k) * var(--theme-c)));
  --theme-mark: hsl(var(--theme-h) var(--xt-mark-s) calc(var(--xt-mark-l) + var(--xt-mark-k) * var(--theme-c)));
  --theme-soft: hsl(var(--theme-h) var(--xt-soft-s) calc(var(--xt-soft-l) + var(--xt-soft-k) * var(--theme-c)));
  --theme-wash: hsl(var(--theme-h) var(--xt-wash-s) calc(var(--xt-wash-l) + var(--xt-wash-k) * var(--theme-c)));
}
:root, [style*="--layer-h"], .x-layer, [data-layer] {
  --layer-c: calc(cos((var(--layer-h) - 288) * 1deg) + 0.1 * cos((2 * var(--layer-h) - 112) * 1deg) + 0.37 * cos((3 * var(--layer-h) - 358) * 1deg));
  --layer-fill: hsl(var(--layer-h) var(--xt-fill-s) calc(var(--xt-fill-l) + var(--xt-fill-k) * var(--layer-c)));
  --layer-ink: hsl(var(--layer-h) var(--xt-ink-s) calc(var(--xt-ink-l) + var(--xt-ink-k) * var(--layer-c)));
  --layer-mark: hsl(var(--layer-h) var(--xt-mark-s) calc(var(--xt-mark-l) + var(--xt-mark-k) * var(--layer-c)));
  --layer-soft: hsl(var(--layer-h) var(--xt-soft-s) calc(var(--xt-soft-l) + var(--xt-soft-k) * var(--layer-c)));
  --layer-wash: hsl(var(--layer-h) var(--xt-wash-s) calc(var(--xt-wash-l) + var(--xt-wash-k) * var(--layer-c)));
}

/* the history layers have no file of their own to carry a hue, so they are
   here (server/history_build.py LAYERS) */
[data-layer="political"] { --layer-h: 350; }
[data-layer="society"] { --layer-h: 44; }
[data-layer="language"] { --layer-h: 198; }
[data-layer="literature"] { --layer-h: 226; }
[data-layer="religion"] { --layer-h: 272; }
[data-layer="arts"] { --layer-h: 306; }
[data-layer="economy"] { --layer-h: 96; }
[data-layer="migration"] { --layer-h: 172; }
[data-layer="science"] { --layer-h: 252; }

/* ── the paper ─────────────────────────────────────────────────────────────
   Shared pieces every Atlas page can use. */

/* a page of the Atlas: cream, with grain */
.x-paper {
  background-color: var(--x-paper);
  background-image: var(--x-grain);
  color: var(--text);
}
/* a sheet laid on the page */
.x-sheet {
  background-color: var(--x-paper-2);
  background-image: var(--x-grain);
  border-radius: var(--x-radius);
  box-shadow: var(--x-shadow);
}

/* torn edges. The shadow of a torn sheet goes on its parent
   (filter: drop-shadow), since a mask cuts its own away. */
.x-torn-b {
  -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;
}
.x-torn-t {
  -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;
}
.x-torn-tb {
  -webkit-mask: var(--x-tear-t) left top / 240px 12px repeat-x, var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left center / 100% calc(100% - 22px) no-repeat;
  mask: var(--x-tear-t) left top / 240px 12px repeat-x, var(--x-tear-b) left bottom / 240px 12px repeat-x, linear-gradient(#000 0 0) left center / 100% calc(100% - 22px) no-repeat;
}
.x-torn-lr {
  -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;
}

/* a torn cream strip with a label on it (the Reel covers' tag) */
.x-strip {
  display: inline-block; padding: 5px 16px 6px; transform: rotate(-1.2deg);
  background: var(--x-paper-2) var(--x-grain); color: var(--x-navy);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  -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;
}
.x-strip.is-red { background-color: var(--x-red); color: var(--x-on); }

/* small capitals in red over a heading */
.x-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--x-red);
}
.x-h1, .x-h2 { font-family: var(--serif); color: var(--x-navy); margin: 0; outline: none; }
.x-h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 600; line-height: 1.04; letter-spacing: -0.012em; }
.x-h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; line-height: 1.15; }

/* chips: a theme, an era, a layer. They take the theme's colour unless
   told otherwise (.by-place, .by-era, .by-layer) */
.x-chip {
  --c-fill: var(--theme-fill); --c-ink: var(--theme-ink); --c-wash: var(--theme-wash); --c-mark: var(--theme-mark); --c-on: var(--theme-on);
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px;
  border: 1.5px solid var(--c-mark); border-radius: 999px; background: var(--c-wash); color: var(--c-ink);
  font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.x-chip.by-place { --c-fill: var(--place-fill); --c-ink: var(--place-ink); --c-wash: var(--place-wash); --c-mark: var(--place-mark); --c-on: var(--place-on); }
.x-chip.by-era { --c-fill: var(--era-fill); --c-ink: var(--era-ink); --c-wash: var(--era-wash); --c-mark: var(--era-mark); --c-on: var(--era-on); }
.x-chip.by-layer { --c-fill: var(--layer-fill); --c-ink: var(--layer-ink); --c-wash: var(--layer-wash); --c-mark: var(--layer-mark); --c-on: var(--layer-on); }
.x-chip:hover { border-color: var(--c-fill); }
.x-chip[aria-pressed="true"], .x-chip[aria-current], .x-chip.is-on { background: var(--c-fill); border-color: var(--c-fill); color: var(--c-on); }
.x-chip:focus-visible { outline: 2.5px solid var(--x-navy); outline-offset: 2px; }
.x-chip .icon { flex: none; }

/* a pin: a dot of colour with a paper ring */
.x-pin {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: var(--place-mark); box-shadow: 0 0 0 2px var(--x-paper-2);
}
.x-pin.by-era { background: var(--era-mark); }
.x-pin.by-theme { background: var(--theme-mark); }
.x-pin.by-layer { background: var(--layer-mark); }

/* a rule: a short band of colour, as if cut with scissors */
.x-rule {
  display: block; height: 5px; width: 56px; border: 0; margin: 0; border-radius: 1px 3px 2px 1px;
  background: var(--place-mark); transform: rotate(-0.6deg);
}
.x-rule.by-era { background: var(--era-mark); }
.x-rule.by-theme { background: var(--theme-mark); }
.x-rule.is-red { background: var(--x-red); }

/* an era as a band of colour with its name on it */
.x-band { background: var(--era-fill); color: var(--era-on); }

/* a pale panel in a colour */
.x-wash { background: var(--place-wash); color: var(--text); }
.x-wash.by-era { background: var(--era-wash); }
.x-wash.by-theme { background: var(--theme-wash); }

/* buttons: navy ink, or a quiet outline */
.x-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--x-navy); color: var(--x-paper-2);
  font: inherit; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.x-btn:hover { background: var(--x-red); color: var(--x-on); }
.x-btn.is-ghost { background: transparent; color: var(--x-navy); box-shadow: inset 0 0 0 1.5px var(--x-line); }
.x-btn.is-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--x-navy); background: transparent; color: var(--x-navy); }
.x-btn:focus-visible { outline: 2.5px solid var(--x-red); outline-offset: 2px; }

/* a link inside Atlas prose: the colour of what it leads to */
.x-link { color: var(--x-navy); text-decoration: underline; text-decoration-color: var(--place-mark); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.x-link:hover { color: var(--place-ink); }

@media (prefers-reduced-motion: reduce) {
  .x-strip, .x-rule { transform: none; }
}