:root {
    --black: #0e0e0e;
    --ink: #1f1f1f;
    --stone: #c7c2b5;
    --paper: #f6f4ef;
    --white: #ffffff;
    --red: #dd0612;
    --red-dark: #ab0a13;
    --green: #3f6d4a;
    --teal: #235e67;
    --font-heading-large: clamp(2.4rem, 4.8vw, 4.7rem);
    --font-heading-medium: clamp(1.35rem, 2vw, 1.9rem);
    --font-heading-small: 1.08rem;
    --font-content: 1rem;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.template-infopage {
    margin: 0;
    background: var(--black);
    color: var(--paper);
    font-family: Avenir, "Segoe UI", Arial, sans-serif;
    font-size: var(--font-content);
    line-height: 1.6;
}

body.template-infopage img {
    display: block;
    max-width: 100%;
}

body.template-infopage a {
    color: inherit;
    text-decoration: none;
}

body.template-infopage h1,
body.template-infopage h2,
body.template-infopage h3,
body.template-infopage p {
    margin: 0;
}

.section-inner {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.info-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: minmax(260px, 34%) 1fr;
    gap: 26px;
    align-items: center;
    padding: 16px max(20px, 5vw);
    background: rgba(14, 14, 14, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
}

.info-logo img {
    width: min(360px, 100%);
    height: auto;
}

.info-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.info-nav > a,
.nav-trigger {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 13px;
}

.info-header .info-nav a,
.nav-trigger {
    color: var(--stone);
    font-weight: 700;
}

.nav-trigger {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.nav-item {
    position: relative;
}

.nav-trigger::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 7px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.subnav {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    min-width: 210px;
    padding: 8px 0;
    background: var(--paper);
    border-top: 3px solid var(--red);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
}

.subnav a,
.info-header .info-nav .subnav a {
    display: block;
    padding: 10px 16px;
    color: var(--ink);
    white-space: nowrap;
}

.has-subnav.is-open .subnav {
    display: block;
}

.info-header .info-nav a:hover,
.nav-trigger:hover,
.info-footer a:hover {
    color: var(--red);
}

.info-header .info-nav .subnav a:hover {
    color: var(--red);
}

.info-header .info-nav > a.is-current,
.info-nav .has-subnav.is-current:not(.is-open) > .nav-trigger {
    color: var(--white);
    font-weight: 900;
}

.info-header .info-nav .subnav a.is-current {
    color: var(--red);
    font-weight: 900;
}

.info-hero {
    position: relative;
    display: grid;
    min-height: min(760px, calc(100vh - 75px));
    overflow: hidden;
    background: var(--black);
}

.info-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.info-hero-media::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background: linear-gradient(90deg, rgba(14, 14, 14, 0.9), rgba(14, 14, 14, 0.34) 58%, rgba(14, 14, 14, 0.7));
}

.info-hero-media img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center 62%;
}

.info-hero-content {
    position: absolute;
    left: max(20px, 7vw);
    bottom: clamp(80px, 12vh, 128px);
    z-index: 2;
    width: min(760px, calc(100% - 40px));
    max-height: calc(100% - 56px);
    margin: 0;
    padding: 0;
}

.eyebrow {
    color: var(--red);
    font-size: var(--font-heading-small);
    font-weight: 900;
    text-transform: uppercase;
}

.info-hero h1 {
    margin-top: 10px;
    color: var(--white);
    font-size: var(--font-heading-large);
    line-height: 0.98;
}

.info-hero p:not(.eyebrow) {
    max-width: 640px;
    margin-top: 16px;
    color: var(--paper);
    font-size: var(--font-content);
    font-weight: 700;
    line-height: 1.3;
}

.hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero-links a,
.slider-controls button,
.timeline > button,
.action-grid > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 2px solid currentColor;
    background: transparent;
    color: var(--white);
    cursor: pointer;
    font-weight: 900;
    text-transform: uppercase;
}

.hero-links a {
    padding: 0 18px;
}

.hero-links a:hover,
.slider-controls button:hover,
.timeline > button:hover,
.action-grid > button:hover {
    border-color: var(--red);
    background: var(--red);
}

