@layer reset, tokens, base, layout, components, utilities;

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

    html {
        scroll-behavior: smooth;
        scroll-padding-top: 6.5rem;
        text-size-adjust: 100%;
    }

    body,
    h1,
    h2,
    h3,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin: 0;
    }

    ul,
    ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }

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

    button {
        font: inherit;
    }
}

@layer tokens {
    :root {
        color-scheme: light;
        --project-bg: #f4f1e8;
        --project-surface: #fffdf7;
        --project-surface-alt: #e8e4d9;
        --project-ink: #151a2b;
        --project-muted: #626879;
        --project-line: #c9c5b9;
        --project-accent: #d8ff58;
        --project-signal: #ff654f;
        --project-signal-deep: #c63a28;
        --project-on-signal: #ffffff;
        --project-hero: #11172a;
        --project-hero-alt: #202843;
        --project-hero-text: #faf8f0;
        --project-hero-muted: #c5c9d7;
        --project-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --project-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --project-radius-sm: 0.3rem;
        --project-radius-md: 0.65rem;
        --project-radius-lg: 1.2rem;
        --project-card-shadow: none;
        --project-shell: 78rem;
        --project-gutter: clamp(1rem, 3vw, 2rem);
        --project-section-space: clamp(5rem, 9vw, 9rem);
    }

    body[data-theme-palette="ocean"] {
        --project-accent: #65e7ff;
        --project-signal: #3678ff;
        --project-signal-deep: #1c4fc0;
        --project-hero: #0e2030;
        --project-hero-alt: #17394c;
    }

    body[data-theme-palette="ember"] {
        --project-accent: #ffcf59;
        --project-signal: #ff654f;
        --project-signal-deep: #bd3827;
        --project-hero: #271813;
        --project-hero-alt: #4a2920;
    }

    body[data-theme-palette="plum"] {
        --project-accent: #e7a8ff;
        --project-signal: #9359e8;
        --project-signal-deep: #6533ad;
        --project-hero: #24162f;
        --project-hero-alt: #40244f;
    }

    body[data-theme-palette="forest"] {
        --project-accent: #91ef9f;
        --project-signal: #168f63;
        --project-signal-deep: #096341;
        --project-hero: #10251e;
        --project-hero-alt: #1c3d32;
    }

    body[data-theme-mode="dark"] {
        color-scheme: dark;
        --project-bg: #0d1120;
        --project-surface: #151a2d;
        --project-surface-alt: #1c2236;
        --project-ink: #f7f5ee;
        --project-muted: #b9bdca;
        --project-line: #3a4054;
        --project-hero: #090d18;
        --project-hero-alt: #171d31;
        --project-card-shadow: none;
    }

    body[data-theme-mode="dark"][data-theme-palette="ocean"] {
        --project-accent: #74e9ff;
        --project-signal: #6498ff;
        --project-signal-deep: #8eb4ff;
    }

    body[data-theme-mode="dark"][data-theme-palette="ember"] {
        --project-accent: #ffd36c;
        --project-signal: #ff7b66;
        --project-signal-deep: #ffa293;
    }

    body[data-theme-mode="dark"][data-theme-palette="plum"] {
        --project-accent: #eab5ff;
        --project-signal: #b17bff;
        --project-signal-deep: #cba5ff;
    }

    body[data-theme-mode="dark"][data-theme-palette="forest"] {
        --project-accent: #9af0a7;
        --project-signal: #54c996;
        --project-signal-deep: #86dfb9;
    }

    body[data-theme-font="editorial"] {
        --project-display: Georgia, "Times New Roman", ui-serif, serif;
    }

    body[data-theme-font="humanist"] {
        --project-display: "Trebuchet MS", Candara, Calibri, ui-sans-serif, system-ui, sans-serif;
        --project-body: "Trebuchet MS", Candara, Calibri, ui-sans-serif, system-ui, sans-serif;
    }

    body[data-theme-radius="sharp"] {
        --project-radius-sm: 0;
        --project-radius-md: 0;
        --project-radius-lg: 0;
    }

    body[data-theme-radius="round"] {
        --project-radius-sm: 0.85rem;
        --project-radius-md: 1.5rem;
        --project-radius-lg: 2.5rem;
    }

    body[data-theme-cards="raised"] {
        --project-card-shadow: 0 1.7rem 4.5rem rgb(20 24 39 / 14%);
    }
}

