@layer reset, base, components, utilities;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body, h1, h2, h3, p { margin: 0; }
    img { display: block; max-width: 100%; }
    button, input, textarea, select { font: inherit; }
}

@layer base {
    :root {
        --color-paper: #f3efe7;
        --color-paper-deep: #e6ded0;
        --color-ink: #1c211e;
        --color-muted: #5e625d;
        --color-accent: #875944;
        --color-line: rgba(28, 33, 30, 0.18);
        --color-white: #fffdf8;
        --font-display: "Iowan Old Style", "Baskerville", "Times New Roman", "Songti SC", "STSong", serif;
        --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
        --space-xs: clamp(0.75rem, 1vw, 1rem);
        --space-sm: clamp(1rem, 2vw, 1.5rem);
        --space-md: clamp(1.5rem, 4vw, 3rem);
        --space-lg: clamp(3rem, 7vw, 7rem);
        --content-width: 78rem;
        --page-gutter: clamp(1.25rem, 4vw, 2.5rem);
        /* Absolute site-header band; heroes use this so copy never sits under the logo. */
        --site-header-clearance: calc(5.5rem + var(--space-sm));
    }

    html { color-scheme: light; }
    body {
        background: var(--color-paper);
        color: var(--color-ink);
        font-family: var(--font-body);
        font-size: 1rem;
        line-height: 1.65;
        text-rendering: optimizeLegibility;
    }
    h1, h2, h3 {
        font-family: var(--font-display);
        font-weight: 400;
        letter-spacing: -0.025em;
        line-height: 1.08;
    }
    h1 { font-size: clamp(2.65rem, 7vw, 6.8rem); max-width: 13ch; }
    h2 { font-size: clamp(2.1rem, 4.5vw, 4.5rem); max-width: 16ch; }
    h3 { font-size: clamp(1.75rem, 3vw, 2.8rem); }
    a { color: inherit; }
    :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
}