.section-dark,
.impact {
    padding: 82px 0;
}

.section-dark {
    background: var(--black);
    color: var(--paper);
}

.info-intro {
    padding: 44px 0 48px;
}

.actions {
    padding-bottom: 34px;
}

.impact {
    background: var(--paper);
    color: var(--ink);
}

@media (min-width: 1041px) {
    .info-intro {
        padding-bottom: 12px;
    }

    .info-intro .section-inner {
        display: grid;
        width: min(1460px, calc(100% - 56px));
        grid-template-columns: minmax(460px, 1fr) 760px;
        gap: 24px;
        align-items: center;
    }

    .info-intro .intro-copy {
        align-self: center;
        max-width: 760px;
        margin: 0;
    }

    .info-intro .concepts {
        justify-self: end;
        width: 760px;
        height: 760px;
        aspect-ratio: 1;
        margin: 0;
    }
}

.intro-copy {
    display: grid;
    gap: 42px;
    max-width: 960px;
    margin: 0 auto;
    color: var(--stone);
    text-align: justify;
}

.info-intro .intro-copy h2 {
    width: min(740px, 100%);
    margin: 0;
    color: var(--white);
    font-size: clamp(2rem, 3.2vw, 3.35rem);
    line-height: 1.02;
    text-align: center;
}

.intro-copy-body {
    display: grid;
    width: min(740px, 100%);
    gap: 22px;
}

.info-intro .intro-copy-body p {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.45;
}

.concepts {
    position: relative;
    width: min(760px, 100%);
    aspect-ratio: 1;
    margin: 54px auto 0;
}

.concepts::before {
    content: "";
    position: absolute;
    inset: 170px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    pointer-events: none;
}

.concept-node {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: clamp(112px, 18vw, 140px);
    aspect-ratio: 1;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: #151515;
    color: var(--paper);
    cursor: pointer;
    font: inherit;
    font-size: clamp(0.6rem, 1vw, 0.74rem);
    font-weight: 900;
    line-height: 1.16;
    text-align: center;
    text-transform: uppercase;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.concept-node::before,
.concept-node::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.concept-node::before {
    inset: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.concept-node::after {
    inset: -7px;
    border: 2px solid rgba(202, 30, 37, 0.34);
    opacity: 0;
    transition: opacity 180ms ease;
}

.concept-node:nth-of-type(1) {
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
}

.concept-node:nth-of-type(2) {
    top: 245px;
    right: 110px;
}

.concept-node:nth-of-type(3) {
    right: 187px;
    bottom: 140px;
}

.concept-node:nth-of-type(4) {
    bottom: 140px;
    left: 187px;
}

.concept-node:nth-of-type(5) {
    top: 245px;
    left: 110px;
}

.concepts-4 .concept-node:nth-of-type(2) {
    top: 50%;
    right: 100px;
    transform: translateY(-50%);
}

.concepts-4 .concept-node:nth-of-type(3) {
    right: auto;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
}

.concepts-4 .concept-node:nth-of-type(4) {
    top: 50%;
    bottom: auto;
    left: 100px;
    transform: translateY(-50%);
}

.concept-node:hover {
    border-color: var(--red);
}

.concept-node[aria-expanded="true"] {
    background: var(--red);
    color: var(--white);
}

.concept-node[aria-expanded="true"]::after {
    opacity: 1;
}

.concept-answer {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: min(260px, calc(100% - 420px));
    margin: 0;
    color: var(--stone);
    font-size: var(--font-content);
    line-height: 1.72;
    text-align: center;
    transform: translate(-50%, -50%);
}

.section-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: 42px;
    row-gap: 18px;
    align-items: start;
    margin-bottom: 42px;
}

.section-heading h2 {
    grid-column: 1;
    color: var(--white);
    font-size: var(--font-heading-large);
    line-height: 1.02;
}

.impact .section-heading h2 {
    color: var(--ink);
}

.section-heading p:not(.eyebrow) {
    grid-column: 1;
    max-width: 620px;
    color: var(--stone);
    font-size: var(--font-content);
}

.impact .section-heading p:not(.eyebrow) {
    color: #555;
}


.section-reading {
    margin-bottom: 42px;
}

.section-reading h2 {
    color: var(--white);
    font-size: clamp(1.75rem, 2.35vw, 2.65rem);
    line-height: 1.08;
}

.impact .section-reading h2 {
    color: var(--ink);
}

.section-reading p:not(.eyebrow) {
    max-width: 760px;
    margin-top: 8px;
    color: var(--stone);
    font-size: var(--font-content);
}

.impact .section-reading p:not(.eyebrow) {
    color: #555;
}
.info-slider h3,
.timeline h2,
.timeline h3,
.pattern-grid h3,
.species-cards h3,
.action-grid h2,
.action-grid h3 {
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 12px;
}

.impact .timeline h2,
.impact .timeline h3,
.impact .species-cards h3 {
    color: var(--ink);
}

.info-slider {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: #101010;
}

.slider-viewport {
    position: relative;
    min-height: 560px;
}

.slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(5%);
    transition: opacity 420ms ease, transform 420ms ease;
}

