/*  Metrics-matched fallback. The text faces still use font-display:swap —
    unstyled text beats invisible text for readability — but the swap only
    "pops" when the fallback sits on different metrics and the line boxes
    move. Overriding Arial's metrics to match Open Sans Condensed keeps the
    line height and baseline identical across the swap, so the change is a
    difference in letterforms rather than a reflow.

    Values are read from the real files: ascent 2189/2048, descent 600/2048.
    size-adjust compensates for Arial being wider than the condensed face. */
@font-face {
    font-family: 'OSC Fallback';
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    ascent-override: 106.9%;
    descent-override: 29.3%;
    line-gap-override: 0%;
    size-adjust: 88%;
}

/* ---------------------------------------------------------------------------
   Brand fonts, self-hosted from static/fonts/. These are the same four faces
   the live site loads:
     Silverline Script          — the script word in the hero ("discover…")
     Popwave Narrow             — the big italic display type (TOMBOY SWIMWEAR)
     Open Sans SemiCondensed Bd — section eyebrows / small caps labels
     Open Sans Condensed        — body copy
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'Silverline Script';
    src: url('/static/fonts/silverline-script.woff2') format('woff2'),
         url('/static/fonts/silverline-script.woff') format('woff');
    /*  block, not optional: this script face IS the hero design, and there is
        no acceptable fallback for it. optional would strand the page in a
        sans-serif for the whole pageview whenever the font missed its ~100ms
        budget. block hides the text briefly instead, and the page-level
        fade-in covers that gap so nothing is ever seen mid-swap. */
    font-display: block;
}

@font-face {
    font-family: 'Popwave Narrow';
    src: url('/static/fonts/popwave-narrow.woff2') format('woff2'),
         url('/static/fonts/popwave-narrow.woff') format('woff');
    /*  Same reasoning as the script face: the condensed italic display type is
        the hero, and rendering it in a fallback is worse than waiting. The
        fade-in hides the wait. */
    font-display: block;
}

@font-face {
    font-family: 'Open Sans SemiCondensed';
    src: url('/static/fonts/opensans-semicondensed-bold.woff2') format('woff2'),
         url('/static/fonts/opensans-semicondensed-bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans Condensed';
    src: url('/static/fonts/opensans-condensed.woff2') format('woff2'),
         url('/static/fonts/opensans-condensed.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

/*  The live site sets body copy in Condensed Medium and section headings in
    Condensed Bold, not the 400 cut. Registered as weights of the same family
    so font-weight picks the real file instead of synthesising a fake bold. */
@font-face {
    font-family: 'Open Sans Condensed';
    src: url('/static/fonts/opensans-condensed-medium.woff2') format('woff2'),
         url('/static/fonts/opensans-condensed-medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans Condensed';
    src: url('/static/fonts/opensans-condensed-bold.woff2') format('woff2'),
         url('/static/fonts/opensans-condensed-bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

:root {
    /* Palette lifted from the live site's theme colors. The site is almost
       entirely white type over full-bleed photography on near-black. */
    --tl-black: #000000;
    --tl-ink: #080808;
    --tl-white: #ffffff;
    --tl-off-white: #f0f0f0;
    --tl-sand: #f1f2e4;
    --tl-grey: #727272;
    --tl-grey-light: #b0b0b0;
    --tl-grey-mid: #a3a3a3;
}

body {
    font-family: 'Open Sans Condensed', 'OSC Fallback', 'Barlow', sans-serif;
    background-color: var(--tl-black);
    color: var(--tl-white);
    margin: 0;
}

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

img {
    max-width: 100%;
}

/* The site's type is set in wide-tracked uppercase almost everywhere. */
.tl-title {
    font-family: 'Popwave Narrow', 'Barlow', sans-serif;
    font-style: italic;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-transform: uppercase;
}

.tl-script {
    font-family: 'Silverline Script', cursive;
    letter-spacing: -0.04em;
    line-height: 0.9;
    text-transform: none;
}

.tl-eyebrow {
    font-family: 'Open Sans SemiCondensed', 'OSC Fallback', sans-serif;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.3;
}

.tl-body {
    font-family: 'Open Sans Condensed', 'OSC Fallback', sans-serif;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

/* Respect users who've asked the OS to reduce motion — the site leans on
   scroll reveals and a slow hero pan, both of which are decorative. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}