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

html,
body {
    height: 100%;
}

body {
    margin: 0;
}

:root {
    /* Colours (from Figma variables) */
    --color-red: #ed1c24;
    --color-white: #ffffff;
    --color-mid-gray: #808285;
    --color-dark-gray: #4b4d50;

    /* Typography (from Figma styles) */
    --font-family-one: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-size-body: 13px;
    --line-height-body: 21px;
    --letter-spacing-body: 1.3px;
    --text-transform-body: uppercase;

    /* Layout */
    --grid-gutter: 30px;
    --grid-gutter-half: 15px;
    --grid-gutter-quarter: 7.5px;
    /* --splash-gap: 10px; */
    --splash-gap: var(--grid-gutter);
    --splash-padding-x: clamp(24px, 10vw, 280px);
    --splash-padding-y: clamp(64px, 12vh, 282px);
}

body {
    font-family: var(--font-family-one);
    background: #000;
    background-image: url("assets/background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-white);
}

.splash {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: var(--splash-padding-y) var(--splash-padding-x);
    text-align: center;
}

.splash__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--splash-gap);
    width: min(473px, 100%);
}

/* Logo */
.splash__logo {
    width: min(473px, 100%);
    height: auto;
    display: block;
}

.splash__content {
    display: flex;
    flex-direction: column;
    gap: var(--splash-gap);
    width: 100%;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-body);
    text-transform: var(--text-transform-body);
    font-weight: 400;
}

.splash__blurb,
.splash__contact {
    margin: 0;
}

.splash__blurb {
    border-bottom: 1px solid var(--color-dark-gray);
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* row-gap: var(--grid-gutter-quarter); */
}

.splash__blurb li {
    border-top: 1px solid var(--color-dark-gray);
    padding: var(--grid-gutter-quarter) var(--grid-gutter-half);

    &:nth-child(odd) {
        text-align: right;
        border-right: 1px solid var(--color-dark-gray);
    }

    &:nth-child(even) {
        text-align: left;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

.splash__label--accent {
    color: var(--color-red);
}

.splash__sep {
    color: var(--color-mid-gray);
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
}