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