@layer base {
    body {
        min-width: 20rem;
        margin: 0;
        overflow-x: hidden;
        background: var(--project-bg);
        color: var(--project-ink);
        font-family: var(--project-body);
        font-size: 1rem;
        line-height: 1.65;
        text-rendering: optimizeLegibility;
    }

    h1,
    h2,
    h3 {
        color: var(--project-ink);
        font-family: var(--project-display);
        font-weight: 900;
        letter-spacing: -0.045em;
        line-height: 0.98;
    }

    h1 {
        font-size: clamp(3.5rem, 9vw, 8.6rem);
    }

    h2 {
        font-size: clamp(2.55rem, 6vw, 5.7rem);
    }

    h3 {
        font-size: clamp(1.3rem, 2.3vw, 2rem);
        line-height: 1.08;
    }

    a {
        color: var(--project-signal-deep);
        text-decoration-thickness: 0.1em;
        text-underline-offset: 0.2em;
    }

    a:hover {
        color: var(--project-signal);
    }

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

    :focus-visible {
        outline: 0.2rem solid var(--project-signal);
        outline-offset: 0.22rem;
    }

    main:focus {
        outline: none;
    }
}

@layer layout {
    .project-shell {
        width: min(calc(100% - (2 * var(--project-gutter))), var(--project-shell));
        margin-inline: auto;
    }

    .project-section {
        padding-block: var(--project-section-space);
    }

    .project-section-heading {
        max-width: 54rem;
        margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
    }

    .project-section-heading > p:last-child {
        max-width: 42rem;
        margin-top: 1.3rem;
        color: var(--project-muted);
        font-size: clamp(1rem, 1.5vw, 1.16rem);
    }

    .project-section-heading--split {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr);
        align-items: end;
        gap: clamp(2rem, 6vw, 7rem);
    }

    .project-section-heading--split > p:last-child {
        margin: 0 0 0.35rem;
    }

    .project-section-heading--sticky {
        position: sticky;
        top: 8rem;
    }
}

