/* Light 300 */
@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Regular 400 */
@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/*
 * Every size below is a fluid range, never a fixed screen value: each clamp()
 * interpolates continuously with the viewport and keeps scaling past the
 * largest reference width, so there is no size at which the layout snaps.
 * Ratios (percentages, vw, aspect-ratio) carry the proportions.
 */
:root {
    --text-body: clamp(0.75rem, 0.706rem + 0.19vw, 1rem);
    --text-control: clamp(0.875rem, 0.831rem + 0.19vw, 1.25rem);
    --text-title: clamp(1.875rem, 1.479rem + 1.69vw, 4.5rem);

    --gutter: clamp(1.25rem, 0.7rem + 2.35vw, 4rem);

    /* The vh ceilings let the vertical rhythm compress on short viewports
       (landscape phones) instead of pushing the hero off the screen. */
    --gutter-top: min(clamp(1.5rem, 1.8rem + 0.1vw, 2.5rem), 5vh);
    --gap-header: min(clamp(3rem, 4.35rem - 1.5vw, 4rem), 11vh);
    --gap-stack: clamp(1.5rem, 1.33rem + 0.19vw, 2rem);

    --control-height: clamp(3rem, 2.9rem + 0.1vw, 3.5rem);
    --logo-width: clamp(6.5625rem, 6.3rem + 0.7vw, 9rem);

    /* 700 of the design's 1350 wide hero - a share, so the search bar keeps
       growing with the page instead of freezing at the width it was drawn at. */
    --column-share: 51.85%;

    /* 602 of the design's 1440 viewport. The vh term keeps her off the logo on
       short screens, the max stops her overpowering very large ones. */
    --figure-width: clamp(15rem, min(41.8vw, 88vh), 45rem);

    /* 71.75 of those 602: the share of herself she hangs below the fold by. */
    --figure-bleed: calc(var(--figure-width) * -0.1192);

    --blue-light: #0f3c86;
    --blue-deep: #0d1c5b;
    --blue-ink: #0c1754;
    --green: #30bb63;
    --green-text: #088143;
    --grey-placeholder: #898b8b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    line-height: 1.5;
    color: #ffffff;
    background: linear-gradient(88.83deg, var(--blue-light) 0%, var(--blue-deep) 99%);
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
}

/* No bottom padding: the photo runs off the bottom edge and is clipped here. */
.container {
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--gutter-top) var(--gutter) 0;
    gap: var(--gap-header);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

header {
    display: flex;
}

/* aspect-ratio rather than a height: the SVG's own attributes disagree with its viewBox. */
.logo {
    display: block;
    width: var(--logo-width);
    height: auto;
    aspect-ratio: 5 / 1;
}

/* flex-shrink 0: the hero must never be squeezed below its content, or the
   container's overflow clip would cut the footer off on short viewports. */
.hero {
    position: relative;
    flex: 1 0 auto;
    display: flex;
    align-items: center;
}

/* Stacked above the photo, the way the site's hero stacks its text column, so a
   larger photo can never come up over the copy on a short screen. */
.hero-main {
    position: relative;
    z-index: 1;
    flex: none;
    width: var(--column-share);
    min-width: 0;
    max-width: 64rem;
    gap: var(--gap-stack);
    display: flex;
    flex-direction: column;
    container: hero / inline-size;
}

h1 {
    font-size: var(--text-title);
    font-weight: inherit;
}

/* The design sets the whole hero in one light weight, emphasis included. */
strong {
    font-weight: inherit;
}

.description {
    font-size: var(--text-body);
}

/*
 * The search bar sizes itself in em, so padding, gaps and the icon all scale
 * with its own fluid font size instead of being set individually.
 */
.domain-search {
    height: var(--control-height);
    padding-left: 1em;
    gap: 1em;
    background-color: #ffffff;
    border-radius: 999rem;
    font-size: var(--text-control);
    display: flex;
    align-items: center;
}

.domain-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: var(--blue-ink);
}

.domain-search input::placeholder {
    color: var(--grey-placeholder);
    opacity: 1;
}

.domain-search:focus-within {
    box-shadow: 0 0 0 0.125em rgba(48, 187, 99, 0.65);
}

.domain-search button {
    flex-shrink: 0;
    height: 100%;
    padding: 0.75em 1em;
    gap: 0.375em;
    border: 1px solid var(--green);
    border-radius: 999rem;
    background-color: var(--green);
    color: var(--blue-ink);
    font: inherit;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * The same inversion the site's green FilledButton does - fill and text trade
 * places, the green border stays put. Gated on a real pointer so a tap does not
 * leave the button stuck in its hover state.
 */
@media (hover: hover) and (pointer: fine) {
    .domain-search button:hover {
        background-color: #ffffff;
        color: var(--green-text);
    }
}

/*
 * Inlined rather than fetched, and filled with currentColor so the glyph
 * inverts along with the label. 0.875em is the design's 14px against the bar's
 * own fluid type.
 */
.domain-search button .icon {
    display: block;
    flex-shrink: 0;
    width: 0.875em;
    height: 0.875em;
}

footer {
    font-size: var(--text-body);
}

.links a {
    color: inherit;
    text-decoration: underline;
}

/*
 * Taken out of the flow and pinned to the bottom edge, so she stays planted on
 * the floor of the page at every viewport height instead of floating with the
 * text. Her size comes from the viewport width alone, and the negative bottom
 * is a share of that width, so she runs off the bottom by the same slice of
 * herself whatever the screen.
 */
.hero-figure {
    position: absolute;
    right: 0;
    bottom: var(--figure-bleed);
    width: var(--figure-width);
    aspect-ratio: 452 / 562;
}

.hero-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/*
 * The label goes whenever the bar itself is too narrow for it - measured on the
 * column, not the window, so a narrow column on a wide screen drops it too.
 * The width query is the fallback for browsers without container queries.
 */
@media (max-width: 47.99em) {
    .domain-search button {
        aspect-ratio: 1;
        padding: 0.75em;
    }

    .domain-search button span:not(.icon) {
        display: none;
    }
}

@container hero (max-width: 26rem) {
    .domain-search button {
        aspect-ratio: 1;
        padding: 0.75em;
    }

    .domain-search button span:not(.icon) {
        display: none;
    }
}

/*
 * The side-by-side hero needs a landscape-ish viewport: it stacks once the page
 * gets narrow, and also whenever it is taller than it is wide, which is what
 * makes a portrait tablet read like a phone rather than a squeezed desktop.
 */
@media (max-width: 47.99em), (max-aspect-ratio: 1 / 1) {
    :root {
        /* Scaled up from the 43.75vw of the design's 375 artboard - at that size
           she reads as an afterthought on a real phone, and the old vh ceiling
           shrank her hardest on tablets, which have the most room for her. */
        --figure-width: min(50vw, 42vh);
    }

    .hero {
        flex-direction: column;
    }

    .hero-main {
        flex: 1 0 auto;
        width: 100%;
        max-width: none;
    }

    /* Half the row, so the copy never runs under her. */
    footer {
        margin-top: auto;
        max-width: 50%;
        padding-bottom: var(--gap-stack);
    }

    /* Run her out to the screen edge: the extra width buys the footer back the
       room the larger photo would otherwise have taken. */
    .hero-figure {
        right: calc(var(--gutter) * -1);
        bottom: 0;
        aspect-ratio: 164 / 274;
    }
}