/* Hallmark · genre: atmospheric · macrostructure: Map/Diagram · theme: Plot (graphite paper · signal-yellow accent · Source Serif 4 + Archivo)
 * tone: instrument panel, night desk · anchor hue: blue-grey 255° with one yellow accent · enrichment: photo tiles + hero photograph
 * nav: N5 Floating pill (desktop: six tracker views inline; mobile: Views dropdown + Menu sheet) · footer: Ft5 Statement · motion: dot scale + fade, reduced-motion safe
 * tokens: ../uk-russia-tokens.css [data-option="c"]
 */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 · contrast: pass (40–41) · nav: N5 · footer: Ft5 · slop: pass (42–45)
 * Stageshow pass: the plot is the hero and the detail card its one raised satellite; the time control sits on the ground;
 * rows share one date lane; the card settles instead of swapping. */

/* N5 · Floating pill ---------------------------------------------------- */
.pill {
  position: fixed;
  direction: ltr;
  inset-block-start: max(var(--space-sm), env(safe-area-inset-top));
  inset-inline: var(--page-gutter);
  z-index: var(--z-sticky);
  width: min(var(--page-max), calc(100% - 2 * var(--page-gutter)));
  margin-inline: auto;
}

.pill__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-overlay);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

[dir="rtl"] .pill__bar {
  padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-2xs);
}

.pill__bar > .pill__brand {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

.pill__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-ink);
  text-decoration: none;
  white-space: normal;
  padding-inline-end: var(--space-2xs);
}

/* Page links and angles share one flex item, so the bar cannot open a gap between them. */
.pill__group {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.pill__links {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.pill__views {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
}

/* Section anchors sit behind a hairline so they read as secondary to the views.
   Cancel the bar gap in front of that line so the brand sits against it.
   The link's own padding keeps Plot off the stroke. */
.pill__links {
  padding-inline-start: var(--space-xs);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}

.pill__bar > .pill__brand + * {
  margin-inline-start: calc(var(--space-xs) * -1);
}
.pill__links a[aria-current="page"] {
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.pill__links a,
.pill__views a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--tap-min);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pill__links a {
  color: var(--color-muted);
  font-weight: 500;
}

.pill__links a:hover,
.pill__views a:hover,
.pill__links a:focus-visible,
.pill__views a:focus-visible {
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.pill__views a:active {
  transform: translateY(1px);
}

.pill__views a[aria-current="page"] {
  background: var(--color-paper-3);
  color: var(--color-ink);
}

/* Links and tools keep their full labels. The wordmark wraps instead of being clipped. */
.pill__bar > :not(.pill__brand) {
  flex-shrink: 0;
}

.pill__views .n {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* Views dropdown (mobile): a disclosure that opens the six tracker views */
.dd {
  position: relative;
}

.dd summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
}

.dd summary::-webkit-details-marker {
  display: none;
}

.dd summary::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-0.1rem) rotate(45deg);
  transition: transform var(--dur-micro) var(--ease-out);
}

.dd[open] summary::after {
  transform: translateY(0.1rem) rotate(225deg);
}

.dd summary:hover,
.dd[open] summary {
  background: var(--color-paper-3);
}

.lock {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
}

.dd__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-xs));
  inset-inline-start: 0;
  z-index: var(--z-dropdown);
  display: grid;
  min-width: 13rem;
  padding: var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  box-shadow: var(--shadow-float);
  animation: dd-in var(--dur-micro) var(--ease-out);
}

@keyframes dd-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.dd__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--tap-min);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.dd__menu a:hover,
.dd__menu a:focus-visible {
  background: var(--color-paper-3);
}

.dd__menu .n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.pill__menu {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  padding-inline: var(--space-md);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  font-weight: 700;
}

.pill__menu::after {
  content: "+";
  font-family: var(--font-mono);
}

.pill__menu[aria-expanded="true"]::after {
  content: "–";
}

.pill__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-inline-start: auto;
}

.pill__bar .lang {
  display: inline-flex;
}

.theme-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--color-paper-3);
}

.theme-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}

.theme-toggle .icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

.sheet {
  margin-block-start: var(--space-xs);
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  display: grid;
  gap: var(--space-2xs);
}

.sheet[hidden] {
  display: none;
}

.sheet a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 600;
  text-decoration: none;
}

.sheet a:hover,
.sheet a:focus-visible {
  background: var(--color-paper-3);
}

.sheet__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm) 0;
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.sheet__foot a {
  min-height: var(--tap-min);
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
}

/* Hero fold ------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(82svh, 46rem);
  padding-block: var(--space-5xl) var(--space-xl);
  overflow: clip;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--color-hero-scrim) 6%, color-mix(in oklch, var(--color-hero-scrim) 62%, transparent) 46%, transparent 92%);
}

.hero__inner {
  display: grid;
  gap: var(--space-lg);
  color: var(--color-on-photo);
}

.hero h1 {
  max-width: 18ch;
  font-size: var(--text-hero-s);
  line-height: 1.04;
}

.hero .lede {
  max-width: var(--measure);
  font-size: var(--text-md);
  color: var(--color-on-photo);
}

.hero .credit,
.hero .angles__label {
  color: var(--color-on-photo-muted);
}

/* Six angles on one record: the same links as the top bar, offered where the reader lands */
.angles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.angles__label {
  flex-basis: 100%;
}

