@import url("tokens.css");

html,
body {
    overflow-x: clip;
}

.ah-about {
    overflow-x: clip;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
}

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

.ah-about h1,
.ah-about h2,
.ah-about h3,
.ah-about p,
.ah-about blockquote,
.ah-about figure {
    margin-top: 0;
}

.ah-about h1,
.ah-about h2,
.ah-about h3 {
    font-style: normal;
    overflow-wrap: anywhere;
    min-width: 0;
}

.ah-about a {
    text-decoration: none;
}

.ah-about__container {
    width: min(1240px, calc(100% - (var(--space-lg) * 2)));
    margin-inline: auto;
}

.ah-about__hero {
    position: relative;
    padding-block: var(--space-3xl) var(--space-5xl);
    border-bottom: var(--rule-thin) solid var(--color-line);
    background: var(--color-paper);
}

.ah-about__hero::after {
    position: absolute;
    right: max(var(--space-lg), calc((100% - 1240px) / 2));
    bottom: var(--space-xl);
    width: 88px;
    height: var(--rule-thin);
    background: var(--color-line);
    content: "";
}

.ah-about__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-bottom: var(--space-3xl);
    color: var(--color-muted);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
}

.ah-about__breadcrumb a {
    color: var(--color-ink);
    white-space: nowrap;
    transition: color var(--dur-short) var(--ease-out);
}

.ah-about__breadcrumb a:hover {
    color: var(--color-accent);
}

.ah-about__breadcrumb a:focus-visible {
    outline: var(--rule-accent) solid var(--color-focus);
    outline-offset: var(--space-3xs);
}

.ah-about__breadcrumb a:active {
    color: var(--color-accent-dark);
}

.ah-about__breadcrumb a[aria-disabled="true"],
.ah-about__breadcrumb a.is-loading,
.ah-about__text-link[aria-disabled="true"],
.ah-about__text-link.is-loading {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}

.ah-about__breadcrumb a.is-error,
.ah-about__text-link.is-error {
    color: var(--color-accent-dark);
}

.ah-about__breadcrumb a.is-success,
.ah-about__text-link.is-success {
    color: var(--color-ink);
}

.ah-about__hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: var(--space-3xl);
    align-items: end;
}

.ah-about__hero-heading h1 {
    max-width: 820px;
    margin-bottom: var(--space-lg);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.94;
}

.ah-about__accent-rule {
    width: 48px;
    height: var(--rule-accent);
    display: block;
    background: var(--color-accent);
}

.ah-about__hero-intro {
    max-width: 480px;
    padding-bottom: var(--space-2xs);
}

.ah-about__lead {
    margin-bottom: var(--space-lg);
    color: var(--color-ink-soft);
    font-size: var(--text-lg);
    line-height: 1.72;
}

.ah-about__hero-actions,
.ah-about__closing-links {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.ah-about__button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding-inline: var(--space-md);
    border: var(--rule-thin) solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    transition:
        transform var(--dur-short) var(--ease-out),
        background-color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        color var(--dur-short) var(--ease-out);
}

.ah-about__button i {
    line-height: 1;
}

.ah-about__button:hover {
    transform: translateY(-1px);
}

.ah-about__button:focus-visible {
    outline: var(--rule-accent) solid var(--color-focus);
    outline-offset: var(--space-3xs);
}

.ah-about__button:active {
    transform: translateY(1px);
}

.ah-about__button[aria-disabled="true"],
.ah-about__button.is-loading {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}

.ah-about__button.is-error {
    border-color: var(--color-accent-dark);
}

.ah-about__button.is-success {
    border-color: var(--color-ink);
}

.ah-about__button--primary {
    background: var(--color-accent);
    color: var(--color-accent-ink);
}

.ah-about__button--primary:hover {
    background: var(--color-accent-dark);
    color: var(--color-accent-ink);
}

.ah-about__button--light {
    border-color: var(--color-paper);
    background: var(--color-paper);
    color: var(--color-ink);
}

.ah-about__button--light:hover {
    border-color: var(--color-accent-soft);
    background: var(--color-accent-soft);
    color: var(--color-ink);
}

.ah-about__text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border-bottom: var(--rule-thin) solid currentColor;
    color: var(--color-ink);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    transition:
        color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out);
}

.ah-about__text-link:hover {
    color: var(--color-accent);
}

