/* «Не сдались»: night ink above, a sunrise glow where the hero meets the page, warm paper for reading.
   No web fonts: system sans for the interface and headings, a serif for story text. */
:root {
  --ink: #14161c;
  --ink-text: #f5f1ea;
  --ink-muted: #b9b2a6;
  --sun-1: #f59e0b;
  --sun-2: #f97316;
  --sun-3: #e11d48;
  --sunrise: linear-gradient(90deg, var(--sun-1), var(--sun-2) 45%, var(--sun-3));
  /* The sunrise for text on paper, dark enough to read there; on a dark page the plain sunrise reads. */
  --sunrise-deep: linear-gradient(90deg, #b45309, #c2410c 45%, #be123c);

  --paper: #faf7f2;
  --card: #ffffff;
  --text: #1d1b18;
  --muted: #6d665c;
  --line: #e8e2d8;
  --accent: #c2410c;
  --quote-bg: #f6efe4;
  --shadow: 0 1px 2px rgb(20 22 28 / 6%), 0 8px 24px rgb(20 22 28 / 8%);
  --shadow-hover: 0 2px 4px rgb(20 22 28 / 8%), 0 16px 40px rgb(20 22 28 / 14%);

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-read: Georgia, "Noto Serif", "PT Serif", "Times New Roman", serif;
  --radius: 18px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #0b0c10;
    --paper: #121110;
    --card: #1c1a18;
    --text: #ece7df;
    --muted: #a59d91;
    --line: #2f2b27;
    --accent: #fb923c;
    --sunrise-deep: var(--sunrise);
    --quote-bg: #26221e;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 30%);
    --shadow-hover: 0 2px 4px rgb(0 0 0 / 35%), 0 16px 40px rgb(0 0 0 / 45%);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: 1.0625rem/1.6 var(--font-ui);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Links to sources open in a new tab; the arrow says so, the hidden text says it to screen readers. */
a[target="_blank"]::after {
  content: "\00a0↗";
  font-size: 0.85em;
  text-decoration: none;
  display: inline-block;
}

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.wrap-narrow {
  max-width: 44rem;
}

.check {
  display: inline-grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: var(--sunrise);
  color: #fff;
  font-size: 0.8em;
  font-weight: 800;
  line-height: 1;
}

.button {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow);
}

.button:hover {
  border-color: var(--sun-2);
  color: var(--accent);
}

/* Header: the top of the night sky, continued by the hero below it. */
.site-header {
  background: var(--ink);
  color: var(--ink-text);
}

.site-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: inherit;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand-mark {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
}

.lang-switch {
  padding: 0.3rem 0.8rem;
  border: 1px solid rgb(245 241 234 / 25%);
  border-radius: 999px;
  color: var(--ink-text);
  font-size: 0.875rem;
  text-decoration: none;
}

.lang-switch:hover {
  border-color: var(--sun-2);
  color: var(--sun-1);
}

/* Hero: dark sky with the sun rising behind its lower edge. */
.hero,
.story-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--ink-text);
  isolation: isolate;
}

.hero::before,
.story-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: max(60rem, 120%);
  height: 30rem;
  transform: translate(-50%, 40%);
  background: radial-gradient(closest-side, rgb(249 115 22 / 55%), rgb(225 29 72 / 28%) 55%, transparent);
}

.hero::after,
.story-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--sunrise);
}

.hero-art {
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: clamp(5rem, 15vw, 12rem);
}

/* Silhouettes in the night colour, so the glow shows only between and above the peaks. */
.hero-art-far {
  fill: var(--ink);
  opacity: 0.6;
}

.hero-art-near {
  fill: var(--ink);
}

.hero .wrap {
  padding-top: 3.5rem;
  padding-bottom: 6.5rem;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--sun-1);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 4.75rem);
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hero h1 em,
.story-hero h1 em {
  font-style: normal;
  background: var(--sunrise);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  max-width: 38rem;
  margin: 1.5rem 0 0;
  color: var(--ink-muted);
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.55;
}