@layer components {
    .content-width { width: min(calc(100% - 2 * var(--page-gutter)), var(--content-width)); margin-inline: auto; }
    .section { padding-block: var(--space-lg); }
    .eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
    [lang="zh-CN"] .eyebrow { letter-spacing: 0.12em; }

    .site-skip-link { position: fixed; inset: 0 auto auto 0; z-index: 100; padding: 0.75rem 1rem; background: var(--color-white); transform: translateY(-120%); }
    .site-skip-link:focus { transform: translateY(0); }

    .site-consent {
        position: fixed;
        z-index: 90;
        left: var(--page-gutter);
        right: var(--page-gutter);
        bottom: max(var(--space-sm), env(safe-area-inset-bottom, 0px));
    }
    .site-consent__panel {
        width: min(42rem, 100%);
        margin-inline: auto;
        padding: var(--space-sm);
        background: var(--color-paper);
        color: var(--color-ink);
        border: 1px solid var(--color-line);
        box-shadow: 0 18px 48px rgb(12 18 14 / 0.22);
        display: grid;
        gap: 0.85rem;
    }
    .site-consent__panel .eyebrow { color: var(--color-accent); }
    .site-consent__text { margin: 0; color: var(--color-muted); font-size: 0.95rem; }
    .site-consent__privacy { margin: 0; }
    .site-consent__privacy a {
        color: var(--color-accent);
        font-weight: 700;
        text-underline-offset: 0.28em;
    }
    .site-consent__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: flex-end;
    }
    .site-consent .button {
        min-height: 2.75rem;
        padding: 0.65rem 1.15rem;
        cursor: pointer;
    }
    .site-consent .button--secondary {
        border-color: var(--color-ink);
        color: var(--color-ink);
        background: transparent;
    }
    .site-header { position: absolute; inset: 0 0 auto; z-index: 20; color: var(--color-white); border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
    .site-header__inner { width: min(calc(100% - 2 * var(--page-gutter)), var(--content-width)); min-height: 5.5rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
    .site-brand { display: inline-flex; align-items: center; color: inherit; text-decoration: none; line-height: 0; cursor: pointer; }
    .site-brand__logo {
        display: block;
        width: auto;
        height: clamp(1.85rem, 2.4vw, 2.35rem);
        object-fit: contain;
        pointer-events: none;
    }
    .site-brand__logo--zh {
        height: clamp(2.35rem, 3.1vw, 3rem);
    }
    .site-footer__brand {
        --logo-h: clamp(1.65rem, 2vw, 2rem);
        margin: 0;
        line-height: inherit;
    }
    .site-footer__brand .site-brand {
        display: inline;
        line-height: inherit;
        cursor: pointer;
    }
    /* Wordmark baseline is ~27% above the PNG bottom; share the footer text line. */
    .site-footer__brand .site-brand__logo {
        display: inline;
        height: var(--logo-h);
        vertical-align: calc(var(--logo-h) * -0.27);
        pointer-events: none;
    }
    .site-footer__brand .site-brand__logo--zh {
        --logo-h: clamp(2.1rem, 2.6vw, 2.55rem);
        vertical-align: calc(var(--logo-h) * -0.16);
    }
    .site-navigation { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); }
    .site-navigation a { color: inherit; font-size: 0.84rem; text-decoration: none; }
    .site-navigation a:hover { text-decoration: underline; text-underline-offset: 0.4em; }
    .site-navigation a.is-current { text-decoration: underline; text-underline-offset: 0.4em; }
    .site-navigation__soon {
        display: inline-block; margin-left: 0.4rem; padding: 0.12rem 0.4rem;
        border: 1px solid currentColor; border-radius: 999px;
        font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
        opacity: 0.78; vertical-align: 0.12em;
    }
    .site-navigation__edition { border: 1px solid currentColor; padding: 0.5rem 0.8rem; }
    .site-menu-button { display: none; border: 0; background: transparent; color: inherit; }
    .edition-notice { position: relative; z-index: 19; padding: 6.2rem 0 0.7rem; background: #f0dcae; color: var(--color-ink); font-size: 0.9rem; }

    .hero {
        height: 100svh;
        height: 100dvh;
        max-height: 100svh;
        max-height: 100dvh;
        min-height: 28rem;
        position: relative;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        background: #252b27;
        color: var(--color-white);
    }
    .hero__media, .hero__overlay { position: absolute; inset: 0; }
    .hero__media img { width: 100%; height: 100%; object-fit: cover; }
    .hero__overlay { background: linear-gradient(90deg, rgba(12, 18, 14, 0.86) 0%, rgba(12, 18, 14, 0.48) 58%, rgba(12, 18, 14, 0.18) 100%); }
    .hero__content {
        position: relative;
        z-index: 1;
        padding-block: clamp(5.5rem, 11vh, 7.5rem) clamp(1.75rem, 5vh, 3.25rem);
    }
    .hero__content .eyebrow { margin-bottom: var(--space-sm); }
    h1.hero__title {
        display: grid;
        gap: 0.06em;
        margin-block: var(--space-sm);
        max-width: min(44rem, 100%);
        font-size: clamp(2rem, 3.2vw + 0.55rem, 3.55rem);
        line-height: 1.12;
        letter-spacing: -0.03em;
    }
    .hero__title-line { display: block; max-width: 100%; }
    @media (min-width: 52rem) {
        .hero__title-line { white-space: nowrap; }
    }
    .hero__intro { max-width: 38rem; margin-top: var(--space-sm); font-size: clamp(1rem, 1.4vw, 1.2rem); }
    .hero__content .button-group { margin-top: var(--space-sm); }

    html:has(body.has-panels) {
        scroll-snap-type: y mandatory;
        scroll-padding-top: 0;
    }
    body.has-panels {
        scroll-snap-type: y mandatory;
        scroll-padding-top: 0;
    }
    /* Tall finale panels (exhibition list, About, etc.) are taller than the viewport.
       Mandatory snap to their start fights scrolling to the footer. Home panels fit
       one screen so they keep mandatory snap; other pages use proximity and do not
       snap the finale. */
    html:has(body.has-panels:not(.is-home)),
    body.has-panels:not(.is-home) {
        scroll-snap-type: y proximity;
    }
    /* Tour cards are one viewport each. Mandatory + always-stop locks each
       panel the way home does; proximity was leaving cards mid-frame.
       Smooth document scrolling fights that settle, so tour uses auto. */
    html:has(body.has-panels.is-tour) {
        scroll-behavior: auto;
        scroll-snap-type: y mandatory;
    }
    body.has-panels.is-tour {
        scroll-snap-type: y mandatory;
    }
    /* The edition-fallback banner is in-flow above the first snap panel. Snap
       then parks the 100dvh hero at the viewport top and hides the absolute
       header (and the banner) until the user overscrolls up. Language switch
       into Chinese Available Exhibitions is the usual trigger. After tour so
       equal-specificity selectors win over proximity and mandatory tour snap. */
    html:has(body.has-panels):has(.edition-notice),
    body.has-panels:has(.edition-notice) {
        scroll-snap-type: none;
    }
    .has-panels:has(.edition-notice) .site-panel {
        scroll-snap-align: none;
    }
    /* List/about media heroes are followed by a tall unscrolled finale. Snapping
       a locked 100dvh hero has the same header-hide failure when anything (banner,
       visual-viewport vs 100dvh) offsets the first panel. */
    html:has(body.has-panels:has(.page-hero--media)),
    body.has-panels:has(.page-hero--media) {
        scroll-snap-type: none;
    }
    .has-panels.is-tour .site-panel--hero,
    .has-panels.is-tour .tour-card.site-panel {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .has-panels .site-main {
        display: contents;
    }
    .has-panels .exhibition-detail,
    .has-panels .case-detail {
        display: contents;
    }
    .has-panels .site-panel {
        box-sizing: border-box;
        height: 100svh;
        height: 100dvh;
        min-height: 100svh;
        min-height: 100dvh;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }
    .has-panels .site-panel.section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-block: clamp(3rem, 8vh, 5.5rem);
        overflow: hidden;
    }
    .has-panels .site-panel--hero {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        padding-block: 0;
        overflow: hidden;
    }
    .has-panels .site-panel--finale {
        height: auto;
        min-height: 100svh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        overflow: visible;
        padding-block: 0;
    }
    .has-panels:not(.is-home) .site-panel--finale {
        scroll-snap-align: none;
    }
    /* Tour finale is one viewport (CTA + footer), so it needs a snap target.
       Without it, mandatory always-stop on the last card pulls the scroller
       back and the footer never becomes reachable. */
    .has-panels.is-tour .site-panel--finale {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        height: 100svh;
        height: 100dvh;
        overflow: hidden;
    }
    .has-panels .site-panel--finale > .section,
    .has-panels .site-panel--finale > .contact-cta,
    .has-panels .site-panel--finale > .page-foundation {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-block: clamp(3rem, 8vh, 5.5rem);
        min-height: 0;
    }
    .has-panels .site-panel--finale > .exhibition-index,
    .has-panels .site-panel--finale > .case-index {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-block: clamp(3rem, 8vh, 5.5rem);
        min-height: 0;
    }
    .has-panels .site-panel--finale > .case-index {
        padding-block: clamp(1.25rem, 3vh, 2.25rem) clamp(2rem, 5vh, 3.5rem);
    }
    .has-panels .site-panel--finale > .exhibition-detail__body {
        flex: 1 1 auto;
        align-content: center;
        padding-block: clamp(3rem, 8vh, 5.5rem);
        min-height: 0;
    }
    .has-panels .site-panel--finale > .case-detail__body {
        flex: 1 1 auto;
        display: grid;
        justify-content: stretch;
        align-content: start;
        padding-block: clamp(3rem, 8vh, 5.5rem);
        min-height: 0;
    }
    .has-panels .site-panel--finale .site-footer {
        flex: 0 0 auto;
    }
    .has-panels .page-hero.site-panel--hero {
        min-height: 100svh;
        min-height: 100dvh;
        padding-top: 0;
    }
    .has-panels .page-hero--media.site-panel--hero {
        height: auto;
        min-height: 100svh;
        min-height: 100dvh;
        scroll-snap-align: none;
    }
    .has-panels .page-hero.site-panel--hero .page-hero__inner {
        padding-block: clamp(5.5rem, 11vh, 7.5rem) clamp(1.75rem, 5vh, 3.25rem);
    }
    .has-panels .page-hero--low.site-panel--hero {
        height: auto;
        min-height: 0;
        scroll-snap-align: none;
        align-items: flex-end;
        overflow: visible;
    }
    .has-panels .page-hero--low.site-panel--hero .page-hero__inner {
        padding-block: calc(5.5rem + var(--space-md)) var(--space-md);
    }
    .has-panels .page-hero--low.site-panel--hero .page-hero__inner.case-hero {
        padding-block: calc(5.5rem + var(--space-md)) clamp(2.25rem, 5vw, 3.75rem);
    }
    .page-hero--low .eyebrow {
        margin-bottom: 0.65rem;
    }
    .page-hero--low h1 {
        margin: 0 0 0.7rem;
        font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    }
    .page-hero--low .page-hero__inner > p:last-child:not(.case-hero__count),
    .page-hero--low .privacy-updated {
        max-width: none;
        margin: 0;
        font-size: 0.92rem;
        color: rgba(255, 253, 248, 0.62);
    }
    .has-panels .exhibition-detail__hero.site-panel--hero,
    .has-panels .case-detail__hero--media.site-panel--hero {
        /* Min viewport tall; grow when heading is taller so flex-end cannot climb under the logo. */
        min-height: 100svh;
        min-height: 100dvh;
        height: auto;
        overflow: visible;
        padding-top: var(--site-header-clearance);
        box-sizing: border-box;
    }
    .has-panels .exhibition-detail__hero.site-panel--hero .exhibition-detail__heading,
    .has-panels .case-detail__hero--media.site-panel--hero .case-detail__heading {
        padding-block: var(--space-sm) clamp(1.75rem, 5vh, 3.25rem);
    }
    .has-panels .case-detail__hero:not(.case-detail__hero--media).site-panel--hero {
        height: auto;
        min-height: 0;
        scroll-snap-align: none;
        align-items: flex-end;
        overflow: visible;
    }
    .is-home .journey-card { min-height: 0; }
    .is-home .journey-card__number { margin-bottom: clamp(1.5rem, 4vh, 3.5rem); }

    [data-reveal-item] {
        opacity: 0;
        transform: translate3d(0, 1.75rem, 0);
        filter: blur(4px);
        transition:
            opacity 880ms cubic-bezier(0.16, 1, 0.3, 1),
            transform 880ms cubic-bezier(0.16, 1, 0.3, 1),
            filter 880ms cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: var(--reveal-delay, 0ms);
        will-change: opacity, transform, filter;
    }
    [data-reveal].is-revealed [data-reveal-item] {
        opacity: 1;
        transform: none;
        filter: none;
    }
    .hero__media,
    .exhibition-detail__media,
    .case-detail__media {
        transform: scale(1.04);
        transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    [data-reveal="hero"].is-revealed .hero__media,
    [data-reveal="hero"].is-revealed .exhibition-detail__media,
    [data-reveal="hero"].is-revealed .case-detail__media {
        transform: none;
    }
    @media (prefers-reduced-motion: reduce) {
        [data-reveal-item] {
            opacity: 1;
            transform: none;
            filter: none;
            transition: none;
            will-change: auto;
        }
        .hero__media,
        .exhibition-detail__media,
        .case-detail__media,
        [data-reveal="hero"].is-revealed .hero__media,
        [data-reveal="hero"].is-revealed .exhibition-detail__media,
        [data-reveal="hero"].is-revealed .case-detail__media,
        .case-tile__media img,
        .case-tile:hover .case-tile__media img,
        .case-tile[open] .case-tile__media img,
        .case-overlay,
        .case-overlay.is-open,
        .case-overlay__toolbar,
        .case-overlay__body,
        .case-overlay.is-open .case-overlay__toolbar,
        .case-overlay.is-open .case-overlay__body {
            transform: none;
            transition: none;
        }
    }
    .button-group { margin-top: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
    .button { display: inline-flex; min-height: 3.25rem; align-items: center; justify-content: center; padding: 0.85rem 1.25rem; border: 1px solid transparent; font-size: 0.86rem; font-weight: 700; text-decoration: none; }
    .button--primary { background: var(--color-white); color: var(--color-ink); }
    .button--secondary { border-color: rgba(255, 255, 255, 0.68); color: var(--color-white); }
    .button--dark { background: var(--color-ink); color: var(--color-white); }
    .text-link { display: inline-flex; gap: 0.55rem; align-items: center; font-weight: 700; text-underline-offset: 0.35em; }
    .text-link--light { margin-left: 0.35rem; color: var(--color-white); }

    .section-heading { display: grid; gap: var(--space-sm); margin-bottom: var(--space-md); }
    .journey-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-line); }
    .journey-card { min-height: 28rem; padding: var(--space-md); border-bottom: 1px solid var(--color-line); }
    .journey-card + .journey-card { border-left: 1px solid var(--color-line); }
    .journey-card__number { margin-bottom: clamp(4rem, 9vw, 8rem); color: var(--color-accent); font-family: var(--font-display); font-size: 1.3rem; }
    .journey-card h3 { max-width: 15ch; margin-top: 0.7rem; }
    .journey-card > p:not(.eyebrow, .journey-card__number) { max-width: 32rem; margin-block: var(--space-sm); color: var(--color-muted); }

    .proof { background: var(--color-ink); color: var(--color-white); }
    .proof__intro { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--space-md); align-items: end; }
    .proof h2 { margin-top: var(--space-sm); }
    .proof__text { max-width: 34rem; font-size: clamp(1.1rem, 2vw, 1.45rem); color: rgba(255, 253, 248, 0.76); }
    .proof__archive {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-md);
        align-items: end;
        margin-top: var(--space-md);
    }
    .proof__strip {
        display: flex;
        margin: 0;
        padding: 0.35rem 0.4rem 0.35rem 0;
        overflow-x: auto;
        list-style: none;
        scrollbar-width: none;
    }
    .proof__strip::-webkit-scrollbar { display: none; }
    .proof__thumb {
        flex: 0 0 4.6rem;
        width: 4.6rem;
        aspect-ratio: 3 / 4;
        margin-left: -1.15rem;
        overflow: hidden;
        border: 2px solid var(--color-ink);
        background: #2a312d;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
        color: transparent;
        font-size: 0;
    }
    .proof__thumb:first-child { margin-left: 0; }
    .proof__thumb img { width: 100%; height: 100%; object-fit: cover; }
    .proof__thumb--blank {
        display: flex;
        align-items: flex-end;
        padding: 0.4rem;
        color: rgba(255, 253, 248, 0.72);
        font-size: 0.62rem;
        line-height: 1.25;
    }
    .proof__archive-meta { display: grid; gap: 0.45rem; justify-items: start; }
    .proof__count { margin: 0; line-height: 0.9; }
    .proof__count-num {
        display: block;
        font-family: var(--font-display);
        font-size: clamp(2.6rem, 5vw, 4.2rem);
        letter-spacing: -0.04em;
    }
    .proof__count-unit {
        display: block;
        margin-top: 0.35rem;
        color: rgba(255, 253, 248, 0.62);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }
    .proof__more { margin: 0; }

    .capability__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr); align-items: center; gap: var(--space-lg); }
    .capability__media { aspect-ratio: 4 / 3; overflow: hidden; }
    .capability__media img { width: 100%; height: 100%; object-fit: cover; }
    .capability__content h2 { margin-block: var(--space-sm); }
    .capability__content > p:last-of-type { max-width: 32rem; color: var(--color-muted); }
    .magic-wall-invite { margin-top: 0.85rem; max-width: 32rem; color: var(--color-muted); }
    .magic-wall-invite .text-link { color: var(--color-accent); }

    .contact-cta { background: var(--color-paper-deep); }
    .contact-cta__inner { display: grid; grid-template-columns: 0.5fr 1.5fr auto; gap: var(--space-md); align-items: center; }
    .contact-cta h2 { font-size: clamp(2rem, 4vw, 3.8rem); }
    .is-home #contact { background: var(--color-paper-deep); }
    .home-offices__head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-sm);
        margin-bottom: var(--space-md);
    }
    .home-offices__head h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); }
    .site-footer { padding-block: var(--space-md); background: #111512; color: var(--color-white); }
    .site-footer__inner { width: min(calc(100% - 2 * var(--space-sm)), var(--content-width)); margin-inline: auto; display: grid; grid-template-columns: 0.6fr 1.4fr auto; gap: var(--space-md); align-items: baseline; }
    .site-footer__end { display: grid; gap: 0.85rem; justify-items: end; }
    .site-footer__meta { color: rgba(255, 255, 255, 0.58); font-size: 0.8rem; white-space: nowrap; }
    .site-footer__icp { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
    .site-footer__icp:hover,
    .site-footer__icp:focus-visible { color: var(--color-white); }
    .site-social { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0; }
    .site-social__link {
        display: inline-flex;
        width: 2.4rem;
        height: 2.4rem;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 253, 248, 0.28);
        background: transparent;
        color: inherit;
        text-decoration: none;
        cursor: pointer;
    }
    .site-social__link:hover,
    .site-social__link:focus-visible { border-color: var(--color-white); background: rgba(255, 253, 248, 0.08); }
    .site-social__icon { width: 1.15rem; height: 1.15rem; display: block; }
    .site-social--on-paper .site-social__link {
        border-color: var(--color-line);
        color: var(--color-ink);
    }
    .site-social--on-paper .site-social__link:hover,
    .site-social--on-paper .site-social__link:focus-visible {
        border-color: var(--color-ink);
        background: var(--color-white);
    }
    .wechat-dialog {
        width: min(22rem, calc(100vw - 1.5rem));
        margin: auto;
        padding: 1.1rem 1.15rem 1.35rem;
        border: 0;
        background: var(--color-paper);
        color: var(--color-ink);
        box-shadow: 0 24px 80px rgb(12 18 14 / 0.28);
    }
    .wechat-dialog::backdrop { background: rgb(12 18 14 / 0.72); }
    .wechat-dialog__chrome { display: flex; justify-content: flex-end; }
    .wechat-dialog__close {
        min-height: 2.25rem;
        padding: 0.25rem 0.75rem;
        border: 1px solid var(--color-line);
        background: transparent;
        color: inherit;
        cursor: pointer;
    }
    .wechat-dialog h2 { margin: 0.35rem 0 0.5rem; max-width: none; font-size: clamp(1.5rem, 3vw, 2rem); }
    .wechat-dialog__lead { color: var(--color-muted); }
    .wechat-dialog__qr {
        width: min(16rem, 100%);
        height: auto;
        margin: 1rem auto 0;
        padding: 0.65rem;
        background: var(--color-white);
        border: 1px solid var(--color-line);
    }
    .contact-wechat { margin: var(--space-sm) 0 0; }
    .contact-wechat img {
        width: 10.5rem;
        height: auto;
        padding: 0.5rem;
        background: var(--color-white);
        border: 1px solid var(--color-line);
    }
    .contact-wechat figcaption { margin-top: 0.55rem; color: var(--color-muted); font-size: 0.88rem; }

    .page-hero { min-height: 34rem; display: flex; align-items: flex-end; padding-top: 8rem; background: var(--color-ink); color: var(--color-white); }
    .page-hero--compact { min-height: 0; padding-top: 6.5rem; }
    .page-hero--compact .page-hero__inner { padding-block: var(--space-md) var(--space-sm); }
    .page-hero__inner { padding-block: var(--space-lg); }
    .page-hero h1 { margin-block: var(--space-sm); }
    .page-hero__inner > p:last-child { max-width: 43rem; font-size: clamp(1.05rem, 2vw, 1.35rem); color: rgba(255, 253, 248, 0.76); }
    .page-foundation__inner { display: grid; gap: var(--space-md); }
    .page-foundation h2 { max-width: 22ch; }
    .page-foundation__note { max-width: 40rem; color: var(--color-muted); }

    .exhibition-index__sr-title {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .exhibition-grid { display: grid; gap: var(--space-lg); }
    .exhibition-card { position: relative; }
    .exhibition-card__hit {
        display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
        gap: var(--space-md); align-items: center; color: inherit; text-decoration: none;
    }
    .exhibition-card:nth-child(even) .exhibition-card__hit { grid-template-columns: minmax(18rem, 0.75fr) minmax(0, 1.25fr); }
    .exhibition-card:nth-child(even) .exhibition-card__media { order: 2; }
    .exhibition-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-paper-deep); display: block; }
    .exhibition-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1;
        transition: transform 360ms ease, opacity 0.45s ease;
    }
    .exhibition-card__media.is-loading {
        background-image: linear-gradient(
            105deg,
            var(--color-paper-deep) 0%,
            var(--color-paper-deep) 38%,
            #f0ebe2 50%,
            var(--color-paper-deep) 62%,
            var(--color-paper-deep) 100%
        );
        background-size: 220% 100%;
        animation: exhibition-gallery-shimmer 1.8s ease-in-out infinite;
    }
    .exhibition-card__media.is-loading img:not(.is-decoded) {
        opacity: 0;
    }
    .exhibition-card__media.is-loaded {
        background-image: none;
    }
    .exhibition-card__hit:hover .exhibition-card__media img,
    .exhibition-card__hit:focus-visible .exhibition-card__media img { transform: scale(1.025); }
    .exhibition-card__body { display: grid; gap: var(--space-sm); min-width: 0; }
    .exhibition-card__title {
        font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.8rem);
        font-weight: 400; letter-spacing: -0.025em; line-height: 1.08;
    }
    .exhibition-card__hit:hover .exhibition-card__title,
    .exhibition-card__hit:focus-visible .exhibition-card__title { text-decoration: underline; text-underline-offset: 0.18em; }
    .exhibition-card__summary { color: var(--color-muted); }
    .exhibition-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; color: var(--color-accent); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
    .exhibition-card__lenders { color: var(--color-muted); font-size: 0.92rem; }
    .exhibition-card__availability { padding-top: var(--space-xs); border-top: 1px solid var(--color-line); font-size: 0.9rem; }
    .exhibition-card--featured .exhibition-card__meta span:first-child { color: var(--color-ink); }
    .exhibition-empty { max-width: 42rem; display: grid; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--color-line); }

    .site-not-found__hero .page-hero__inner { max-width: 42rem; }
    .is-not-found .site-not-found__hero h1 {
        max-width: none;
        text-wrap: pretty;
    }
    .is-not-found .site-panel--finale {
        height: auto;
        min-height: 0;
    }
    .is-not-found .site-panel--finale > .site-not-found__panel {
        flex: 0 0 auto;
        justify-content: flex-start;
        padding-block: var(--space-md) var(--space-sm);
    }
    .site-not-found__panel { padding-block: var(--space-sm) var(--space-md); }
    .site-not-found__panel-inner {
        max-width: 42rem;
        display: grid;
        gap: var(--space-sm);
        padding: var(--space-md);
        border: 1px solid var(--color-line);
        background: rgba(255, 253, 248, 0.55);
    }
    .site-not-found__note {
        margin: 0;
        max-width: 38rem;
        color: var(--color-muted);
        font-size: clamp(1.02rem, 1.6vw, 1.15rem);
    }

    .exhibition-detail__hero {
        min-height: max(42rem, 90svh);
        position: relative;
        display: flex;
        align-items: flex-end;
        overflow: visible;
        padding-top: var(--site-header-clearance);
        box-sizing: border-box;
        background: var(--color-ink);
        color: var(--color-white);
    }
    .exhibition-detail__media,
    .exhibition-detail__overlay {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }
    .exhibition-detail__media img { width: 100%; height: 100%; object-fit: cover; }
    .exhibition-detail__overlay { background: linear-gradient(0deg, rgba(12, 18, 14, 0.88) 0%, rgba(12, 18, 14, 0.18) 68%); }
    .exhibition-detail__heading { position: relative; z-index: 1; padding-block: var(--space-md) clamp(4rem, 9vw, 7rem); }
    .exhibition-detail__crumb { margin: 0 0 var(--space-sm); font-size: 0.84rem; }
    .exhibition-detail__crumb a {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        color: rgba(255, 253, 248, 0.82);
        text-underline-offset: 0.3em;
    }
    .exhibition-detail__title {
        margin-block: var(--space-sm);
        max-width: min(18ch, 100%);
        font-size: clamp(2.4rem, 6vw, 5.2rem);
        line-height: 1.08;
        text-wrap: balance;
    }
    .exhibition-detail__title--medium {
        max-width: min(24ch, 100%);
        font-size: clamp(2rem, 4.6vw, 3.75rem);
        line-height: 1.12;
    }
    .exhibition-detail__title--long {
        max-width: min(28ch, 100%);
        font-size: clamp(1.9rem, 4.2vw, 3.45rem);
        line-height: 1.14;
    }
    .exhibition-detail__summary { max-width: 46rem; font-size: clamp(1.05rem, 2vw, 1.4rem); }
    .exhibition-detail__summary--meta { font-size: clamp(0.95rem, 1.6vw, 1.15rem); color: rgba(255, 253, 248, 0.78); }
    .exhibition-detail__lenders { margin-top: var(--space-sm); max-width: min(52rem, 100%); }
    .exhibition-lender-list {
        list-style: none;
        margin: 0.6rem 0 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem 1.75rem;
    }
    .exhibition-lender-list li {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
    }
    .exhibition-lender-list img { width: 2.75rem; height: 2.75rem; object-fit: contain; background: rgba(255, 253, 248, 0.12); flex: 0 0 auto; }
    .exhibition-lender-list a,
    .exhibition-lender-list span { min-width: 0; }
    .exhibition-lender-list a { color: inherit; text-underline-offset: 0.25em; }
    .exhibition-detail__hero-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.85rem 1.5rem;
        margin-top: var(--space-md);
    }
    .exhibition-detail__hero-actions {
        margin-top: 0;
        flex: 1 1 auto;
    }
    .exhibition-detail__heading .exhibition-detail__credit {
        margin: 0;
        flex: 0 1 18rem;
        max-width: min(22rem, 100%);
        text-align: right;
        font-family: var(--font-body);
        font-size: 0.75rem;
        line-height: 1.4;
        color: rgba(255, 253, 248, 0.7);
    }
    .exhibition-detail__body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.6fr); gap: var(--space-lg); align-items: start; }
    .exhibition-detail__body:has(> .exhibition-facts--solo) { grid-template-columns: minmax(0, 28rem); }
    .exhibition-detail__story { display: grid; gap: var(--space-lg); }
    .exhibition-detail__lead { max-width: 42rem; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.3; }
    .exhibition-detail__prose { display: grid; gap: 0.9rem; max-width: 42rem; color: var(--color-muted); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; }
    .exhibition-detail__prose p { margin: 0; }
    .exhibition-detail__story h2 { margin-block: var(--space-sm) var(--space-md); }
    .exhibition-highlights { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); }
    .exhibition-highlights li { padding: var(--space-sm) 0 var(--space-sm) 2rem; position: relative; border-bottom: 1px solid var(--color-line); }
    .exhibition-highlights li::before { position: absolute; left: 0; color: var(--color-accent); content: "—"; }
    .exhibition-gallery {
        display: block;
    }
    .exhibition-gallery:not(.exhibition-gallery--single) {
        column-count: 2;
        column-gap: var(--space-sm);
    }
    .exhibition-gallery .eyebrow {
        column-span: all;
        margin: 0 0 var(--space-sm);
    }
    .exhibition-gallery__item {
        break-inside: avoid;
        page-break-inside: avoid;
        margin: 0 0 var(--space-sm);
        min-width: 0;
        width: 100%;
    }
    .exhibition-gallery__item img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: var(--media-w, 3) / var(--media-h, 2);
        background: var(--color-paper-deep);
        opacity: 1;
        transition: opacity 0.45s ease;
    }
    .exhibition-gallery.is-packed:not(.exhibition-gallery--single) {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        column-count: auto;
    }
    .exhibition-gallery.is-packed .eyebrow {
        column-span: none;
        margin: 0;
    }
    .exhibition-gallery.is-packed .exhibition-gallery__item {
        margin: 0;
    }
    .exhibition-gallery__pack {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        min-width: 0;
    }
    .exhibition-gallery__cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
        align-items: start;
        min-width: 0;
    }
    .exhibition-gallery__col {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        min-width: 0;
    }
    .exhibition-gallery__item.is-loading img {
        background-image: linear-gradient(
            105deg,
            var(--color-paper-deep) 0%,
            var(--color-paper-deep) 38%,
            #f0ebe2 50%,
            var(--color-paper-deep) 62%,
            var(--color-paper-deep) 100%
        );
        background-size: 220% 100%;
        animation: exhibition-gallery-shimmer 1.8s ease-in-out infinite;
    }
    .exhibition-gallery__item.is-loading img:not(.is-decoded) {
        opacity: 0.92;
    }
    .exhibition-gallery__item.is-loaded img {
        background-image: none;
        background-color: transparent;
    }
    @keyframes exhibition-gallery-shimmer {
        0% { background-position: 100% 0; }
        100% { background-position: -100% 0; }
    }
    @media (prefers-reduced-motion: reduce) {
        .exhibition-gallery__item.is-loading img {
            animation: none;
            background-image: none;
            background-color: var(--color-paper-deep);
        }
        .exhibition-gallery__item img {
            transition: none;
        }
        .exhibition-card__media.is-loading {
            animation: none;
            background-image: none;
            background-color: var(--color-paper-deep);
        }
        .exhibition-card__media img {
            transition: none;
        }
        .case-tile__media.is-loading {
            animation: none;
            background-image: none;
            background-color: var(--color-paper-deep);
        }
        .case-tile__media img {
            transition: none;
        }
    }
    .has-exhibition-lightbox .exhibition-gallery__item {
        cursor: zoom-in;
    }
    .has-exhibition-lightbox .exhibition-gallery__item:focus-visible {
        outline: 3px solid var(--color-accent);
        outline-offset: 4px;
    }
    html.is-pointer-input .exhibition-gallery__item:focus-visible,
    html.is-pointer-input .exhibition-lightbox :focus-visible {
        outline: none;
    }
    .exhibition-lightbox:not([open]) :focus-visible,
    .exhibition-lightbox:not([open]) {
        outline: none;
    }
    .exhibition-gallery__item figcaption,
    .exhibition-detail__figure figcaption {
        margin-top: 0.65rem;
        color: var(--color-muted);
        font-size: 0.78rem;
    }
    .exhibition-detail__figure { margin: 0; }
    .exhibition-detail__figure img { width: 100%; height: auto; }
    .exhibition-lightbox {
        width: min(72rem, calc(100vw - 2rem));
        max-height: calc(100vh - 2rem);
        margin: auto;
        padding: 0.85rem 0.85rem 1rem;
        border: 0;
        background: #111512;
        color: var(--color-white);
    }
    .exhibition-lightbox::backdrop { background: rgb(12 18 14 / 0.84); }
    .exhibition-lightbox__toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin: 0 0 0.65rem;
    }
    .exhibition-lightbox__counter { margin: 0; font-size: 0.78rem; color: rgba(255, 253, 248, 0.62); }
    .exhibition-lightbox__image {
        display: block;
        width: 100%;
        max-height: min(78vh, 52rem);
        height: auto;
        object-fit: contain;
        background: #0c120e;
    }
    .exhibition-lightbox__caption {
        margin: 0.65rem 0 0;
        color: rgba(255, 253, 248, 0.72);
        font-size: 0.82rem;
    }
    .exhibition-lightbox__caption:empty { display: none; }
    .exhibition-lightbox__nav {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        margin-top: 0.85rem;
    }
    .exhibition-lightbox__close,
    .exhibition-lightbox__step {
        min-height: 2.25rem;
        padding: 0.25rem 0.75rem;
        border: 1px solid rgba(255, 253, 248, 0.28);
        background: transparent;
        color: inherit;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
    }
    .exhibition-lightbox--single .exhibition-lightbox__nav,
    .exhibition-lightbox--single .exhibition-lightbox__counter { display: none; }

    .dossier-dialog {
        width: min(62rem, calc(100vw - 1.5rem));
        max-height: calc(100vh - 1.5rem);
        margin: auto;
        padding: 1.15rem 1.15rem 1.4rem;
        overflow: auto;
        border: 0;
        background: var(--color-paper);
        color: var(--color-ink);
        box-shadow: 0 24px 80px rgb(12 18 14 / 0.28);
    }
    .dossier-dialog[data-dossier-mode="wechat"] { width: min(58rem, calc(100vw - 1.5rem)); }
    .dossier-dialog::backdrop { background: rgb(12 18 14 / 0.72); }
    .dossier-dialog__chrome { display: flex; justify-content: flex-end; margin: 0 0 0.35rem; }
    .dossier-dialog__close {
        min-height: 2.25rem;
        padding: 0.25rem 0.75rem;
        border: 1px solid var(--color-line);
        background: transparent;
        color: inherit;
        cursor: pointer;
    }
    .dossier-dialog__lead,
    .dossier-form fieldset p { max-width: 38rem; color: var(--color-muted); }
    .dossier-wechat { display: grid; gap: var(--space-sm); }
    .dossier-wechat h2 { max-width: 16ch; font-size: clamp(1.8rem, 3vw, 2.8rem); }
    .dossier-wechat__grid,
    .dossier-request {
        display: grid;
        grid-template-columns: minmax(16rem, 0.95fr) minmax(18rem, 1.05fr);
        gap: var(--space-sm);
        align-items: start;
    }
    .dossier-wechat__grid {
        grid-template-columns: minmax(12rem, 0.72fr) minmax(0, 1.28fr);
    }
    .dossier-pack,
    .dossier-qr { margin: 0; }
    .dossier-pack {
        background: var(--color-white);
        border: 1px solid var(--color-line);
        box-shadow:
            8px 10px 0 -6px var(--color-paper-deep),
            16px 18px 0 -12px rgba(28, 33, 30, 0.14);
    }
    .dossier-pack__file {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.65rem 0.85rem 0.5rem;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-accent);
        border-bottom: 1px solid var(--color-line);
    }
    .dossier-pack__format {
        letter-spacing: 0.08em;
        color: var(--color-muted);
    }
    .dossier-pack__cover {
        aspect-ratio: 16 / 10;
        overflow: hidden;
        background: var(--color-ink);
    }
    .dossier-pack__cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .dossier-pack__body {
        display: grid;
        gap: 0.7rem;
        padding: 0.85rem 0.9rem 1rem;
    }
    .dossier-pack__title {
        margin: 0;
        font-family: var(--font-display);
        font-size: clamp(1.15rem, 2vw, 1.45rem);
        line-height: 1.15;
    }
    .dossier-pack__filename {
        margin: 0;
        color: var(--color-muted);
        font-size: 0.78rem;
    }
    .dossier-pack__summary {
        margin: 0;
        color: var(--color-muted);
        font-size: 0.88rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .dossier-pack__facts {
        margin: 0;
        display: grid;
        gap: 0.35rem;
    }
    .dossier-pack__facts > div {
        display: grid;
        grid-template-columns: 7.2rem minmax(0, 1fr);
        gap: 0.5rem;
        font-size: 0.82rem;
    }
    .dossier-pack__facts dt { color: var(--color-muted); }
    .dossier-pack__facts dd { margin: 0; }
    .dossier-pack__block { display: grid; gap: 0.35rem; }
    .dossier-pack__block .eyebrow { margin: 0; }
    .dossier-pack__list {
        margin: 0;
        padding-left: 1.1rem;
        font-size: 0.82rem;
    }
    .dossier-qr {
        display: grid;
        justify-items: center;
        gap: 0.75rem;
        padding: 1.1rem 1rem 1.2rem;
        background: var(--color-white);
        border: 1px solid var(--color-line);
        position: sticky;
        top: 0.5rem;
    }
    .dossier-qr img {
        width: min(13.5rem, 100%);
        height: auto;
        padding: 0.65rem;
        background: var(--color-white);
    }
    .dossier-qr figcaption {
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-muted);
    }
    .dossier-form { display: grid; gap: 0.9rem; }
    .dossier-form [hidden] { display: none !important; }
    .dossier-form h2 { max-width: 16ch; font-size: clamp(1.8rem, 3vw, 2.8rem); }
    .dossier-form__progress { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); }
    .dossier-form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 0.75rem; }
    .dossier-form legend { padding: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
    .dossier-form__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.35rem; }
    .dossier-form .button--secondary,
    .dossier-dialog .dossier-form__back {
        border-color: var(--color-line);
        color: var(--color-ink);
        background: transparent;
    }
    .dossier-form__legal {
        display: grid;
        gap: 0.75rem;
        margin-top: 0.15rem;
        max-width: 38rem;
    }
    .dossier-form__purpose {
        margin: 0;
        font-size: 0.92rem;
        line-height: 1.45;
        color: var(--color-muted);
    }
    .dossier-form__purpose a {
        color: var(--color-ink);
        text-decoration: underline;
        text-underline-offset: 0.12em;
    }
    .dossier-form__marketing {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.65rem;
        align-items: start;
        font-size: 0.92rem;
        line-height: 1.45;
        color: var(--color-ink);
        cursor: pointer;
    }
    .dossier-form__marketing input {
        margin: 0.2rem 0 0;
        width: 1rem;
        height: 1rem;
        accent-color: var(--color-accent);
    }
    .dossier-form__honeypot,
    .contact-form__honeypot {
        position: absolute;
        left: -10000px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
    .dossier-form__status { margin: 0; color: var(--color-accent); }
    .dossier-form__status.is-error { color: #8a2f2f; }
    .dossier-form__success h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
    .dossier-form__success p { color: var(--color-muted); }
    .exhibition-facts { position: sticky; top: var(--space-md); padding: var(--space-md); background: var(--color-paper-deep); }
    .exhibition-facts dl { margin: var(--space-sm) 0 var(--space-md); }
    .exhibition-facts dl > div { display: grid; gap: 0.25rem; padding-block: 0.8rem; border-bottom: 1px solid var(--color-line); }
    .exhibition-facts dt { color: var(--color-muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
    .exhibition-facts dd { margin: 0; }
    .exhibition-facts .button { width: 100%; }
    .exhibition-proof { padding-block: var(--space-lg); border-top: 1px solid var(--color-line); }
    .exhibition-proof h2 { margin: var(--space-sm) 0 var(--space-md); max-width: 18ch; }
    .exhibition-proof__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 20rem));
        gap: var(--space-md);
    }
    .exhibition-proof__card {
        margin: 0;
        padding: var(--space-md);
        background: var(--color-paper-deep);
        max-width: 20rem;
    }
    .exhibition-proof__hit {
        display: block;
        color: inherit;
        text-decoration: none;
    }
    .exhibition-proof__hit:hover .exhibition-proof__actions .text-link,
    .exhibition-proof__hit:focus-visible .exhibition-proof__actions .text-link {
        text-decoration: underline;
    }
    .exhibition-proof__media {
        margin: 0 0 var(--space-sm);
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: var(--color-paper);
    }
    .exhibition-proof__media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .exhibition-proof__card h3 {
        margin: 0;
        font-family: var(--font-display);
        font-size: clamp(1.2rem, 1.9vw, 1.55rem);
        line-height: 1.2;
    }
    .exhibition-proof__subtitle {
        margin: 0.45rem 0 0;
        color: var(--color-muted);
        font-size: 0.95rem;
        line-height: 1.4;
    }
    .exhibition-proof__meta {
        margin: 0.4rem 0 0;
        color: var(--color-muted);
        font-size: 0.82rem;
    }
    .exhibition-proof__actions {
        margin: 0.85rem 0 0;
    }
    .exhibition-detail__next {
        padding-block: var(--space-md) var(--space-lg);
        border-top: 1px solid var(--color-line);
    }
    .exhibition-detail__next .button-group { margin-top: var(--space-sm); }

    .page-hero--media {
        min-height: max(28rem, 55svh);
        position: relative;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        background: var(--color-ink);
        color: var(--color-white);
    }
    .page-hero__media, .page-hero__overlay { position: absolute; inset: 0; }
    .page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
    .page-hero__overlay { background: linear-gradient(90deg, rgba(12, 18, 14, 0.9) 0%, rgba(12, 18, 14, 0.45) 62%, rgba(12, 18, 14, 0.2) 100%); }
    .page-hero--exhibitions .page-hero__media img { object-position: 50% 40%; }
    .page-hero--about .page-hero__media img { object-position: 50% 62%; }
    .page-hero--exhibitions .page-hero__overlay,
    .page-hero--about .page-hero__overlay {
        background:
            linear-gradient(180deg, rgba(12, 18, 14, 0.62) 0%, rgba(12, 18, 14, 0.18) 36%, rgba(12, 18, 14, 0.78) 100%),
            linear-gradient(90deg, rgba(12, 18, 14, 0.78) 0%, rgba(12, 18, 14, 0.38) 48%, rgba(12, 18, 14, 0.16) 100%);
    }
    .page-hero__inner--media { position: relative; z-index: 1; padding-block: clamp(5.5rem, 11vh, 7.5rem) clamp(2rem, 5vh, 3.5rem); }
    .page-hero__inner--media h1 { max-width: min(20ch, 100%); font-size: clamp(2rem, 4.5vw, 4rem); }
    .page-hero__lede { max-width: 42rem; margin-top: var(--space-sm); font-size: clamp(1rem, 1.5vw, 1.15rem); }

    .about-page .about-section + .about-section { border-top: 1px solid var(--color-line); }
    .about-section--values { background: var(--color-paper-deep); }
    .about-section__subheading { font-size: clamp(1.25rem, 2vw, 1.75rem); }
    .about-work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
    .about-work-card { padding: var(--space-md); background: var(--color-white); border: 1px solid var(--color-line); }
    .about-work-card h3 { margin-block: var(--space-xs) var(--space-sm); font-size: clamp(1.35rem, 2vw, 1.9rem); }
    .about-bullets { margin: var(--space-sm) 0 0; padding-left: 1.2rem; color: var(--color-muted); }
    .about-bullets li + li { margin-top: 0.35rem; }
    .about-values-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
    .about-value-card { padding-block: var(--space-sm); border-top: 1px solid var(--color-line); }
    .about-value-card h3 { margin-bottom: 0.5rem; font-size: clamp(1.2rem, 2vw, 1.55rem); }
    .about-capability { max-width: 46rem; }
    .about-capability .magic-wall-invite,
    .about-value-card .magic-wall-invite { margin-top: 0.65rem; }
    .about-empty { color: var(--color-muted); }
    .has-panels .tour-card.site-panel.section {
        --tour-edge: max(var(--page-gutter), calc((100vw - var(--content-width)) / 2));
        --tour-gap: clamp(1.5rem, 3.6vw, 3.25rem);
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        padding: 0;
        overflow: hidden;
    }
    .tour-card--paper { background: var(--color-paper); color: var(--color-ink); }
    .tour-card--sand { background: var(--color-paper-deep); color: var(--color-ink); }
    .tour-card--ink { background: var(--color-ink); color: var(--color-white); }
    .tour-card--clay { background: var(--color-accent); color: var(--color-white); }
    .tour-card--forest { background: #24302a; color: var(--color-white); }
    .tour-card__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(22rem, 1fr);
        gap: 0;
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        height: 100%;
        align-items: stretch;
    }
    .tour-card--flip .tour-card__inner { grid-template-columns: minmax(22rem, 1fr) minmax(0, 1.12fr); }
    .tour-card--flip .tour-card__media { order: 2; }
    .tour-card--flip .tour-card__copy { order: 1; }
    .tour-card__number {
        margin: 0;
        padding-bottom: 0.4rem;
        border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent);
        width: max-content;
        color: var(--color-accent);
        font-family: var(--font-display);
        font-size: clamp(0.95rem, 1.4vw, 1.15rem);
        letter-spacing: 0.12em;
    }
    .tour-card--ink .tour-card__number,
    .tour-card--forest .tour-card__number { color: #d4b49a; }
    .tour-card--clay .tour-card__number { color: #f3e2d4; }
    .tour-card__media {
        overflow: hidden;
        min-height: 0;
        background: var(--color-paper-deep);
    }
    .tour-card--ink .tour-card__media,
    .tour-card--vr .tour-card__media { background: #141916; }
    .tour-card--clay .tour-card__media { background: color-mix(in srgb, var(--color-accent) 82%, #1c211e); }
    .tour-card--forest .tour-card__media { background: #1b2420; }
    .tour-card__media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #tour-outbound .tour-card__media img { object-position: 50% 42%; }
    #tour-immersive .tour-card__media img { object-position: 50% 68%; }
    #tour-magic-wall .tour-card__media img { object-position: 42% 50%; }
    .tour-card--contain .tour-card__media {
        display: grid;
        place-items: center;
        padding: clamp(1.15rem, 3.2vw, 2.5rem);
    }
    .tour-card--contain .tour-card__media img {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }
    .tour-card__copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.7rem;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        padding: clamp(2rem, 6.5vh, 4.25rem) var(--tour-edge) clamp(1.5rem, 4.5vh, 2.75rem) var(--tour-gap);
    }
    .tour-card--flip .tour-card__copy {
        padding-left: var(--tour-edge);
        padding-right: var(--tour-gap);
    }
    .tour-card__copy h2 {
        margin: 0;
        max-width: 16ch;
        flex: 0 0 auto;
        font-size: clamp(1.55rem, 2.5vw + 0.35rem, 2.55rem);
        line-height: 1.1;
        text-wrap: balance;
    }
    .tour-card--short .tour-card__copy { gap: 0.95rem; }
    .tour-card--short .tour-card__copy h2 { font-size: clamp(1.85rem, 3.1vw + 0.4rem, 3.05rem); max-width: 14ch; }
    .tour-card--long .tour-card__copy {
        justify-content: flex-start;
        gap: 0.5rem;
    }
    .tour-card--long .tour-card__copy h2,
    .tour-card--lead.tour-card--long .tour-card__copy h2 {
        font-size: clamp(1.35rem, 2vw + 0.28rem, 2.05rem);
        max-width: 18ch;
    }
    [lang="zh-CN"] .tour-card__copy h2 { max-width: 12em; }
    .tour-card__lede {
        margin: 0;
        max-width: 34rem;
        flex: 0 0 auto;
        font-family: var(--font-display);
        font-size: clamp(1.02rem, 1.3vw, 1.2rem);
        line-height: 1.32;
        color: var(--color-ink);
        text-wrap: pretty;
    }
    .tour-card--ink .tour-card__lede,
    .tour-card--clay .tour-card__lede,
    .tour-card--forest .tour-card__lede { color: var(--color-white); }
    .tour-card--short .tour-card__lede { font-size: clamp(1.08rem, 1.5vw, 1.32rem); }
    .tour-card--long .tour-card__lede { font-size: clamp(0.95rem, 1.08vw, 1.06rem); }
    .tour-card__narrative {
        display: grid;
        align-content: start;
        gap: 0.7rem;
        max-width: 38rem;
        min-height: 0;
    }
    .tour-card--long .tour-card__narrative {
        flex: 1 1 auto;
        gap: 0.48rem;
        overflow: auto;
    }
    .tour-card__narrative p {
        margin: 0;
        color: var(--color-muted);
        font-size: clamp(0.9rem, 1.08vw, 1.02rem);
        line-height: 1.52;
        text-wrap: pretty;
    }
    .tour-card--ink .tour-card__narrative p,
    .tour-card--clay .tour-card__narrative p,
    .tour-card--forest .tour-card__narrative p { color: rgba(255, 253, 248, 0.78); }
    .tour-card--short .tour-card__narrative p { font-size: clamp(1rem, 1.28vw, 1.12rem); line-height: 1.62; }
    .tour-card--long .tour-card__narrative p {
        font-size: clamp(0.82rem, 0.92vw + 0.12rem, 0.94rem);
        line-height: 1.45;
    }
    .tour-card__copy .text-link { margin-top: 0.2rem; flex: 0 0 auto; }
    .tour-card--ink .text-link,
    .tour-card--clay .text-link,
    .tour-card--forest .text-link { color: var(--color-white); }
    .about-partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-md); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
    .about-partner-card { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
    .about-partner-card__link { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; }
    .about-partner-card__link:hover .about-partner-card__name { text-decoration: underline; text-underline-offset: 0.25em; }
    .about-partner-card__logo { max-width: 7.5rem; max-height: 4.5rem; width: auto; height: auto; object-fit: contain; }
    .about-partner-card__name { font-family: var(--font-display); font-size: 1rem; line-height: 1.25; }
    .about-partner-card__location { color: var(--color-muted); font-size: 0.85rem; }
    .about-associations { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
    .about-associations img { max-height: 3.5rem; width: auto; object-fit: contain; filter: grayscale(0.15); }
    .about-timeline { margin: var(--space-md) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); }
    .about-timeline__item { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-line); }
    .about-timeline__year { font-family: var(--font-display); font-size: 1.35rem; color: var(--color-accent); }
    .about-timeline__text { margin: 0; color: var(--color-muted); }
    .contact-cta__secondary { margin-top: var(--space-sm); color: var(--color-muted); font-size: 0.95rem; }

    .contact-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.7fr); gap: var(--space-lg); align-items: start; }
    .contact-form-panel h2, .contact-aside h2 { margin-bottom: var(--space-sm); font-size: clamp(1.6rem, 3vw, 2.4rem); }
    .contact-form-panel__intro { margin-bottom: var(--space-md); color: var(--color-muted); max-width: 42rem; }
    .contact-form { position: relative; }
    .contact-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
    .contact-form__field { display: grid; gap: 0.35rem; }
    .contact-form__field span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
    .contact-form__field input,
    .contact-form__field textarea {
        width: 100%;
        padding: 0.75rem 0.85rem;
        border: 1px solid var(--color-line);
        background: var(--color-white);
        color: var(--color-ink);
    }
    .contact-form__field input:focus,
    .contact-form__field textarea:focus { border-color: var(--color-accent); outline: none; }
    .contact-form__field--full { grid-column: 1 / -1; }
    .contact-form__challenge { margin-top: var(--space-sm); display: grid; gap: 0.45rem; }
    .contact-form__challenge-btn {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        max-width: 22rem;
        padding: 0.7rem 0.85rem;
        border: 1px solid var(--color-line);
        background: var(--color-white);
        color: var(--color-ink);
        text-align: left;
        cursor: pointer;
    }
    .contact-form__challenge-btn:hover,
    .contact-form__challenge-btn:focus-visible {
        border-color: var(--color-accent);
        outline: none;
    }
    .contact-form__challenge-btn:disabled { cursor: default; }
    .contact-form__challenge-btn.is-busy { color: var(--color-muted); }
    .contact-form__challenge-btn.is-ok { border-color: #5f7a55; }
    .contact-form__challenge-mark {
        flex: 0 0 1.15rem;
        width: 1.15rem;
        height: 1.15rem;
        border: 1.5px solid var(--color-ink);
        background: var(--color-white);
    }
    .contact-form__challenge-btn.is-busy .contact-form__challenge-mark {
        border-color: var(--color-muted);
        background:
            linear-gradient(90deg, var(--color-paper-deep) 40%, var(--color-white) 50%, var(--color-paper-deep) 60%)
            0 0 / 200% 100%;
        animation: contact-challenge-wait 0.9s linear infinite;
    }
    .contact-form__challenge-btn.is-ok .contact-form__challenge-mark {
        border-color: #5f7a55;
        background: #5f7a55;
        box-shadow: inset 0 0 0 2px var(--color-white);
    }
    .contact-form__challenge-status { margin: 0; font-size: 0.85rem; color: var(--color-muted); }
    .contact-form__challenge-status.is-error { color: #8a2f2f; }
    .contact-form__challenge-noscript { margin: 0; color: #8a2f2f; }
    @keyframes contact-challenge-wait {
        to { background-position: -200% 0; }
    }
    .contact-form__status { margin: var(--space-sm) 0; color: var(--color-accent); }
    .contact-form__status.is-error { color: #8a2f2f; }
    .contact-aside { display: grid; gap: var(--space-md); padding: var(--space-md); background: var(--color-paper-deep); }
    .contact-aside__button { margin-top: var(--space-sm); }
    .contact-offices { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-md); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
    .contact-office-card { padding: var(--space-sm); border: 1px solid var(--color-line); background: var(--color-white); }
    .contact-office-card__country { margin-bottom: 0.25rem; color: var(--color-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
    .contact-office-card h3 { margin-bottom: 0.35rem; font-size: 1.15rem; }
    .contact-office-card__line { margin: 0; color: var(--color-muted); font-size: 0.92rem; }
    .contact-office-card__phone { margin-top: 0.5rem; }
    .contact-office-card__phone a { color: inherit; }

    .privacy-page__inner { max-width: 42rem; padding: var(--space-lg) 0; }
    .privacy-updated { color: var(--color-muted); font-size: 0.92rem; }
    .privacy-page__intro { margin-bottom: var(--space-md); color: var(--color-muted); }
    .privacy-section + .privacy-section { margin-top: var(--space-md); }
    .privacy-section h2 { margin-bottom: 0.65rem; max-width: none; font-size: 1.15rem; color: var(--color-accent); }
    .privacy-section p { margin: 0 0 0.75rem; color: var(--color-muted); }
    .privacy-section ul { margin: 0 0 0.75rem; padding-left: 1.25rem; color: var(--color-muted); }
    .privacy-section li + li { margin-top: 0.35rem; }
    .privacy-section a { color: var(--color-accent); }

    .case-hero {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) auto;
        gap: var(--space-md);
        align-items: end;
    }
    .case-hero__copy .eyebrow { margin-bottom: 0.65rem; }
    .case-hero__copy h1 { margin: 0 0 0.7rem; }
    .case-hero__copy > p:last-child {
        max-width: 42rem;
        margin: 0;
        font-size: 0.92rem;
        color: rgba(255, 253, 248, 0.62);
    }
    .case-hero__count { margin: 0; text-align: right; line-height: 0.85; }
    .case-hero__num {
        display: block;
        font-family: var(--font-display);
        font-size: clamp(4.2rem, 11vw, 8rem);
        letter-spacing: -0.06em;
        color: var(--color-white);
    }
    .case-hero__unit {
        display: block;
        margin-top: 0.4rem;
        color: rgba(255, 253, 248, 0.62);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }
    .case-index { padding-block: var(--space-md); }
    .case-index__empty { color: var(--color-muted); }
    .case-mosaic-shell {
        position: relative;
    }
    .case-mosaic {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: minmax(max(11rem, 13.5vw), max-content);
        gap: 0.4rem;
        width: 100%;
        align-items: stretch;
    }
    .case-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
    .case-tile:nth-child(2),
    .case-tile:nth-child(3) { grid-column: span 2; }
    .case-tile:nth-child(11n + 8) { grid-column: span 2; }
    .case-tile {
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        background: var(--color-paper-deep);
        color: var(--color-ink);
    }
    .case-tile > summary {
        display: block;
        list-style: none;
        cursor: pointer;
    }
    .case-tile > summary:focus-visible {
        outline: 3px solid var(--color-accent);
        outline-offset: -3px;
    }
    .case-tile > summary::-webkit-details-marker,
    .case-tile > summary::marker { display: none; content: ""; }
    .case-tile:not([open]) { height: 100%; }
    .case-tile:not([open]) .case-tile__hit {
        display: block;
        position: relative;
        height: 100%;
        min-height: 11rem;
    }
    .case-tile__media {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: var(--color-paper-deep);
    }
    .case-tile:not([open]) .case-tile__media { position: absolute; inset: 0; }
    .case-tile__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1;
        transform: scale(1.02);
        transition: transform 640ms cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
    }
    .case-tile__media.is-loading {
        background-image: linear-gradient(
            105deg,
            var(--color-paper-deep) 0%,
            var(--color-paper-deep) 38%,
            #f0ebe2 50%,
            var(--color-paper-deep) 62%,
            var(--color-paper-deep) 100%
        );
        background-size: 220% 100%;
        animation: exhibition-gallery-shimmer 1.8s ease-in-out infinite;
    }
    .case-tile__media.is-loading img:not(.is-decoded) {
        opacity: 0;
    }
    .case-tile__media.is-loaded {
        background-image: none;
    }
    .case-tile:hover .case-tile__media img,
    .case-tile[open] .case-tile__media img { transform: none; }
    .case-tile__caption {
        position: absolute;
        inset: auto 0 0;
        z-index: 1;
        margin: 0;
        padding: 2.1rem 0.7rem 0.65rem;
        background: linear-gradient(180deg, rgba(12, 18, 14, 0) 0%, rgba(12, 18, 14, 0.78) 100%);
        color: var(--color-white);
        font-size: clamp(0.92rem, 1.3vw, 1.2rem);
        line-height: 1.2;
        max-width: none;
    }
    .case-tile__caption::after {
        content: "+";
        float: right;
        margin-left: 0.4rem;
        font-family: var(--font-body);
        font-size: 0.95rem;
        font-weight: 500;
        opacity: 0.8;
    }
    .case-tile--static .case-tile__caption::after { content: none; }
    .case-tile[open] .case-tile__caption::after { content: "−"; }
    .case-tile--blank .case-tile__caption {
        background: transparent;
        color: var(--color-ink);
    }
    .case-tile--blank:not([open]) .case-tile__caption { position: absolute; }
    .case-tile[open] {
        height: auto;
        overflow: visible;
        background: var(--color-white);
    }
    .case-tile[open] .case-tile__hit {
        display: block;
        position: relative;
        height: auto;
        min-height: 10rem;
        aspect-ratio: 4 / 3;
    }
    .case-tile[open] .case-tile__media {
        position: relative;
        height: 100%;
    }
    .case-tile[open] .case-tile__panel {
        padding: 0.75rem 0.7rem 0.9rem;
    }
    .case-tile.is-reading {
        outline: 3px solid var(--color-accent);
        outline-offset: -3px;
        z-index: 1;
    }
    html.has-case-reader .case-tile__panel { display: none; }
    html.has-case-reader .case-tile[open] {
        height: 100%;
        overflow: hidden;
        background: var(--color-paper-deep);
    }
    html.has-case-reader .case-tile[open] .case-tile__hit {
        height: 100%;
        min-height: 11rem;
        aspect-ratio: auto;
    }
    html.has-case-reader .case-tile[open] .case-tile__media {
        position: absolute;
        inset: 0;
        height: auto;
    }
    html.has-case-reader .case-tile[open] .case-tile__caption::after { content: "+"; }
    .case-tile__panel { display: grid; gap: var(--space-sm); align-content: start; }
    .case-tile__institution {
        font-family: var(--font-display);
        font-size: clamp(1.2rem, 2vw, 1.7rem);
        line-height: 1.15;
        max-width: 28ch;
    }
    .case-tile__facts {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8rem 2rem;
        margin: 0;
        padding-block: var(--space-xs);
        border-block: 1px solid var(--color-line);
    }
    .case-tile__facts div { display: grid; gap: 0.2rem; }
    .case-tile__facts dt {
        color: var(--color-muted);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .case-tile__facts dd { margin: 0; }
    .case-tile__panel > p { color: var(--color-muted); }
    .case-tile__actions { margin: 0.35rem 0 0; }
    .case-tile__actions--static {
        margin: 0;
        padding: 0.65rem 0.7rem 0.85rem;
        background: var(--color-white);
    }

    .case-detail__hero {
        min-height: 0;
        position: relative;
        display: flex;
        align-items: flex-end;
        overflow: visible;
        padding-top: var(--site-header-clearance);
        box-sizing: border-box;
        background: var(--color-ink);
        color: var(--color-white);
    }
    .case-detail__hero--media {
        min-height: max(42rem, 90svh);
    }
    .case-detail__media,
    .case-detail__overlay {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }
    .case-detail__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 40%;
    }
    .case-detail__overlay {
        background:
            linear-gradient(180deg, rgba(12, 18, 14, 0.62) 0%, rgba(12, 18, 14, 0.18) 36%, rgba(12, 18, 14, 0.78) 100%),
            linear-gradient(90deg, rgba(12, 18, 14, 0.78) 0%, rgba(12, 18, 14, 0.38) 48%, rgba(12, 18, 14, 0.16) 100%);
    }
    .case-detail__heading {
        position: relative;
        z-index: 1;
        padding-block: calc(var(--space-md)) var(--space-md);
    }
    .case-detail__hero--media .case-detail__heading {
        padding-block: var(--space-md) clamp(4rem, 9vw, 7rem);
    }
    .case-detail__crumb {
        margin: 0 0 var(--space-sm);
        font-size: 0.84rem;
    }
    .case-detail__crumb a {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        color: rgba(255, 253, 248, 0.82);
        text-underline-offset: 0.3em;
    }
    .case-detail__crumb a:hover { text-decoration: underline; }
    .case-detail__title {
        margin-block: var(--space-sm);
        max-width: min(18ch, 100%);
        font-size: clamp(2.4rem, 6vw, 5.2rem);
        line-height: 1.08;
        text-wrap: balance;
    }
    .case-detail__title--medium {
        max-width: min(24ch, 100%);
        font-size: clamp(2rem, 4.6vw, 3.75rem);
        line-height: 1.12;
    }
    .case-detail__title--long {
        max-width: min(28ch, 100%);
        font-size: clamp(1.9rem, 4.2vw, 3.45rem);
        line-height: 1.14;
    }
    .case-detail__institution {
        margin: var(--space-sm) 0 0;
        max-width: 46rem;
        color: rgba(255, 253, 248, 0.82);
        font-size: clamp(1.05rem, 1.6vw, 1.25rem);
        line-height: 1.35;
    }
    .case-detail__body { padding-block: var(--space-lg); display: grid; gap: var(--space-md); }
    .case-detail__facts {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8rem 2rem;
        margin: 0;
        padding-block: var(--space-xs);
        border-block: 1px solid var(--color-line);
    }
    .case-detail__facts div { display: grid; gap: 0.2rem; }
    .case-detail__facts dt {
        color: var(--color-muted);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .case-detail__facts dd { margin: 0; }
    .case-detail__narrative {
        display: grid;
        gap: var(--space-sm);
        max-width: 62ch;
    }
    .case-detail__narrative p {
        margin: 0;
        color: var(--color-ink);
        font-size: 1.02rem;
        line-height: 1.65;
    }
    .case-detail__narrative h2,
    .case-detail__narrative h3,
    .case-detail__narrative h4 {
        margin: 0.4rem 0 0;
        color: var(--color-ink);
        font-weight: 650;
        line-height: 1.35;
    }
    .case-detail__narrative h2 { font-size: 1.28rem; }
    .case-detail__narrative h3 { font-size: 1.14rem; }
    .case-detail__narrative h4 { font-size: 1.05rem; }
    .case-detail__narrative ul,
    .case-detail__narrative ol {
        margin: 0;
        padding-left: 1.35rem;
        color: var(--color-ink);
        font-size: 1.02rem;
        line-height: 1.65;
    }
    .case-detail__narrative li { margin: 0 0 0.35rem; }
    .case-detail__narrative a { color: inherit; }
    .case-overlay {
        --from-t: 0px;
        --from-r: 0px;
        --from-b: 0px;
        --from-l: 0px;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 4;
        display: none;
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
        background: rgb(243 239 231 / 0.9);
        color: var(--color-ink);
        opacity: 0;
        pointer-events: none;
        clip-path: inset(var(--from-t) var(--from-r) var(--from-b) var(--from-l));
        transition:
            clip-path 520ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 280ms ease;
    }
    .case-overlay:not([hidden]) { display: grid; }
    .case-overlay.is-arming,
    .case-overlay.is-arming .case-overlay__toolbar,
    .case-overlay.is-arming .case-overlay__body {
        transition: none;
    }
    .case-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
        clip-path: inset(0);
        transition:
            clip-path 520ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 280ms ease,
            top 420ms cubic-bezier(0.16, 1, 0.3, 1),
            height 420ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .case-overlay__toolbar,
    .case-overlay__body {
        opacity: 0;
        transition: opacity 260ms ease 80ms;
    }
    .case-overlay.is-open .case-overlay__toolbar,
    .case-overlay.is-open .case-overlay__body {
        opacity: 1;
    }
    .case-overlay__toolbar {
        display: flex;
        justify-content: flex-end;
        grid-column: 1 / -1;
        margin: 0;
        padding: 0.45rem 0.55rem 0;
    }
    .case-overlay__close {
        min-height: 2.25rem;
        padding: 0.25rem 0.75rem;
        border: 1px solid rgb(28 33 30 / 0.18);
        background: rgb(255 253 248 / 0.72);
        color: var(--color-ink);
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
    }
    .case-overlay__media {
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        background: rgb(230 222 208 / 0.55);
    }
    .case-overlay__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: none;
        opacity: 0.96;
    }
    .case-overlay__body {
        display: grid;
        align-content: start;
        gap: 0.55rem;
        min-width: 0;
        min-height: 0;
        padding: 0.15rem 0.85rem 0.75rem;
        overflow: auto;
        background: rgb(255 253 248 / 0.28);
    }
    .case-overlay__title {
        max-width: none;
        margin: 0;
        font-size: clamp(1.2rem, 2.1vw, 1.75rem);
    }
    .case-overlay__copy { display: grid; gap: 0.55rem; }
    .case-overlay__copy > p { color: var(--color-muted); }
    .case-overlay .case-tile__institution {
        font-size: clamp(1.05rem, 1.8vw, 1.35rem);
        max-width: none;
    }
    .case-overlay--blank .case-overlay__media { display: none; }
    .case-overlay--blank { grid-template-columns: minmax(0, 1fr); }
    .contact-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }

    @media (max-width: 64rem) {
        .case-mosaic {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-auto-rows: minmax(max(10rem, 18vw), max-content);
        }
        .case-tile:nth-child(2),
        .case-tile:nth-child(3) { grid-column: span 1; }
    }

    @media (max-width: 40rem) {
        .case-mosaic {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: minmax(max(9.5rem, 38vw), max-content);
        }
        .case-tile:nth-child(1),
        .case-tile:nth-child(2),
        .case-tile:nth-child(3),
        .case-tile:nth-child(11n + 8) {
            grid-column: span 1;
            grid-row: span 1;
        }
        .case-hero__count { text-align: left; }
        .case-hero__num { font-size: clamp(3.4rem, 22vw, 5.2rem); }
        .dossier-wechat__grid,
        .dossier-request { grid-template-columns: 1fr; }
    }

    @media (max-width: 52rem) {
        .site-menu-button { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.65rem; cursor: pointer; }
        .site-menu-button__icon, .site-menu-button__icon::before, .site-menu-button__icon::after { display: block; width: 1.3rem; height: 1px; background: currentColor; content: ""; transition: transform 180ms ease; }
        .site-menu-button__icon { position: relative; }
        .site-menu-button__icon::before { position: absolute; transform: translateY(-0.38rem); }
        .site-menu-button__icon::after { position: absolute; transform: translateY(0.38rem); }
        .site-menu-button[aria-expanded="true"] .site-menu-button__icon { background: transparent; }
        .site-menu-button[aria-expanded="true"] .site-menu-button__icon::before { transform: rotate(45deg); }
        .site-menu-button[aria-expanded="true"] .site-menu-button__icon::after { transform: rotate(-45deg); }
        .site-navigation { position: absolute; inset: 100% 0 auto; display: none; padding: var(--space-sm); background: var(--color-ink); flex-direction: column; align-items: stretch; }
        .site-navigation[data-open="true"] { display: flex; }
        .site-navigation a { padding: 0.7rem; }
        .journey-grid, .proof__intro, .proof__archive, .capability__grid, .contact-cta__inner, .site-footer__inner, .exhibition-card__hit, .exhibition-card:nth-child(even) .exhibition-card__hit, .exhibition-detail__body, .case-hero, .tour-card__inner { grid-template-columns: 1fr; }
        .site-footer__end { justify-items: start; }
        .site-footer__meta { white-space: normal; }
        .journey-card + .journey-card { border-left: 0; }
        .journey-card { min-height: auto; padding-inline: 0; }
        .journey-card__number { margin-bottom: 3rem; }
        /* Stacked journey cards no longer fit a 100vh clip; the heading's last
           line was leaking into the gap under the hero. */
        html:has(body.has-panels.is-home),
        body.has-panels.is-home { scroll-snap-type: none; }
        .is-home.has-panels .site-panel { scroll-snap-align: none; }
        .is-home.has-panels .site-panel.section {
            height: auto;
            min-height: 0;
            overflow: visible;
            justify-content: flex-start;
            padding-block: var(--space-md);
        }
        .has-panels.is-tour .tour-card.site-panel.section {
            height: 100svh;
            height: 100dvh;
            min-height: 100svh;
            min-height: 100dvh;
            overflow: hidden;
            justify-content: stretch;
            padding: 0;
        }
        .tour-card--flip .tour-card__media,
        .tour-card--flip .tour-card__copy { order: initial; }
        .tour-card__inner {
            grid-template-columns: 1fr;
            grid-template-rows: minmax(0, 1fr) minmax(22vh, 32vh);
        }
        .tour-card__copy {
            order: 1;
            justify-content: flex-start;
            overflow: auto;
            padding: var(--space-md) var(--page-gutter) var(--space-sm);
        }
        .tour-card--flip .tour-card__copy { padding-inline: var(--page-gutter); }
        .tour-card__media {
            order: 2;
            min-height: 22vh;
            max-height: none;
        }
        .tour-card--contain .tour-card__media { padding: 0.75rem; }
        .tour-card--long .tour-card__narrative {
            overflow: visible;
            flex: 0 1 auto;
        }
        .tour-card__copy h2,
        .tour-card--short .tour-card__copy h2,
        .tour-card--long .tour-card__copy h2,
        .tour-card--lead.tour-card--long .tour-card__copy h2 {
            max-width: none;
            font-size: clamp(1.55rem, 7vw, 2.15rem);
        }
        .journeys h2 { max-width: none; }
        .capability__grid { gap: var(--space-md); }
        .contact-cta__inner { align-items: start; }
        .exhibition-card:nth-child(even) .exhibition-card__media { order: initial; }
        .exhibition-detail__body { gap: var(--space-md); }
        .exhibition-detail__hero-footer {
            flex-direction: column;
            align-items: stretch;
        }
        .exhibition-detail__heading .exhibition-detail__credit {
            flex: 0 0 auto;
            max-width: none;
            text-align: left;
            order: 2;
        }
        .exhibition-detail__body:has(> .exhibition-facts--solo) { grid-template-columns: 1fr; }
        .exhibition-facts { position: static; }
        .exhibition-gallery:not(.exhibition-gallery--single) {
            column-count: 1;
        }
        .exhibition-gallery.is-packed .exhibition-gallery__cols {
            grid-template-columns: 1fr;
        }
        .about-work-grid, .about-values-grid { grid-template-columns: 1fr; }
        .about-timeline__item { grid-template-columns: 4.5rem minmax(0, 1fr); }
        .contact-layout, .contact-form__grid { grid-template-columns: 1fr; }
        .case-overlay { grid-template-columns: 1fr; }
        .case-overlay__media { min-height: 7.5rem; max-height: 42%; }
    }

    @media (max-width: 34rem) {
        .site-menu-button__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
        .hero {
            height: 100svh;
            height: 100dvh;
            max-height: 100svh;
            max-height: 100dvh;
            min-height: 0;
        }
        .hero__content { padding-block: 5.25rem 1.5rem; }
        .hero__title { max-width: 100%; font-size: clamp(1.85rem, 8vw, 2.55rem); }
        html:has(body.has-panels:not(.is-tour)),
        body.has-panels:not(.is-tour) { scroll-snap-type: none; }
        .has-panels:not(.is-tour) .site-panel { scroll-snap-align: none; scroll-snap-stop: normal; }
        .hero__overlay { background: linear-gradient(0deg, rgba(12, 18, 14, 0.88), rgba(12, 18, 14, 0.28)); }
        .button-group { align-items: stretch; flex-direction: column; }
        .button, .text-link--light { width: 100%; margin-left: 0; }
        .text-link--light { min-height: 2.75rem; justify-content: center; }
        .site-consent__actions { flex-direction: column; align-items: stretch; }
    }
}

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