.ah-about__text-link:focus-visible {
    outline: var(--rule-accent) solid var(--color-focus);
    outline-offset: var(--space-3xs);
}

.ah-about__text-link:active {
    color: var(--color-accent-dark);
}

.ah-about__story {
    padding-block: var(--space-5xl);
    background: var(--color-paper-raised);
}

.ah-about__story-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    gap: var(--space-4xl);
    align-items: start;
}

.ah-about__story-heading {
    position: sticky;
    top: calc(var(--banner-height) + var(--space-lg));
}

.ah-about__story-heading h2,
.ah-about__section-heading h2,
.ah-about__showcase-heading h2,
.ah-about__closing h2 {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1.04;
}

.ah-about__story-heading h2 {
    max-width: 420px;
    margin-bottom: 0;
    font-size: clamp(40px, 5vw, 68px);
}

.ah-about__story-copy {
    max-width: 72ch;
}

.ah-about__story-copy > p {
    margin-bottom: var(--space-2xl);
    white-space: pre-line;
    color: var(--color-ink-soft);
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.8;
}

.ah-about__story-copy blockquote {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: var(--space-md);
    padding-block: var(--space-lg);
    border-block: var(--rule-thin) solid var(--color-line);
}

.ah-about__story-copy blockquote > span {
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: 68px;
    line-height: 0.8;
}

.ah-about__story-copy blockquote p {
    max-width: 54ch;
    margin-bottom: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.24;
}

.ah-about__principles {
    padding-block: var(--space-4xl) var(--space-5xl);
    border-block: var(--rule-thin) solid var(--color-line);
    background: var(--color-paper);
}

.ah-about__section-heading {
    max-width: 760px;
    margin-bottom: var(--space-3xl);
}

.ah-about__section-heading h2 {
    margin-bottom: var(--space-md);
    font-size: clamp(40px, 5vw, 64px);
}

.ah-about__section-heading p,
.ah-about__showcase-heading p,
.ah-about__closing-action > p {
    max-width: 58ch;
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: var(--text-base);
    line-height: 1.72;
}

.ah-about__principles-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: var(--rule-thin) solid var(--color-line);
}

.ah-about__principle {
    display: grid;
    grid-template-columns: minmax(140px, 0.42fr) minmax(0, 1fr);
    gap: var(--space-lg);
    padding-block: var(--space-xl);
    border-bottom: var(--rule-thin) solid var(--color-line);
}

.ah-about__principle:nth-child(odd) {
    padding-right: var(--space-xl);
}

.ah-about__principle:nth-child(even) {
    padding-left: var(--space-xl);
    border-left: var(--rule-thin) solid var(--color-line);
}

.ah-about__principle--wide {
    grid-column: 1 / -1;
    padding-right: 0;
}

.ah-about__principle h3 {
    margin-bottom: 0;
    color: var(--color-accent-dark);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1.4;
}

.ah-about__principle p {
    max-width: 52ch;
    margin-bottom: 0;
    color: var(--color-ink-soft);
    font-size: var(--text-lg);
    line-height: 1.7;
}

.ah-about__showcase {
    padding-block: var(--space-5xl);
    background: var(--color-ink);
    color: var(--color-paper);
}

.ah-about__showcase-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.55fr);
    gap: var(--space-3xl);
    align-items: end;
    margin-bottom: var(--space-2xl);
}

.ah-about__showcase-heading h2 {
    max-width: 720px;
    margin-bottom: 0;
    color: var(--color-paper);
    font-size: clamp(40px, 5vw, 68px);
}

.ah-about__showcase-heading p {
    color: var(--color-dark-muted);
}

.ah-about__showcase-grid {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-xs);
}

.ah-about__showcase-item {
    position: relative;
    height: 304px;
    margin-bottom: 0;
    overflow: hidden;
    background: var(--color-dark-surface);
}

.ah-about__showcase-item--hero {
    grid-column: span 7;
    grid-row: span 2;
    height: 620px;
}

.ah-about__showcase-item--mupi,
.ah-about__showcase-item--dooh {
    grid-column: span 5;
}

.ah-about__showcase-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform var(--dur-medium) var(--ease-out);
}

.ah-about__showcase-item--mupi img {
    object-position: 32% center;
}

.ah-about__showcase-item:hover img {
    transform: scale(1.015);
}