.slide.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.slide.is-wide-media {
    grid-template-columns: 1fr;
    align-content: center;
}

.slide.no-media {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    background: #101010;
}

.slide img {
    width: 100%;
    height: 560px;
    object-fit: contain;
    padding: 28px;
    background: #050505;
}

.slide.is-wide-media img {
    align-self: end;
    height: auto;
    max-height: 220px;
    padding: 54px 46px 28px;
}

.action-slider .slide img {
    object-fit: cover;
    padding: 0;
}

.action-slider .slide.is-wide-media img {
    height: 560px;
    max-height: none;
    padding: 0;
    object-fit: cover;
}

.slide div {
    display: grid;
    align-content: center;
    padding: 34px;
}

.slide.is-wide-media div {
    align-content: start;
    padding: 22px 46px 54px;
}

.slide.no-media p {
    font-size: var(--font-content);
}

.activity-visual,
.reproduction-original-visual {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 560px;
    padding: 36px;
    background:
        radial-gradient(circle at 50% 46%, rgba(221, 6, 18, 0.22), transparent 34%),
        #050505;
}

.reproduction-original-visual {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 560px;
    padding: 26px;
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.8), rgba(246, 244, 239, 0.76) 34%, rgba(210, 204, 188, 0.66) 72%),
        linear-gradient(135deg, #f6f4ef, #d0ccc0);
}

.reproduction-graph {
    display: grid;
    width: min(620px, 100%);
    gap: 0;
    align-items: end;
}

.slide .reproduction-graph img {
    height: auto;
    max-height: none;
    padding: 0;
    background: transparent;
    object-fit: contain;
}

.slide .reproduction-graph .cycle-graph {
    width: 73.2%;
    margin-left: 9.5%;
    margin-right: auto;
}

.slide .reproduction-graph .month-strip {
    width: 100%;
    margin-top: -8px;
}

.activity-visual ol {
    display: grid;
    width: min(560px, 100%);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    list-style: none;
}

.activity-visual li {
    display: grid;
    min-height: 54px;
    place-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.55);
    background: #4a4829;
    color: var(--white);
    font-size: var(--font-heading-small);
    font-weight: 900;
}

.activity-visual li:last-child {
    border-right: 0;
}

.activity-visual li.is-active {
    background: var(--red);
}

.activity-visual p {
    margin-top: 18px;
    color: var(--white);
    font-size: var(--font-heading-small);
    font-weight: 900;
    text-transform: uppercase;
}

