@font-face {
    font-family: "Hanken Grotesk";
    src: url("../fonts/hanken-grotesk-400.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Hanken Grotesk";
    src: url("../fonts/hanken-grotesk-500.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Hanken Grotesk";
    src: url("../fonts/hanken-grotesk-600.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Hanken Grotesk";
    src: url("../fonts/hanken-grotesk-700.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    color-scheme: light;
    --color-ink: oklch(25% 0.028 158);
    --color-ink-soft: oklch(39% 0.024 158);
    --color-canvas: oklch(96.5% 0.014 82);
    --color-surface: oklch(98.5% 0.009 82);
    --color-surface-deep: oklch(92.5% 0.022 82);
    --color-field: oklch(35% 0.055 158);
    --color-field-deep: oklch(24% 0.042 158);
    --color-clay: oklch(58% 0.145 38);
    --color-clay-deep: oklch(50% 0.13 38);
    --color-sun: oklch(76% 0.14 80);
    --color-line: oklch(84% 0.018 82);
    --color-white: oklch(99% 0.006 82);
    --font-sans: "Hanken Grotesk", "Arial", sans-serif;
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 2.5rem;
    --space-6: 3rem;
    --space-8: 4rem;
    --space-10: 5rem;
    --space-12: 6rem;
    --space-16: 8rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --step--1: clamp(0.8rem, 0.77rem + 0.12vw, 0.875rem);
    --step-0: clamp(1rem, 0.96rem + 0.16vw, 1.1rem);
    --step-1: clamp(1.25rem, 1.18rem + 0.28vw, 1.42rem);
    --step-2: clamp(1.563rem, 1.43rem + 0.52vw, 1.88rem);
    --step-3: clamp(1.953rem, 1.7rem + 1vw, 2.56rem);
    --step-4: clamp(2.441rem, 2.02rem + 1.68vw, 3.46rem);
    --step-5: clamp(3.052rem, 2.36rem + 2.76vw, 4.72rem);
    --shell: min(88rem, calc(100% - 3rem));
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}

body {
    margin: 0;
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    color: inherit;
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--color-sun);
    outline-offset: 4px;
}

h1,
h2,
h3,
p,
figure,
ul {
    margin-top: 0;
}

h1,
h2,
h3 {
    text-wrap: balance;
}

h1 {
    font-size: var(--step-5);
    letter-spacing: -0.045em;
    line-height: 1.04;
}

h2 {
    font-size: var(--step-3);
    letter-spacing: -0.035em;
    line-height: 1.12;
}

h3 {
    font-size: var(--step-1);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

p {
    max-width: 70ch;
}

.shell {
    margin-inline: auto;
    width: var(--shell);
}

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

.skip-link {
    background: var(--color-sun);
    color: var(--color-field-deep);
    font-weight: 700;
    left: var(--space-2);
    padding: 0.75rem 1rem;
    position: fixed;
    top: var(--space-2);
    transform: translateY(-160%);
    transition: transform 180ms var(--ease-out);
    z-index: 1000;
}

.skip-link:focus {
    transform: translateY(0);
}

.utility-bar {
    background: var(--color-field-deep);
    color: var(--color-white);
    font-size: var(--step--1);
}

.utility-bar__inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 2.75rem;
}

.utility-bar p {
    margin: 0;
}

.utility-bar__links {
    align-items: center;
    display: flex;
    gap: var(--space-3);
}

.utility-bar__links a {
    align-items: center;
    display: flex;
    gap: var(--space-1);
}

.site-header {
    background: color-mix(in oklch, var(--color-canvas) 94%, transparent);
    position: sticky;
    top: 0;
    transition: background-color 180ms ease-out;
    z-index: 100;
}

.site-header.is-scrolled {
    background: var(--color-canvas);
}

.site-header__inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 6rem;
}

.brand {
    align-items: center;
    display: inline-flex;
    gap: 0.75rem;
    min-height: 3rem;
}

.brand img {
    height: 4rem;
    object-fit: contain;
    width: 4rem;
}

.brand__name {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
}

.site-nav {
    align-items: center;
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
}

.site-nav > a:not(.site-nav__donate) {
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 2.75rem;
    padding-block: 0.7rem;
    position: relative;
}

.site-nav > a:not(.site-nav__donate)::after {
    background: var(--color-clay);
    bottom: 0.35rem;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 200ms var(--ease-out);
    width: 100%;
}

.site-nav > a:hover::after,
.site-nav > a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
}

.site-nav__donate,
.button {
    align-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    display: inline-flex;
    font-weight: 700;
    gap: 0.75rem;
    justify-content: center;
    min-height: 3rem;
    padding: 0.75rem 1.25rem;
    transition: background-color 180ms ease-out, color 180ms ease-out, transform 180ms var(--ease-out);
}

.site-nav__donate,
.button--primary {
    background: var(--color-clay);
    color: var(--color-white);
}

.site-nav__donate:hover,
.button--primary:hover {
    background: var(--color-clay-deep);
    transform: translateY(-2px);
}

.button--text {
    padding-inline: 0;
}

.button--text:hover,
.text-link:hover {
    color: var(--color-clay-deep);
}

.button--light {
    background: var(--color-surface);
    color: var(--color-field-deep);
}

.button--light:hover {
    background: var(--color-sun);
    transform: translateY(-2px);
}

.button-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.text-link {
    align-items: center;
    display: inline-flex;
    font-weight: 700;
    gap: 0.7rem;
    min-height: 2.75rem;
    transition: color 180ms ease-out;
}

.menu-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    display: none;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.menu-toggle__close {
    display: none;
}

.eyebrow {
    color: var(--color-clay-deep);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
}

.hero {
    background: var(--color-field-deep);
    color: var(--color-white);
    overflow: hidden;
    padding-block: clamp(3rem, 6vw, 6rem) clamp(4rem, 7vw, 7rem);
    position: relative;
}

.hero::after {
    background: color-mix(in oklch, var(--color-white) 16%, transparent);
    bottom: 0;
    content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: var(--shell);
}

.hero .eyebrow {
    color: var(--color-sun);
}

.hero__heading h1 {
    color: var(--color-white);
    font-size: clamp(3.4rem, 6.4vw, 7rem);
    letter-spacing: -0.055em;
    line-height: 0.92;
    margin: 0;
    max-width: none;
}

.hero__heading h1 span {
    display: block;
}

.hero__heading h1 span:last-child {
    margin-left: clamp(0rem, 8vw, 7rem);
}

.hero__lower {
    align-items: end;
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    grid-template-columns: minmax(17rem, 0.72fr) minmax(34rem, 1.618fr);
    margin-top: clamp(2.5rem, 5vw, 5rem);
}

.hero__copy {
    padding-bottom: var(--space-2);
}

.hero__lead {
    color: color-mix(in oklch, var(--color-white) 76%, transparent);
    font-size: var(--step-1);
    line-height: 1.4;
    margin-bottom: var(--space-4);
    max-width: 34ch;
}

.hero .button--text {
    color: var(--color-white);
}

.hero .button--text:hover {
    color: var(--color-sun);
}

.hero__commitment {
    border-block: 1px solid color-mix(in oklch, var(--color-white) 18%, transparent);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-6);
}

