/* ==========================================================================
   Polaris News — design system

   Hand-written. No framework, no build step, no external fonts, no CDN.
   Organised as: tokens, base, layout, header, media, story components,
   sections, threads, article, footer, chrome, responsive.

   Type is serif for editorial voice and sans for interface. The distinction
   is load-bearing: if it is something a journalist wrote, it is serif; if it
   is something the system is telling you, it is sans.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces */
  --paper:        #fbfaf8;
  --surface:      #ffffff;
  --surface-sunk: #f2efe9;

  /* Ink */
  --ink:          #12161c;
  --ink-soft:     #4b5563;
  --ink-faint:    #858c96;

  /* Lines */
  --rule:         #e4e0d8;
  --rule-strong:  #cfc9bd;

  /* Brand */
  --accent:       #12567a;   /* northern blue */
  --accent-hover: #1a7ba8;
  --accent-wash:  #eaf2f7;
  --star:         #c9a227;   /* Polaris gold */
  --live:         #c8102e;   /* breaking / live */

  /* Type */
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-ui:      system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Metrics
     Fluid by default so the layout responds to any size rather than snapping
     between a handful of assumed device widths. Breakpoints below exist only
     where the STRUCTURE has to change, not to resize things. */
  --wrap:     78rem;          /* raised on very wide displays, see §14 */
  --measure:  38rem;          /* reading measure — never scales with viewport:
                                 a 200-character line is unreadable at any
                                 screen size. */
  --gutter:   clamp(0.65rem, 3vw, 2rem);
  --radius:   6px;

  /* Smallest comfortable card before a grid should drop a column. Used by the
     auto-fit grids, which is what makes them work at sizes nobody has built
     a device for yet. */
  --card-min: 15rem;

  --shadow:   0 1px 2px rgb(18 22 28 / 0.06), 0 8px 24px -12px rgb(18 22 28 / 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #0b0e13;
    --surface:      #141922;
    --surface-sunk: #10151d;
    --ink:          #eceae5;
    --ink-soft:     #a8b0bb;
    --ink-faint:    #6e7681;
    --rule:         #232a34;
    --rule-strong:  #333c48;
    --accent:       #6bb8dd;
    --accent-hover: #9ad6f2;
    --accent-wash:  #14202b;
    --star:         #e0c261;
    --live:         #ff5a6e;
    --shadow:       0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.6);
  }
}

:root[data-theme="dark"] {
  --paper:        #0b0e13;
  --surface:      #141922;
  --surface-sunk: #10151d;
  --ink:          #eceae5;
  --ink-soft:     #a8b0bb;
  --ink-faint:    #6e7681;
  --rule:         #232a34;
  --rule-strong:  #333c48;
  --accent:       #6bb8dd;
  --accent-hover: #9ad6f2;
  --accent-wash:  #14202b;
  --star:         #e0c261;
  --live:         #ff5a6e;
  --shadow:       0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.6);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

