:root {
    /* Typography */
    --base-font-family: helvetica, arial, sans-serif;
    --text-xs: clamp(0.75rem, calc(-0.1858782904vw + 0.7918226153rem), 0.6331290249rem);
    --text-s: clamp(0.8125rem, calc(0.0500373602vw + 0.8012415939rem), 0.8439609902rem);
    --text-m: clamp(1rem, calc(0.1988071571vw + 0.9552683897rem), 1.125rem);
    --text-l: clamp(1.2rem, calc(0.4765407555vw + 1.09277833rem), 1.499625rem);
    --text-xl: clamp(1.44rem, calc(0.8890658052vw + 1.2399601938rem), 1.999000125rem);
    --text-xxl: clamp(1.728rem, calc(1.489729092vw + 1.3928109543rem), 2.6646671666rem);
    --text-page-title: clamp(4.2998rem, calc(7.2503vw + 2.8498rem), 9.375rem);
    --text-section-title: clamp(2.5736rem, calc(3.4663vw + 1.8803rem), 5rem);
    --heading-font-family: "akhand", helvetica, arial, sans-serif;
    --heading-font-weight: 700;
    --heading-line-height: calc(4px + 2ex);
    --text-line-height: calc(6px + 2ex);

    /* Spacing */
    --space-xs: clamp(0.8441720333rem, calc(-0.0172384889vw + 0.8480506933rem), 0.8333333333rem);
    --space-s: clamp(1.1252813203rem, calc(0.1983597291vw + 1.0806503813rem), 1.25rem);
    --space-m: clamp(1.5rem, calc(0.5964214712vw + 1.365805169rem), 1.875rem);
    --space-l: clamp(1.9995rem, calc(1.2930417495vw + 1.7085656064rem), 2.8125rem);
    --space-xl: clamp(2.6653335rem, calc(2.4706425447vw + 2.1094389274rem), 4.21875rem);
    --section-space-m: clamp(1.5rem, calc(3.578528827vw + 0.6948310139rem), 3.75rem);

    --transition: ease-in-out 0.3s;

    /* Section rhythm */
    --gutter: var(--space-l);
    --section-padding-block: var(--section-space-m);

    /* Layout */
    --content-gap: var(--space-m);
    --container-gap: var(--space-xl);
    --grid-gap: var(--space-m);
    --content-width: 85.375rem;
    --grid-2: repeat(2, minmax(0, 1fr));

    /* radii */
    --base-border-radius: clamp(1.13rem, 2.34vi + 0rem, 1.88rem);
    --radius: var(--base-border-radius);
    --radius-50: 50%;
    --radius-circle: 50vw;
    --radius-none: 0;
    --radius-xs: var(--base-border-radius) / 1.5 / 1.5;
    --radius-s: var(--base-border-radius) / 1.5;
    --radius-m: var(--base-border-radius);
    --radius-l: var(--base-border-radius) * 1.5;
    --radius-xl: var(--base-border-radius) * 1.5 * 1.5;
    --radius-xxl: var(--base-border-radius) * 1.5 * 1.5 * 1.5;

    /* Colors */
    --white: oklch(1 0 0);
    --black: oklch(0 0 0);
    --dark-blue: oklch(0.1682 0.0317 247.54); /* hero bg color */
    --dark-ochre: oklch(0.2001 0.0068 34.31); /* footer bg color */
    --primary: oklch(0.8474 0.1441 182.61); /* buttons and branding aquamarine */
    --primary-hover: oklch(0.7474 0.1441 182.61);
    --primary-light: oklch(0.9000 0.0900 182.61);
    --primary-ultra-light: oklch(0.1500 0.0400 182.61);
    --secondary: oklch(0.7146 0.0507 211); /* #7EACB5 */
    --accent: oklch(0.926 0.038 77.62); /* #F5E4CB */
    --text-dark: oklch(0.3853 0 0);
    --text-light: var(--white);
    --text-light-muted: color-mix(in srgb, var(--text-light) 70%, transparent);
    --color-heading: var(--text-light);
    --color-body: var(--text-light);

    --link-color: var(--primary);
    --link-color-hover: var(--primary-hover);

    /* Surfaces */
    --surface-page: oklch(1.0000 0 0);
    --surface-band: oklch(0.9851 0 0);
    --surface-callout: oklch(0.9829 0.0109 63.22);
    --surface-body-bg: oklch(0.1989 0.0053 39.36); /* #181514 */
}

