/* #region Color variables */

/* Flock brand palette, from the Flock Brand Identity Guardrails (September 2026). */

:root {
    /* Primary */
    --color--navy:              hsl(206.5, 60.7%, 11%); /* #0B1E2D logo ink */
    --color--chalk:             hsl(42, 35.7%, 94.5%); /* #F6F3EC primary ground */
    --color--sky-wash:          hsl(207, 40%, 90.2%); /* #DCE7F0 primary ground */

    /* Secondary */
    --color--denim:             hsl(212.4, 32.7%, 44.3%); /* #4C6E96 */
    --color--orange:            hsl(20.2, 89.4%, 48.2%); /* #E9570D Flock orange */

    /* Support */
    --color--rust:              hsl(19.2, 90.2%, 40%); /* #C2450A text on light */
    --color--peach:             hsl(22.6, 86.9%, 79%); /* #F8BE9B text on dark */
    --color--white:             #fff;

    /* Derived */
    --color--navy-fade-55:      color-mix(in srgb, var(--color--navy) 55%, transparent);
}

/* #endregion */

/* #region Text colors */

.color--navy {
    color: var(--color--navy);
}

.color--chalk {
    color: var(--color--chalk);
}

.color--sky-wash {
    color: var(--color--sky-wash);
}

.color--denim {
    color: var(--color--denim);
}

.color--orange {
    color: var(--color--orange);
}

.color--rust {
    color: var(--color--rust);
}

.color--peach {
    color: var(--color--peach);
}

/* #endregion */

/* #region Background and border colors */

.backgroundborder--navy {
    background-color: var(--color--navy);
    border-color: var(--color--navy);
}

.backgroundborder--chalk {
    background-color: var(--color--chalk);
    border-color: var(--color--chalk);
}

.backgroundborder--sky-wash {
    background-color: var(--color--sky-wash);
    border-color: var(--color--sky-wash);
}

.backgroundborder--denim {
    background-color: var(--color--denim);
    border-color: var(--color--denim);
}

.backgroundborder--orange {
    background-color: var(--color--orange);
    border-color: var(--color--orange);
}

.backgroundborder--rust {
    background-color: var(--color--rust);
    border-color: var(--color--rust);
}

.backgroundborder--peach {
    background-color: var(--color--peach);
    border-color: var(--color--peach);
}

/* #endregion */

/* #region Font faces */

/*
 * Montserrat (titles) and Manrope (body) are loaded from Google Fonts by the
 * <link> in each page <head>, limited to the weights the brand guardrails use:
 * Montserrat 600-800 (SemiBold, Bold, ExtraBold) and Manrope 400-600
 * (Regular, Medium, SemiBold).
 */

/* #endregion */

/* #region Families */

:root {
    --font-family--display:      "Montserrat", sans-serif;
    --font-family--body:         "Manrope", sans-serif;

    --bodytext-size:             1rem; /* 16px */
    --bodytext-lineheight:       1.5rem; /* 24px */
    --bodytext-weight:           400;
    --bodytext-medium-weight:    500;
    --bodytext-strong-weight:    600;
    --bodytext-letterspacing:    0em;

    --h1-fontsize:               2.75rem; /* 44px */
    --h1-lineheight:             3.125rem; /* 50px */
    --h1-fontweight:             700;
    --h1-letterspacing:          -0.02em; /* tracking -20 */

    --tagline-fontsize:          1.375rem; /* 22px */
    --tagline-lineheight:        1.75rem; /* 28px */
    --tagline-fontweight:        600;
    --tagline-letterspacing:     0.16em; /* tracking 160 */
}

html {
    font-family: var(--font-family--body);
}

h1,
h2,
h3 {
    font-family: var(--font-family--display);
    font-style: normal;
}

/* #endregion */

/* #region Body text */

body {
    font-family: inherit;
    font-size: var(--bodytext-size);
    line-height: var(--bodytext-lineheight);
    font-weight: var(--bodytext-weight);
    letter-spacing: var(--bodytext-letterspacing);
}