/* Story cards, lifted over the bottom of the hero. */
.stories-wrap {
  position: relative;
  margin-top: -3.5rem;
  padding-bottom: 3rem;
}

.stories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1.5rem;
}

.empty {
  padding: 2rem;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--sunrise);
}

.card:hover,
.card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.card-person {
  margin: 0 0 0.5rem;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card h2 {
  margin: 0 0 0.75rem;
  font-size: 1.45rem;
  font-weight: 800;
}

.card h2 a {
  color: var(--text);
  text-decoration: none;
}

/* The whole card is the link. */
.card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card h2 a:focus-visible {
  outline: none;
}

.card:focus-within {
  outline: 3px solid var(--sun-2);
  outline-offset: 3px;
}

.card-summary {
  margin: 0 0 1.25rem;
  color: var(--muted);
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: auto 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

.more {
  color: var(--accent);
  font-weight: 700;
}

.card-featured {
  grid-column: 1 / -1;
  padding: 2.5rem 2.5rem 2rem;
}

.card-featured h2 {
  max-width: 24ch;
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  line-height: 1.08;
}

.card-featured .card-summary {
  max-width: 46rem;
  font-size: 1.15rem;
}

.pager {
  display: flex;
  justify-content: space-between;
  padding-top: 2rem;
}

.pager a[rel="next"] {
  margin-left: auto;
}

/* Story page. */
.story-hero .wrap {
  padding-top: 3rem;
  padding-bottom: 4.5rem;
}

.story-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  font-weight: 850;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.story-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 1.5rem 0 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem 0.35rem 0.45rem;
  border: 1px solid rgb(245 158 11 / 45%);
  border-radius: 999px;
  background: rgb(245 158 11 / 12%);
  color: var(--ink-text);
  font-weight: 600;
}

.story-body {
  padding-top: 2.5rem;
  font-family: var(--font-read);
  font-size: 1.1875rem;
  line-height: 1.75;
}

.story-body p {
  margin: 0 0 1.35em;
}

/* The photo, when there is one, comes first; the opening paragraph is still the first paragraph. */
.story-body > p:first-of-type {
  font-size: 1.25em;
  line-height: 1.6;
}

.story-body > p:first-of-type::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--sun-2);
  font-family: var(--font-ui);
  font-size: 3.4em;
  font-weight: 850;
  line-height: 0.8;
}

/* The person's photo beside the opening of the story, with its credit underneath. */
.story-photo {
  float: right;
  width: 15rem;
  margin: 0.4rem 0 1.25rem 1.75rem;
  font-family: var(--font-ui);
}

.story-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--quote-bg);
  box-shadow: var(--shadow);
}

/* Infographics inside a story, each block with the sunrise bar at the bottom. Figure cards within the text are light,
   so the text keeps its paper; the timeline and the closing after it are a piece of the hero's night sky, the
   story's ending. Dates and figures are in sunrise colours throughout. */
.story-figures,
.story-timeline,
.story-closing {
  position: relative;
  overflow: hidden;
  margin: 2rem 0 2.25rem;
  padding: 1.5rem 1.5rem 1.4rem;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  box-shadow: var(--shadow);
}

.story-figures {
  background: var(--card);
  color: var(--text);
}

.story-timeline,
.story-closing {
  background: var(--ink);
  color: var(--ink-text);
}

.story-figures::after,
.story-timeline::after,
.story-closing::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--sunrise);
}

/* Cards narrow down beside the photo while it still floats there; the timeline and the closing take the full width. */
.story-figures {
  display: flow-root;
}

.story-timeline,
.story-closing {
  clear: both;
}

.story-timeline .kicker,
.story-closing .kicker {
  margin-bottom: 1rem;
}

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.1rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.figures a,
.timeline-mark a {
  color: inherit;
  text-decoration: none;
}