p { margin: 0; }
img, svg { max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* Headlines underline only on hover — the whole card is already a target,
   so a permanent underline would make the page look like a link farm. */
a.head:hover .head__text,
a:hover > .head__text { text-decoration: underline; text-underline-offset: 0.15em; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid { display: grid; gap: 1.75rem; }

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

/* Small-caps eyebrow used for kickers and section labels. */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.meta {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-faint);
  letter-spacing: 0.005em;
}

.meta__dot { margin-inline: 0.45rem; }

/* --------------------------------------------------------------------------
   4. Preview banner
   Removed when the site carries real reporting.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.utility {
  border-bottom: 1px solid var(--rule);
  background: var(--surface-sunk);
}

.utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.25rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.utility__links { display: flex; gap: 1.25rem; }
.utility__links a:hover { color: var(--accent); }

.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: clamp(1.65rem, 3.6vw, 2.3rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}

.wordmark__star {
  width: 0.72em;
  height: 0.72em;
  fill: var(--star);
  transform: translateY(0.02em);
}

.wordmark__polaris { color: var(--ink); }
.wordmark__news    { color: var(--accent); }

.masthead__right { display: flex; align-items: center; gap: 0.5rem; }

/* Section navigation ------------------------------------------------------ */

.sections {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.sections__inner {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.15rem;
}

.sections__inner::-webkit-scrollbar { display: none; }

.sections a {
  flex: none;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 0.7rem 0.75rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.sections a:hover { color: var(--ink); }

.sections a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. Placeholder media
   Real photography replaces .thumb entirely. Until then these are generated
   in CSS so the page pulls nothing from anywhere.
   -------------------------------------------------------------------------- */

.thumb {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 22%, rgb(255 255 255 / 0.32) 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 22% 68%, rgb(255 255 255 / 0.22) 0 0.7px, transparent 1.2px),
    linear-gradient(148deg,
      hsl(var(--hue, 203) 38% 30%) 0%,
      hsl(calc(var(--hue, 203) + 18) 44% 19%) 62%,
      hsl(calc(var(--hue, 203) + 30) 48% 13%) 100%);
  background-size: 120px 120px, 80px 80px, 100% 100%;
}

/* A faint North Star sits in every placeholder. */
.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L13.3 10.7 L22 12 L13.3 13.3 L12 22 L10.7 13.3 L2 12 L10.7 10.7 Z' fill='%23ffffff' fill-opacity='0.13'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 88% 78%;
  background-size: 2.75rem;
}

.thumb--tall  { aspect-ratio: 4 / 5; }
.thumb--wide  { aspect-ratio: 21 / 9; }
.thumb--square{ aspect-ratio: 1 / 1; }

/* A real photograph fills the frame and suppresses the generated star, which
   would otherwise sit on top of it. */
.thumb--photo::after { content: none; }

.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Article figures ---------------------------------------------------------
   A lead photograph is set to the text measure rather than full bleed, so a
   caption sits under it in the same column as the copy it belongs to. The
   credit is required by several of the licences we accept, so it is part of
   the component rather than something a template may forget.
   ------------------------------------------------------------------------ */

.figure {
  max-width: var(--measure);
  margin: 1.75rem auto 0;
}

.figure--lead { margin-top: 1.25rem; }

.figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--surface-sunk);
}

.figure__cap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  align-items: baseline;
  margin-top: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.figure__text { flex: 1 1 14rem; }

.figure__credit {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* The one piece of this component that is not styling but disclosure: an
   image that does not depict the event says so, legibly, before the caption. */
.figure__flag {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent-wash);
  border-radius: 3px;
  padding: 0.15rem 0.4rem;
}

/* --------------------------------------------------------------------------
   7. Story components
   One component, several densities. .story is the base; modifiers change
   proportion, not structure.
   -------------------------------------------------------------------------- */

.story { display: grid; gap: 0.7rem; }

.story__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.story__head {
  font-size: 1.15rem;
  line-height: 1.2;
}

.story__deck {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.5;
  text-wrap: pretty;
}

.story__meta { display: flex; align-items: center; flex-wrap: wrap; }

/* Lead ------------------------------------------------------------------- */

.story--lead .story__head { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.story--lead .story__deck { font-size: 1.0625rem; max-width: 44rem; }
.story--lead { gap: 0.9rem; }

/* Feature ---------------------------------------------------------------- */

.story--feature .story__head { font-size: clamp(1.2rem, 2vw, 1.45rem); }

/* Compact: text beside a small thumbnail -------------------------------- */

.story--compact {
  grid-template-columns: 1fr 5.5rem;
  gap: 0.85rem;
  align-items: start;
}

.story--compact .story__head { font-size: 0.975rem; line-height: 1.3; }
.story--compact .thumb { grid-row: span 2; border-radius: 4px; }

/* Text-only list item ---------------------------------------------------- */

.story--text { gap: 0.35rem; }
.story--text .story__head { font-size: 1rem; line-height: 1.35; }

/* Live / breaking flag --------------------------------------------------- */

.flag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--live);
}

.flag::before {
  content: "";
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: var(--live);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* --------------------------------------------------------------------------
   8. Page structure
   -------------------------------------------------------------------------- */

main { padding-block: 2rem 3rem; }

.lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 2.25rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--rule);
}

.lead-aside { display: grid; gap: 1.4rem; align-content: start; }

.lead-aside > .story + .story {
  border-top: 1px solid var(--rule);
  padding-top: 1.4rem;
}