.ah-about__showcase-item figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3xs) var(--space-md);
    align-items: end;
    padding: var(--space-md);
    background: var(--color-ink-overlay);
    color: var(--color-paper);
}

.ah-about__showcase-item figcaption span {
    grid-column: 1 / -1;
    color: var(--color-dark-muted);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ah-about__showcase-item figcaption strong {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: 1;
}

.ah-about__showcase-item figcaption small {
    color: var(--color-dark-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.2;
    white-space: nowrap;
}

.ah-about__showcase-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: var(--rule-thin) solid var(--color-line-dark);
}

.ah-about__showcase-footer p {
    max-width: 64ch;
    margin-bottom: 0;
    color: var(--color-dark-muted);
    font-size: var(--text-base);
    line-height: 1.7;
}

.ah-about__closing {
    padding-block: var(--space-4xl);
    background: var(--color-ink);
    color: var(--color-paper);
}

.ah-about__closing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: var(--space-3xl);
    align-items: center;
}

.ah-about__closing h2 {
    max-width: 680px;
    margin-bottom: 0;
    color: var(--color-paper);
    font-size: clamp(40px, 5vw, 68px);
}

.ah-about__closing-action > p {
    margin-bottom: var(--space-lg);
    color: var(--color-line);
}

.ah-about__text-link--light {
    color: var(--color-paper);
}

.ah-about__text-link--light:hover {
    color: var(--color-accent-soft);
}

@media (max-width: 1024px) {
    .ah-about__container {
        width: min(100% - (var(--space-md) * 2), 880px);
    }

    .ah-about__hero-grid,
    .ah-about__story-grid,
    .ah-about__closing-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xl);
    }

    .ah-about__hero-intro {
        max-width: 640px;
    }

    .ah-about__story-heading {
        position: static;
    }

    .ah-about__principle {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-sm);
    }
}

@media (max-width: 768px) {
    .ah-about__hero {
        padding-block: var(--space-2xl) var(--space-4xl);
    }

    .ah-about__breadcrumb {
        margin-bottom: var(--space-2xl);
    }

    .ah-about__hero-heading h1 {
        font-size: clamp(52px, 15vw, 76px);
        line-height: 0.98;
    }

    .ah-about__story,
    .ah-about__showcase {
        padding-block: var(--space-4xl);
    }

    .ah-about__principles {
        padding-block: var(--space-3xl) var(--space-4xl);
    }

    .ah-about__section-heading,
    .ah-about__showcase-heading {
        margin-bottom: var(--space-2xl);
    }

    .ah-about__showcase-heading {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-md);
    }

    .ah-about__principles-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .ah-about__principle,
    .ah-about__principle:nth-child(odd),
    .ah-about__principle:nth-child(even) {
        padding-inline: 0;
        border-left: 0;
    }

    .ah-about__showcase-item--hero,
    .ah-about__showcase-item--mupi,
    .ah-about__showcase-item--dooh {
        grid-column: span 6;
        grid-row: auto;
        height: 360px;
    }

    .ah-about__showcase-item--hero {
        grid-column: 1 / -1;
        height: 460px;
    }

    .ah-about__showcase-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-md);
    }
}

@media (max-width: 520px) {
    .ah-about__container {
        width: calc(100% - (var(--space-sm) * 2));
    }

    .ah-about__hero::after {
        right: var(--space-sm);
        bottom: var(--space-lg);
        width: 52px;
    }

    .ah-about__hero-actions,
    .ah-about__closing-links {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .ah-about__story-copy blockquote {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-sm);
    }

    .ah-about__story-copy blockquote > span {
        font-size: 48px;
    }

    .ah-about__showcase-item--hero,
    .ah-about__showcase-item--mupi,
    .ah-about__showcase-item--dooh {
        grid-column: 1 / -1;
        height: 300px;
    }

    .ah-about__showcase-item--hero {
        height: 380px;
    }

    .ah-about__showcase-item figcaption {
        grid-template-columns: minmax(0, 1fr);
    }

    .ah-about__showcase-item figcaption small {
        justify-self: start;
    }

    .ah-about__closing {
        padding-block: var(--space-3xl);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ah-about__button,
    .ah-about__showcase-item img {
        transition-duration: var(--dur-short);
    }

    .ah-about__button:hover,
    .ah-about__button:active,
    .ah-about__showcase-item:hover img {
        transform: none;
    }
}