/* ===========================================================================
   Better Trade 2026 · Coming Soon
   Native CSS nesting. All values come from css/tokens.css.
   =========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

/* --- Stage ---------------------------------------------------------------
   One full-viewport frame. The hero centres in it; the footer is pinned to
   the bottom edge so it never pulls the hero off centre.                    */

.stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-inline: var(--layout-gutter-x);

    /* Key visual — the 1440 × 731 frame scaled to *cover* the viewport, so the
     designed crop is exact at the design ratio and only ever grows past it. */
    .stage__kv {
        --kv-scale: max(100vw, 100svh * var(--layout-frame-ratio));

        position: absolute;
        inset: 0;
        z-index: -1;
        overflow: hidden;

        .kv {
            position: absolute;
            left: 50%;
            translate: -50% 0;
            width: var(--kv-scale);
            max-width: none;
            height: calc(var(--kv-scale) / var(--kv-ratio));
        }

        .kv--sky {
            top: calc(var(--kv-scale) * var(--kv-offset-sky));
        }

        .kv--wall {
            top: calc(var(--kv-scale) * var(--kv-offset-wall));
        }
    }

    .stage__content {
        translate: 0 calc(-1 * var(--layout-content-rise));
    }

    .stage__footer {
        position: absolute;
        inset-inline: var(--layout-gutter-x);
        bottom: var(--layout-gutter-y);
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space-lg);
    }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);

    .hero__brand {
        display: flex;
        align-items: center;
        gap: var(--space-lg);
    }

    .brand-mark {
        height: var(--logo-height);
        width: auto;
    }

    .brand-mark--better-trade {
        aspect-ratio: var(--logo-ratio-better-trade);
    }

    .brand-mark--bt2026 {
        aspect-ratio: var(--logo-ratio-bt2026);
    }

    .brand-rule {
        flex: none;
        width: var(--rule-width);
        height: var(--logo-height);
        background-color: var(--color-rule);
    }

    .hero__heading {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        font-weight: var(--font-weight-medium);
        text-align: center;
        text-wrap: balance;
    }

    .hero__display {
        font-family: var(--font-display);
        font-size: var(--font-size-display);
        font-weight: var(--font-weight-medium);
        letter-spacing: var(--letter-spacing-display);
        white-space: nowrap;
        /* Drop the trailing letter-space so the line optically centres, matching
       how Figma measures the text box. */
        margin-inline-end: calc(-1 * var(--letter-spacing-display));
    }

    .hero__title {
        font-family: var(--font-body);
        font-size: var(--font-size-title);
        font-weight: var(--font-weight-medium);
    }
}

/* --- Footer -------------------------------------------------------------- */

.colophon {
    margin: 0;
    font-size: var(--font-size-small);
}

.contact {
    width: var(--layout-meta-width);
    max-width: 100%;
    text-align: right;

    .contact__heading {
        margin: 0;
        font-size: var(--font-size-body);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-base);
    }

    .contact__list {
        font-size: var(--font-size-small);
        font-style: normal;

        p {
            margin: 0;
        }

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

            &:hover,
            &:focus-visible {
                text-decoration: underline;
            }
        }
    }
}

/* --- Narrow viewports ----------------------------------------------------
   Below 880px the two footer columns would collide, and the frame-ratio
   cover would blow the key visual up far past its intent — so the plates
   fall back to a plain full-bleed cover and the page stacks.               */

@media (max-width: 880px) {
    :root {
        --layout-gutter-x: var(--space-md);
        --layout-gutter-y: var(--space-md);
    }

    .stage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        place-items: center stretch;
        padding-block: var(--layout-gutter-y);
        row-gap: var(--space-lg);

        .stage__kv .kv {
            inset: 0;
            translate: none;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .stage__content {
            display: grid;
            place-items: center;
            translate: none;
        }

        .stage__footer {
            position: static;
            flex-direction: column-reverse;
            align-items: flex-start;
            gap: var(--space-xl);
        }
    }

    .contact {
        width: 100%;
        text-align: left;
    }
}