.about-section + .about-section { margin-top: var(--space-section); }
.about-section { container-type: inline-size; }
.about-map { display: grid; grid-template-columns: auto minmax(8rem, 13rem) auto minmax(8rem, 13rem) auto; justify-content: center; align-items: center; margin: 0; }
.about-map__line { align-self: stretch; display: grid; grid-template-rows: 1fr auto 1fr; margin: 0; }
.about-map__line span { align-self: end; justify-self: center; max-width: 11.5rem; padding: 0 0.75rem 0.6rem; color: var(--color-accent); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.35; text-align: center; text-transform: uppercase; text-wrap: balance; }
.about-map__line::after { content: ""; grid-row: 2; border-top: 2px solid var(--color-accent); }
.about-map__node { position: relative; display: grid; justify-items: center; }
.about-map { --bear-scale: 5; }
.about-map__mascot { display: grid; place-items: center; place-content: center; width: 10.5rem; height: 11rem; }
.about-map__bear { display: block; width: calc(32px * var(--bear-scale)); image-rendering: pixelated; image-rendering: crisp-edges; }
.about-map .kit-strip__stage { --ks-scale: var(--bear-scale); }
.about-map__role { position: absolute; top: calc(100% + 0.75rem); margin: 0; color: var(--color-primary); font: 600 1.375rem/1.2 var(--font-heading); white-space: nowrap; }
.about-map__strands { margin: 0; padding: 0; list-style: none; }
.about-map__strands li { position: relative; display: grid; padding: 0.8rem 0 0.8rem 2.25rem; }
.about-map__strands li::before { content: ""; position: absolute; left: 0; top: calc(50% - 1px); width: 1.5rem; border-top: 2px solid var(--color-accent); }
.about-map__strands li::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--color-accent); }
.about-map__strands li:first-child::after { top: calc(50% - 1px); }
.about-map__strands li:last-child::after { bottom: calc(50% - 1px); }
.about-map__strands strong { color: var(--color-primary); font: 600 1.375rem/1.25 var(--font-heading); }
.about-map__strands span { font-size: 1rem; line-height: 1.4; text-wrap: balance; }
.about-rows { margin-top: 2.5rem; counter-reset: row; }
.about-rows > li { counter-increment: row; }
.about-rows h3 { margin: 0; font-size: 1.625rem; line-height: 1.2; }
.about-rows p { margin-bottom: 0; }
.about-rows__meaning { color: var(--color-primary); }
.about-rows p + p { margin-top: 0.5rem; }
.about-rows--numbered h3 { position: relative; padding-left: 2.75rem; }
.about-rows--numbered h3::before { content: counter(row, decimal-leading-zero); position: absolute; left: 0; color: var(--color-accent); }

@media (max-width: 75rem) {
  .about-map { --bear-scale: 4; }
  .about-map__mascot { width: 8.5rem; height: 9rem; }
  .about-map__line span { padding-inline: 0.5rem; }
  .about-map__strands strong { font-size: 1.25rem; }
}
@container (width <= 57.05rem) {
  .about-map { --rail: 7rem; --bear-scale: 3; grid-template-columns: auto; justify-items: start; }
  .about-map__line { align-self: auto; grid-template-rows: none; grid-template-columns: var(--rail) auto; min-height: 4.5rem; }
  .about-map__line::after { grid-row: 1; grid-column: 1; justify-self: center; border-top: 0; border-left: 2px solid var(--color-accent); }
  .about-map__line span { grid-row: 1; grid-column: 2; align-self: center; justify-self: start; padding: 0 0 0 1rem; text-align: left; }
  .about-map__node { grid-template-columns: var(--rail) auto; align-items: center; justify-items: start; gap: 1rem; }
  .about-map__mascot { width: var(--rail); height: 6.75rem; }
  .about-map__role { position: static; white-space: normal; }
  .about-map__strands { margin-left: calc(var(--rail) / 2 - 1px); }
  .about-map__strands li:first-child::after { top: 0; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 62rem) {
    .about-map { --rail: 7rem; --bear-scale: 3; grid-template-columns: auto; justify-items: start; }
    .about-map__line { align-self: auto; grid-template-rows: none; grid-template-columns: var(--rail) auto; min-height: 4.5rem; }
    .about-map__line::after { grid-row: 1; grid-column: 1; justify-self: center; border-top: 0; border-left: 2px solid var(--color-accent); }
    .about-map__line span { grid-row: 1; grid-column: 2; align-self: center; justify-self: start; padding: 0 0 0 1rem; text-align: left; }
    .about-map__node { grid-template-columns: var(--rail) auto; align-items: center; justify-items: start; gap: 1rem; }
    .about-map__mascot { width: var(--rail); height: 6.75rem; }
    .about-map__role { position: static; white-space: normal; }
    .about-map__strands { margin-left: calc(var(--rail) / 2 - 1px); }
    .about-map__strands li:first-child::after { top: 0; }
  }
}
@media (max-width: 40rem) {
  .about-rows h3 { font-size: 1.375rem; }
  .about-rows--numbered h3 { padding-left: 2.375rem; }
  .about-map__strands li { padding-left: 1.875rem; }
  .about-map__strands li::before { width: 1.25rem; }
  .about-map__strands strong { font-size: 1.125rem; }
}