.hero .angles .chip {
  color: var(--color-on-photo);
  border-color: color-mix(in oklch, var(--color-on-photo) 50%, transparent);
  background: color-mix(in oklch, var(--color-hero-scrim) 70%, transparent);
}

.hero .angles .chip:hover {
  border-color: var(--color-on-photo);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-lg);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.hero .tlink {
  color: var(--color-on-photo);
}

/* Plot section ----------------------------------------------------------- */
.section {
  padding-block: var(--space-3xl);
}

.section__head {
  display: grid;
  gap: var(--space-xs);
  margin-block-end: var(--space-lg);
}

.section__head h2 {
  font-size: var(--text-2xl);
}

.section__head p {
  max-width: var(--measure);
  color: var(--color-muted);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-block-start: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Domain filter: text tabs, no photographs.
   States: default, hover, focus-visible, active, disabled, busy, invalid, selected. */
.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-end: var(--space-lg);
}

.tile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  padding-inline: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.tile .n {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-muted);
}

@media (hover: hover) and (pointer: fine) {
  .tile:hover {
    background: var(--color-paper-3);
  }
}

.tile:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.tile:active {
  transform: translateY(1px);
}

.tile:disabled,
.tile[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.tile[aria-busy="true"] {
  cursor: progress;
}

.tile[aria-invalid="true"] {
  border-color: var(--color-ru);
}

.tile[aria-pressed="true"],
.tile[aria-selected="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.tile[aria-pressed="true"] .n,
.tile[aria-selected="true"] .n {
  color: var(--color-on-accent);
}

/* The instrument */
.instrument {
  display: grid;
  gap: var(--space-lg);
}

/* Axis lane, plot and time control share one grid, so the control's reading edge is the plot's. */
.instrument__plot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs);
}

.plot-wrap {
  display: contents;
}

.axis-y {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: var(--color-ink);
  font-weight: 700;
}

.axis-y span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.axis-x {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  color: var(--color-ink);
  font-weight: 700;
}

.plot {
  position: relative;
  grid-row: 1;
  grid-column: 2;
  aspect-ratio: 1 / 1;
  max-height: 80svh;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  overflow: clip;
}

.plot__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.plot__grid line {
  stroke: var(--color-rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.plot__grid .mid {
  stroke: var(--color-muted);
  stroke-dasharray: 2 4;
}

.dot {
  position: absolute;
  inset-inline-start: calc(var(--x) * 1%);
  inset-block-end: calc(var(--y) * 1%);
  width: 1rem;
  height: 1rem;
  margin: -0.5rem;
  padding: 0;
  border: 2px solid var(--side-color);
  border-radius: 50%;
  background: var(--side-color);
  transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}

[dir="rtl"] .dot {
  inset-inline-start: auto;
  inset-inline-end: calc(var(--x) * 1%);
}

.dot::before {
  content: "";
  position: absolute;
  inset: -0.625rem;
}

.dot--uk {
  --side-color: var(--color-uk);
}

.dot--ru {
  --side-color: var(--color-ru);
}

.dot--ot {
  --side-color: var(--color-ot);
}

.dot--indirect {
  background: var(--color-paper-2);
  border-style: dashed;
}

.dot[aria-pressed="true"] {
  z-index: 2;
  transform: scale(1.6);
  box-shadow: 0 0 0 3px var(--color-paper-2), 0 0 0 5px var(--color-accent);
}

.dot[data-dim="true"] {
  opacity: 0.14;
  pointer-events: none;
}

/* Time control. A control strip under the plot, on the ground: a hairline above it, no second box
   competing with the plot and the card for weight. */
.timebar {
  grid-row: 3;
  grid-column: 2;
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-xs);
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.timebar__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
}

.timebar label {
  font-weight: 600;
  font-size: var(--text-sm);
}

.timebar output {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
}

.timebar__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.timebar input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap-min);
  margin: 0;
  accent-color: var(--color-accent);
}