.hero__commitment span {
    color: color-mix(in oklch, var(--color-white) 70%, transparent);
    font-size: var(--step--1);
    min-height: 3.5rem;
    padding-block: 1rem;
}

.hero__commitment span:nth-child(even) {
    border-left: 1px solid color-mix(in oklch, var(--color-white) 18%, transparent);
    padding-left: var(--space-2);
}

.hero__visual {
    height: clamp(33rem, 42vw, 43rem);
    margin: 0;
    position: relative;
}

.hero__sun-block {
    background: var(--color-sun);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 92%);
    inset: 8% 3% 3% 8%;
    position: absolute;
    z-index: 0;
}

.hero-shot {
    margin: 0;
    overflow: hidden;
    position: absolute;
    z-index: 1;
}

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

.hero-shot--dog {
    clip-path: polygon(0 0, 92% 4%, 100% 94%, 8% 100%);
    height: 100%;
    left: 2%;
    top: 0;
    width: 49%;
}

.hero-shot--dog img {
    object-position: center 58%;
}

.hero-shot--cat {
    clip-path: polygon(7% 0, 100% 8%, 93% 100%, 0 91%);
    height: 44%;
    right: 0;
    top: 2%;
    width: 39%;
}

.hero-shot--cat img {
    object-position: center 58%;
}

