.page-scenarios {
  --scn-indent: 40px;
  --scn-axis: 15px;
  --scn-node: 12px;
}

.page-scenarios .scn-hero {
  padding: var(--space-3) 0 var(--space-4);
  background:
    linear-gradient(104deg, var(--color-primary-soft) 0 38%, transparent 38%),
    var(--color-surface);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-scenarios .scn-hero__grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.page-scenarios .scn-hero__kicker {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-heading);
  color: var(--color-primary);
}

.page-scenarios .scn-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  max-width: 26ch;
}

.page-scenarios .scn-hero__lede {
  margin: var(--space-2) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
  max-width: var(--measure);
}

.page-scenarios .scn-hero__aside {
  border-top: var(--border-thick) solid var(--color-ink);
  padding-top: var(--space-2);
}

.page-scenarios .scn-hero__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.page-scenarios .scn-hero__facts li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: var(--border-thin) dotted var(--color-line);
}

.page-scenarios .scn-hero__fact-num {
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  color: var(--color-accent);
  min-width: 3ch;
}

.page-scenarios .scn-hero__fact-key {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.page-scenarios .scn-hero__note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}

.page-scenarios .scn-scale {
  background: var(--color-surface-alt);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-scenarios .scn-scale__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--border-thin);
}

.page-scenarios .scn-scale__item a {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: var(--border-thin) solid transparent;
  transition: border-color 160ms ease-out, color 160ms ease-out;
}

.page-scenarios .scn-scale__item a:hover,
.page-scenarios .scn-scale__item a:focus-visible {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

.page-scenarios .scn-scale__no {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary);
}

.page-scenarios .scn-scale__name {
  font-weight: var(--weight-heading);
}

.page-scenarios .scn-scale__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-scenarios .scn-moments-wrap {
  padding: var(--section-y) 0 0;
}

.page-scenarios .scn-moments {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.page-scenarios .scn-moment {
  position: relative;
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
}

.page-scenarios .scn-moment:focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: var(--space-1);
}

.page-scenarios .scn-moment__mark {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--scn-node);
  height: var(--scn-node);
  transform: translateY(-50%);
  background: var(--color-surface);
  border: var(--border-thick) solid var(--color-primary);
  border-radius: calc(var(--radius-sm) / 2);
}

.page-scenarios .scn-moment__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.page-scenarios .scn-moment__time {
  display: block;
  margin-top: calc(var(--space-1) / 2);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-scenarios .scn-moment__pop {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: 6;
  width: 100%;
  padding: var(--space-2);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease-out, visibility 160ms ease-out;
}

.page-scenarios .scn-moment:hover .scn-moment__pop,
.page-scenarios .scn-moment:focus .scn-moment__pop,
.page-scenarios .scn-moment:focus-within .scn-moment__pop {
  opacity: 1;
  visibility: visible;
}

.page-scenarios .scn-moment__pop-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-scenarios .scn-moment__fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(var(--space-1) / 2);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.page-scenarios .scn-moment__fields li {
  padding-bottom: calc(var(--space-1) / 2);
  border-bottom: var(--border-thin) dotted var(--color-line);
}

.page-scenarios .scn-stream {
  position: relative;
  padding-top: var(--section-y);
}

.page-scenarios .scn-stream::before {
  content: "";
  position: absolute;
  left: var(--scn-axis);
  top: 0;
  bottom: 0;
  width: var(--border-thin);
  background: var(--color-line);
  z-index: 0;
}

.page-scenarios .scn-group {
  position: relative;
  padding-left: var(--scn-indent);
  padding-bottom: var(--space-6);
}

.page-scenarios .scn-group__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  padding-left: var(--space-2);
  border-left: var(--border-thick) solid var(--color-primary);
  margin-bottom: var(--space-3);
}

.page-scenarios .scn-group__node {
  position: absolute;
  left: calc(var(--scn-axis) - var(--scn-indent) - var(--scn-node) / 2);
  top: calc(var(--space-1) / 2);
  width: var(--scn-node);
  height: var(--scn-node);
  background: var(--color-primary);
  border-radius: calc(var(--radius-sm) / 2);
}

.page-scenarios .scn-group__no {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-primary);
}