/* Play steps the slider through the dates; the icon swaps to pause while it runs */
.play {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

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

.play svg {
  width: 0.9rem;
  height: 0.9rem;
}

.play .play__off,
.play[aria-pressed="true"] .play__on {
  display: none;
}

.play[aria-pressed="true"] .play__off {
  display: block;
}

.play[aria-pressed="true"] {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Detail card: the one raised surface on the page, the satellite that carries the result.
   A hairline on the light edge, one shadow, and its body settles in when the selection changes. */
.card {
  display: grid;
  align-content: start;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  box-shadow: var(--shadow-raised);
  overflow: clip;
}

@keyframes card-settle {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.card__photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card__photo .credit {
  padding: var(--space-xs) var(--space-md) 0;
}

.card__body {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  animation: card-settle var(--dur-short) var(--ease-out) both;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
}

.card h3 {
  font-size: var(--text-xl);
}

/* Three numbers, one strip. The title above is the big thing; these read as a row of
   label-and-value pairs, each pair one item, separated by hairlines rather than air. */
.card__nums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.card__nums div {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2xs);
  padding-inline-end: var(--space-sm);
}

.card__nums div + div {
  padding-inline-start: var(--space-sm);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}

.card__nums dt {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.card__nums dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
}

.card__why {
  color: var(--color-muted);
}

.card__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

/* Rows. Every row shares one grid: a date lane and a content lane, so the dates line up
   as a column and the titles start on one reading edge. Narrow screens stack the lanes. */
.rows {
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-lg);
  padding-block: var(--space-sm) 0;
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

/* The Why control keeps its 44px target, but its words sit under the title; the target's
   remaining height is the air before the next record, so the title and its note read as one item. */
.rows .why summary {
  align-items: flex-start;
  line-height: var(--leading-body);
}

.row__date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  color: var(--color-muted);
}

.row__title {
  font-size: var(--text-lg);
}

.row__title button {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  overflow-wrap: anywhere;
}

.row__title button:hover {
  color: var(--color-accent);
}

.more {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-lg);
}

.method {
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule);
}

.method__grid {
  display: grid;
  gap: var(--space-md);
  max-width: var(--measure);
}

.method h2 {
  font-size: var(--text-2xl);
}

.method p {
  color: var(--color-muted);
}

/* Ft5 · Statement footer ------------------------------------------------ */
.statement {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-4xl) var(--space-xl);
}

.statement__line {
  max-width: 16ch;
  font-size: var(--text-hero-s);
  line-height: 1.04;
}

.statement__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
}

.statement__links .tlink {
  white-space: normal;
}

.statement__fine {
  max-width: var(--measure);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.statement__fine a {
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (min-width: 40rem) {
  .tiles {
    gap: var(--space-xs) var(--space-sm);
  }
}

@media (max-width: 29.99rem) {
  .pill__group,
  .pill__links,
  .pill__bar .lang {
    display: none;
  }

  .pill__menu {
    display: inline-flex;
  }
}

@media (max-width: 22.5rem) {
  .pill__brand {
    font-size: var(--text-xs);
  }
}

@media (min-width: 48rem) {
  .pill__bar {
    gap: var(--space-sm);
    padding-inline: var(--space-md) var(--space-2xs);
  }

  .pill__bar > .pill__brand + * {
    margin-inline-start: calc(var(--space-sm) * -1);
  }

  [dir="rtl"] .pill__bar {
    padding-inline: var(--space-md) var(--space-2xs);
  }

  .pill__brand {
    font-size: var(--text-md);
  }

  .section {
    padding-block: var(--space-4xl);
  }

  .hero {
    padding-block-end: var(--space-3xl);
  }

  .rows li {
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: start;
  }

  .row__date {
    grid-column: 1;
    grid-row: 1;
    /* the date's line box is ~2px shorter than the title's first line; seat it on the same reading edge */
    padding-block-start: 1px;
  }

  .rows li > :not(.row__date) {
    grid-column: 2;
  }

  .angles__label {
    flex-basis: auto;
    margin-inline-end: var(--space-xs);
  }
}

@media (min-width: 60rem) {
  .instrument {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }

  .card {
    position: sticky;
    inset-block-start: var(--nav-clearance, var(--space-5xl));
  }

}

/* Inline angles need the full row. Below this, Home + Plot + six labels wrap and clip the language control. */
@media (min-width: 70rem) {
  .pill__views {
    display: inline-flex;
    margin-inline-start: var(--space-2xs);
    padding-inline-start: var(--space-2xs);
    border-inline-start: var(--rule-hair) solid var(--color-rule);
  }

  .dd {
    display: none;
  }
}

@media (min-width: 70rem) {
  .pill__views .n {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dd__menu,
  .card__body {
    animation: none;
  }

  .dot,
  .tile,
  .btn,
  .dd summary::after {
    transition: none;
  }
}

/* Context band: a photograph and the framing copy, with the data underneath.
   Clearance is the measured bottom of the fixed pill, so wrapped labels stay visible. */
:root {
  --nav-clearance: var(--space-5xl);
}

html {
  scroll-padding-top: var(--nav-clearance);
}

.context {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: end;
  margin: 0 0 var(--space-xl);
}

.context__photo {
  position: relative;
  min-height: 16rem;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: clip;
}

.context__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.context__photo figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  margin: 0;
  padding: var(--space-xl) var(--space-sm) var(--space-sm);
  color: var(--color-on-photo);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  background: linear-gradient(to top, var(--color-hero-scrim), transparent);
}

.context__photo figcaption a {
  color: var(--color-on-photo);
}

.context__copy {
  display: grid;
  gap: var(--space-sm);
  align-content: end;
  min-width: 0;
}

.context__copy h1,
.context__copy .lede,
.context__copy .standfirst {
  overflow-wrap: anywhere;
  min-width: 0;
}

html.embed .context__photo,
html.embed .pill,
html.embed .statement,
html.embed .skip {
  display: none;
}

@media (min-width: 60rem) {
  .context {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-xl);
  }

  .context__photo {
    min-height: 22rem;
  }
}