/* Section block ---------------------------------------------------------- */

.block { padding-block: 2.25rem; border-bottom: 1px solid var(--rule); }

.block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--ink);
}

.block__title {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.block__more {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
}

.block__more:hover { text-decoration: underline; }

/* Column grids use auto-fit against a minimum card width rather than a fixed
   column count. The number of columns then follows the space available, at any
   size, including ones no device has yet — a 4-up grid becomes 2-up on a
   tablet and 1-up on a phone with no breakpoint involved, and grows past 4 on
   an ultrawide display (capped in §14 so cards do not become billboards).
   The max() guard stops a card from ever being wider than its container, which
   is what makes these safe inside the narrow rail. */
.cols-4,
.cols-3,
.cols-2 {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min), 100%), 1fr));
}

/* Upper bounds, so a wide viewport does not turn a three-item row into six. */
.cols-3 { --cols-max: 3; }
.cols-2 { --cols-max: 2; }

/* Split: main column plus rail ------------------------------------------ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 2.5rem;
  align-items: start;
}

/* --------------------------------------------------------------------------
   9. Story Threads
   Polaris-specific: a continuing event and its episodes. This is the part of
   the interface that has no equivalent on a conventional news site.
   -------------------------------------------------------------------------- */

.thread {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.4rem;
}

.thread__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.thread__label {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--star);
}

.thread__title { font-size: 1.2rem; margin-bottom: 1.1rem; }

/* Episodes as a vertical timeline. */
.episodes { position: relative; padding-left: 1.35rem; }

.episodes::before {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 1px;
  background: var(--rule-strong);
}

.episode { position: relative; padding-bottom: 1.05rem; }
.episode:last-child { padding-bottom: 0; }

.episode::before {
  content: "";
  position: absolute;
  left: -1.35rem;
  top: 0.4rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--rule-strong);
}

.episode--current::before {
  background: var(--star);
  border-color: var(--star);
}

.episode__when {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 0.15rem;
}

.episode__what { font-size: 0.9375rem; line-height: 1.4; }
.episode--current .episode__what { font-weight: 600; }

/* --------------------------------------------------------------------------
   10. Rail modules
   -------------------------------------------------------------------------- */

.rail { display: grid; gap: 1.75rem; align-content: start; }

.module {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.module__title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

/* Ranked list ------------------------------------------------------------ */

.ranked { display: grid; gap: 0.9rem; counter-reset: rank; }

.ranked li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.65rem;
  align-items: start;
  counter-increment: rank;
}

.ranked li::before {
  content: counter(rank);
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: var(--rule-strong);
}

.ranked a { font-size: 0.9375rem; line-height: 1.35; }
.ranked a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   11. Article page
   -------------------------------------------------------------------------- */

.article { padding-block: 2rem 1rem; }

.article__header { max-width: var(--measure); margin-inline: auto; }

.article__head {
  font-size: clamp(1.9rem, 4vw, 2.85rem);
  margin-block: 0.6rem 0.9rem;
}

.article__deck {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
  text-wrap: pretty;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  padding-block: 0.9rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.byline__who { font-weight: 600; color: var(--ink); }

.byline__beat {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-wash);
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
}

.article__figure { margin-block: 1.75rem; }

.article__caption {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-top: 0.6rem;
  line-height: 1.45;
}

/* A containment context, so components inside the reading column can respond
   to the column's width rather than the viewport's. Safe here because .prose
   takes its width from its parent, never from its contents. */
.prose {
  max-width: var(--measure);
  margin-inline: auto;
  container-type: inline-size;
}

.prose > * + * { margin-top: 1.3rem; }

.prose p { font-size: 1.125rem; line-height: 1.72; }

.prose h2 {
  font-size: 1.4rem;
  margin-top: 2.4rem;
}

.prose blockquote {
  margin-inline: 0;
  padding-left: 1.15rem;
  border-left: 3px solid var(--star);
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink);
}

.prose blockquote cite {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--ink-faint);
}

.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
.prose a:hover { color: var(--accent-hover); }

/* Evidence panel ---------------------------------------------------------
   The provenance record. Every factual claim should be traceable to
   something listed here. */

.evidence {
  max-width: var(--measure);
  margin: 2.5rem auto 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.35rem;
}