@layer components {
    .project-skip-link {
        position: fixed;
        z-index: 100;
        top: 0.75rem;
        left: 0.75rem;
        padding: 0.7rem 1rem;
        background: var(--project-accent);
        color: #111625;
        font-weight: 900;
        text-decoration: none;
        transform: translateY(-170%);
        transition: transform 160ms ease;
    }

    .project-skip-link:focus {
        transform: none;
    }

    .project-header {
        position: sticky;
        z-index: 50;
        top: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--project-ink) 12%, transparent);
        background: color-mix(in srgb, var(--project-surface) 94%, transparent);
        backdrop-filter: blur(1rem);
        transition: box-shadow 180ms ease, background-color 180ms ease;
    }

    .project-header[data-scrolled="true"] {
        box-shadow: 0 0.8rem 2.5rem rgb(17 23 42 / 11%);
    }

    .project-header__inner {
        min-height: 5.4rem;
        display: grid;
        grid-template-columns: minmax(10rem, auto) minmax(0, 1fr) auto;
        align-items: center;
        gap: clamp(1rem, 2.5vw, 2rem);
    }

    .project-brand {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        color: var(--project-ink);
        text-decoration: none;
    }

    .project-brand:hover {
        color: var(--project-ink);
    }

    .project-brand__mark {
        width: 2.65rem;
        height: 2.65rem;
        flex: 0 0 auto;
        object-fit: contain;
    }

    .project-brand__name {
        overflow: hidden;
        font-family: var(--project-display);
        font-size: 1.05rem;
        font-weight: 900;
        letter-spacing: -0.025em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .project-nav {
        justify-self: end;
    }

    .project-nav__list {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(0.7rem, 1.6vw, 1.5rem);
    }

    .project-nav__link {
        position: relative;
        display: inline-flex;
        align-items: center;
        min-height: 2.8rem;
        color: var(--project-ink);
        font-size: 0.86rem;
        font-weight: 800;
        text-decoration: none;
    }

    .project-nav__link::after {
        position: absolute;
        right: 0;
        bottom: 0.35rem;
        left: 0;
        height: 0.18rem;
        background: var(--project-signal);
        content: "";
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 160ms ease;
    }

    .project-nav__link:hover::after,
    .project-nav__link[aria-current="page"]::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    .project-header__cta {
        min-height: 2.9rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.65rem 1rem;
        border: 2px solid var(--project-ink);
        border-radius: var(--project-radius-sm);
        background: var(--project-accent);
        color: #111625;
        font-size: 0.84rem;
        font-weight: 900;
        text-decoration: none;
        box-shadow: 0.22rem 0.22rem 0 var(--project-ink);
        transition: box-shadow 150ms ease, transform 150ms ease;
    }

    .project-header__cta:hover {
        color: #111625;
        box-shadow: 0.08rem 0.08rem 0 var(--project-ink);
        transform: translate(0.14rem, 0.14rem);
    }

    .project-nav-toggle {
        display: none;
    }

    .project-eyebrow {
        margin-bottom: 0.85rem;
        color: var(--project-signal-deep);
        font-size: 0.76rem;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .project-eyebrow--light {
        color: var(--project-accent);
    }

    .project-button {
        min-height: 3.6rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        padding: 0.8rem 1.35rem;
        border: 2px solid currentColor;
        border-radius: var(--project-radius-sm);
        font-weight: 900;
        text-decoration: none;
        box-shadow: 0.38rem 0.38rem 0 currentColor;
        transition: box-shadow 150ms ease, transform 150ms ease;
    }

    .project-button:hover {
        box-shadow: 0.12rem 0.12rem 0 currentColor;
        transform: translate(0.2rem, 0.2rem);
    }

    .project-button--signal {
        border-color: var(--project-accent);
        background: var(--project-signal);
        color: var(--project-on-signal);
        box-shadow: 0.38rem 0.38rem 0 var(--project-accent);
    }

    .project-button--signal:hover {
        color: var(--project-on-signal);
        box-shadow: 0.12rem 0.12rem 0 var(--project-accent);
    }

    .project-button--light {
        border-color: var(--project-hero-text);
        background: var(--project-accent);
        color: #111625;
        box-shadow: 0.38rem 0.38rem 0 var(--project-hero-text);
    }

    .project-button--light:hover {
        color: #111625;
        box-shadow: 0.12rem 0.12rem 0 var(--project-hero-text);
    }

    .project-hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding-block: clamp(4rem, 8vw, 7.5rem);
        background: var(--project-hero);
        color: var(--project-hero-text);
    }

    .project-hero::before {
        position: absolute;
        z-index: -2;
        inset: 0;
        background:
            linear-gradient(115deg, transparent 0 62%, color-mix(in srgb, var(--project-accent) 18%, transparent) 62% 63%, transparent 63%),
            repeating-linear-gradient(90deg, color-mix(in srgb, var(--project-hero-text) 5%, transparent) 0 1px, transparent 1px 7.5rem);
        content: "";
    }

    .project-hero::after {
        position: absolute;
        z-index: -1;
        width: clamp(18rem, 45vw, 48rem);
        aspect-ratio: 1;
        right: -18rem;
        bottom: -30rem;
        border: clamp(4rem, 8vw, 8rem) solid color-mix(in srgb, var(--project-signal) 45%, transparent);
        border-radius: 50%;
        content: "";
    }

    .project-hero__grid {
        min-height: min(47rem, calc(100vh - 9rem));
        display: grid;
        grid-template-columns: minmax(0, 1.18fr) minmax(20rem, 0.82fr);
        align-items: center;
        gap: clamp(2.5rem, 7vw, 7rem);
    }

    .project-hero__content {
        position: relative;
        z-index: 2;
    }

    .project-hero h1 {
        max-width: 9.5ch;
        color: var(--project-hero-text);
        text-wrap: balance;
    }

    .project-hero__body {
        max-width: 45rem;
        margin: clamp(1.4rem, 3vw, 2.2rem) 0 2rem;
        color: var(--project-hero-muted);
        font-size: clamp(1.08rem, 1.8vw, 1.34rem);
        line-height: 1.55;
    }

    .project-status {
        width: fit-content;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        margin-bottom: 1.25rem;
        padding: 0.42rem 0.65rem;
        border: 1px solid color-mix(in srgb, var(--project-accent) 55%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--project-accent) 12%, transparent);
        color: var(--project-hero-text);
        font-size: 0.78rem;
    }

    .project-status::before {
        width: 0.58rem;
        height: 0.58rem;
        border-radius: 50%;
        background: var(--project-accent);
        box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--project-accent) 16%, transparent);
        content: "";
    }

    .project-status span {
        color: var(--project-hero-muted);
    }

    .project-status strong {
        font-weight: 900;
    }

    .project-hero__note {
        max-width: 33rem;
        margin-top: 1.35rem;
        color: var(--project-hero-muted);
        font-size: 0.86rem;
    }

    .project-hero__media {
        position: relative;
        z-index: 1;
        align-self: stretch;
        min-height: 33rem;
        margin: 0;
    }

    .project-hero__media::before {
        position: absolute;
        z-index: -1;
        inset: 3rem -2rem -2rem 2rem;
        border: 0.25rem solid var(--project-accent);
        border-radius: var(--project-radius-lg);
        content: "";
        transform: rotate(3deg);
    }

    .project-hero__media img {
        width: 100%;
        height: 100%;
        min-height: 33rem;
        border-radius: var(--project-radius-lg);
        object-fit: cover;
        filter: saturate(0.92) contrast(1.04);
        box-shadow: 1.4rem 1.4rem 0 color-mix(in srgb, var(--project-hero-alt) 75%, transparent);
    }

    .project-hero__media figcaption {
        position: absolute;
        right: -1rem;
        bottom: 1rem;
        max-width: 18rem;
        padding: 0.65rem 0.85rem;
        background: var(--project-accent);
        color: #111625;
        font-size: 0.78rem;
        font-weight: 800;
        transform: rotate(-2deg);
    }

    .project-key-facts {
        position: relative;
        z-index: 4;
        margin-top: -2rem;
    }

    .project-key-facts__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border: 2px solid var(--project-ink);
        border-radius: var(--project-radius-md);
        background: var(--project-surface);
        box-shadow: var(--project-card-shadow);
    }

    .project-key-fact {
        min-width: 0;
        padding: clamp(1.25rem, 2.5vw, 2rem);
    }

    .project-key-fact + .project-key-fact {
        border-left: 1px solid var(--project-line);
    }

    .project-key-fact dt {
        margin-bottom: 0.5rem;
        color: var(--project-signal-deep);
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 0.13em;
        text-transform: uppercase;
    }

    .project-key-fact dd {
        font-family: var(--project-display);
        font-size: clamp(1.15rem, 2vw, 1.6rem);
        font-weight: 900;
        letter-spacing: -0.03em;
        line-height: 1.12;
    }

    .project-key-fact p {
        margin-top: 0.5rem;
        color: var(--project-muted);
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .project-mission {
        padding-top: calc(var(--project-section-space) + 2rem);
    }

    .project-mission__grid {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(20rem, 1.05fr);
        align-items: center;
        gap: clamp(3rem, 8vw, 8rem);
    }

    .project-mission__content h2 {
        max-width: 11ch;
    }

    .project-mission__copy {
        max-width: 42rem;
        margin-top: 1.8rem;
        color: var(--project-muted);
        font-size: clamp(1rem, 1.5vw, 1.15rem);
    }

    .project-mission__copy p + p {
        margin-top: 1rem;
    }

    .project-mission blockquote {
        max-width: 35rem;
        margin-top: 2rem;
        padding-left: 1.2rem;
        border-left: 0.35rem solid var(--project-signal);
        font-family: var(--project-display);
        font-size: clamp(1.25rem, 2.3vw, 1.9rem);
        font-weight: 800;
        letter-spacing: -0.025em;
        line-height: 1.18;
    }

    .project-mission__media {
        position: relative;
        margin: 0;
    }

    .project-mission__media::after {
        position: absolute;
        z-index: -1;
        inset: 1.2rem -1.2rem -1.2rem 1.2rem;
        border-radius: var(--project-radius-lg);
        background: var(--project-accent);
        content: "";
    }

    .project-mission__media img {
        width: 100%;
        aspect-ratio: 6 / 5;
        border-radius: var(--project-radius-lg);
        object-fit: cover;
    }

    .project-mission__media figcaption {
        margin-top: 0.8rem;
        color: var(--project-muted);
        font-size: 0.8rem;
    }

    .project-impact {
        position: relative;
        overflow: hidden;
        background: var(--project-hero);
        color: var(--project-hero-text);
    }

    .project-impact::before {
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--project-accent) 16%, transparent), transparent 28rem);
        content: "";
        pointer-events: none;
    }

    .project-impact .project-shell {
        position: relative;
    }

    .project-impact h2,
    .project-impact h3 {
        color: var(--project-hero-text);
    }

    .project-impact .project-section-heading--split > p:last-child {
        color: var(--project-hero-muted);
    }

    .project-impact__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .project-impact-card {
        height: 100%;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--project-hero-text) 18%, transparent);
        border-radius: var(--project-radius-md);
        background: color-mix(in srgb, var(--project-hero-alt) 88%, transparent);
        box-shadow: var(--project-card-shadow);
    }

    .project-impact-card__media {
        overflow: hidden;
        margin: 0;
    }

    .project-impact-card__media img {
        width: 100%;
        aspect-ratio: 7 / 4;
        object-fit: cover;
        transition: transform 300ms ease;
    }

    .project-impact-card:hover .project-impact-card__media img {
        transform: scale(1.025);
    }

    .project-impact-card__content {
        position: relative;
        padding: clamp(1.4rem, 3vw, 2.2rem);
    }

    .project-impact-card__number {
        position: absolute;
        top: 1.1rem;
        right: 1.2rem;
        color: var(--project-hero-muted);
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 0.12em;
    }

    .project-impact-card__value {
        margin-bottom: 1.2rem;
        color: var(--project-accent);
        font-family: var(--project-display);
        font-size: clamp(2.8rem, 6vw, 5.5rem);
        font-weight: 900;
        letter-spacing: -0.065em;
        line-height: 0.88;
    }

    .project-impact-card__content > p:last-child {
        margin-top: 0.85rem;
        color: var(--project-hero-muted);
    }

    .project-timeline-section {
        background: var(--project-surface);
    }

    .project-timeline-layout {
        display: grid;
        grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
        align-items: start;
        gap: clamp(3rem, 8vw, 8rem);
    }

    .project-timeline-layout .project-section-heading {
        margin-bottom: 0;
    }

    .project-timeline {
        border-top: 2px solid var(--project-ink);
    }

    .project-timeline__item {
        display: grid;
        grid-template-columns: 3rem minmax(6rem, 0.35fr) minmax(0, 1fr);
        gap: clamp(1rem, 3vw, 2rem);
        padding-block: clamp(1.6rem, 3vw, 2.4rem);
        border-bottom: 1px solid var(--project-line);
    }

    .project-timeline__marker {
        width: 2.6rem;
        height: 2.6rem;
        display: grid;
        place-items: center;
        border: 2px solid var(--project-ink);
        border-radius: 50%;
        background: var(--project-accent);
        color: #111625;
        font-size: 0.72rem;
        font-weight: 900;
    }

    .project-timeline__period {
        padding-top: 0.42rem;
        color: var(--project-signal-deep);
        font-family: var(--project-display);
        font-size: 1.05rem;
        font-weight: 900;
        line-height: 1.2;
    }

    .project-timeline__meta,
    .project-timeline__location {
        color: var(--project-muted);
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .project-timeline__content h3 {
        margin-top: 0.28rem;
    }

    .project-timeline__content > p:not(.project-timeline__meta, .project-timeline__location) {
        margin-top: 0.75rem;
        color: var(--project-muted);
    }

    .project-timeline__location {
        margin-top: 0.9rem;
        color: var(--project-signal-deep);
    }

    .project-participants {
        background: var(--project-surface-alt);
    }

    .project-participants__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1rem, 2.5vw, 2rem);
    }

    .project-participant-card {
        height: 100%;
        overflow: hidden;
        border: 2px solid var(--project-ink);
        border-radius: var(--project-radius-md);
        background: var(--project-surface);
        box-shadow: var(--project-card-shadow);
    }

    .project-participant-card__media,
    .project-participant-card__placeholder {
        border-bottom: 2px solid var(--project-ink);
    }

    .project-participant-card__media img {
        width: 100%;
        aspect-ratio: 5 / 4;
        object-fit: cover;
        object-position: center 28%;
        filter: saturate(0.85);
    }

    .project-participant-card__placeholder {
        min-height: 14rem;
        display: grid;
        place-items: center;
        background:
            linear-gradient(135deg, transparent 0 48%, var(--project-ink) 48% 50%, transparent 50%),
            var(--project-accent);
        color: #111625;
        font-family: var(--project-display);
        font-size: clamp(3rem, 7vw, 6rem);
        font-weight: 900;
        letter-spacing: -0.06em;
    }

    .project-participant-card__content {
        padding: clamp(1.3rem, 2.5vw, 2rem);
    }

    .project-participant-card__role {
        margin-bottom: 0.5rem;
        color: var(--project-signal-deep);
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .project-participant-card__content > p:last-child {
        margin-top: 0.8rem;
        color: var(--project-muted);
    }

    .project-partners__layout {
        display: grid;
        grid-template-columns: minmax(16rem, 0.65fr) minmax(0, 1.35fr);
        align-items: start;
        gap: clamp(3rem, 8vw, 8rem);
    }

    .project-partners .project-section-heading {
        margin-bottom: 0;
    }

    .project-partners__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 2px solid var(--project-ink);
    }

    .project-partners__list li {
        border-bottom: 1px solid var(--project-line);
    }

    .project-partners__list li:nth-child(odd) {
        border-right: 1px solid var(--project-line);
    }

    .project-partner {
        position: relative;
        min-height: 8.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 1.5rem 3rem 1.5rem 1.5rem;
        color: var(--project-ink);
        text-decoration: none;
        transition: background-color 150ms ease;
    }

    a.project-partner:hover {
        background: var(--project-accent);
        color: #111625;
    }

    .project-partner strong {
        font-family: var(--project-display);
        font-size: clamp(1.15rem, 2vw, 1.55rem);
        font-weight: 900;
        letter-spacing: -0.03em;
        line-height: 1.08;
    }

    .project-partner span {
        margin-top: 0.5rem;
        color: var(--project-muted);
        font-size: 0.86rem;
    }

    a.project-partner:hover span {
        color: #303541;
    }

    .project-partner i {
        position: absolute;
        top: 1.4rem;
        right: 1.4rem;
        font-size: 1.2rem;
        font-style: normal;
    }

    .project-faq {
        background: var(--project-surface);
    }

    .project-faq__layout {
        display: grid;
        grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
        align-items: start;
        gap: clamp(3rem, 8vw, 8rem);
    }

    .project-faq .project-section-heading {
        margin-bottom: 0;
    }

    .project-faq__list {
        border-top: 2px solid var(--project-ink);
    }

    .project-faq-item {
        border-bottom: 1px solid var(--project-line);
    }

    .project-faq-item summary {
        position: relative;
        padding: 1.55rem 3.5rem 1.55rem 0;
        cursor: pointer;
        font-family: var(--project-display);
        font-size: clamp(1.08rem, 2vw, 1.38rem);
        font-weight: 900;
        letter-spacing: -0.025em;
        line-height: 1.2;
        list-style: none;
    }

    .project-faq-item summary::-webkit-details-marker {
        display: none;
    }

    .project-faq-item summary::after {
        position: absolute;
        top: 1.3rem;
        right: 0;
        width: 2rem;
        height: 2rem;
        display: grid;
        place-items: center;
        border: 2px solid var(--project-ink);
        border-radius: 50%;
        background: var(--project-accent);
        color: #111625;
        content: "+";
        font-family: var(--project-body);
        font-weight: 900;
        line-height: 1;
    }

    .project-faq-item[open] summary::after {
        content: "−";
    }

    .project-faq-item > p {
        max-width: 45rem;
        padding: 0 3rem 1.6rem 0;
        color: var(--project-muted);
    }

    .project-participation {
        position: relative;
        overflow: hidden;
        background: var(--project-signal);
        color: var(--project-on-signal);
    }

    .project-participation::before {
        position: absolute;
        width: 34rem;
        height: 34rem;
        top: -17rem;
        right: -9rem;
        border: 6rem solid color-mix(in srgb, var(--project-accent) 58%, transparent);
        border-radius: 50%;
        content: "";
    }

    .project-participation__inner {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.55fr);
        align-items: end;
        gap: clamp(2rem, 6vw, 6rem);
    }

    .project-participation h2 {
        max-width: 10ch;
        color: var(--project-on-signal);
    }

    .project-participation__copy > p:last-child {
        max-width: 43rem;
        margin-top: 1.4rem;
        font-size: clamp(1.05rem, 1.7vw, 1.25rem);
    }

    .project-participation__status {
        width: fit-content;
        margin-bottom: 1rem;
        padding: 0.4rem 0.7rem;
        border: 1px solid color-mix(in srgb, var(--project-on-signal) 60%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--project-hero) 22%, transparent);
        color: var(--project-on-signal);
        font-size: 0.76rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .project-participation__details {
        align-self: stretch;
        display: grid;
        align-content: end;
        gap: 0.8rem;
    }

    .project-participation__details div {
        padding-bottom: 0.8rem;
        border-bottom: 1px solid color-mix(in srgb, var(--project-on-signal) 42%, transparent);
    }

    .project-participation__details dt {
        color: color-mix(in srgb, var(--project-on-signal) 72%, transparent);
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .project-participation__details dd {
        margin-top: 0.22rem;
        font-family: var(--project-display);
        font-size: 1.1rem;
        font-weight: 900;
    }

    .project-participation .project-button {
        grid-column: 1;
        width: fit-content;
        margin-top: 0.3rem;
    }

    .project-participation__note {
        grid-column: 2;
        align-self: center;
        color: color-mix(in srgb, var(--project-on-signal) 78%, transparent);
        font-size: 0.82rem;
    }

    .project-legal {
        min-height: 60vh;
        background: var(--project-surface);
    }

    .project-legal__inner {
        max-width: 58rem;
    }

    .project-legal h1 {
        max-width: 12ch;
        font-size: clamp(3rem, 8vw, 7rem);
    }

    .project-legal__copy {
        max-width: 48rem;
        margin-top: 2.2rem;
        color: var(--project-muted);
    }

    .project-legal__copy p + p {
        margin-top: 1rem;
    }

    .project-legal__links {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 1.5rem;
        margin-top: 2rem;
    }

    .project-legal__links a {
        font-weight: 900;
    }

    .project-footer {
        background: var(--project-hero);
        color: var(--project-hero-muted);
    }

    .project-footer__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 3rem;
        padding-block: clamp(3rem, 6vw, 5rem);
    }

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

    .project-brand--footer:hover {
        color: var(--project-hero-text);
    }

    .project-footer__identity > p {
        max-width: 38rem;
        margin-top: 1rem;
        color: var(--project-hero-muted);
    }

    .project-footer__links {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.75rem 1.25rem;
    }

    .project-footer__links a {
        color: var(--project-hero-text);
        font-size: 0.86rem;
        font-weight: 800;
    }

    .project-footer__bottom {
        min-height: 4.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border-top: 1px solid color-mix(in srgb, var(--project-hero-text) 16%, transparent);
        color: var(--project-hero-muted);
        font-size: 0.78rem;
    }
}