.figures a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* A pictogram in a ring of sunrise light. */
.figure-icon,
.timeline-icon {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(245 158 11 / 14%);
  box-shadow: inset 0 0 0 1px rgb(245 158 11 / 40%);
  color: var(--sun-1);
}

.figure-icon {
  width: 3.25rem;
  height: 3.25rem;
}

.pictogram {
  width: 55%;
  height: 55%;
}

.figure-value,
.timeline-year {
  display: block;
  font-weight: 850;
  letter-spacing: -0.02em;
  background: var(--sunrise);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.figure-value {
  font-size: 2rem;
  line-height: 1.05;
}

.figure-label {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.35;
}

/* On the light cards the bright sunrise is too pale to read: a deeper one, and the ring in the accent colour. */
.story-figures .figure-value {
  background: var(--sunrise-deep);
  -webkit-background-clip: text;
  background-clip: text;
}

.story-figures .figure-icon {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}

.figures a:hover .figure-label {
  color: var(--text);
}

.timeline-mark a:hover .timeline-label {
  color: var(--ink-text);
}

.figures a:focus-visible,
.timeline-mark a:focus-visible,
.timeline-periods a:focus-visible,
.story-closing a:focus-visible {
  outline: 3px solid var(--sun-2);
  outline-offset: 4px;
  border-radius: 4px;
}

/* The timeline: years to scale along a sunrise line, captions standing on it and hanging under it. */
.timeline {
  position: relative;
  height: 14.5rem;
  margin: 0 0.25rem;
}

.timeline-tall {
  height: 19rem;
}

.timeline-axis {
  position: absolute;
  left: 0;
  right: 0;
  top: 7rem;
  height: 6px;
  border-radius: 3px;
  /* The warm half of the sunrise only: its red is kept for spans. */
  background: linear-gradient(90deg, var(--sun-1), var(--sun-2));
}

.timeline-dot {
  position: absolute;
  left: var(--at);
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-text);
  box-shadow: 0 0 0 3px var(--ink);
  transform: translate(-50%, -50%);
}