.reproduction-visual ol {
    display: grid;
    width: min(540px, 100%);
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reproduction-visual li {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 14px;
    align-items: center;
    min-height: 78px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.reproduction-visual li::before {
    position: absolute;
    top: -15px;
    bottom: -15px;
    left: 43px;
    z-index: 0;
    width: 2px;
    content: "";
    background: rgba(221, 6, 18, 0.5);
}

.reproduction-visual li:first-child::before {
    top: 50%;
}

.reproduction-visual li:last-child::before {
    bottom: 50%;
}

.reproduction-visual span {
    position: relative;
    z-index: 1;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 50%;
    background: var(--red);
    color: var(--white);
    font-size: var(--font-heading-small);
    font-weight: 900;
}

.reproduction-visual strong,
.reproduction-visual small {
    display: block;
}

.reproduction-visual strong {
    color: var(--white);
    font-size: var(--font-heading-small);
    line-height: 1.2;
}

.reproduction-visual small {
    margin-top: 3px;
    color: var(--stone);
    font-size: var(--font-content);
}

.action-grid h2,
.timeline h2,
.slide-copy h2 {
    font-size: var(--font-heading-medium);
}

.slide h3 {
    font-size: var(--font-heading-small);
}

.slide-copy h2 {
    padding-bottom: 12px;
    line-height: 1.15;
}

.slide-copy p {
    margin: 0;
    color: var(--stone);
    line-height: 1.35;
}

.slider-controls {
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.slider-controls button,
.timeline > button,
.action-grid > button {
    width: 48px;
    min-height: 48px;
    padding: 0;
    border-color: rgba(255, 255, 255, 0.34);
    font-size: var(--font-heading-small);
    line-height: 1;
}

[data-dots] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

[data-dots] button {
    width: 12px;
    min-height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
}

[data-dots] button.active {
    background: var(--red);
}

.pattern-grid,
.action-grid {
    display: grid;
    gap: 18px;
    margin-top: 38px;
}

.pattern-grid,
.species-cards {
    display: flex;
    grid-template-columns: none;
    gap: 18px;
    margin-top: 38px;
    cursor: grab;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px;
    scroll-padding-inline: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-y;
    user-select: none;
}

.pattern-grid.is-dragging,
.species-cards.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.pattern-grid article,
.species-cards article,
.action-grid article {
    min-width: 0;
    overflow: hidden;
    background: #151515;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.pattern-grid article,
.species-cards article {
    flex: 0 0 calc((100% - 36px) / 2.5);
    scroll-snap-align: start;
}

.pattern-grid::-webkit-scrollbar,
.species-cards::-webkit-scrollbar {
    display: none;
}

.pattern-grid img,
.species-cards img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.pattern-grid h3,
.pattern-grid p,
.species-cards h3,
.species-cards p {
    padding: 0 18px;
}

.pattern-grid h3,
.species-cards h3 {
    min-height: 0;
    margin: 0;
    padding-top: 18px;
    padding-bottom: 16px;
    font-size: var(--font-heading-small);
    line-height: 1.15;
    text-transform: uppercase;
}

.pattern-grid p,
.species-cards p {
    margin: 0;
    padding-bottom: 22px;
    color: var(--stone);
    line-height: 1.35;
}

.timeline {
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    gap: 16px;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.timeline-track {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 300px;
    overflow: hidden;
}

.timeline article {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    align-content: start;
    align-content: safe center;
    max-height: 100%;
    min-width: 0;
    padding: 36px;
    background: var(--white);
    border: 2px solid var(--red);
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: break-word;
    overscroll-behavior: contain;
    pointer-events: none;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
    scrollbar-width: thin;
    touch-action: pan-y;
    transition: opacity 220ms ease;
}

.timeline article::-webkit-scrollbar {
    width: 5px;
}

.timeline article::-webkit-scrollbar-track {
    background: transparent;
}

.timeline article::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.16);
    border-radius: 999px;
}

.timeline article::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.28);
}

.timeline article.active {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
}

.timeline-body {
    margin-top: 12px;
    color: #555;
    font-size: var(--font-content);
    line-height: 1.35;
}

.timeline-body p {
    margin: 0;
    color: inherit;
    line-height: inherit;
}

.impact .timeline > button {
    color: var(--ink);
    border-color: rgba(0, 0, 0, 0.34);
}

.impact .timeline > button:hover {
    color: var(--white);
}

.species-cards article {
    background: var(--white);
    border-color: rgba(0, 0, 0, 0.12);
}

.species-cards p {
    color: #555;
}

.action-grid {
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    gap: 16px;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin-bottom: 36px;
}

.action-grid-track {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 300px;
    overflow: hidden;
}

.action-grid article {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    align-content: start;
    align-content: safe center;
    max-height: 100%;
    min-width: 0;
    padding: 36px;
    background: #151515;
    border: 2px solid var(--red);
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: break-word;
    overscroll-behavior: contain;
    pointer-events: none;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    scrollbar-width: thin;
    touch-action: pan-y;
    transition: opacity 220ms ease;
}

.action-grid article::-webkit-scrollbar {
    width: 5px;
}

.action-grid article::-webkit-scrollbar-track {
    background: transparent;
}

.action-grid article::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
}