body {
    font-family: var(--base-font-family);
    font-size: var(--text-m);
    line-height: var(--text-line-height);
    color: var(--color-body);
    text-wrap: pretty;
    background: var(--surface-body-bg);
}

h1, h2, h3, h4 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    text-wrap: balance;
    text-transform: uppercase;
}

h1 {
    font-size: var(--text-page-title);
    line-height: 0.9;
}

h3 {
    font-size: var(--text-l);
}

.section-title {
    font-size: var(--text-section-title);
    line-height: 1;
}

p { line-height: var(--text-line-height); }

figure {
    margin-inline: 0;
}

input {
    font-family: var(--base-font-family);
    font-size: var(--text-l);
    color: var(--text-dark);

    &::placeholder {
        color: var(--text-dark);
        opacity: 0.5;
    }
}

a:where(:not([class*= btn--])) {
    color: var(--link-color, var(--primary));
    -webkit-text-decoration: var(--link-decoration, inherit);
    text-decoration: underline;
    transition: color var(--transition);

    &:hover {
        color: var(--link-color-hover, var(--primary-hover));
    }
}

.underline {
    display: inline-block;
    position: relative;
}

.underline:hover::before {
    width: 100%;
}

.underline::before {
    transition: width .4s;
    transition-delay: 0s;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    border-bottom: 1px solid currentColor;
}

.text-secondary {
    color: var(--secondary);
}

.topbar {
    padding-inline: var(--gutter);
    height: var(--space-l);
    background: linear-gradient(90deg,rgba(242, 249, 252, 1) 0%, rgba(126, 172, 181, 1) 66%, rgba(245, 228, 203, 1) 100%);
}

section, footer {
    padding-block: var(--section-padding-block);
    padding-inline: var(--gutter);
}

.container {
    max-width: var(--content-width);
    margin-inline: auto;
}

.hero {
    background: var(--dark-blue);
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    min-height: 50dvi;
}

.main {
    background-color: #7397ad;

    .main-inset {
        overflow: hidden;
        width: fit-content;
        height: fit-content;
        background-color: var(--black);

        img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 1/1;
            object-fit: cover;
        }
    }

    .btm-img-stretch {
        margin-block-start: calc( var(--section-padding-block) * 2);
    }
}


footer {
    --link-color: var(--text-light-muted);
    text-align: center;
    font-size: var(--text-s);
    background-color: var(--dark-ochre);
    padding-block-end: calc(var(--section-padding-block) * 4);

    .footer-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--content-gap);
        max-width: 90ch;
        margin-inline: auto;

        > p {
            color: var(--text-light-muted);
        }
    }

    .form-input-wrapper {
        display: flex;
        align-items: center;
        background: var(--white);
        border-radius: var(--radius-circle);
        padding: var(--space-xs);

        input {
            flex: 1;
            min-width: 0;
            border: none;
            background: transparent;
            padding-inline: var(--space-m);
            padding-block: var(--space-xs);
            outline: none;
        }

        button {
            border-radius: var(--radius-circle);
        }
    }

    figure:not(.background-image) > img {
        margin-inline: auto;
    }

    .background-image__img {
        object-position: center bottom;
    }
}

/* buttons */
[class*="btn--"] {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: var(--text-l);
    border: 1px solid var(--btn-border-color);
    text-transform: uppercase;
    padding-block: var(--space-xs);
    padding-inline: var(--space-l);
    white-space: nowrap;
    cursor: pointer;
    color: var(--btn-text-color);
    background: var(--btn-background);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;

    &:hover {
        background: var(--btn-background-hover);
        color: var(--btn-text-color-hover);
        border-color: var(--btn-border-color-hover);
    }

    &:focus-visible {
        outline: 2px solid var(--focus-color);
        outline-offset: 2px;
    }
}

.btn--primary {
    --btn-background: var(--primary);
    --btn-background-hover: var(--primary-hover);
    --btn-text-color: var(--primary-ultra-light);
    --btn-text-color-hover: var(--primary-ultra-light);
    --btn-border-color: var(--primary);
    --btn-border-color-hover: var(--primary-hover);
    --focus-color: var(--primary-light);
}

/* backgrounds */
.bgg-horizon {
    background: linear-gradient(180deg,rgba(108, 149, 176, 1) 0%, rgba(216, 191, 145, 1) 80%);
}