strong,
b {
    font-weight: var(--bodytext-strong-weight);
}

/* #endregion */

/* #region Heading scale */

h1 {
    font-size: var(--h1-fontsize);
    font-weight: var(--h1-fontweight);
    line-height: var(--h1-lineheight);
    letter-spacing: var(--h1-letterspacing);
}

/* #endregion */

/* #region Tagline */

.tagline {
    font-family: var(--font-family--display);
    font-size: var(--tagline-fontsize);
    font-weight: var(--tagline-fontweight);
    line-height: var(--tagline-lineheight);
    letter-spacing: var(--tagline-letterspacing);
    text-transform: uppercase;
}

/* #endregion */

/* #region Mobile heading scale */

@media (max-width: 40rem) {
    :root {
        --h1-fontsize: 1.75rem; /* 28px */
        --h1-lineheight: 2.125rem; /* 34px */
        --tagline-fontsize: 1rem; /* 16px */
        --tagline-lineheight: 1.375rem; /* 22px */
    }
}

/* #endregion */

/* #region Variables and units */

:root {
    --border-width: 0.125rem; /* 2px */
}

/* #endregion */

/* #region Reset */

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

body {
    margin: 0;
    min-height: 100vh;
}

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

/* #endregion */

/* #region Splash */

/* A full-viewport screen with centred content over an optional background video. */

.splash {
    position: relative;
    min-height: 100vh;
}

.splash__media {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.splash__overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background-color: var(--color--navy-fade-55);
    pointer-events: none;
}

.splash__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
    transform: translateY(-2vh);
}

@media (prefers-reduced-motion: reduce) {
    .splash__media {
        display: none;
    }
}

/* #endregion */

/* #region Brand mark */

/* The Flock "O" with birds, used as a standalone emblem. */

/* The orange pill call to action under the lockup, as on the main site. */
.button {
    display: inline-block;
    padding: 0.875rem 1.75rem;
    border-radius: 99rem;
    background-color: var(--color--orange);
    color: var(--color--white);
    font-family: var(--font-family--body);
    font-size: 1.0625rem;
    line-height: 1.5rem;
    font-weight: var(--bodytext-strong-weight);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 180ms ease;
}

.button:hover,
.button:focus-visible {
    background-color: var(--color--rust);
}

.brand-mark {
    width: min(37.5vh, 56.25vw, 18.75rem);
    height: auto;
}

/* #endregion */

/* #region Brand lockup */

/*
 * The FLOCK wordmark with the tagline set as HTML text to its right.
 * The wordmark height matches the tagline's two lines so they balance.
 */

.brand-lockup {
    --brand-lockup-height: calc(var(--tagline-lineheight) * 2);

    display: flex;
    align-items: center;
    gap: 2.5rem;
    margin: 0;
}

.brand-lockup__wordmark {
    width: auto;
    height: var(--brand-lockup-height);
}

.brand-lockup__divider {
    align-self: stretch;
    width: var(--border-width);
    background-color: currentColor;
    opacity: 0.5;
}

.brand-lockup__tagline {
    display: block;
    text-align: left;
}

@media (max-width: 40rem) {
    .brand-lockup {
        flex-direction: column;
        gap: 1rem;
    }

    .brand-lockup__divider {
        display: none;
    }

    .brand-lockup__tagline {
        text-align: center;
    }
}

/* #endregion */

/* #region Countdown */

/*
 * #qr only: a countdown to 17:55 in an orange bar along the bottom of the
 * screen, matching the homepage tour's colours. It is removed at zero.
 */

.countdown {
    position: fixed;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0.5rem 1rem 0.75rem;
    background-color: var(--color--orange);
    color: var(--color--white);
    font-family: var(--font-family--body);
    font-size: clamp(2.75rem, 4.76vw, 4.125rem); /* large enough to read across a room */
    line-height: 1;
    font-weight: var(--bodytext-strong-weight);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    text-align: center;
}

/* #endregion */