.evidence__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.evidence__title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.evidence__note {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-faint);
  line-height: 1.5;
  margin-bottom: 1.1rem;
}

.sources { display: grid; gap: 0.9rem; }

.source {
  display: grid;
  gap: 0.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

.source:last-child { border-bottom: 0; padding-bottom: 0; }

.source__org {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.source__title {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--accent);
}

.source__title:hover { text-decoration: underline; }

.source__when { font-family: var(--font-ui); font-size: 0.75rem; color: var(--ink-faint); }

.source__type {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--star);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  margin-left: 0.4rem;
  vertical-align: 0.08em;
}

/* Specification lists -----------------------------------------------------
   Label/value facts, as on a desk page. Two columns where there is room, one
   where there is not — which is why this is a grid and not a table. The public
   stylesheet has no table styling at all, deliberately: a table on a phone
   either scrolls sideways or squashes, and neither is acceptable for content
   that is really a list of pairs.
   ------------------------------------------------------------------------ */

.spec {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.6rem 1.25rem;
  margin-block: 1rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.spec__label {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.spec__value { margin: 0; color: var(--ink); }

.spec__value code {
  font-size: 0.875em;
  background: var(--surface-sunk);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

/* Below roughly 34rem the two columns stop being two columns. A container
   query rather than a viewport one: this component is used inside the reading
   measure, and what matters is the space it actually has. */
@container (max-width: 34rem) {
  .spec { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .spec__value { margin-bottom: 0.7rem; }
}

/* Small print -------------------------------------------------------------
   Secondary text on a reader-facing page: a pointer to a related page, an
   empty-state line. The admin has .field__help for this and templates kept
   reaching for it, which rendered as ordinary body copy out here because the
   public stylesheet had never heard of it. This is the public spelling.
   ------------------------------------------------------------------------ */

.footnote {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* The star that marks a section heading.
   Used in four templates and, until now, defined in none of them: an SVG with
   no fill declared takes the browser default, so every one of these rendered
   solid black instead of the Polaris gold. */
.starrule__star {
  flex: 0 0 auto;
  fill: var(--star);
}

/* The reader's own area ----------------------------------------------------
   Distinguished from the national front by a tint rather than a border, so it
   reads as a different KIND of content rather than a more important one. The
   picker and the filled section occupy the same slot: the page never jumps
   when a choice is made.
   ------------------------------------------------------------------------ */

.local {
  margin-block: 2rem;
  padding: 1.25rem;
  background: var(--surface-sunk);
  border-radius: var(--radius);
}

.local__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.local__title {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.local__change {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.local__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.local__choice {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}

.local__choice:hover { border-color: var(--accent); color: var(--accent); }

.local__count { font-size: 0.6875rem; color: var(--ink-faint); }

.spec__group {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 1.75rem;
}

/* Dateline ---------------------------------------------------------------
   Where the story happened, above the byline, as a newspaper has always set it.
   Links to that place's page when there is one. */

.dateline {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.dateline a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.dateline a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Search form -------------------------------------------------------------
   One row that becomes two when there is not room, which on a phone is most of
   the time. */

.searchform {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 1.25rem;
}

.searchform__input {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}

.searchform__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* Comments ----------------------------------------------------------------
   Set to the reading measure, like the article it belongs to, so a thread does
   not sprawl wider than the piece being discussed.

   The honeypot is the one rule here that has to be exactly right. It must be
   invisible and unfocusable for a person while remaining a real, fillable
   field in the DOM for a bot. display:none would work but is the first thing a
   spam script checks for, so this moves it out of view instead.
   ------------------------------------------------------------------------ */

.comments {
  max-width: var(--measure);
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.commentlist {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.commentlist--replies {
  margin-top: 0.9rem;
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
}

.comment + .comment { margin-top: 1.4rem; }

.comment__meta {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
}

.comment__who { font-weight: 700; color: var(--ink); }

.comment__badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
}

.comment__body {
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink);
  /* Reader text, so it can contain anything: a long unbroken string must wrap
     rather than push the page sideways. */
  overflow-wrap: anywhere;
}

.comment--staff > .comment__body {
  border-left: 3px solid var(--accent);
  padding-left: 0.75rem;
}

/* The form ---------------------------------------------------------------- */

.commentform { margin-top: 2rem; }

.commentform__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 1rem;
}

.commentform .field { margin-bottom: 0.9rem; }

.field__lbl {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}

.field__lbl .opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-faint);
}

.commentform input[type="text"],
.commentform input[type="email"],
.commentform textarea {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
}

.commentform textarea { resize: vertical; min-height: 7rem; }

.commentform input:focus-visible,
.commentform textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.btn-post {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  padding: 0.6rem 1.2rem;
  cursor: pointer;
}

.btn-post:hover { background: var(--accent-hover); }

.commentform__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-start;
}

.commentform__actions .footnote { flex: 1 1 16rem; margin: 0; }

/* The honeypot. Off-screen rather than display:none, which a spam script
   looks for; still focusable only by something that is not using the page. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Status messages, shown by main.js after a submission. ------------------- */

.note {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.55;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  border-left: 3px solid var(--rule-strong);
  background: var(--surface-sunk);
  color: var(--ink);
}

.note--ok   { border-left-color: var(--accent); background: var(--accent-wash); }
.note--info { border-left-color: var(--star); }
.note--warn { border-left-color: var(--live); }

/* Pagination --------------------------------------------------------------
   Static pagination: every page is a real file, so these are plain links with
   no state to manage. Disabled ends are rendered as spans rather than dead
   anchors — a link that goes nowhere is a promise broken for anyone using a
   keyboard or a screen reader.
   ------------------------------------------------------------------------ */

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-block: 2.5rem 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}

.pager__link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  padding: 0.35rem 0;
}

.pager__link:hover { color: var(--accent-hover); text-decoration: underline; }

.pager__link--off { color: var(--ink-faint); font-weight: 400; }

.pager__count { color: var(--ink-soft); }

/* Corrections ------------------------------------------------------------ */

.correction {
  max-width: var(--measure);
  margin: 1.5rem auto 0;
  background: var(--accent-wash);
  border-left: 3px solid var(--star);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}

.correction__title {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.correction p { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--surface-sunk);
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem 3rem;
  margin-top: 1rem;
}

.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}

.footer__about {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 26rem;
  margin-top: 0.8rem;
}

.footer__title {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.8rem;
}

.footer__list { display: grid; gap: 0.55rem; }

.footer__list a {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.footer__list a:hover { color: var(--accent); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   13. Chrome
   -------------------------------------------------------------------------- */

.icon-btn {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}

.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

.theme-toggle__icon {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: inset -0.27rem -0.13rem 0 0 var(--surface);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon { box-shadow: none; }
}

:root[data-theme="dark"] .theme-toggle__icon { box-shadow: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  padding: 0.6rem 1rem;
  z-index: 100;
}

.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   14. Responsive

   Everything here keys off available SPACE, never off a device. There is no
   user-agent sniffing and no phone/tablet/desktop assumption: the fluid type,
   fluid gutters and auto-fit grids above already cover most of the range
   continuously, so the queries below exist only where the STRUCTURE has to
   change — a two-dimensional layout collapsing to one dimension.

   That is what makes this work on hardware that does not exist yet. A 5-inch
   foldable and a 49-inch ultrawide are just points on the same scale.

   Tiers, by available width:
      < 16rem   watch / micro       one column, chrome stripped
      < 22rem   very small
      < 30rem   compact phone
      < 40rem   phone
      < 62rem   tablet / split view
      < 100rem  desktop             (the base design)
      > 100rem  wide
      > 130rem  ultrawide           layout stops growing, gains columns
   -------------------------------------------------------------------------- */

/* --- Tablet and narrow split-screen ------------------------------------- */
@media (max-width: 62rem) {
  .lead-grid    { grid-template-columns: 1fr; gap: 1.75rem; }
  .split        { grid-template-columns: 1fr; gap: 2rem; }
  .footer__cols { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}

/* --- Phone --------------------------------------------------------------- */
@media (max-width: 40rem) {
  :root { --card-min: 12rem; }

  .utility__links { display: none; }
  .prose p        { font-size: 1.0625rem; }

  /* A portrait crop wastes width once a card spans the full screen. */
  .story--feature .thumb { aspect-ratio: 16 / 9; }
}

/* --- Compact phone ------------------------------------------------------- */
@media (max-width: 30rem) {
  :root { --card-min: 100%; }   /* force single column everywhere */

  .footer__cols { grid-template-columns: 1fr; gap: 1.5rem; }
  .block        { padding-block: 1.75rem; }

  /* The thumbnail beside a compact headline stops earning its space. */
  .story--compact { grid-template-columns: 1fr 4.25rem; gap: 0.7rem; }

  .evidence, .thread, .module { padding: 1rem; }
}

/* --- Very small ---------------------------------------------------------- */
@media (max-width: 22rem) {
  .story--compact .thumb { display: none; }
  .story--compact        { grid-template-columns: 1fr; }

  .episodes     { padding-left: 1rem; }
  .episode::before { left: -1rem; }
}

/* --- Watch and micro displays -------------------------------------------
   Roughly 200-260px. Everything that is not the story itself is removed:
   at this size navigation costs more than it returns, and the reader has
   arrived at one specific thing. */
@media (max-width: 16rem) {
  :root { --gutter: 0.5rem; --radius: 4px; }

  .utility,
  .aurora,
  .sections,
  .footer__cols,
  .rail,
  .thumb { display: none; }

  .masthead__inner { padding-block: 0.6rem; }
  .wordmark        { font-size: 1.05rem; }

  .story--lead .story__head { font-size: 1.15rem; }
  .article__head            { font-size: 1.2rem; }
  .prose p                  { font-size: 0.9375rem; line-height: 1.55; }
  .story__deck              { display: none; }

  .block__head { margin-bottom: 0.9rem; }
  .footer      { padding-block: 1rem 1.25rem; }
}

/* --- Wide ---------------------------------------------------------------- */
@media (min-width: 100rem) {
  :root { --wrap: 88rem; --card-min: 17rem; }
}

/* --- Ultrawide -----------------------------------------------------------
   Past roughly 2000px the page stops growing with the screen. Content gets
   more COLUMNS, not wider ones: a headline stretched across 3440px is
   unreadable, and a body column past the measure is worse. */
@media (min-width: 130rem) {
  :root { --wrap: 104rem; }

  /* The rail can afford to be wider here without squeezing the main column. */
  .split { grid-template-columns: minmax(0, 1fr) 24rem; gap: 3.5rem; }
}

@media (min-width: 160rem) {
  :root { --wrap: 112rem; }
}

/* Column caps. The auto-fit grids would otherwise keep adding columns
   indefinitely, turning a three-item row into six on a very wide display. */
@media (min-width: 64rem) {
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 78rem) {
  .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Short viewports -----------------------------------------------------
   Landscape phones, split screens and watches are constrained vertically, not
   horizontally. A sticky bar costs a fixed share of a short screen, so it
   stops sticking. */
@media (max-height: 30rem) {
  .sections { position: static; }
  .masthead__inner { padding-block: 0.75rem; }
}

/* --- Touch ---------------------------------------------------------------
   Keyed to the input device, not the screen: a touchscreen laptop needs the
   larger targets that a mouse-driven one does not. */
@media (pointer: coarse) {
  .sections a     { padding-block: 0.85rem; }
  .footer__list a { display: inline-block; padding-block: 0.25rem; }
  .icon-btn       { width: 2.75rem; height: 2.75rem; }
}

/* --- Container queries ---------------------------------------------------
   The last gap media queries cannot close: a card does not know how wide the
   VIEWPORT is, it needs to know how wide ITS OWN COLUMN is. The same card sits
   in a 4-up grid and in a 20rem rail, and only a container query can tell
   those apart.

   The container must be the CARD, not the grid: an element cannot query its
   own size, so .story is the container and its children query it. Putting
   container-type on the grid instead would report the grid's width and every
   card in a 4-up row would think it was full width. */
.story {
  container-type: inline-size;
}

/* A card squeezed below ~13rem — in a narrow rail, a split-screen window, or
   a watch — drops to headline only. */
@container (max-width: 13rem) {
  .story__deck  { display: none; }
  .story__head  { font-size: 0.9375rem; line-height: 1.3; }
  .story__meta  { font-size: 0.75rem; }
  .thumb        { aspect-ratio: 16 / 9; }
}

@container (max-width: 8rem) {
  .thumb { display: none; }
}

/* --------------------------------------------------------------------------
   15. Motion and print
   -------------------------------------------------------------------------- */

/* ==========================================================================
   14. Motion

   Every rule here answers a question the reader is already asking: is this
   thing clickable, did my click register, where did that panel come from, is
   something still loading. Motion that answers nothing is decoration, and on a
   news site decoration is what stands between someone and the story.

   Three constraints hold throughout:

     - Only transform and opacity are animated. Everything else forces the
       browser to re-layout or repaint mid-animation, which is where jank on a
       cheap Android phone comes from — and a Canadian news site is read on a
       great many cheap Android phones.
     - Nothing runs longer than 220ms. Past roughly a quarter second a
       transition stops reading as responsiveness and starts reading as lag.
     - Nothing moves further than a few pixels. The effect should register
       without being noticed.

   The reduced-motion block at the end of this file already neutralises all of
   it, and that block is not a formality: vestibular disorders make even small
   parallax genuinely unpleasant, and this site has no animation worth that.
   ========================================================================== */

:root {
  --ease: cubic-bezier(0.2, 0, 0.2, 1);   /* fast out, gentle in */
  --quick: 120ms;
  --calm: 200ms;
}

/* Links -------------------------------------------------------------------
   The underline grows from the left rather than fading in, so the eye is told
   which direction the text runs before it has read it. Drawn with a gradient
   instead of a border so it never affects layout. */

.head,
.footer__list a,
.utility__links a,
.sections__inner a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--calm) var(--ease), color var(--quick) var(--ease);
}

.head:hover,
.footer__list a:hover,
.utility__links a:hover,
.sections__inner a:hover,
.head:focus-visible,
.footer__list a:focus-visible,
.utility__links a:focus-visible,
.sections__inner a:focus-visible {
  background-size: 100% 1px;
}

/* The current section is marked with a settled underline rather than an
   animated one: it is a state, not a response to the pointer. */
.sections__inner a[aria-current="page"] {
  background-size: 100% 2px;
}

/* Story cards -------------------------------------------------------------
   A card lifts by one pixel. That is enough to say "this is one object and it
   is clickable" and not enough to shift the reading line. The image behind it
   scales very slightly, which reads as depth rather than movement. */

.story {
  transition: transform var(--calm) var(--ease);
}

.story:hover { transform: translateY(-1px); }

.thumb {
  transition: box-shadow var(--calm) var(--ease);
}

.thumb img {
  transition: transform 320ms var(--ease);
  will-change: transform;
}

.story:hover .thumb img { transform: scale(1.03); }

.story:hover .thumb {
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.10);
}

/* The generated placeholder gets its star instead of a zoom, since there is no
   photograph to move. */
.story:hover .thumb:not(.thumb--photo)::after {
  transform: scale(1.08) rotate(4deg);
}

.thumb::after {
  transition: transform 400ms var(--ease);
}

/* Buttons and chips -------------------------------------------------------
   A press moves the control down by a pixel. It is the oldest affordance in
   interface design and it still works: the thing you pushed went in. */

.btn-post,
.local__choice,
.pager__link {
  transition: transform var(--quick) var(--ease),
              background-color var(--quick) var(--ease),
              border-color var(--quick) var(--ease),
              color var(--quick) var(--ease);
}

.btn-post:active,
.local__choice:active { transform: translateY(1px); }

.local__choice:hover { transform: translateY(-1px); }

/* The pager arrows lean the way they will take you. */
.pager__link[rel="next"]:hover { transform: translateX(2px); }
.pager__link[rel="prev"]:hover { transform: translateX(-2px); }

/* Focus -------------------------------------------------------------------
   The ring appears immediately — a focus indicator that fades in is a focus
   indicator that is briefly absent — but its offset settles, which makes
   keyboard travel legible as movement between things. */

:focus-visible {
  transition: outline-offset var(--quick) var(--ease);
}

/* The skip link slides in from above on focus, so its arrival is obvious to
   someone who has just pressed Tab on a page they cannot see. */
.skip-link {
  transition: transform var(--calm) var(--ease), opacity var(--quick) var(--ease);
}

/* Panels that appear -------------------------------------------------------
   Two things on this site arrive after the page does: the reader's local
   section, and the result of posting a comment. Both fade up by four pixels,
   which reads as "this is new" without the page appearing to jump. */

@keyframes rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.local:not([hidden]),
#comment-status:not([hidden]) {
  animation: rise var(--calm) var(--ease) both;
}

/* The lead photograph fades in rather than snapping, which hides the moment a
   progressively-rendered JPEG finishes. Only the lead: a page of fading
   thumbnails would be a page that never looks settled. */
.figure--lead img {
  animation: fade 320ms var(--ease) both;
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The theme toggle --------------------------------------------------------
   The icon turns as it changes, so the control reads as a switch with two
   positions rather than a button that does something different each time. */

.theme-toggle__icon {
  transition: transform 260ms var(--ease);
}

.icon-btn:hover .theme-toggle__icon { transform: rotate(20deg); }

[data-theme="dark"] .theme-toggle__icon { transform: rotate(180deg); }
[data-theme="dark"] .icon-btn:hover .theme-toggle__icon { transform: rotate(200deg); }

/* Comment form ------------------------------------------------------------
   The border colour moves rather than snapping, which makes it clear the field
   responded to you and not to something else on the page. */

.commentform input,
.commentform textarea {
  transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}

.commentform input:focus-visible,
.commentform textarea:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* Touch -------------------------------------------------------------------
   Hover does not exist on a touchscreen, and a :hover rule there fires on tap
   and then sticks until the next tap somewhere else — which looks like a bug.
   Everything above is therefore scoped to devices that actually have a pointer.
   ========================================================================== */

@media (hover: none) {
  .story:hover { transform: none; }
  .story:hover .thumb img { transform: none; }
  .story:hover .thumb { box-shadow: none; }
  .local__choice:hover { transform: none; }
  .pager__link:hover { transform: none; }
  .icon-btn:hover .theme-toggle__icon { transform: none; }
  .head:hover { background-size: 0% 1px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Killing the duration alone is not enough: a hover transform still applies,
     it just applies instantly, which is a jump rather than a movement and is
     exactly what someone asking for reduced motion is trying to avoid. The
     displacement itself has to go. Colour, shadow and the underline stay —
     they convey the same information without moving anything. */
  .story:hover,
  .story:hover .thumb img,
  .local__choice:hover,
  .pager__link:hover,
  .btn-post:active,
  .local__choice:active,
  .icon-btn:hover .theme-toggle__icon,
  .story:hover .thumb:not(.thumb--photo)::after {
    transform: none !important;
  }

  .local:not([hidden]),
  #comment-status:not([hidden]),
  .figure--lead img {
    animation: none !important;
  }
}

@media print {
  .sections, .utility, .icon-btn, .rail, body { background: #fff; color: #000; }
  .thumb { display: none; }
}

/* ==========================================================================
   16. Holding page

   Used only by index.html until the rendered homepage replaces it. Everything
   else on the site is a publication; this is a sign on a door. Delete this
   section and the file together at launch.
   ========================================================================== */

.soon {
  min-height: 100svh;          /* svh, not vh: avoids the mobile browser-chrome jump */
  display: grid;
  place-items: center;
  padding: var(--gutter);
  text-align: center;
}

.soon__inner { max-width: 26rem; }

.soon__star {
  width: clamp(1.6rem, 5vw, 2.1rem);
  height: clamp(1.6rem, 5vw, 2.1rem);
  fill: var(--star);
  margin-bottom: 1.25rem;
}

.soon__wordmark {
  font-size: clamp(1.9rem, 8vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 1.5rem;
}

.soon__polaris { color: var(--ink); }
.soon__news    { color: var(--accent); margin-left: 0.22em; }

.soon__status {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.soon__foot {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-top: 0.6rem;
}

/* Watch-sized screens: the star and the rule are the first things to go. */
@media (max-width: 16rem) {
  .soon__star { display: none; }
  .soon__status { padding-top: 1rem; }
}

.soon a { color: inherit; }
.soon__foot a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
.soon__foot a:hover { color: var(--accent-hover); }