/* utilities ============================== */

/* GRID UTILITIES */
.grid--2 {
    display: grid;
    grid-template-columns: var(--grid-2);
    gap: var(--grid-gap);
}

@media (width >= 768px) {
    .grid--md-2 {
        display: grid;
        grid-template-columns: var(--grid-2);
        gap: var(--grid-gap);
    }
}

@media (width >= 992px) {
    .grid--lg-2 {
        display: grid;
        grid-template-columns: var(--grid-2);
        gap: var(--grid-gap);
    }
}

.overlap--block-start {
    margin-block-start: calc( var(--section-padding-block) * -2);
    position: relative;
}

@media (width >= 768px ) {
    .overlap--md-block-start {
        margin-block-start: calc( var(--section-padding-block) * -2);
        position: relative;
    }
}

.img-rounded {
    border-radius: var(--radius);
    border: 2px solid var(--primary);
}

.background-image {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: -1;
    margin-block-end: 0;

    :has(> &) {
        position: relative;
        isolation: isolate;
    }

    .background-image__img {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
    }

    &::after {
        content: '';
        background: var(--overlay-color);
        opacity: var(--overlay-opacity);
        position: absolute;
        inset: 0;
        display: var(--overlay-display);
        mix-blend-mode: var(--overlay-blend-mode);
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.btm-img-stretch {
    width: calc( 100% + (var(--gutter) * 2));
    height: auto;
    position: relative;
    margin-inline: calc( var(--gutter) * -1);
    margin-block-end: calc( var(--section-padding-block) * -1);

    img {
        width: calc( 100% + (var(--gutter) * 2));
        height: auto;
    }
}

.signup-message {
    width: 100%;
    margin: 0;
    border-block: 1px solid color-mix(in oklch, currentColor 25%, transparent);
    box-shadow: 0 8px 24px color-mix(in oklch, black 25%, transparent);
    border-radius: var(--radius-circle);
    background-color: var(--white);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    z-index: 2;
}

.signup-message.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}

.signup-panel {
    position: relative;
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
    border-radius: var(--radius-circle);
    overflow: hidden;
}

.signup-form {
    transition: opacity 0.35s ease, transform 0.35s ease;
    position: relative;
    z-index: 1;
}

.signup-form.is-hidden {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

.signup-message__inner {
    padding: var(--space-s);
    padding-inline-start: var(--space-m);
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    height: 100%;
}

.signup-message__icon {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
    padding: var(--space-s);
}

.signup-message__text {
    margin: 0;
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: var(--text-l);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.signup-message--success {
    background: linear-gradient(90deg, oklch(0.92 0.05 183) 0%, oklch(0.88 0.08 185) 100%);
    > .signup-message__inner {
        color: oklch(0.23 0.06 184);
        background: linear-gradient(90deg, oklch(0.92 0.05 183) 0%, oklch(0.88 0.08 185) 100%);
    }
}

.signup-message--success .signup-message__icon {
    background: oklch(0.6494 0.1746 147.06); /* oklch(0.35 0.08 186) */
    color: var(--white);
}

.signup-message__icon::before {
    font-size: var(--text-l);
}

.signup-message--success .signup-message__icon::before {
    content: "✓";
}

.signup-message--error {
    > .signup-message__inner {
        color: oklch(0.98 0.01 15);
        background: linear-gradient(90deg, oklch(0.56 0.19 26) 0%, oklch(0.5 0.19 25) 100%);
    }
}

.signup-message--error .signup-message__icon {
    background: oklch(0.98 0.01 15);
    color: oklch(0.5 0.19 25);
}

.signup-message--error .signup-message__icon::before {
    content: "!";
}
@media (width <= 600px) {
    .signup-message__inner {
        justify-content: flex-start;
    }

    .signup-message__text {
        text-align: left;
    }
}

.signup-message__close {
    border-radius: var(--radius-circle);
    border: none;
    aspect-ratio: 1/1;
    padding: calc( var(--space-xs) * 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    cursor: pointer;
    background-color: var(--white);
    border: 2px solid var(--white);
    transition: background-color var(--transition), color var(--transition), fill var(--transition);

    .close-button-icon {
        margin-block-start: -0.2ex;
    }

    &:hover {
        background-color: var(--black);
        color: var(--white);
    }
}