/*
 * 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;

  --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;
}
@media (min-width: 56em) {
  .observances { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.observance {
  --accent: var(--lamp);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-lift);
  border: 1px solid var(--rule);
  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); }

/* The countdown is the thing being compared, so the three counters have to sit
 * on one line across the three 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. */
.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);
}

@media (min-width: 56em) {
  .observance h2 { min-height: 2.4em; }
  .kept-by { min-height: 2.9em; }
}

/* The nearest of the three, marked by the script. Colour and a hairline only:
 * anything that changes the box size would shift the layout the moment a
 * countdown overtakes another, which happens while somebody is reading it. */
.observance.is-next { 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 lit tiers. Fill only -- covered beats located. */
.worldmap .c-episode { fill: var(--lamp); }
.worldmap .c-page { fill: var(--frost); }

/* 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-episode { background: var(--lamp); border-color: var(--lamp); }
.legend .sw-page { background: var(--frost); border-color: var(--frost); }
.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 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;
}
/* The teaser carries no continent groups, so its countries take the base tone
 * directly rather than inheriting a shade. */
.teasermap .c { fill: #454063; 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;
  margin: -1rem auto 2.5rem;
  font-family: var(--sans);
}
.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);
}

/* ---------- 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);
}