.timeline-marks {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 6.5rem is CaptionWidth in StoryTimelineView: change both together. */
.timeline-mark {
  position: absolute;
  left: var(--at);
  width: 6.5rem;
  transform: translateX(-50%);
  text-align: center;
}

.timeline-mark.align-start {
  transform: translateX(-0.4rem);
  text-align: left;
}

.timeline-mark.align-end {
  transform: translateX(calc(-100% + 0.4rem));
  text-align: right;
}

/* Lane 0 stands on the line, lanes 1 and 2 hang under it. */
.timeline-mark.lane-0 {
  bottom: calc(100% - 7rem + 0.75rem);
}

.timeline-mark.lane-1 {
  top: 8rem;
}

.timeline-mark.lane-2 {
  top: 12.75rem;
}

.timeline-mark a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-mark.align-start a {
  align-items: flex-start;
}

.timeline-mark.align-end a {
  align-items: flex-end;
}

.timeline-icon {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.3rem;
}

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

.timeline-label {
  display: block;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.3;
}

/* Spans and periods: bars on faint tracks as wide as the line, so their lengths compare with each other and with the
   gaps between years. Periods are in the warm colours of the line, a forecast in the deepest sunrise red. */
.timeline-bars {
  display: grid;
  gap: 0.85rem;
  margin: 1.25rem 0.25rem 0;
  padding: 0;
  list-style: none;
}

.timeline-bar a {
  display: block;
  margin-left: clamp(0px, var(--at), calc(100% - 16rem));
  margin-bottom: 0.3rem;
  color: var(--ink-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.timeline-bar a:hover {
  color: var(--sun-1);
}

.timeline-bar-track {
  position: relative;
  display: block;
  height: 10px;
  border-radius: 5px;
  background: rgb(245 241 234 / 8%);
}

.timeline-bar-fill {
  position: absolute;
  left: var(--at);
  width: max(var(--width), 10px);
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--sun-1), var(--sun-2));
}

.timeline-bar.is-forecast .timeline-bar-fill {
  background: var(--sun-3);
}

.timeline-bar.is-forecast a {
  color: #fda4af;
}

/* The years at the ends of the scale, needed on a phone only, where the line above is a list. */
.story-timeline .timeline-scale {
  display: none;
  justify-content: space-between;
  margin: 0.4rem 0.25rem 0;
  color: var(--ink-muted);
  font-size: 0.75rem;
}

/* Two classes, to win over .story-body p. */
.story-timeline .figures-hint {
  margin: 1rem 0 0;
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

/* The closing: the person's own words, beside a portrait from another time of their life when there is one, then
   the takeaway in sunrise colours. */
.story-closing {
  padding: 1.75rem 1.75rem 1.6rem;
}

.closing-words {
  margin: 0 0 1.4rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid rgb(245 241 234 / 16%);
}

.closing-words.has-photo {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
}

.story-closing blockquote {
  margin: 0;
}

.closing-photo {
  margin: 0;
}

.closing-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: rgb(245 241 234 / 8%);
}

.story-closing blockquote p {
  margin: 0 0 0.75rem;
  font-family: var(--font-read);
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.5;
}

/* The original of translated words: smaller, under the translation the reader reads first. */
.story-closing .closing-original {
  color: var(--ink-muted);
  font-size: 1rem;
}

.story-closing footer {
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.story-closing footer a {
  color: var(--sun-1);
}

.story-closing .takeaway {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.35;
  background: var(--sunrise);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The claim a figure links to, so the eye finds it in the list. */
.claims li {
  scroll-margin-top: 1rem;
}

.claims li:target {
  border-radius: 10px;
  background: var(--quote-bg);
  box-shadow: 0 0 0 0.5rem var(--quote-bg);
}

@media (max-width: 40rem) {
  /* The photo goes above the text, cut to 4:3 the way the share card cuts it: middle across, upper part down. */
  .story-photo {
    float: none;
    width: auto;
    margin: 0 0 1.5rem;
  }

  .story-photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 30%;
  }

  .story-figures,
  .story-timeline,
  .story-closing {
    padding: 1.25rem 1.1rem 1.2rem;
  }

  /* The portrait goes above the words: beside them, the words would get a column too narrow to read. */
  .closing-words.has-photo {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
  }

  .closing-photo {
    max-width: 11rem;
  }

  .figure-value {
    font-size: 1.7rem;
  }

  /* The timeline becomes a list down a sunrise line: the scale doesn't fit a phone, the order does. */
  .timeline,
  .timeline-tall {
    height: auto;
    margin: 0;
  }

  .timeline-axis {
    display: none;
  }

  .timeline-bars {
    margin-top: 1.5rem;
  }

  /* Too narrow to start captions at their bars: they start at the left edge, the bars show where. */
  .timeline-bar a {
    margin-left: 0;
  }

  .story-timeline .timeline-scale {
    display: flex;
  }

  .timeline-marks {
    display: grid;
    gap: 0.85rem;
    padding-left: 1rem;
    border-left: 3px solid var(--sun-2);
  }

  .timeline-mark,
  .timeline-mark.align-start,
  .timeline-mark.align-end {
    position: static;
    width: auto;
    transform: none;
    text-align: left;
  }

  .timeline-mark a,
  .timeline-mark.align-start a,
  .timeline-mark.align-end a {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    column-gap: 0.75rem;
    align-items: center;
  }

  .timeline-icon {
    grid-row: span 2;
    margin: 0;
  }

  .timeline-year,
  .timeline-label {
    grid-column: 2;
  }

  .story-closing blockquote p {
    font-size: 1.2rem;
  }

  .story-closing .takeaway {
    font-size: 1.15rem;
  }
}

.sources {
  clear: both;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  padding: 2rem 1.75rem;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: 0.9375rem;
}

/* .wrap's side padding would otherwise squeeze the card on narrow screens. */
@media (max-width: 47rem) {
  .sources {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    padding: 1.5rem 1.25rem;
  }
}

.sources h2 {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
}

.sources h3 {
  margin: 1.75rem 0 0.25rem;
  font-size: 1.05rem;
}

.hint {
  margin: 0 0 1rem;
  color: var(--muted);
}

.attribution {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

/* The text's attribution, then a credit for each photo. */
.attribution + .attribution {
  margin-top: 0.5rem;
}

.claims {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: claim;
}

.claims li {
  counter-increment: claim;
  border-top: 1px solid var(--line);
}

.claims summary {
  display: flex;
  gap: 0.75rem;
  padding: 0.7rem 0;
  cursor: pointer;
  list-style: none;
}

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

.claims summary::before {
  content: counter(claim);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--quote-bg);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
}

.claims details[open] summary::before {
  background: var(--sunrise);
  color: #fff;
}

.claims summary:hover {
  color: var(--accent);
}

.claims blockquote {
  margin: 0 0 0.5rem 2.5rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--sun-2);
  border-radius: 0 10px 10px 0;
  background: var(--quote-bg);
  font-family: var(--font-read);
  font-style: italic;
}

.claims details > a {
  display: inline-block;
  margin: 0 0 0.9rem 2.5rem;
  font-size: 0.875rem;
}

.back {
  padding-bottom: 3rem;
}

.page-plain {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.page-plain h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 850;
}

.meta {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Footer: back to the night. */
.site-footer {
  background: var(--ink);
  color: var(--ink-muted);
  font-size: 0.9rem;
  border-top: 5px solid transparent;
  border-image: var(--sunrise) 1;
}

.site-footer .wrap {
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

.site-footer p {
  margin: 0 0 0.5rem;
}

/* The accent is too dark for the night background. */
.site-footer a {
  color: var(--sun-1);
}

/* "CC BY-SA 4.0" is one name, not to be split across lines. */
a[rel="license"] {
  white-space: nowrap;
}

.brand-footer {
  color: var(--ink-text);
}

@media (max-width: 40rem) {
  .hero .wrap {
    padding-top: 2.25rem;
    padding-bottom: 5.5rem;
  }

  .card,
  .card-featured {
    padding: 1.5rem 1.25rem 1.25rem;
  }

  .story-body {
    font-size: 1.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }

  .card:hover,
  .card:focus-within {
    transform: none;
  }
}

/* «Мотивирует» under the story: a paper button with a flame outline; pressed, it catches the sunrise and the flame is lit. */
.story-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  scroll-margin-top: 1rem;
}

.motivates-form {
  margin: 0;
}

.motivates-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.35rem 0.7rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.motivates-button:hover {
  border-color: var(--sun-2);
}

.motivates-button:focus-visible {
  outline: 3px solid var(--sun-2);
  outline-offset: 3px;
}

.motivates-button .flame {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--sun-2);
}

/* The deep sunrise in both themes: white text reads on it, and on the bright one of the dark theme it would not. */
.motivates-button[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(90deg, #b45309, #c2410c 45%, #be123c);
  color: #fff;
  box-shadow: 0 6px 20px rgb(194 65 12 / 35%);
}

.motivates-button[aria-pressed="true"] .flame {
  color: #fff7ed;
  fill: #fcd34d;
  animation: flame-lit 0.4s ease;
}

.motivates-votes {
  padding-left: 0.6rem;
  border-left: 1px solid currentColor;
  font-variant-numeric: tabular-nums;
}

.motivates-votes:empty {
  display: none;
}

@keyframes flame-lit {
  40% {
    transform: scale(1.35);
  }
}

/* Other stories: a card with the sunrise bar on top, ranked ones numbered in sunrise colours. */
.picks {
  position: relative;
  overflow: hidden;
  padding: 1.4rem 1.4rem 1rem;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: 0.9375rem;
}

.picks::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--sunrise);
}

