@layer components {
    .resources-country-guide__opening {
        gap: clamp(0.65rem, 1.5vw, 1rem);
        padding-block: clamp(1.5rem, 3vw, 2.5rem);
    }

    .resources-cover {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        min-width: 0;
        border-block: 1px solid var(--color-border);
        background: var(--color-surface);
    }

    .resources-cover__intro {
        display: grid;
        min-width: 0;
        gap: 1.25rem;
        align-content: center;
        padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
        background: var(--color-surface-alt);
    }

    .resources-cover__intro h1 {
        max-width: 9ch;
        font-size: clamp(2.75rem, 5vw, 4.7rem);
        line-height: 0.98;
        text-wrap: balance;
    }

    .resources-cover__intro .hero-lead {
        max-width: 31rem;
    }

    .resources-cover__index {
        display: grid;
        margin-top: 0.5rem;
        border-top: 1px solid var(--color-border);
    }

    .resources-cover__entry {
        display: grid;
        grid-template-columns: 2.25rem minmax(0, 1fr) auto;
        min-height: 4.5rem;
        align-items: center;
        gap: 0.75rem;
        border-bottom: 1px solid var(--color-border);
        color: var(--color-primary);
        text-decoration: none;
    }

    .resources-cover__entry-copy {
        display: grid;
        min-width: 0;
        gap: 0.1rem;
    }

    .resources-cover__entry strong {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 400;
    }

    .resources-cover__entry small {
        color: var(--color-text-muted);
        font-size: 0.76rem;
    }

    .resources-cover__entry-number {
        color: var(--color-accent);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
    }

    .resources-cover__entry:is(:hover, :focus-visible) strong {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

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

    .resources-cover__feature {
        --trade-export: var(--color-primary);
        --trade-import: var(--color-accent);
        display: grid;
        min-width: 0;
        grid-template-rows: auto 1fr;
        background: var(--color-primary-deep);
    }

    .resources-cover__metric {
        display: grid;
        min-width: 0;
        gap: 0.35rem;
        padding: clamp(1.75rem, 3vw, 2.5rem);
        color: var(--color-surface);
    }

    .resources-cover__metric h2 {
        color: #ffffff;
        font-family: var(--font-sans);
        font-size: 0.8rem;
        font-weight: 750;
        letter-spacing: 0.025em;
    }

    .resources-cover__metric-value {
        margin-block: 0.15rem;
        color: #ffffff;
        font-family: var(--font-serif);
        font-size: clamp(3rem, 5vw, 4.5rem);
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .resources-cover__metric-period {
        color: #c7c3e5;
        font-size: 0.82rem;
    }

    .resources-cover__metric-change {
        color: #e6c273;
        font-size: 0.84rem;
        font-weight: 750;
    }

    .resources-cover__metric--unavailable {
        align-content: center;
        min-height: 13rem;
    }

    .resources-cover__metric--unavailable > p:last-child {
        max-width: 36rem;
        color: #c7c3e5;
    }

    .resources-cover__chart {
        display: grid;
        min-width: 0;
        gap: 0.65rem;
        align-content: start;
        padding: 1.5rem clamp(1.25rem, 2.5vw, 2rem);
        border: 1px solid var(--color-border);
        border-top: 0;
        background: var(--color-surface);
    }

    .resources-cover__chart-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        justify-content: space-between;
        gap: 0.5rem 1.5rem;
    }

    .resources-cover__chart-heading > div {
        display: grid;
        gap: 0.1rem;
    }

    .resources-cover__chart-heading h3 {
        font-family: var(--font-serif);
        font-size: 1.25rem;
        font-weight: 400;
    }

    .resources-cover__chart-heading p,
    .resources-cover__source {
        color: var(--color-text-muted);
        font-size: 0.75rem;
    }

    .resources-cover__chart .trade-chart-legend {
        margin: 0;
    }

    .resources-cover__chart .trade-chart {
        height: clamp(10.5rem, 14vw, 12rem);
        border: 0;
        background: #fbfbfd;
    }

    .resources-cover__chart .trade-history-table {
        margin-top: 0;
    }

    .resources-cover__source {
        margin: 0;
        line-height: 1.5;
    }

    .resources-hub__group {
        gap: clamp(1.25rem, 2vw, 2rem);
        padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 3rem);
        border-top: 1px solid var(--color-border);
    }

    .resources-hub__group--guides {
        background: var(--color-surface-soft);
    }

    .resources-hub__group--trade {
        background: var(--color-surface);
    }

    .resources-hub__group--publications {
        background: var(--color-surface-alt);
    }

    .resources-hub__group-heading {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 2rem;
        justify-content: space-between;
        align-items: end;
    }

    .resources-hub__group-heading > div {
        display: grid;
        gap: 0.35rem;
    }

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

    .resource-card--country {
        --guide-accent: var(--color-primary);
        --guide-tint: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--guide-accent) 24%, var(--color-border));
        border-top: 4px solid var(--color-primary);
        background: linear-gradient(145deg, var(--guide-tint), var(--color-surface) 64%);
        box-shadow: 0 1.1rem 2.8rem color-mix(in srgb, var(--guide-accent) 9%, transparent);
    }

    .resource-card--warm {
        --guide-accent: var(--color-accent);
        --guide-tint: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
        border-top-color: var(--color-accent);
    }

    .resource-card--cool {
        --guide-accent: var(--color-primary);
        --guide-tint: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    }

    .resource-card--country .news-card__body {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        gap: 1.1rem;
        padding: clamp(1.5rem, 3vw, 2.25rem);
    }

    .resource-card__identity {
        display: grid;
        min-width: 0;
        min-height: 7.25rem;
        grid-template-columns: minmax(0, 1fr) 8rem;
        align-items: center;
        gap: 1.5rem;
    }

    .resource-card__identity-copy {
        display: grid;
        min-width: 0;
        gap: 0.55rem;
    }

    .resource-card--country .resource-card__country {
        color: var(--guide-accent);
        font-size: 0.68rem;
        font-weight: 850;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .resource-card__country-outline {
        display: grid;
        width: 8rem;
        height: 5.5rem;
        place-items: center;
        color: var(--guide-accent);
        opacity: 0.17;
        pointer-events: none;
    }

    .resource-card__country-outline .ui-icon {
        width: 100%;
        height: 100%;
        stroke-width: 1.45;
    }

    .resource-card--country h3 {
        font-family: var(--font-serif);
        font-size: clamp(1.75rem, 3vw, 2.35rem);
        font-weight: 400;
        line-height: 1.1;
    }

    .resource-card--country .news-card__date {
        padding-top: 0.75rem;
        border-top: 1px solid color-mix(in srgb, var(--guide-accent) 16%, var(--color-border));
    }

    .resources-country-guide__intro {
        max-width: 50rem;
        color: var(--color-text);
        font-size: 1rem;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

    .resources-country-guide__intro br {
        display: block;
        margin-bottom: 0.65rem;
        content: "";
    }

    .resources-hub__lead {
        max-width: 50rem;
        margin: 0;
        color: var(--color-text-muted);
    }

    .resources-hub__trade-intro {
        display: flex;
        max-width: 55rem;
        align-items: center;
        gap: 1rem;
    }

    .resources-hub__trade-mark {
        display: grid;
        width: 3rem;
        height: 3rem;
        flex: 0 0 3rem;
        place-items: center;
        border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
        border-radius: 50%;
        background: var(--color-surface-soft);
        color: var(--color-primary);
    }

    .resources-hub__trade-mark .ui-icon {
        width: 1.45rem;
        height: 1.45rem;
    }

    .resources-trade-menu {
        display: grid;
        min-width: 0;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        align-items: start;
    }

    .resources-trade-menu__group {
        --trade-menu-accent: var(--color-primary);
        display: grid;
        min-width: 0;
        grid-template-rows: auto auto auto 1fr;
        gap: 1rem;
        align-content: start;
        padding: 1.25rem;
        border: 1px solid color-mix(in srgb, var(--trade-menu-accent) 22%, var(--color-border));
        border-top: 3px solid var(--trade-menu-accent);
        background: linear-gradient(180deg, color-mix(in srgb, var(--trade-menu-accent) 5%, var(--color-surface)) 0%, var(--color-surface) 45%);
    }

    .resources-trade-menu__group--groups {
        --trade-menu-accent: color-mix(in srgb, var(--color-primary) 55%, #a87519);
    }

    .resources-trade-menu__group--products {
        --trade-menu-accent: var(--color-accent);
    }

    .resources-trade-menu__heading {
        display: grid;
        grid-template-columns: 2.75rem minmax(0, 1fr);
        align-items: center;
        gap: 0.75rem;
    }

    .resources-trade-menu__heading > div {
        display: grid;
        gap: 0.08rem;
    }

    .resources-trade-menu__heading p {
        color: var(--color-text-muted);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .resources-trade-menu__heading h3,
    .resources-hub__product-list h3 {
        font-family: var(--font-sans);
        font-size: 1rem;
    }

    .resources-trade-menu__icon {
        display: grid;
        width: 2.75rem;
        height: 2.75rem;
        place-items: center;
        border-radius: 50%;
        background: color-mix(in srgb, var(--trade-menu-accent) 11%, var(--color-surface));
        color: var(--trade-menu-accent);
    }

    .resources-trade-menu__icon .ui-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .resources-trade-menu__description {
        min-height: 3em;
        color: var(--color-text-muted);
        font-size: 0.84rem;
        line-height: 1.5;
    }

    .resources-hub__entry-links {
        grid-template-columns: repeat(2, minmax(8rem, 1fr));
        align-self: start;
    }

    .resources-hub__entry-links a {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        border-color: color-mix(in srgb, var(--trade-menu-accent) 17%, var(--color-border));
        background: var(--color-surface);
        color: var(--color-primary-strong);
    }

    .resources-hub__entry-links a:is(:hover, :focus-visible) {
        border-color: var(--trade-menu-accent);
        background: color-mix(in srgb, var(--trade-menu-accent) 7%, var(--color-surface));
    }

    .resources-trade-menu__group--products .resources-hub__entry-links {
        grid-template-columns: 1fr;
    }

    .resources-hub__search {
        display: grid;
        align-self: start;
        gap: 0.45rem;
        padding-top: 0.25rem;
    }

    .resources-hub__products {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 2rem;
        align-items: start;
    }

    .resources-hub__products > .trade-method-note {
        grid-column: 1 / -1;
        margin: 0;
    }

    .resources-hub__product-details {
        border-block: 1px solid var(--color-border);
    }

    .resources-hub__product-details > summary {
        display: flex;
        min-height: 44px;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-block: 0.75rem;
        color: var(--color-primary);
        cursor: pointer;
        font-weight: 750;
    }

    .resources-hub__product-details > summary::after {
        content: "+";
        font-size: 1.25rem;
        line-height: 1;
    }

    .resources-hub__product-details[open] > summary::after {
        content: "−";
    }

    .resources-hub__product-details .resources-hub__products {
        padding-block: 0.5rem 1.25rem;
    }

    .resources-hub__product-list h3 {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .resources-hub__product-list h3 .ui-icon {
        width: 1.2rem;
        height: 1.2rem;
        color: var(--color-primary);
    }

    .resources-hub__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .resources-hub__chip {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.8rem;
        border: 1px solid var(--color-border);
        background: var(--color-surface-alt);
        color: var(--color-link);
        font-weight: 650;
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    a.resources-hub__chip:is(:hover, :focus-visible) {
        border-color: var(--color-link);
        text-decoration: underline;
    }

    .resources-hub__chip-code {
        color: var(--color-text-muted);
        font-size: 0.8rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .resource-card__facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 0.25rem 0 0;
    }

    .resource-card__facts > div {
        min-width: 0;
        padding-top: 0.75rem;
        border-top: 1px solid color-mix(in srgb, var(--guide-accent) 17%, var(--color-border));
    }

    .resource-card__fact--featured {
        grid-column: 1 / -1;
        padding: 1rem 1.1rem;
        border: 0;
        background: color-mix(in srgb, var(--guide-accent) 7%, var(--color-surface));
    }

    .resource-card__facts dt {
        color: var(--color-text-muted);
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .resource-card__facts dd {
        margin: 0.2rem 0 0;
        font-variant-numeric: tabular-nums;
    }

    .resource-card__facts dd strong {
        color: var(--color-primary-strong);
        font-family: var(--font-serif);
        font-size: clamp(1.35rem, 2.5vw, 1.8rem);
    }

    .resource-card__fact--featured dd strong {
        font-size: clamp(2rem, 4vw, 2.8rem);
    }

    .resource-card__facts dd :is(span, small) {
        color: var(--color-text-muted);
        font-size: 0.75rem;
    }

    .resource-card__facts dd small {
        display: block;
        margin-top: 0.15rem;
    }

    .resources-publications__list {
        display: grid;
        border-top: 1px solid var(--color-border);
    }

    .resources-publications__item {
        padding-block: 1.25rem;
        border-bottom: 1px solid var(--color-border);
    }

    .resources-publications__item > div {
        display: grid;
        grid-template-columns: minmax(13rem, 0.7fr) minmax(18rem, 1.3fr);
        align-items: baseline;
        gap: 1rem 2rem;
    }

    .resources-publications__item h3 {
        font-family: var(--font-serif);
        font-size: 1.25rem;
        font-weight: 400;
    }

    .resources-publications__item p {
        color: var(--color-text-muted);
    }

    .resources-hub__provenance {
        margin: 0;
        padding-inline: clamp(1.5rem, 4vw, 3rem);
    }

    .resources-hub .resource-card__link {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        color: var(--color-link);
        text-decoration: none;
    }

    .resources-hub .resource-card__link:is(:hover, :focus-visible) {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }
}

@layer overrides {
    body.public-site {
        min-width: 0;
    }

    .resources-page .news-card :is(h2, h3) {
        line-height: 1.25;
    }

    .resources-page .resource-card :is(h2, h3) > a {
        display: inline-flex;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
    }

    @media (max-width: 64rem) {
        .resources-cover {
            grid-template-columns: 1fr;
        }

        .resources-cover__intro {
            padding-block: clamp(2.25rem, 6vw, 3.5rem);
        }

        .resources-cover__intro h1 {
            max-width: 12ch;
        }

        .resources-cover__chart .trade-chart {
            height: auto;
        }

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

        .resources-trade-menu__group--products {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 48rem) {
        .resources-guide-feature-grid,
        .resources-trade-menu,
        .resources-hub__products,
        .resources-publications__item > div {
            grid-template-columns: 1fr;
        }

        .resources-trade-menu__group--products {
            grid-column: auto;
        }
    }

    @media (max-width: 38rem) {
        .resources-cover__intro {
            gap: 0.9rem;
            padding: 1.75rem 1.5rem;
        }

        .resources-cover__intro h1 {
            max-width: 11ch;
            font-size: clamp(2.35rem, 12vw, 3.15rem);
        }

        .resources-cover__intro .hero-lead {
            font-size: 1rem;
            line-height: 1.55;
        }

        .resources-cover__index {
            margin-top: 0.15rem;
        }

        .resources-cover__entry {
            min-height: 3.75rem;
        }

        .resources-cover__entry small {
            display: none;
        }

        .resources-cover__metric {
            padding: 1.5rem;
        }

        .resources-cover__metric-value {
            font-size: 3rem;
        }

        .resources-cover__chart {
            padding: 1.25rem 1rem;
        }

        .resources-cover__chart-heading {
            align-items: start;
        }

        .resources-cover__chart-heading .arrow-link,
        .resources-hub__group-heading .arrow-link {
            width: 100%;
        }

        .resources-hub__group {
            padding: 2.75rem 1.125rem;
        }

        .resources-hub__group-heading {
            align-items: start;
        }

        .resource-card--country .news-card__body {
            padding: 1.5rem 1rem;
        }

        .resource-card__identity {
            min-height: 6.25rem;
            grid-template-columns: minmax(0, 1fr) 5.5rem;
            gap: 0.75rem;
        }

        .resource-card__country-outline {
            width: 5.5rem;
            height: 4rem;
        }

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

        .resources-country-guide__opening {
            padding: 1.25rem 1.5rem;
        }

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

        .resources-trade-menu__group--products .resources-hub__entry-links {
            grid-template-columns: 1fr;
        }

        .resources-hub__trade-intro {
            align-items: flex-start;
        }

        .resources-hub__search .trade-product-finder__row {
            display: grid;
            grid-template-columns: 1fr;
        }

        .resources-hub__search .btn {
            width: 100%;
        }

        .resources-hub__provenance {
            padding-inline: 1.125rem;
        }
    }
}