/*
 * christmaselsewhere.com
 *
 * The palette is not a fresh decision. It is lifted from the channel's own
 * render theme (src/render/theme-christmas.js) so the site and the videos read
 * as one brand rather than two projects that share a name: deep aubergine
 * ground because almost every festival this channel covers happens after dark
 * in winter, warm white ink rather than blue-white, a serif display face, and
 * red present but never the ground and never the default accent — a red-and-
 * green Christmas palette is the single most templated look in the category.
 *
 * Type is a system serif stack for the same reason the video theme picked
 * Constantia: a checkout renders correctly with nothing installed, and a
 * visitor is not made to wait on a webfont to read a number that is counting
 * down in front of them.
 */

:root {
  --bg: #161320;
  --bg-lift: #211c2e;
  --bg-glow: #241e33;
  --ink: #f7f3ec;
  --ink-muted: #a79fb0;
  --ink-faint: #9e97ac;
  --rule: #322b42;

  /* Accents, one per observance. Contrast against --bg is asserted in
   * site/test/contrast.test.js — this file is not the place that decides
   * whether they are readable, the measurement is. */
  --lamp: #f5b23c;
  --frost: #6fb6d9;
  --ember: #f2764a;
  /* Added 11 Oct 2026 with the Ethiopian countdown. Without it that card fell
   * through to the default --lamp and wore the SAME amber as 25 December,
   * which on a page whose entire argument is "these are four different
   * answers" is the one collision that matters. 8.45:1 on --bg-lift. */
  --sage: #86c98a;

  --measure: 34rem;
  --serif: Constantia, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  /* A flat field this dark bands on 8-bit panels. The radial lift is the same
   * fix the video theme applies for the same reason. */
  background-image: radial-gradient(120% 80% at 50% 0%, var(--bg-glow) 0%, var(--bg) 62%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

.wrap { width: min(72rem, 100% - 2rem); margin-inline: auto; }
@media (min-width: 40em) { .wrap { width: min(72rem, 100% - 4rem); } }

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem 0 0;
  flex-wrap: wrap;
}

.wordmark {
  font-size: 1.0625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.wordmark .elsewhere { color: var(--lamp); }

.masthead p {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

/* ---------- the question ---------- */

.hero { padding: clamp(3rem, 9vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem); max-width: var(--measure); }

.hero h1 {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.hero .answer {
  margin: 1.25rem 0 0;
  font-size: clamp(1.125rem, 2.6vw, 1.4rem);
  color: var(--ink);
}
.hero .answer em { font-style: normal; color: var(--lamp); }

.hero .sub {
  margin: 1rem 0 0;
  font-size: 1rem;
  color: var(--ink-muted);
  max-width: 32rem;
}

/* ---------- the countdowns ---------- */

.observances {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  padding-bottom: 3rem;
}
/* One row of four from 72em, two-by-two below that, one column on a phone.
 *
 * It was `repeat(3, 1fr)` at a single breakpoint, written when there were
 * three observances. The fourth arrived on 11 Oct 2026 and a four-item
 * three-column grid orphans one: three across and Ethiopia alone underneath,
 * which the user saw immediately and which read as though that card were a
 * footnote rather than a fourth answer.
 *
 * The fix is not `repeat(4, 1fr)` at the old breakpoint — four cards carrying
 * a DD:HH:MM:SS counter do not fit across 56em, and the counter is the thing
 * being compared. So the steps go 1 -> 2 -> 4 and never 3, because a column
 * count that does not divide the cards is what produces an orphan. Two-by-two
 * is balanced at laptop width; four-across needs the room and now gets it. */
@media (min-width: 46em) {
  .observances { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 72em) {
  .observances { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

/* THE WHOLE BOX IS THE ACCENT, not just the top edge.
 *
 * The border was `1px solid var(--rule)` with an accent top rule, and the only
 * card that looked finished was whichever one `is-next` happened to be on --
 * because that state draws a 1px accent ring all the way round. Four answers
 * sat side by side with one of them outlined in its colour and three of them
 * in grey, which read as a ranking the page does not mean: the nearest date is
 * the nearest date, not the most important answer.
 *
 * So every card gets the ring, in its own colour, and `is-next` has to say
 * "soonest" some other way -- see below. */
.observance {
  --accent: var(--lamp);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-lift);
  border: 1px solid var(--accent);
  border-top: 3px solid var(--accent);
  border-radius: 3px;
  padding: 1.5rem 1.5rem 1.25rem;
}
.observance[data-id="december-25"]         { --accent: var(--lamp); }
.observance[data-id="january-7"]           { --accent: var(--frost); }
.observance[data-id="january-6"]           { --accent: var(--ember); }
.observance[data-id="january-7-ethiopian"] { --accent: var(--sage); }

/* The countdown is the thing being compared, so the counters have to sit on
 * one line across the cards. Titles and attributions run to one line or two
 * depending on the entry, which walks the numbers out of alignment. The
 * heading block is therefore reserved at its tallest, and only once the cards
 * are actually side by side.
 *
 * Said "the three counters ... the three cards" until 11 Oct 2026, when a
 * fourth observance arrived. A comment that counts its subject is a claim
 * about its neighbours, and nothing checks it -- the same way the Armenian
 * card's blurb said "the oldest answer of the three" and was falsified by an
 * edit elsewhere in another file on the same afternoon. */
.observance h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--accent);
}

.kept-by {
  margin: 0.4rem 0 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

/* The reserve begins where the cards begin to sit side by side, which moved
 * from 56em to 46em with the two-column step. And it GROWS at four across:
 * "29 Tahsas, on the Ethiopian calendar" is the longest title here and wraps
 * to three lines in a quarter-width card where it took two in a third. */
@media (min-width: 46em) {
  .observance h2 { min-height: 2.4em; }
  .kept-by { min-height: 2.9em; }
}
@media (min-width: 72em) {
  .observance h2 { min-height: 3.6em; }
}

/* The nearest date, marked by the script.
 *
 * Still colour and a hairline only: anything that changes the box SIZE would
 * shift the layout the moment one countdown overtakes another, which happens
 * while somebody is reading the page.
 *
 * What changed on 11 Oct 2026 is that the accent ring stopped being the
 * marker, because every card now wears one. The ring is still drawn -- outside
 * the border it doubles the accent edge to 2px -- and it is joined by a lifted
 * ground and the drop shadow, so "soonest" reads as RAISED rather than as
 * "the only one that is coloured in". Neither touches the box model. */
.observance.is-next {
  background: var(--bg-glow);
  box-shadow: 0 0 0 1px var(--accent), 0 14px 34px -22px #000;
}

/* The counter. Tabular figures so the digits do not jitter every second —
 * a proportional 1 is narrower than a 0 and the whole line twitches. */
.counter {
  margin: 1.25rem 0 0;
  display: flex;
  gap: 1.1rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.counter > div { display: flex; flex-direction: column; }
.counter .n {
  font-size: clamp(1.9rem, 4.6vw, 2.5rem);
  line-height: 1;
  color: var(--ink);
}
.counter .u {
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.counter[hidden] { display: none; }

.falls-on {
  margin: 0.9rem 0 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.falls-on strong { color: var(--ink); font-weight: 600; }

/* Shown when the visitor's clock lands on the day itself. */
.today {
  margin: 1.25rem 0 0;
  font-size: 1.6rem;
  color: var(--accent);
}

.blurb {
  margin: 1.1rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--ink);
}

/* ---------- what the dataset actually holds ---------- */

.countries {
  margin-top: auto;
  padding-top: 1.25rem;
}
.countries h3 {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.countries ul { margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.countries li { display: inline; }
.countries li + li::before { content: " · "; color: var(--ink-faint); }

/* The empty case is a sentence, not a blank. A countdown with no researched
 * country under it is early, and saying so is better than leaving a gap that
 * reads as broken. */
.countries .none {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* ---------- sources ---------- */

.sources { margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.sources > summary {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  cursor: pointer;
}
.sources > summary:hover { color: var(--ink); }
.sources ol { margin: 0.75rem 0 0; padding-left: 1.1rem; }
.sources li { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-muted); margin-bottom: 0.6rem; }
.sources cite { font-style: normal; color: var(--ink); }
.sources .note { display: block; margin-top: 0.2rem; color: var(--ink-faint); }

a { color: var(--frost); }
a:hover { color: var(--ink); }
.observance a { color: inherit; text-decoration-color: var(--ink-faint); }

/* ---------- foot ---------- */

.colophon {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 4rem;
  max-width: var(--measure);
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.colophon h2 {
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.colophon p { margin: 0 0 0.9rem; }
.colophon p:last-child { margin-bottom: 0; }

.stale {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--ember);
  background: var(--bg-lift);
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--ink);
}

noscript .falls-on { display: block; }

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

/* =========================================================================
   Country pages — /japan/
   ========================================================================= */

.country-head { padding: clamp(2rem, 6vw, 3.5rem) 0 clamp(1.5rem, 4vw, 2.5rem); }

.eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.eyebrow a { color: var(--ink-muted); text-decoration-color: var(--rule); }
.eyebrow a:hover { color: var(--lamp); }

.country-head h1 {
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* The fact strip. Definition list because that is what it is: the record's
 * country-level fields, each with the qualifier that keeps it honest — the
 * calendar beside the date, the source beside the day-off answer. */
.facts {
  margin: 1.75rem 0 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
@media (min-width: 46em) { .facts { grid-template-columns: repeat(2, 1fr); } }

.fact { background: var(--bg-lift); padding: 0.95rem 1.15rem; }
.fact dt {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.fact dd { margin: 0.3rem 0 0; font-size: 1.0625rem; color: var(--ink); }
.fact .qualifier {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-muted);
}
.fact .qualifier cite { font-style: normal; }

/* The inline countdown. Same script as the home page, flatter presentation:
 * on a country page the number is a detail, not the headline. */
.country-countdown {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--lamp);
  border-radius: 3px;
  background: var(--bg-lift);
}
.country-countdown .counter { margin-top: 0; }
.country-countdown .counter .n { font-size: clamp(1.5rem, 3.5vw, 1.9rem); }
.country-countdown .falls-on { margin-top: 0.7rem; }
.country-countdown .today { margin: 0; font-size: 1.4rem; color: var(--lamp); }

/* ---------- bands ---------- */

.band { padding: clamp(2rem, 5vw, 3rem) 0; border-top: 1px solid var(--rule); }

.band > h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 400;
  color: var(--lamp);
}

.band > .lead {
  margin: -0.5rem 0 1.5rem;
  max-width: var(--measure);
  font-size: 1rem;
  color: var(--ink-muted);
}

/* ---------- claims ---------- */

.claims { display: grid; gap: 1.25rem; }
@media (min-width: 52em) { .claims { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }

.claim {
  background: var(--bg-lift);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
}
.claim h3 {
  margin: 0 0 0.6rem;
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}
.claim h3 .local { color: var(--ink-muted); font-size: 0.9em; }
.claim p { margin: 0; font-size: 0.9375rem; line-height: 1.62; }

.claim-source {
  margin-top: auto;
  padding-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.claim-source cite { font-style: normal; color: var(--ink-muted); }
.claim-source a { color: var(--ink-muted); text-decoration-color: var(--rule); }
.claim-source a:hover { color: var(--frost); }
.claim p + .claim-source { margin-top: 1rem; }

/* ---------- misattributions ---------- */

/* Given the most visual weight on the page, because correcting a widely
 * repeated claim is what this project can do that a listicle cannot. The
 * verdict is a word, never a tick or a cross: the schema is emphatic that this
 * is not a boolean, and a red X would assert a certainty the evidence for
 * "unsupported" does not carry. */
.myth { border-left: 3px solid var(--ember); }

.verdict {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ember);
  margin: 0 0 0.5rem;
  cursor: help;
}
.myth[data-verdict="contested"] { border-left-color: var(--frost); }
.myth[data-verdict="contested"] .verdict { color: var(--frost); }
.myth[data-verdict="unsupported"],
.myth[data-verdict="false"] { border-left-color: var(--berry); }
.myth[data-verdict="unsupported"] .verdict,
.myth[data-verdict="false"] .verdict { color: var(--berry); }

.myth h3 { color: var(--ink-muted); font-size: 1.0625rem; line-height: 1.45; }
.what-is-true { margin-top: 0.75rem !important; }
.what-is-true strong { color: var(--ink); font-weight: 600; }

/* ---------- greetings ---------- */

.greetings { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 52em) { .greetings { grid-template-columns: repeat(2, 1fr); } }
.greetings li {
  background: var(--bg-lift);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.25rem 1.35rem;
}
.greeting-text { margin: 0; font-size: 1.75rem; line-height: 1.3; color: var(--lamp); }
.greeting-roman { margin: 0.35rem 0 0; font-size: 1.0625rem; color: var(--ink); }
.greeting-say {
  margin: 0.5rem 0 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--frost);
}
.greeting-note {
  margin: 0.7rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ---------- the reference list ---------- */

.source-list { margin: 0; padding-left: 1.3rem; max-width: 46rem; }
.source-list li {
  margin-bottom: 0.9rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.source-list cite { font-style: normal; color: var(--ink); }
.source-list .note { display: block; margin-top: 0.25rem; color: var(--ink-faint); font-size: 0.8125rem; }

body.country .colophon { border-top: 1px solid var(--rule); }

/* =========================================================================
   Prose pages — /about/, 404
   ========================================================================= */

.standfirst {
  margin: 1.5rem 0 0;
  max-width: var(--measure);
  font-size: clamp(1.0625rem, 2.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-muted);
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.68; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; color: var(--ink); }

.prose .contact { font-family: var(--sans); font-size: 0.9375rem; }

.plain-links { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.plain-links li { margin-bottom: 0.7rem; font-size: 1.0625rem; }
.plain-links a { color: var(--lamp); text-decoration-color: var(--rule); }
.plain-links a:hover { color: var(--ink); }

/* The foot navigation, on every page. Small, and the only place other than the
 * wordmark that moves a visitor between sections. */
.site-foot {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.site-foot a { color: var(--ink-muted); text-decoration: none; }
.site-foot a:hover { color: var(--lamp); text-decoration: underline; }

body.prose-page .band:first-of-type { border-top: none; }

/* ---------- the map ---------------------------------------------------- *
 *
 * Drawn at build time as ~180 <path> elements. There is no script here and no
 * tile server: what the browser gets is a picture, so the map cannot fail to
 * load and a crawler reads it as readily as a person does.
 *
 * It is allowed to break out of --measure. Every other page on this site is
 * held to a reading width because it is prose; a world map held to 34rem would
 * be a postage stamp, and this one was asked to be big.
 */
.mapwrap {
  margin: 0 0 2.5rem;
  max-width: none;
}
.worldmap {
  display: block;
  width: 100%;
  height: auto;
  /* The ocean. Barely lifted off the page ground -- enough that the world
   * reads as a shape rather than as scattered islands, not so much that it
   * competes with the lit countries. */
  background: var(--bg-lift);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

/* Every country. The hairline stroke is the page ground, so borders read as
 * gaps between shapes rather than as drawn lines -- countries that share the
 * lit colour still separate from each other. */
.worldmap .c {
  stroke: var(--bg);
  stroke-width: 0.6;
  stroke-linejoin: round;
  fill: #443c60;
}

/* ---------- continents, drawn as outlines -------------------------------
 *
 * The countries all share one fill. What separates a continent is the colour of
 * its BORDERS.
 *
 * Shading the fills was tried first and did not work: six lightness steps on a
 * dark ground read as one field of purple, and pushing them far enough apart to
 * register would have put a pale continent in competition with the gold that
 * means "we have covered this". Colour on this map already carries a claim, so
 * grouping had to be said some other way.
 *
 * Borders say it without touching that budget. Every internal line inside a
 * continent shares a hue, so the continent reads as one object, and the lit
 * countries keep the whole of the colour to themselves.
 */
.worldmap .c { stroke-width: 0.9; }
.worldmap .rg-europe .c { stroke: #7a6fac; }
.worldmap .rg-asia .c { stroke: #6284ab; }
.worldmap .rg-africa .c { stroke: #96738f; }
.worldmap .rg-north-america .c { stroke: #6b9392; }
.worldmap .rg-south-america .c { stroke: #85855f; }
.worldmap .rg-oceania .c { stroke: #8f7a70; }
.worldmap .rg-seven-seas-open-ocean .c { stroke: #6284ab; }

/* THE FILL IS THE CALENDAR.
 *
 * Settled 11 Oct 2026. The map spent the morning coloured by coverage -- which
 * countries have a page, which also have a film -- and that is a progress bar
 * about us, painted onto a map of the world. This site calls itself an atlas
 * of how Christmas is actually kept, so WHEN a country keeps it is the atlas
 * content and coverage is the metadata.
 *
 * One class per observance, and the colours are the SAME ones the countdown
 * cards wear, deliberately: the card for 7 January and the countries that keep
 * it are now the same yellow-blue-orange-green language on two pages. A reader
 * who has seen the cards can read the map without the legend.
 *
 * These selectors are written out rather than generated because CSS cannot
 * read observances.json. The test in site/test/map.test.js asserts that every
 * observance HAS a fill here and that no two share one, so a fifth answer
 * arriving with no colour fails the build rather than rendering as the unlit
 * grey. */
.worldmap .c-obs-december-25         { fill: var(--lamp); }
.worldmap .c-obs-january-7           { fill: var(--frost); }
.worldmap .c-obs-january-6           { fill: var(--ember); }
.worldmap .c-obs-january-7-ethiopian { fill: var(--sage); }

/* Researched, and Christmas is not kept. `christmas.date === null`, which the
 * schema allows on purpose and which a coverage map could only ever paint
 * "done" -- the opposite of what it means. Empty today. Deliberately not one
 * of the four accents and deliberately not the unlit grey either: it is an
 * answer, and the answer is none of the above. */
.worldmap .c-undated { fill: #6b6480; }

/* A film whose page is not written yet. Muted on purpose -- it is a temporary
 * state that should empty out, and it must not read as a fifth calendar. */
.worldmap .c-episode { fill: var(--ink-faint); }

/* The film mark: a DOT, not a ring.
 *
 * The locator ring already means "this country is too small to see, look
 * here", and this file's own history records that a ring on every covered
 * country was removed for competing with the colour. One shape with two
 * meanings is how a legend stops being read, so coverage gets a filled dot
 * and the near-black ground colour, which reads on all four accents. */
.worldmap .filmdot {
  fill: var(--bg);
  stroke: var(--ink);
  stroke-width: 0.5;
  pointer-events: none;
}

/* Nothing changes under the pointer except the cursor.
 *
 * Hover used to brighten every country in the continent. With two countries
 * covered that read as helpful; with forty it would be a map that flashes
 * whenever the mouse crosses it, and the thing flashing would be precisely the
 * countries that are NOT covered -- competing with the ones that are. */
.worldmap .zoomer { cursor: zoom-in; }
/* A country with a page is a link. Focus is styled as visibly as hover --
 * these are the only links on the site a keyboard reaches without any text. */
.worldmap a .c { transition: fill 120ms ease-out; }
.worldmap a:hover .c,
.worldmap a:focus .c {
  fill: #ffd27a;
  stroke: var(--ink);
  stroke-width: 1.2;
}
.worldmap a:focus { outline: none; }


.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  padding: 0.9rem 0 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.legend .key { display: inline-flex; align-items: center; gap: 0.5rem; }
.legend .sw {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 2px;
  background: #38314c;
  border: 1px solid var(--rule);
}
.legend .sw-obs-december-25         { background: var(--lamp);  border-color: var(--lamp); }
.legend .sw-obs-january-7           { background: var(--frost); border-color: var(--frost); }
.legend .sw-obs-january-6           { background: var(--ember); border-color: var(--ember); }
.legend .sw-obs-january-7-ethiopian { background: var(--sage);  border-color: var(--sage); }
.legend .sw-undated { background: #6b6480; border-color: #6b6480; }
.legend .sw-episode { background: var(--ink-faint); border-color: var(--ink-faint); }
/* The film key is the mark itself, not a colour: a dark disc on the card
 * ground, which is what it looks like sitting on a country. */
.legend .sw-filmdot {
  background: var(--bg);
  border-color: var(--ink);
  border-radius: 50%;
}
.legend b {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
}

/* The map page gets a wider column than the rest of the site. Prose stays
 * readable because every block of text here is capped at --measure
 * independently -- it is the picture that is allowed to grow, not the
 * sentences. A breakout with negative margins was the alternative and it
 * brings a horizontal scrollbar wherever a scrollbar is already showing. */
body.mappage .wrap { width: min(90rem, 100% - 2rem); }

.map-head { padding: 2.5rem 0 1.25rem; }
.map-head .standfirst { max-width: var(--measure); }

/* ---------- the map's continent zoom ----------------------------------- *
 *
 * The transforms themselves are generated per page, because they are measured
 * from the geometry. What lives here is only the behaviour they share.
 *
 * No JavaScript. `:has()` lets a hovered continent group transform its parent,
 * and `:target` makes the chips work by changing the URL, which also means a
 * zoomed view is a link somebody can send to somebody else. A browser without
 * :has() support simply shows the whole world, which is the same thing it
 * showed before this existed.
 */
.worldmap .world {
  transform-box: view-box;
  transform-origin: 0 0;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .worldmap .world { transition: none; }
}

/* The chips. A continent is also reachable by keyboard this way, which the
 * hover behaviour alone never is, and by touch, which has no hover at all. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
}
.chips .chip {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-muted);
  text-decoration: none;
  transition: border-color 120ms, color 120ms;
}
.chips .chip:hover,
.chips .chip:focus-visible {
  color: var(--bg);
  background: var(--lamp);
  border-color: var(--lamp);
}

/* The zoom anchors. Empty spans beside the chips rather than ids on the SVG
 * groups: a fragment pointing INTO the drawing makes the browser scroll that
 * shape into view, which shoved the map half off the screen every time a chip
 * was clicked. Anchoring beside the controls scrolls to the controls. */
.chips .zt {
  display: inline;
  scroll-margin-top: 5rem;
}

/* The masthead nav.
 *
 * Added because the only route to the map was a link in the footer, below a
 * page that is deliberately long -- the countdown wants room. A section nobody
 * can find is a section that does not exist, and this one is the reason several
 * of the country pages get visited at all. */
.masthead .top-nav {
  display: flex;
  gap: 1.1rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.masthead .top-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.masthead .top-nav a:hover,
.masthead .top-nav a:focus-visible {
  color: var(--lamp);
  border-bottom-color: var(--lamp);
}
@media (max-width: 34em) {
  .masthead { flex-wrap: wrap; row-gap: 0.6rem; }
  .masthead .top-nav { width: 100%; }
}

/* ---------- the map and the covered list, as one block ------------------- *
 *
 * One row from 64em, stacked below it. The map column is allowed to take the
 * width it had on its own; the list takes a sidebar and no more, because a
 * list of country names set across 40rem is a line of text with a lot of
 * nothing after it.
 *
 * `align-items: start` matters: without it the list stretches to the map's
 * height and its hairline rules space out to fill it, which looks like a
 * table of contents for something missing.
 */
.atlas-intro {
  max-width: 42rem;
  margin: 0 auto 2.5rem;
}
@media (min-width: 64em) {
  .atlas-intro {
    display: grid;
    max-width: 60rem;
    grid-template-columns: minmax(0, 2.3fr) minmax(13rem, 1fr);
    gap: 2rem;
    align-items: start;
  }
}

/* ---------- the teaser map on the home page ----------------------------- */
.teaser {
  display: block;
  /* A preview, not the map. Full width it stood 550px tall and stopped being a
   * pointer at something else -- it became the thing itself, halfway down the
   * page it was meant to lead away from. */
  max-width: 42rem;
  margin: 0 auto 2.5rem;
  padding: 1rem 1rem 0.75rem;
  background: var(--bg-lift);
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 140ms;
}
.teaser:hover,
.teaser:focus-visible { border-color: var(--lamp); }
.teasermap {
  background: none;
  border: none;
  border-radius: 0;
  width: 100%;
  height: auto;
}
/*
 * NO FILL HERE. This rule set one, and that is why the teaser was grey.
 *
 * `.teasermap .c` and `.worldmap .c-obs-january-7` have the same specificity,
 * and this rule is 200 lines further down the file, so it won for every
 * country on the home page -- the teaser emitted the right classes, the
 * stylesheet gave each of them a colour, and a blanket fill further down
 * painted over all of it. The gate that reads the data against the stylesheet
 * could not see it; neither could the one that reads the rendered classes
 * against the stylesheet, because the fill it looked for was genuinely there.
 * Only the CASCADE was wrong, so site/test/map.test.js now checks the order
 * too.
 *
 * The teaser keeps a thinner stroke, because 420 units wide is a third of the
 * atlas and a 0.9 hairline closes the small countries up. The colours are the
 * atlas's, on purpose: the teaser is a thumbnail of the page it links to, and
 * a thumbnail in a different palette is a thumbnail of something else. */
.teasermap .c { stroke-width: 0.5; }
.teaser-say {
  display: block;
  padding-top: 0.6rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.teaser:hover .teaser-say,
.teaser:focus-visible .teaser-say { color: var(--lamp); }

/* ---------- the rule across the top ------------------------------------- *
 *
 * The user asked about a Christmas-motif banner running the full width. This is
 * the small version of that idea, and it is here instead of a banner for a
 * reason: a decorated band is the single change most likely to make a sourced
 * reference site read as a seasonal clip-art page, and it would push the
 * countdown — the reason anyone visits — down on every screen.
 *
 * What it is: five pixels, drawn in CSS, no image and no request, edge to edge
 * because that was the part of the idea worth keeping.
 *
 * WHY THREE COLOURS. They are the three countdown accents, in order — 25
 * December, 7 January, 6 January. The ornament is the site's own argument
 * rendered as a pattern rather than a generic festive motif, which is the
 * difference between a detail and a decoration. Anyone who reads the page finds
 * the three colours again under the three counters.
 */
body::before {
  content: '';
  display: block;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    var(--lamp) 0 16px,
    transparent 16px 22px,
    var(--frost) 22px 38px,
    transparent 38px 44px,
    var(--ember) 44px 60px,
    transparent 60px 66px
  );
  opacity: 0.8;
}

/* ---------- covered so far ---------------------------------------------- */
.covered {
  max-width: 42rem;
  /* The -1rem pulled it up under the teaser, from back when it sat directly
   * below one. It then spent a while at the bottom of the page still pulling
   * itself into whatever happened to be above it. Inside .atlas-intro the grid
   * sets the spacing, so the negative margin is gone. */
  margin: 0 auto;
  font-family: var(--sans);
}
/* In the row, neither child keeps its own outer spacing. */
.atlas-intro > .teaser { margin: 0 auto; }
@media (min-width: 64em) {
  .atlas-intro > .teaser { margin: 0; }
  .atlas-intro > .covered { max-width: none; }
}
/*
 * AND IT STAYS THE MAP'S SIZE AS IT GROWS.
 *
 * The user's worry about putting the list here was proportion: seven names
 * stand level with a 420-unit map, forty would run three times its height and
 * the map would read as a thumbnail bolted to a directory. The suggestion was
 * to roll the list, and this is the answer to the same problem without
 * motion -- see the note on .covered ul below for why not motion.
 *
 * `:has(li:nth-child(n))` lets the stylesheet count. Fifteen names split into
 * two columns, twenty-nine into three, and the block stops growing taller at
 * roughly the point where it would overrun the map. No script, no cutoff, and
 * nothing hidden from a reader or a crawler.
 *
 * NO MARQUEE, and not as a matter of taste. A list that moves moves the link
 * a reader is reaching for; it needs JavaScript, so it is blank for a crawler
 * and for anyone with scripting off; it needs a pause control to meet WCAG
 * 2.2.2; and it shows three names at a time when the list's entire job is to
 * answer "is my country here" at a glance. Columns answer the proportion
 * complaint and cost none of that.
 */
@media (min-width: 64em) {
  .covered ul:has(li:nth-child(15)) { columns: 2; column-gap: 1.5rem; }
  .covered ul:has(li:nth-child(29)) { columns: 3; }
  .covered ul:has(li:nth-child(15)) li { break-inside: avoid; }
}
.covered h2 {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.6rem;
}
/* When the newest page appeared. A visitor cannot tell a site that publishes
 * slowly from one that stopped, and from outside the two look identical. */
.covered .recent {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.covered .recent strong { color: var(--ink); font-weight: 600; }
.covered ul { list-style: none; margin: 0; padding: 0; }
.covered li {
  padding: 0.45rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.covered a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.covered a:hover, .covered a:focus-visible { color: var(--lamp); border-bottom-color: var(--lamp); }
.covered .q {
  display: inline;
  margin-left: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* Stacked on a tablet, the list has the full width to spend, so it spends it
 * sideways rather than running down the page. */
@media (min-width: 46em) and (max-width: 63.99em) {
  .covered ul { columns: 14rem; column-gap: 2rem; }
  .covered li { break-inside: avoid; }
}

/*
 * ON A PHONE IT IS A LINE OF NAMES, NOT A STACK OF ROWS.
 *
 * MEASURED, because the first version of this move was wrong and only a
 * measurement said so. Pairing the list with the map puts it above the
 * countdowns on a phone as well, and as a column of hairline-ruled rows it
 * stands 339px tall -- which pushed the first counter from 806px down the page
 * to 1145px, off the first screen on a 812pt phone. This file's own note on
 * the teaser says the counter has to survive being second; a third of a
 * screen of country names is how it stops surviving.
 *
 * The user had checked the phone and said the list was fine where it was. It
 * was, and this is why: the gain from moving it is a desktop gain, and the
 * cost of moving it is a phone cost. So the position moves and the FORM
 * changes with it -- seven names run as one wrapped line, which costs about a
 * third of what the rows did and leaves the counter where it was.
 *
 * Nothing is hidden. Every name is still a link, still in the markup, still
 * in alphabetical order, and a crawler reads exactly the same list.
 */
@media (max-width: 45.99em) {
  .covered ul { display: flex; flex-wrap: wrap; align-items: baseline; }
  .covered li {
    padding: 0.1rem 0;
    border-top: 0;
    font-size: 0.875rem;
  }
  /* A separator, not a bullet: it is punctuation between names on one line,
   * so it belongs to the name before it and disappears after the last. */
  .covered li:not(:last-child)::after {
    content: '·';
    padding: 0 0.45rem;
    color: var(--ink-faint);
  }
  /* The one case that is a sentence rather than a name wraps as its own line
   * rather than breaking the run. */
  .covered li:has(.q) { flex-basis: 100%; }
}


/* ---------- the episode, at the top of a country page ------------------- *
 *
 * It used to be a sentence in the colophon, below the source list. That is
 * where you put something you are obliged to mention; this is something a
 * visitor came for. The page and the film are the same subject told twice. */
.watch {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: var(--measure);
  margin: 1.25rem 0 0;
  padding: 0.85rem 1.1rem;
  background: var(--bg-lift);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ember);
  border-radius: 3px;
  text-decoration: none;
  transition: border-color 140ms, background 140ms;
}
.watch:hover, .watch:focus-visible { background: var(--bg-glow); border-color: var(--ember); }
.watch-icon {
  flex: none;
  width: 0;
  height: 0;
  margin-left: 4px;
  border-left: 14px solid var(--ember);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.watch-text { display: flex; flex-direction: column; gap: 1px; }
.watch strong { font-family: var(--serif); font-size: 1.0625rem; color: var(--ink); }
.watch-sub { font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-muted); }

/* ---------- photographs on a country page ------------------------------- *
 *
 * One per section, and one banner. Not a gallery: the pages are read for what
 * they claim, and a picture is here where a picture genuinely helps -- what a
 * lechon looks like, what a parol looks like -- rather than as decoration
 * between paragraphs.
 *
 * The credit runs under every image, including the CC0 ones that need none in
 * law. A site arguing that its claims are traceable should say where its
 * pictures came from too.
 */
.shot {
  margin: 0 0 1.5rem;
  max-width: var(--measure);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: var(--bg-lift);
}
.shot figcaption {
  padding-top: 0.4rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.shot figcaption a { color: var(--ink-faint); }
.shot figcaption a:hover { color: var(--lamp); }

/* The banner sits above the title rather than behind it. Text over a photograph
 * is the contrast problem this project has already paid for twice on the video
 * side, and a readable caption is worth more than a masthead effect. */
.shot-wide {
  max-width: 44rem;
  margin: 1.5rem 0 0.5rem;
}
.shot-wide img {
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center 40%;
}
/* An upright photograph in a letterbox loses its subject's head -- the Santo
 * Nino de Cebu shipped decapitated. A taller frame, anchored at the top. */
.shot-upright img {
  aspect-ratio: 5 / 4;
  object-position: center top;
}
@media (min-width: 46em) {
  .shot-upright img { aspect-ratio: 16 / 9; }
}

/* ---------- the spoken greeting ----------------------------------------- *
 *
 * A native <audio> control. No script, nothing custom to get wrong, and it is
 * keyboard-operable and announced by a screen reader because the browser's own
 * control is. preload="none" means nothing downloads until somebody asks.
 */
.say {
  margin: 0.5rem 0 0.25rem;
}
.say audio {
  width: 100%;
  max-width: 20rem;
  height: 34px;
}
.say-what {
  margin: 0.35rem 0 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.say-what em { font-style: normal; color: var(--ink-muted); }
.say-what a { color: var(--ink-faint); }
.say-what a:hover { color: var(--lamp); }

/* ---------- the two index pages ---------------------------------------- *
 *
 * /countries/ and /myths/ are projections of the same records the country
 * pages are built from. They reuse .country-head, .band, .claim and .myth
 * rather than growing a parallel set, because two stylesheets for one kind of
 * object is how a site starts looking like two sites.
 */
.page-head .lead { max-width: 34rem; }
.page-head .tally {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink-muted);
}

/* Each correction is worth linking to on its own -- somebody arguing about the
 * Yule Lads wants to point at one paragraph, not at a page of eight. */
.myth-where {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.85rem !important;
  font-family: var(--sans);
  font-size: 0.8125rem;
}
.myth-where a { color: var(--ink-muted); text-decoration-color: var(--rule); }
.myth-where a:hover, .myth-where a:focus-visible { color: var(--lamp); }
.myth-where .permalink { text-decoration: none; opacity: 0.55; font-weight: 700; }
.myth-where .permalink:hover { opacity: 1; }
/* A correction arrived at from a link should be obvious on arrival. */
.myth:target { background: var(--bg-glow); box-shadow: 0 0 0 1px var(--rule); }

.country-index { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.country-row {
  padding: 1.25rem 0;
  border-top: 1px solid var(--rule);
}
.country-row:first-child { border-top: 0; }
.country-row h2 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.25rem, 3.5vw, 1.5rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.country-row h2 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.country-row h2 a:hover, .country-row h2 a:focus-visible {
  color: var(--lamp);
  border-bottom-color: var(--lamp);
}
.country-row p { margin: 0; font-family: var(--sans); font-size: 0.875rem; }
.country-row .row-facts { color: var(--ink); }
.country-row .row-facts .sep { color: var(--ink-faint); margin: 0 0.4em; }
.country-row .row-holds { color: var(--ink-muted); margin-top: 0.2rem; }
.country-row .row-meta {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}
.country-row .row-meta a { color: var(--frost); text-decoration-color: var(--rule); }

/* ---------- jump links, and the way on -------------------------------- *
 *
 * Both reviews noted that a country page ends in a citation list and leads
 * nowhere: the sources go off-site, the episode goes off-site, and nothing
 * carries a reader from one country to another, which is the one move this
 * site is actually good at.
 */
.jump {
  margin-top: 1.75rem;
  font-family: var(--sans);
}
.jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jump a {
  display: inline-block;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.1rem;
}
.jump a:hover, .jump a:focus-visible { color: var(--lamp); border-bottom-color: var(--lamp); }

.related {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) 0 0;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
}
.related h2 {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.6rem;
}
.related ul { list-style: none; margin: 0; padding: 0; }
.related li { padding: 0.45rem 0; border-top: 1px solid var(--rule); font-size: 0.9375rem; }
.related a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.related a:hover, .related a:focus-visible { color: var(--lamp); border-bottom-color: var(--lamp); }
.related .more {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}
.related .more a { color: var(--ink-muted); border-bottom: 0; text-decoration-color: var(--rule); }

/* The embed snippet. Monospace, wrapping, and selectable as one block --
 * a reader is going to drag across it and paste, so it must not be a
 * horizontal scroller inside a column they are already scrolling. */
.snippet {
  margin: 0.75rem 0 1.25rem;
  padding: 0.85rem 0.95rem;
  background: var(--bg-lift);
  border-left: 3px solid var(--lamp);
  overflow-x: auto;
}
.snippet code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-muted);
  white-space: pre-wrap;
  word-break: break-word;
}
.prose .small { font-size: 0.875rem; color: var(--ink-faint); }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  color: var(--ink);
}

/* ---------- a picture per dish ----------------------------------------- *
 *
 * "What is eaten" used to carry one photograph for the whole section, which
 * illustrated one dish and left the others bare -- and on the Philippines page
 * the section image was lechon crackling, cut for the episode, while the two
 * dishes the record actually lists are bibingka and puto bumbong. A picture of
 * something the section does not mention, at the top of the section.
 *
 * The image sits above the dish name rather than beside it: a food photograph
 * is the subject here, not an aside, and a floated thumbnail at phone width is
 * a column of three words next to a stamp.
 */
.claim-shot { padding-top: 0; }
.claim-shot .shot {
  margin: 0 0 0.9rem;
  width: 100%;
}
.claim-shot .shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.claim-shot .shot figcaption {
  margin-top: 0.4rem;
  font-size: 0.6875rem;
}
@media (min-width: 46em) {
  /* Two dishes side by side once there is room, so a page with five foods is
   * not five full-width photographs in a vertical stack. */
  .claims:has(.claim-shot) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    align-items: start;
  }
}

/* A generated picture says so where a credit would go. Set apart from a real
 * credit rather than styled to match it: the two are different claims, and a
 * reader skimming captions should be able to see which is which without
 * reading either. */
.shot figcaption.made {
  color: var(--ember);
  font-style: italic;
}

/* ---------- the episode link, with its thumbnail ------------------------ *
 *
 * The link was a line of text and a small triangle, which read as an
 * obligation rather than an offer. The episode is the other half of a country
 * page -- the same subject told once in pictures and once in prose -- and a
 * visitor should see which film they are being sent to before they go.
 *
 * The thumbnail is served from this site, not from i.ytimg.com. See
 * site/tools/pull-video-thumbs.js: an <img> pointing at Google is a request
 * from every visitor before they click anything, and the about page's promise
 * is that this site makes exactly one.
 */
.watch-thumbed {
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  flex-direction: column;
}
.watch-shot {
  position: relative;
  flex: none;
  display: block;
  background: var(--bg);
}
.watch-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* The play badge. Drawn rather than fetched, and deliberately not YouTube's
 * own mark: this is a link to a video, not an endorsement by a platform, and
 * their logo is a trademark we have no need to put on the page. */
.watch-play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgba(22, 19, 32, 0.78);
  border: 2px solid var(--ink);
  transition: background 140ms, transform 140ms;
}
.watch-play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-42%, -50%);
  width: 0;
  height: 0;
  border-left: 1rem solid var(--ink);
  border-top: 0.65rem solid transparent;
  border-bottom: 0.65rem solid transparent;
}
.watch-thumbed:hover .watch-play,
.watch-thumbed:focus-visible .watch-play {
  background: var(--ember);
  transform: translate(-50%, -50%) scale(1.06);
}
.watch-thumbed .watch-text {
  padding: 0.85rem 1.1rem;
  display: block;
}
@media (min-width: 34rem) {
  /* Side by side once there is room. Below that the thumbnail runs full width,
   * because a 7rem picture beside two lines of text is a postage stamp. */
  .watch-thumbed { flex-direction: row; align-items: center; }
  .watch-shot { width: 15rem; align-self: stretch; }
  .watch-shot img { height: 100%; aspect-ratio: auto; }
  .watch-play { width: 2.75rem; height: 2.75rem; }
  .watch-play::after { border-left-width: 0.85rem; border-top-width: 0.55rem; border-bottom-width: 0.55rem; }
}

/* ---------- the locator ring ------------------------------------------- *
 *
 * Only on a lit country too small to pick out of a world map -- Armenia draws
 * about nine units across on a map a thousand units wide. A ring on every
 * covered country was tried and removed, correctly: it competes with the
 * colour and multiplies badly. This fires on shapes below the resolution of
 * the map and on nothing else, so it stays rare by construction.
 *
 * Unfilled, so it points without hiding what it points at.
 */
.worldmap .locator {
  fill: none;
  stroke-width: 1.5;
  opacity: 0.85;
  pointer-events: none;
}
.worldmap .locator-episode { stroke: var(--lamp); }
.worldmap .locator-page { stroke: var(--frost); }

/* ---------- the myths index ---------- *
 *
 * Grouped by country since 11 Oct 2026. It was a flat run of boxes with the
 * country as the LAST line of each, which is unscannable at seventeen and
 * unusable at the fifty this is heading for. Grouping by VERDICT was the other
 * candidate and the data killed it: twelve of the seventeen are
 * "oversimplified", so one bucket would have held seventy per cent of it. */
.myth-group { margin: 0 0 2.5rem; }
.myth-group > h2 {
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.myth-group > h2 a { color: inherit; text-decoration-color: var(--ink-faint); }
.chips.myth-jump { margin-bottom: 1.75rem; }

/* The permalink was sharing its line with the country name; alone now, it
 * would sit in the middle of an empty row. */
.myth .myth-where { margin-top: 0.6rem; text-align: right; }

/* ---------- the corrections strip on the home page ---------- *
 *
 * Added 11 Oct 2026. The corrections lived only behind a nav link, so the
 * landing page never showed the thing this site is best at. Same argument
 * that moved the map above the countdown: the page claims to be an atlas and
 * showed a clock.
 *
 * Below the countdown, not above it. The map is already above the clock and a
 * third block there puts the counter below the fold on a phone. */
.myth-strip { padding-top: 0.5rem; }
.myth-strip > h2 {
  font-size: 1.35rem;
  font-weight: 400;
  margin: 0 0 1rem;
  color: var(--ink);
}
/*
 * COLOURED, because a heading that is also the only door has to look like one.
 *
 * --frost is not an arbitrary pick: it is the accent this strip's own "all
 * corrections" link already wears, so the top and bottom of the block are the
 * same colour and a reader who misses one finds the other. The underline is
 * drawn on the text rather than as a border so a wrapped heading keeps it on
 * both lines.
 *
 * The second half of the line stays muted on purpose. Colouring the whole
 * sentence would make the label and the aside look like one long link, and the
 * part worth clicking is the label.
 */
.myth-strip > h2 a {
  color: var(--frost);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--frost) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.myth-strip > h2 a:hover,
.myth-strip > h2 a:focus-visible { text-decoration-color: var(--frost); }
.myth-strip > h2 span { color: var(--ink-muted); }
.myth-strip .more {
  margin: 1.1rem 0 0;
  font-family: var(--sans);
  font-size: 0.9rem;
}
.myth-strip .more a { color: var(--frost); }