.hero-shot--puppy {
    bottom: 3%;
    clip-path: polygon(0 8%, 94% 0, 100% 91%, 8% 100%);
    height: 43%;
    right: 2%;
    width: 52%;
}

.hero-shot--puppy img {
    object-position: center 48%;
}

.hero__location {
    background: var(--color-canvas);
    bottom: 2%;
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
    left: 0;
    max-width: 17rem;
    padding: 1rem 1.25rem;
    position: absolute;
    z-index: 3;
}

.hero__location span {
    color: var(--color-ink-soft);
    font-size: var(--step--1);
}

.hero__location strong {
    font-size: 1rem;
}

.pathways {
    background: var(--color-surface);
    padding-block: var(--space-12);
}

.section-heading {
    margin-bottom: var(--space-6);
}

.section-heading h2 {
    margin-bottom: 0;
    max-width: 18ch;
}

.section-heading--split,
.section-heading--action {
    align-items: end;
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
}

.section-heading--split > p {
    color: var(--color-ink-soft);
    margin: 0;
    max-width: 42ch;
}

.pathway-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pathway-list a {
    display: grid;
    gap: var(--space-1);
    grid-template-columns: 1fr auto;
    min-height: 12rem;
    padding: var(--space-3);
    position: relative;
}

.pathway-list a + a {
    border-left: 1px solid var(--color-line);
}

.pathway-list a::after {
    background: var(--color-surface-deep);
    content: "";
    inset: 0;
    position: absolute;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 240ms var(--ease-out);
    z-index: 0;
}

.pathway-list a:hover::after {
    transform: scaleY(1);
}

.pathway-list span,
.pathway-list strong,
.pathway-list small,
.pathway-list svg {
    position: relative;
    z-index: 1;
}

.pathway-list span {
    color: var(--color-clay-deep);
    font-size: var(--step--1);
    font-weight: 700;
}

.pathway-list strong {
    align-self: end;
    font-size: var(--step-2);
    grid-column: 1;
}

.pathway-list small {
    color: var(--color-ink-soft);
    font-size: 0.95rem;
    grid-column: 1;
}

.pathway-list svg {
    align-self: end;
    grid-column: 2;
    grid-row: 2 / span 2;
}

.field-story {
    padding-block: var(--space-16);
}