.picks-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.picks-title .flame {
  width: 1.15rem;
  height: 1.15rem;
}

.picks-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pick;
}

.picks-list li {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
  counter-increment: pick;
}

.picks-list.is-ranked li {
  grid-template-columns: 1.6rem 1fr;
  column-gap: 0.6rem;
}

.picks-list.is-ranked li::before {
  content: counter(pick);
  grid-row: span 3;
  font-size: 1.5rem;
  font-weight: 850;
  line-height: 1.1;
  background: var(--sunrise-deep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pick-person {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.picks-list a {
  color: var(--text);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

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

.pick-votes {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.pick-votes .flame {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--sun-2);
}

.story-picks {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.home-picks {
  margin-top: 2rem;
}

/* Beside the story when the right margin is wide enough for them: the story keeps its place under the heading. */
@media (min-width: 82rem) {
  .story-columns.has-picks {
    display: grid;
    grid-template-columns: 1fr minmax(0, 44rem) 1fr;
    align-items: start;
  }

  /* .wrap's auto margins would shrink a grid item to its content, the button's row to the button. */
  .story-columns.has-picks > * {
    grid-column: 2;
    width: 100%;
  }

  /* As tall as the story's five rows (text, button, sources, previous and next, back), so it stays in view down the
     whole story. */
  .story-columns.has-picks > .story-picks {
    position: sticky;
    top: 1.5rem;
    grid-column: 3;
    grid-row: 1 / span 5;
    width: 17rem;
    margin: 2.5rem 0 0 2rem;
    padding: 0;
  }
}

/* Beside the list of stories on the home page. */
@media (min-width: 64rem) {
  .stories-wrap.has-picks {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: 1.5rem;
    align-items: start;
  }

  .stories-wrap.has-picks > * {
    grid-column: 1;
  }

  .stories-wrap.has-picks > .home-picks {
    position: sticky;
    top: 1.5rem;
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motivates-button[aria-pressed="true"] .flame {
    animation: none;
  }
}

/* Sharing beside «Мотивирует»: round icon buttons; on a wide row they keep to the right. */
.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.share-label {
  margin-right: 0.25rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.share-link {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--text);
  font: inherit;
  box-shadow: var(--shadow);
  cursor: pointer;
}

/* display above would show a button the script keeps hidden. */
.share-link[hidden] {
  display: none;
}

.share-link:hover {
  border-color: var(--sun-2);
  color: var(--accent);
}

.share-link:focus-visible {
  outline: 3px solid var(--sun-2);
  outline-offset: 3px;
}

/* The icon is the whole button: no new-tab arrow beside it, the hidden text says it. */
.share-link[target="_blank"]::after {
  content: none;
}

.share-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.share-status {
  color: var(--muted);
  font-size: 0.875rem;
}

@media (max-width: 40rem) {
  .share {
    margin-left: 0;
  }
}

/* The stories before and after this one: two cards, the earlier one on the left, the later one on the right. */
.story-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.story-nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.story-nav-link.is-next {
  grid-column: 2;
  text-align: right;
}

.story-nav-link:hover,
.story-nav-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.story-nav-link:focus-visible {
  outline: 3px solid var(--sun-2);
  outline-offset: 3px;
}

.story-nav-direction {
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 700;
}

.story-nav-person {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.story-nav-title {
  font-weight: 800;
  line-height: 1.3;
}

@media (max-width: 40rem) {
  .story-nav {
    grid-template-columns: 1fr;
  }

  .story-nav-link.is-next {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-nav-link {
    transition: none;
  }

  .story-nav-link:hover,
  .story-nav-link:focus-visible {
    transform: none;
  }
}

/* The site in numbers under the home page heading. */
.hero-stats {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  color: var(--ink-text);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* MAX has no icon here: its name stands in, small and bold. */
.share-wordmark {
  font-size: 0.6875rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

/* The MAX link shares only from its phone app (Site/ShareLinks); on a computer it would just open MAX's own site. */
@media (hover: hover) and (pointer: fine) {
  .share-link[href^="https://max.ru/"] {
    display: none;
  }
}