@layer utilities {
    .project-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        margin: -1px;
        padding: 0;
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (max-width: 68rem) {
    .project-header__inner {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .project-js .project-nav-toggle {
        min-height: 2.8rem;
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.55rem 0.75rem;
        border: 1px solid var(--project-line);
        border-radius: var(--project-radius-sm);
        background: var(--project-surface);
        color: var(--project-ink);
        font-size: 0.8rem;
        font-weight: 900;
        cursor: pointer;
    }

    .project-nav-toggle__icon,
    .project-nav-toggle__icon::before,
    .project-nav-toggle__icon::after {
        width: 1.15rem;
        height: 0.12rem;
        display: block;
        background: currentColor;
        content: "";
        transition: transform 160ms ease;
    }

    .project-nav-toggle__icon {
        position: relative;
    }

    .project-nav-toggle__icon::before {
        position: absolute;
        top: -0.34rem;
    }

    .project-nav-toggle__icon::after {
        position: absolute;
        top: 0.34rem;
    }

    .project-nav-toggle[aria-expanded="true"] .project-nav-toggle__icon {
        background: transparent;
    }

    .project-nav-toggle[aria-expanded="true"] .project-nav-toggle__icon::before {
        top: 0;
        transform: rotate(45deg);
    }

    .project-nav-toggle[aria-expanded="true"] .project-nav-toggle__icon::after {
        top: 0;
        transform: rotate(-45deg);
    }

    .project-js .project-nav {
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        display: none;
        padding: 1rem var(--project-gutter) 1.3rem;
        border-bottom: 1px solid var(--project-line);
        background: var(--project-surface);
        box-shadow: 0 1.2rem 2.5rem rgb(17 23 42 / 12%);
    }

    .project-js .project-nav[data-open] {
        display: block;
    }

    .project-nav__list {
        display: grid;
        justify-content: stretch;
        gap: 0;
    }

    .project-nav__link {
        min-height: 3.2rem;
        border-bottom: 1px solid var(--project-line);
    }

    .project-nav__link::after {
        display: none;
    }

    .project-hero__grid,
    .project-mission__grid {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
        gap: 3rem;
    }

    .project-hero h1 {
        font-size: clamp(3.4rem, 9.5vw, 6.6rem);
    }

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

    .project-key-fact:nth-child(3) {
        border-left: 0;
    }

    .project-key-fact:nth-child(n + 3) {
        border-top: 1px solid var(--project-line);
    }

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

    .project-timeline-layout,
    .project-partners__layout,
    .project-faq__layout {
        grid-template-columns: minmax(14rem, 0.58fr) minmax(0, 1.42fr);
        gap: 3rem;
    }
}

@media (max-width: 50rem) {
    .project-header__cta {
        display: none;
    }

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

    .project-section-heading--split,
    .project-hero__grid,
    .project-mission__grid,
    .project-timeline-layout,
    .project-partners__layout,
    .project-faq__layout,
    .project-participation__inner {
        grid-template-columns: 1fr;
    }

    .project-section-heading--split {
        align-items: start;
        gap: 1.2rem;
    }

    .project-section-heading--sticky {
        position: static;
    }

    .project-hero__grid {
        min-height: auto;
    }

    .project-hero__media {
        min-height: 24rem;
    }

    .project-hero__media img {
        min-height: 24rem;
        aspect-ratio: 4 / 3;
    }

    .project-mission__content {
        order: 1;
    }

    .project-mission__media {
        order: 2;
    }

    .project-timeline-layout .project-section-heading,
    .project-partners .project-section-heading,
    .project-faq .project-section-heading {
        margin-bottom: 2rem;
    }

    .project-participation__details {
        max-width: 34rem;
    }

    .project-participation .project-button,
    .project-participation__note {
        grid-column: 1;
    }

    .project-footer__grid {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .project-footer__links {
        justify-content: flex-start;
    }
}

@media (max-width: 38rem) {
    :root {
        --project-section-space: 4.4rem;
    }

    .project-brand__mark {
        width: 2.3rem;
        height: 2.3rem;
    }

    .project-brand__name {
        font-size: 0.92rem;
    }

    .project-nav-toggle > span:first-child {
        display: none;
    }

    .project-hero {
        padding-top: 3.2rem;
    }

    .project-hero h1 {
        font-size: clamp(3.25rem, 17vw, 5rem);
    }

    .project-hero__media,
    .project-hero__media img {
        min-height: 20rem;
    }

    .project-hero__media::before {
        inset: 1.5rem -0.65rem -0.65rem 0.65rem;
    }

    .project-hero__media figcaption {
        right: 0;
    }

    .project-key-facts {
        margin-top: -1rem;
    }

    .project-key-facts__grid,
    .project-impact__grid,
    .project-participants__grid,
    .project-partners__list {
        grid-template-columns: 1fr;
    }

    .project-key-fact + .project-key-fact {
        border-top: 1px solid var(--project-line);
        border-left: 0;
    }

    .project-partners__list li:nth-child(odd) {
        border-right: 0;
    }

    .project-timeline__item {
        grid-template-columns: 2.7rem minmax(0, 1fr);
        gap: 0.9rem;
    }

    .project-timeline__period {
        align-self: center;
    }

    .project-timeline__content {
        grid-column: 2;
    }

    .project-button {
        width: 100%;
    }

    .project-participation__details {
        gap: 0.6rem;
    }

    .project-footer__bottom {
        min-height: 5.5rem;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
}

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

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