.field-story__grid {
    align-items: center;
    display: grid;
    gap: clamp(3rem, 8vw, 8rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.field-story__visual {
    min-height: 39rem;
    position: relative;
}

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

.field-story__note {
    background: var(--color-sun);
    bottom: -2rem;
    display: flex;
    flex-direction: column;
    max-width: 20rem;
    padding: var(--space-3);
    position: absolute;
    right: -2rem;
}

.field-story__note strong {
    font-size: var(--step-1);
}

.field-story__copy h2 {
    max-width: 17ch;
}

.field-story__copy > p:not(.eyebrow) {
    color: var(--color-ink-soft);
    font-size: var(--step-1);
    max-width: 50ch;
}

.plain-list {
    list-style: none;
    margin-block: var(--space-4);
    padding: 0;
}

.plain-list li {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    margin-block: var(--space-2);
}

.plain-list svg {
    color: var(--color-clay-deep);
    flex: 0 0 auto;
}

.adoption-preview,
.team-preview,
.news-preview,
.team-page,
.adoption-listing,
.news-listing {
    padding-block: var(--space-12);
}

.adoption-preview {
    background: var(--color-surface-deep);
}

.animal-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.animal-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.animal-card__image {
    aspect-ratio: 1.25 / 1;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.animal-card__body {
    padding: var(--space-3);
}

.animal-card__body > p:first-child {
    color: var(--color-clay-deep);
    font-size: var(--step--1);
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.animal-card__body h2,
.animal-card__body h3 {
    margin-bottom: var(--space-2);
}

.animal-card__body a {
    align-items: center;
    display: inline-flex;
    font-weight: 700;
    gap: var(--space-1);
    min-height: 2.75rem;
}

.animal-card__description {
    color: var(--color-ink-soft);
}

.spak-feature {
    background: var(--color-field-deep);
    color: var(--color-white);
    padding-block: var(--space-16);
}

.spak-feature .eyebrow,
.spak-manifesto .eyebrow {
    color: var(--color-sun);
}

.spak-feature__intro {
    align-items: end;
    display: grid;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 1.618fr) minmax(18rem, 1fr);
    margin-bottom: var(--space-8);
}

.spak-feature__intro h2 {
    font-size: var(--step-4);
    margin-bottom: 0;
    max-width: 16ch;
}

.spak-feature__intro > p {
    color: color-mix(in oklch, var(--color-white) 76%, transparent);
    margin: 0;
}

.spak-grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: var(--space-6);
}

.spak-card {
    background: var(--color-field);
    border-radius: var(--radius-md);
    min-height: 20rem;
    overflow: hidden;
    position: relative;
}

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

.spak-card::after {
    background: linear-gradient(to top, color-mix(in oklch, var(--color-field-deep) 92%, transparent), transparent 68%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.spak-card__body {
    bottom: 0;
    left: 0;
    padding: var(--space-3);
    position: absolute;
    right: 0;
    z-index: 1;
}

.spak-card__body span {
    color: var(--color-sun);
    font-size: var(--step--1);
    font-weight: 700;
    text-transform: uppercase;
}

.spak-card__body h3 {
    font-size: var(--step-2);
    margin-block: 0.35rem;
}

.spak-card__body p {
    margin: 0;
}

.media-placeholder {
    align-items: center;
    background: color-mix(in oklch, var(--color-field) 70%, var(--color-surface-deep));
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.media-placeholder > span {
    font-size: var(--step-4);
    font-weight: 700;
    line-height: 1;
}

.media-placeholder > small {
    font-size: var(--step--1);
    margin-top: var(--space-1);
}

.transparency-preview {
    padding-block: var(--space-16);
}

.transparency-preview__grid,
.document-center__grid,
.bank-section__grid,
.sponsor-section__grid {
    display: grid;
    gap: clamp(3rem, 8vw, 8rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
}

.transparency-preview__copy h2,
.document-center h2,
.bank-section h2,
.sponsor-section h2 {
    max-width: 15ch;
}

.transparency-preview__copy > p:not(.eyebrow),
.document-center__grid > div:first-child p,
.bank-section__grid > div:first-child p,
.sponsor-section__grid > div:first-child p {
    color: var(--color-ink-soft);
}

.document-list {
    display: flex;
    flex-direction: column;
}

.document-list a {
    align-items: center;
    border-bottom: 1px solid var(--color-line);
    display: grid;
    gap: var(--space-2);
    grid-template-columns: auto 1fr auto;
    min-height: 5.5rem;
    padding-block: var(--space-2);
    transition: color 160ms ease-out, padding 200ms var(--ease-out);
}

.document-list a:first-child {
    border-top: 1px solid var(--color-line);
}

.document-list a:hover {
    color: var(--color-clay-deep);
    padding-left: var(--space-1);
}

.document-list a > span {
    display: flex;
    flex-direction: column;
}

.document-list small {
    color: var(--color-ink-soft);
    font-size: var(--step--1);
}

.team-preview {
    background: var(--color-surface);
}

.team-rail {
    display: grid;
    gap: var(--space-2);
    grid-auto-columns: minmax(15rem, 19rem);
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: var(--space-2);
    scroll-snap-type: inline mandatory;
}

.team-rail::-webkit-scrollbar {
    height: 0.5rem;
}

.team-rail::-webkit-scrollbar-thumb {
    background: var(--color-line);
}

.person-card {
    background: var(--color-canvas);
    border-radius: var(--radius-md);
    overflow: hidden;
    scroll-snap-align: start;
}

.person-card__image {
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
    object-position: center 20%;
    width: 100%;
}

.person-card > div:last-child {
    padding: var(--space-3);
}

.person-card h3 {
    margin-bottom: 0.35rem;
}

.person-card p {
    color: var(--color-ink-soft);
    font-size: var(--step--1);
    margin: 0;
}

.news-preview {
    padding-block: var(--space-16);
}

.news-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.news-card__image {
    aspect-ratio: 1.618 / 1;
    object-fit: cover;
    width: 100%;
}

.news-card__body {
    padding-block: var(--space-3);
}

.news-card__body > div:first-child {
    color: var(--color-ink-soft);
    display: flex;
    font-size: var(--step--1);
    gap: var(--space-2);
    justify-content: space-between;
}

.news-card__body > div:first-child span {
    color: var(--color-clay-deep);
    font-weight: 700;
}

.news-card h2,
.news-card h3 {
    margin-block: var(--space-2);
}

.news-card__body > p {
    color: var(--color-ink-soft);
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.donation-band {
    background: var(--color-sun);
    padding-block: var(--space-10);
}

.donation-band__grid {
    align-items: start;
    display: grid;
    gap: clamp(3rem, 8vw, 8rem);
    grid-template-columns: minmax(0, 1.618fr) minmax(18rem, 1fr);
}

.donation-band h2 {
    font-size: var(--step-4);
    margin-bottom: 0;
    max-width: 19ch;
}

.donation-band__grid > div:last-child p {
    margin-bottom: var(--space-3);
}

.page-intro {
    padding-block: var(--space-10) var(--space-12);
}

.page-intro__grid {
    align-items: end;
    display: grid;
    gap: clamp(3rem, 8vw, 8rem);
    grid-template-columns: minmax(0, 1.618fr) minmax(18rem, 1fr);
}

.page-intro h1 {
    margin-bottom: 0;
    max-width: 14ch;
}

.page-intro__grid > p {
    color: var(--color-ink-soft);
    font-size: var(--step-1);
    margin: 0;
}

.narrative-section {
    background: var(--color-surface);
    padding-block: var(--space-16);
}

.narrative-section__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr 4.236fr;
    margin-bottom: var(--space-10);
}

.narrative-section__index {
    color: var(--color-clay-deep);
    font-size: var(--step-2);
    font-weight: 700;
}

.narrative-section__grid h2 {
    font-size: var(--step-4);
    max-width: 20ch;
}

.narrative-section__grid p {
    color: var(--color-ink-soft);
    font-size: var(--step-1);
}

.workstream-grid,
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workstream-grid article,
.process-grid article {
    min-height: 15rem;
    padding: var(--space-3);
}

.workstream-grid article + article,
.process-grid article + article {
    border-left: 1px solid var(--color-line);
}

.workstream-grid span,
.process-grid span {
    color: var(--color-clay-deep);
    font-size: var(--step--1);
    font-weight: 700;
}

.workstream-grid h3,
.process-grid h2 {
    margin-top: var(--space-6);
}

.workstream-grid p,
.process-grid p {
    color: var(--color-ink-soft);
}

.team-grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.person-card--grid {
    background: var(--color-surface);
}

.person-card--grid .person-card__image {
    aspect-ratio: 4 / 3;
    height: clamp(12rem, 16vw, 14.5rem);
    object-position: center 42%;
}

.team-grid .person-card--grid:nth-child(4) .person-card__image,
.team-grid .person-card--grid:nth-child(5) .person-card__image,
.team-grid .person-card--grid:nth-child(6) .person-card__image,
.team-grid .person-card--grid:nth-child(7) .person-card__image {
    object-position: center 32%;
}

.team-grid .person-card--grid:nth-child(8) .person-card__image {
    object-position: center 55%;
}

.person-card--grid > div:last-child {
    min-height: 7rem;
    padding: var(--space-2) var(--space-3);
}

.sponsor-section {
    background: var(--color-field-deep);
    color: var(--color-white);
    padding-block: var(--space-12);
}

.sponsor-section .eyebrow {
    color: var(--color-sun);
}

.sponsor-section__grid > div:first-child p {
    color: color-mix(in oklch, var(--color-white) 72%, transparent);
}

.sponsor-list {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sponsor-list article {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    min-height: 15rem;
    padding: var(--space-3);
}

.sponsor-mark {
    height: 8rem;
    margin-bottom: var(--space-2);
    object-fit: contain;
    width: 100%;
}

.sponsor-list h3,
.sponsor-list p {
    margin-bottom: 0.35rem;
}

.process-section {
    background: var(--color-surface);
    padding-block: var(--space-10);
}

.process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.animal-grid--listing {
    align-items: start;
}

.spak-manifesto {
    background: var(--color-field-deep);
    color: var(--color-white);
    padding-block: var(--space-12);
}

.spak-manifesto__grid {
    align-items: center;
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr 1.618fr;
}

.spak-manifesto__letters {
    display: grid;
    font-size: var(--step-4);
    font-weight: 700;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
}

.spak-manifesto__letters span {
    align-items: center;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
}

.spak-manifesto__letters span:nth-child(odd) {
    background: var(--color-clay);
}

.spak-manifesto__letters span:nth-child(even) {
    background: var(--color-field);
}

.spak-manifesto__grid > div p {
    color: color-mix(in oklch, var(--color-white) 72%, transparent);
    font-size: var(--step-1);
}

.spak-roster {
    padding-block: var(--space-16);
}

.spak-profile {
    align-items: center;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 4rem minmax(16rem, 1fr) minmax(0, 1.618fr);
    padding-block: var(--space-5);
}

.spak-profile + .spak-profile {
    border-top: 1px solid var(--color-line);
}

.spak-profile__number {
    color: var(--color-clay-deep);
    font-size: var(--step-1);
    font-weight: 700;
}

.spak-profile__media {
    aspect-ratio: 1.25 / 1;
    height: auto;
    object-fit: cover;
    width: 100%;
}

#pamuk .spak-profile__media {
    object-position: center 70%;
}

.spak-profile__meta {
    color: var(--color-clay-deep);
    display: flex;
    font-size: var(--step--1);
    font-weight: 700;
    gap: var(--space-2);
    text-transform: uppercase;
}

.spak-profile__copy h2 {
    font-size: var(--step-4);
    margin-block: var(--space-1);
}

.spak-profile__copy h3 {
    color: var(--color-ink-soft);
    font-size: var(--step-1);
    font-weight: 500;
}

.spak-profile__copy > p {
    color: var(--color-ink-soft);
}

.document-center {
    background: var(--color-surface);
    padding-block: var(--space-12);
}

.document-list--large a {
    min-height: 7rem;
}

.document-list--large small {
    margin-top: 0.35rem;
}

.bank-section {
    background: var(--color-sun);
    padding-block: var(--space-12);
}

.bank-details {
    align-self: start;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 8rem 1fr;
}

.bank-details span {
    color: var(--color-ink-soft);
}

.bank-details strong {
    font-size: var(--step-1);
}

.bank-details__iban {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.035em;
}

.article-page {
    padding-block: var(--space-10) var(--space-16);
}

.article-page__header {
    margin-bottom: var(--space-6);
}

.article-page__header h1 {
    max-width: 15ch;
}

.article-page__image {
    aspect-ratio: 2.618 / 1;
    max-height: 42rem;
    object-fit: cover;
    width: 100%;
}

.article-page__body {
    padding-top: var(--space-6);
}

.article-page__body > p {
    font-size: var(--step-1);
    line-height: 1.6;
    max-width: 65ch;
}

.contact-page {
    padding-block: var(--space-4) var(--space-16);
}

.contact-page__grid {
    display: grid;
    gap: clamp(3rem, 8vw, 8rem);
    grid-template-columns: 1.618fr 1fr;
}

.contact-list {
    display: flex;
    flex-direction: column;
}

.contact-list a {
    align-items: center;
    border-bottom: 1px solid var(--color-line);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: auto 1fr;
    min-height: 7rem;
    padding-block: var(--space-2);
}

.contact-list a:first-child {
    border-top: 1px solid var(--color-line);
}

.contact-list a > span {
    display: flex;
    flex-direction: column;
}

.contact-list small {
    color: var(--color-clay-deep);
    font-weight: 700;
    text-transform: uppercase;
}

.contact-list strong {
    font-size: var(--step-1);
}

.contact-note {
    align-self: start;
    background: var(--color-surface-deep);
    padding: var(--space-4);
}

.not-found {
    min-height: 65vh;
    padding-block: var(--space-16);
}

.not-found h1 {
    max-width: 12ch;
}

.not-found > .shell > p:not(.eyebrow) {
    color: var(--color-ink-soft);
    font-size: var(--step-1);
    margin-bottom: var(--space-4);
}

.site-footer {
    background: var(--color-field-deep);
    color: var(--color-white);
    padding-top: var(--space-10);
}

.site-footer__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(14rem, 1.35fr) 0.8fr minmax(15rem, 1.5fr) 1.15fr 0.8fr;
    padding-bottom: var(--space-8);
}

.brand--footer {
    margin-bottom: var(--space-2);
}

.site-footer__brand p {
    color: color-mix(in oklch, var(--color-white) 68%, transparent);
}

.site-footer__grid h2 {
    color: var(--color-sun);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
}

.site-footer__grid > div:not(.site-footer__brand),
.site-footer__links,
.site-footer__documents {
    display: flex;
    flex-direction: column;
}

.site-footer__grid > div:not(.site-footer__brand) a {
    align-items: center;
    color: color-mix(in oklch, var(--color-white) 78%, transparent);
    display: inline-flex;
    gap: var(--space-1);
    min-height: 2.5rem;
}

.site-footer__documents a {
    font-size: var(--step--1);
    line-height: 1.25;
    min-height: 2.25rem !important;
}

.site-footer__grid a:hover,
.site-footer__bottom a:hover {
    color: var(--color-sun);
}

.site-footer__bottom {
    align-items: center;
    border-top: 1px solid color-mix(in oklch, var(--color-white) 18%, transparent);
    color: color-mix(in oklch, var(--color-white) 56%, transparent);
    display: flex;
    font-size: var(--step--1);
    justify-content: space-between;
    min-height: 5rem;
}

.site-footer__bottom p {
    margin: 0;
}

.site-footer__bottom > div {
    display: flex;
    gap: var(--space-3);
}

.link-notice {
    background: var(--color-field-deep);
    bottom: var(--space-2);
    color: var(--color-white);
    left: 50%;
    max-width: calc(100% - 2rem);
    padding: 0.9rem 1.25rem;
    position: fixed;
    text-align: center;
    transform: translateX(-50%);
    z-index: 300;
}

@media (max-width: 70rem) {
    :root {
        --shell: min(100% - 2rem, 68rem);
    }

    .utility-bar__links a span {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
        position: relative;
        z-index: 102;
    }

    .site-nav {
        align-items: stretch;
        background: var(--color-canvas);
        display: flex;
        flex-direction: column;
        gap: 0;
        inset: 0;
        justify-content: center;
        opacity: 0;
        padding: 7rem 2rem 2rem;
        pointer-events: none;
        position: fixed;
        transform: translateY(-1rem);
        transition: opacity 180ms ease-out, transform 220ms var(--ease-out);
        visibility: hidden;
        z-index: 101;
    }

    .site-nav.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        visibility: visible;
    }

    .site-nav > a:not(.site-nav__donate) {
        font-size: var(--step-2);
        min-height: 4rem;
    }

    .site-nav__donate {
        margin-top: var(--space-3);
        min-height: 3.5rem;
    }

    .menu-toggle[aria-expanded="true"] .menu-toggle__open {
        display: none;
    }

    .menu-toggle[aria-expanded="true"] .menu-toggle__close {
        display: inline-flex;
    }

    .page-intro__grid,
    .spak-feature__intro,
    .donation-band__grid {
        grid-template-columns: 1.35fr 1fr;
    }

    .pathway-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pathway-list a:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--color-line);
    }

    .pathway-list a:nth-child(4) {
        border-top: 1px solid var(--color-line);
    }

    .team-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero__lower {
        grid-template-columns: minmax(15rem, 0.72fr) minmax(29rem, 1.35fr);
    }

    .site-footer__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 52rem) {
    :root {
        --shell: calc(100% - 2rem);
    }

    .utility-bar p {
        font-size: 0.75rem;
    }

    .site-header__inner {
        min-height: 5rem;
    }

    .brand img {
        height: 3.5rem;
        width: 3.5rem;
    }

    main h1 {
        font-size: clamp(1.75rem, 7.45vw, 2rem);
        line-height: 1.04;
    }

    main h2 {
        font-size: clamp(1.4rem, 5.95vw, 1.6rem);
        line-height: 1.08;
    }

    main h3 {
        font-size: clamp(1.12rem, 4.75vw, 1.28rem);
        line-height: 1.16;
    }

    .page-intro h1,
    .article-page__header h1,
    .field-story__copy h2,
    .section-heading h2,
    .spak-feature__intro h2,
    .transparency-preview__copy h2,
    .document-center h2,
    .bank-section h2,
    .sponsor-section h2,
    .narrative-section__grid h2,
    .donation-band h2,
    .not-found h1 {
        max-width: none;
    }

    .narrative-section__grid h2,
    .donation-band h2,
    .spak-feature__intro h2 {
        font-size: clamp(1.4rem, 5.95vw, 1.6rem);
        line-height: 1.08;
    }

    .contact-page__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-list,
    .contact-note,
    .contact-list a,
    .contact-list a > span {
        min-width: 0;
    }

    .contact-list strong {
        overflow-wrap: anywhere;
    }

    .hero {
        padding-block: var(--space-6) var(--space-10);
    }

    .hero__lower,
    .field-story__grid,
    .spak-feature__intro,
    .transparency-preview__grid,
    .page-intro__grid,
    .narrative-section__grid,
    .sponsor-section__grid,
    .spak-manifesto__grid,
    .document-center__grid,
    .bank-section__grid,
    .contact-page__grid,
    .donation-band__grid {
        grid-template-columns: 1fr;
    }

    .hero__heading h1 {
        font-size: clamp(2rem, 6.5vw, 3.5rem);
        letter-spacing: -0.04em;
        line-height: 1;
    }

    .hero__heading h1 span:last-child {
        margin-left: 0;
    }

    .hero__heading h1 span {
        white-space: nowrap;
    }

    .hero__copy {
        max-width: 40rem;
        padding-bottom: 0;
    }

    .hero__visual {
        height: 36rem;
    }

    .field-story,
    .spak-feature,
    .transparency-preview,
    .news-preview,
    .narrative-section,
    .spak-roster {
        padding-block: var(--space-10);
    }

    .field-story__visual {
        min-height: 30rem;
    }

    .field-story__note {
        bottom: -1rem;
        right: -0.5rem;
    }

    .section-heading--split,
    .section-heading--action {
        align-items: start;
        flex-direction: column;
        gap: var(--space-2);
    }

    .animal-grid,
    .news-grid,
    .spak-grid {
        grid-template-columns: 1fr;
    }

    .spak-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spak-card {
        min-height: 18rem;
    }

    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workstream-grid,
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workstream-grid article:nth-child(3),
    .process-grid article:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--color-line);
    }

    .workstream-grid article:nth-child(4),
    .process-grid article:nth-child(4) {
        border-top: 1px solid var(--color-line);
    }

    .spak-profile {
        grid-template-columns: 3rem 1fr;
    }

    .spak-profile__media {
        grid-column: 2;
    }

    .spak-profile__copy {
        grid-column: 2;
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 36rem) {
    .utility-bar__inner {
        min-height: 2.5rem;
    }

    .utility-bar__links {
        gap: var(--space-2);
    }

    .brand__name {
        font-size: 0.95rem;
    }

    .hero__heading h1 {
        font-size: clamp(1.4rem, 6.7vw, 2.25rem);
        line-height: 1;
    }

    .hero__visual {
        height: 30rem;
    }

    .hero-shot--dog {
        width: 59%;
    }

    .hero-shot--cat {
        width: 41%;
    }

    .hero-shot--puppy {
        height: 41%;
        width: 56%;
    }

    .hero__location {
        max-width: 13rem;
        padding: 0.75rem 0.9rem;
    }

    .pathway-list,
    .spak-grid,
    .team-grid,
    .workstream-grid,
    .process-grid,
    .sponsor-list {
        grid-template-columns: 1fr;
    }

    .pathway-list a + a,
    .pathway-list a:nth-child(3),
    .pathway-list a:nth-child(4),
    .workstream-grid article + article,
    .process-grid article + article,
    .workstream-grid article:nth-child(3),
    .process-grid article:nth-child(3),
    .workstream-grid article:nth-child(4),
    .process-grid article:nth-child(4) {
        border-left: 0;
        border-top: 1px solid var(--color-line);
    }

    .pathway-list a {
        min-height: 10rem;
    }

    .spak-manifesto__letters {
        font-size: var(--step-3);
    }

    .spak-profile {
        gap: var(--space-2);
        grid-template-columns: 2rem 1fr;
    }

    .bank-details {
        gap: 0.35rem;
        grid-template-columns: 1fr;
    }

    .bank-details strong {
        margin-bottom: var(--space-3);
        overflow-wrap: anywhere;
    }

    .bank-details strong:last-child {
        margin-bottom: 0;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-2);
        justify-content: center;
        padding-block: var(--space-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}