.action-grid article::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

.action-grid article.active {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
}

.action-body {
    margin-top: 12px;
    color: var(--stone);
    line-height: 1.35;
}

.action-body p {
    margin: 0;
    color: inherit;
    line-height: inherit;
}

.action-body p + p {
    margin-top: 12px;
}

.info-footer {
    padding: 28px 0 28px;
    background: var(--black);
    color: var(--stone);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, 1fr);
    gap: 36px;
}

.info-footer h2,
.info-footer h3 {
    color: var(--white);
    line-height: 1.2;
}

.info-footer h3 {
    margin-bottom: 16px;
    font-size: var(--font-heading-small);
    text-transform: uppercase;
}

.info-footer p,
.info-footer a {
    display: block;
    margin-top: 8px;
}

.footer-strip {
    width: min(640px, calc(100% - 40px));
    margin: 34px auto 0;
}

.copyright {
    margin-top: 30px;
    color: #8f8b82;
    text-align: center;
}

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 650ms ease, transform 650ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.timeline-track > article > h3 {
    margin-bottom: 12px;
}

.footer-hr {
    margin-top: 30px;
    width: min(1000px, calc(100% - 40px));
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 1040px) {
    .info-header,
    .intro-copy,
    .section-heading,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .section-heading h2,
    .section-heading p:not(.eyebrow) {
        grid-column: auto;
    }

    .info-header {
        justify-items: center;
    }

    .concepts {
        width: min(680px, 100%);
    }

    .concepts::before {
        inset: 130px;
    }

    .concept-node {
        width: 132px;
        font-size: 0.68rem;
    }

    .concept-answer {
        width: min(230px, calc(100% - 390px));
    }

    .concept-node:nth-of-type(1) {
        top: 64px;
    }

    .concept-node:nth-of-type(2) {
        top: 194px;
        right: 74px;
    }

    .concept-node:nth-of-type(3) {
        right: 136px;
        bottom: 71px;
    }

    .concept-node:nth-of-type(4) {
        bottom: 71px;
        left: 136px;
    }

    .concept-node:nth-of-type(5) {
        top: 194px;
        left: 74px;
    }

    .concepts-4 .concept-node:nth-of-type(2) {
        right: 64px;
    }

    .concepts-4 .concept-node:nth-of-type(3) {
        bottom: 64px;
    }

    .concepts-4 .concept-node:nth-of-type(4) {
        left: 64px;
    }

    .slide {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .slide.no-media {
        grid-template-columns: 1fr;
    }

    .slider-viewport {
        min-height: 600px;
    }

    .slide img {
        height: 340px;
    }

    .slide div {
        align-content: start;
        padding: 30px 34px;
    }

    .activity-visual,
    .reproduction-original-visual {
        min-height: 360px;
    }

    .slide.is-wide-media img {
        max-height: 180px;
    }

    .pattern-grid article,
    .species-cards article {
        flex-basis: calc((100% - 18px) / 1.5);
    }
}

@media (max-width: 720px) {
    .info-nav {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow-x: visible;
        overflow-y: visible;
        gap: 4px;
        padding-bottom: 0;
        scrollbar-width: thin;
    }

    .info-nav > a,
    .nav-trigger {
        min-height: 38px;
        padding: 0 10px;
        white-space: nowrap;
    }

    .nav-item {
        flex: 0 0 auto;
    }

    .subnav {
        position: absolute;
        min-width: 220px;
        margin: 0;
        z-index: 20;
        background: var(--paper);
        border-top: 3px solid var(--red);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
    }

    .subnav a {
        padding: 8px 10px;
    }

    .info-logo img {
        width: min(360px, 92vw);
    }

    .info-hero {
        min-height: clamp(440px, 105vw, 520px);
        align-items: end;
    }

    .info-hero-media::after {
        background: linear-gradient(180deg, rgba(14, 14, 14, 0.28), rgba(14, 14, 14, 0.94));
    }

    .info-hero-content {
        position: relative;
        inset: auto;
        width: auto;
        max-height: none;
        margin: 0;
        padding: 180px 20px 32px;
    }

    .info-hero h1 {
        font-size: clamp(1.8rem, 7.5vw, 2.4rem);
        line-height: 1.06;
    }

    .section-dark,
    .impact {
        padding: 58px 0;
    }

    .info-intro {
        padding: 38px 0 42px;
    }

    .info-intro .intro-copy h2 {
        text-align: left;
    }

    .info-intro .intro-copy-body p {
        line-height: 1.28;
        text-align: left;
    }

    .actions {
        padding-bottom: 32px;
    }

    .timeline,
    .action-grid {
        grid-template-columns: minmax(0, 1fr) 48px 48px minmax(0, 1fr);
    }

    .concepts {
        display: grid;
        gap: 10px;
        width: 100%;
        aspect-ratio: auto;
        margin-top: 34px;
    }

    .concepts::before {
        display: none;
    }

    .concept-node {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        min-height: 58px;
        aspect-ratio: auto;
        padding: 14px 18px;
        border-radius: 0;
        text-align: left;
        transform: none;
    }

    .concept-node:nth-of-type(1),
    .concept-node:nth-of-type(2),
    .concept-node:nth-of-type(3),
    .concept-node:nth-of-type(4),
    .concept-node:nth-of-type(5),
    .concepts-4 .concept-node:nth-of-type(2),
    .concepts-4 .concept-node:nth-of-type(3),
    .concepts-4 .concept-node:nth-of-type(4) {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
    }

    .concept-node::before,
    .concept-node::after {
        display: none;
    }

    .concept-answer {
        position: static;
        width: 100%;
        margin: 0;
        padding: 18px;
        color: var(--stone);
        text-align: left;
        transform: none;
    }

    .slider-viewport {
        min-height: 590px;
    }

    .slide img {
        height: 300px;
        padding: 18px;
    }

    .slide.is-wide-media img {
        max-height: 150px;
        padding: 30px 22px 16px;
    }

    .action-slider .slide img {
        padding: 0;
    }

    .action-slider .slide.is-wide-media img {
        height: 350px;
        max-height: none;
        padding: 0;
    }

    .slide div {
        padding: 26px;
    }

    .slide.is-wide-media div {
        padding: 18px 26px 34px;
    }

    .activity-visual,
    .reproduction-original-visual {
        min-height: 280px;
        padding: 24px 18px;
    }

    .activity-visual li {
        min-height: 42px;
        font-size: var(--font-heading-small);
    }

    .reproduction-visual li {
        grid-template-columns: 42px 1fr;
        min-height: 70px;
        padding: 12px 14px;
    }

    .reproduction-visual li::before {
        left: 34px;
    }

    .reproduction-visual span {
        width: 42px;
        height: 42px;
        font-size: var(--font-heading-small);
    }

    .timeline,
    .action-grid {
        justify-items: stretch;
        gap: 12px;
    }

    .timeline > button,
    .action-grid > button {
        grid-row: 2;
        grid-column: 2;
        width: 48px;
        justify-self: center;
    }

    .timeline > button[data-next],
    .action-grid > button[data-next] {
        grid-column: 3;
    }

    .timeline-track,
    .action-grid-track {
        grid-row: 1;
        grid-column: 1 / -1;
        height: 380px;
    }

    .timeline article,
    .action-grid article {
        align-content: start;
        padding: 24px 18px;
    }

    .pattern-grid article,
    .species-cards article {
        flex-basis: calc((100% - 18px) / 1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}