.page-scenarios .scn-group__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-scenarios .scn-group__range {
  margin: 0 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-scenarios .scn-group__body {
  display: grid;
  gap: var(--space-3);
}

.page-scenarios .scn-group__lede {
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-scenarios .scn-group__lede > p {
  margin: 0;
}

.page-scenarios .scn-points {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.page-scenarios .scn-points li {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-scenarios .scn-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: var(--space-2);
  height: var(--border-thick);
  background: var(--color-primary);
}

.page-scenarios .scn-entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-scenarios .scn-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-2);
  padding: var(--space-3) 0;
  border-top: var(--border-thin) dotted var(--color-line);
}

.page-scenarios .scn-entry:first-child {
  border-top: var(--border-thin) solid var(--color-line);
}

.page-scenarios .scn-entry__idx {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  padding-top: 0.15em;
}

.page-scenarios .scn-entry__body {
  min-width: 0;
}

.page-scenarios .scn-entry__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-scenarios .scn-entry__desc {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
  max-width: var(--measure);
}

.page-scenarios .scn-entry__steps {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  counter-reset: scn-step;
}

.page-scenarios .scn-entry__steps li {
  counter-increment: scn-step;
  display: flex;
  align-items: center;
  gap: calc(var(--space-1) / 2);
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
  padding: calc(var(--space-1) / 4) var(--space-1);
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
}

.page-scenarios .scn-entry__steps li::before {
  content: counter(scn-step);
  font-family: var(--font-mono);
  color: var(--color-primary);
}

.page-scenarios .scn-entry__fields {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.page-scenarios .scn-entry__fields li {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
  background: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: calc(var(--space-1) / 4) var(--space-1);
}

.page-scenarios .scn-entry__when {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-scenarios .scn-entry__when .num {
  font-family: var(--font-mono);
  color: var(--color-primary);
  margin-right: var(--space-1);
}

.page-scenarios .scn-entry__pit {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-left: var(--border-thick) solid var(--color-accent);
  background: color-mix(in srgb, var(--color-highlight) 40%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.page-scenarios .scn-entry__pit p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-scenarios .scn-entry__pit p + p {
  margin-top: calc(var(--space-1) / 2);
}

.page-scenarios .scn-pit__label {
  display: inline-block;
  margin-right: var(--space-1);
  padding: calc(var(--space-1) / 4) var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink);
  background: var(--color-highlight);
  border-radius: var(--radius-sm);
}

.page-scenarios .scn-pit__label--fix {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.page-scenarios .scn-group__more {
  grid-column: 1 / -1;
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: var(--border-thin) dotted var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-scenarios .scn-group__more a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-scenarios .scn-tick {
  position: relative;
  margin: 0 0 var(--space-6) var(--scn-indent);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-2);
  background: color-mix(in srgb, var(--color-primary-soft) 55%, transparent);
  border-top: var(--border-thin) solid var(--color-line);
  border-bottom: var(--border-thin) solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.page-scenarios .scn-tick__mark {
  position: absolute;
  left: calc(var(--scn-axis) - var(--scn-indent) - var(--scn-node) / 2);
  top: 50%;
  width: var(--scn-node);
  height: var(--scn-node);
  transform: translateY(-50%);
  background: var(--color-surface);
  border: var(--border-thick) solid var(--color-primary);
  border-radius: 50%;
}

.page-scenarios .scn-tick__label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
  color: var(--color-primary);
}

.page-scenarios .scn-tick__text {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.page-scenarios .scn-figure {
  margin: 0 0 var(--space-3);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.page-scenarios .scn-figure .figure__img {
  display: block;
  overflow: hidden;
}

.page-scenarios .scn-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-scenarios .scn-figure .figure__cap {
  display: block;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  background: var(--color-surface-alt);
  border-top: var(--border-thin) solid var(--color-line);
}

.page-scenarios .scn-figure--banner {
  margin-bottom: var(--space-4);
}

.page-scenarios .scn-daily {
  position: relative;
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface-alt);
  border-left: var(--border-thick) solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.page-scenarios .scn-daily__kicker {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
}

.page-scenarios .scn-daily__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  max-width: 24ch;
}

.page-scenarios .scn-daily__text {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
  max-width: var(--measure);
}

@media (min-width: 720px) {
  .page-scenarios .scn-scale__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .page-scenarios .scn-scale__item a {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--space-1) / 2);
    padding: var(--space-2);
    border-bottom: none;
    border-left: var(--border-thin) solid var(--color-line);
  }

  .page-scenarios .scn-scale__item:first-child a {
    border-left: none;
    padding-left: 0;
  }

  .page-scenarios .scn-scale__count {
    margin-left: 0;
  }

  .page-scenarios .scn-moments {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-scenarios {
    --scn-indent: 56px;
    --scn-axis: 23px;
  }

  .page-scenarios .scn-hero {
    padding: var(--space-4) 0 var(--space-6);
  }

  .page-scenarios .scn-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-4);
    align-items: start;
  }

  .page-scenarios .scn-hero__title {
    font-size: var(--text-3xl);
  }

  .page-scenarios .scn-group__body {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: var(--space-4);
  }

  .page-scenarios .scn-group__title {
    font-size: var(--text-2xl);
  }

  .page-scenarios .scn-group__lede {
    padding-top: var(--space-3);
  }

  .page-scenarios .scn-figure--narrow {
    max-width: 72%;
  }

  .page-scenarios .scn-figure--banner {
    margin-left: var(--scn-indent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-scenarios .scn-scale__item a,
  .page-scenarios .scn-moment__pop {
    transition: none;
  }
}