@font-face {
    font-family: "Mulish";
    src: url("../fonts/mulish-v18-latin-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Mulish";
    src: url("../fonts/mulish-v18-latin-800.woff2") format("woff2");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("../fonts/barlow-condensed-v13-latin-600.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --ink: #eee9df;
    --muted: #aaa398;
    --black: #070809;
    --surface: #101216;
    --surface-raised: #181b20;
    --line: #343840;
    --line-strong: #4b515c;
    --ember: #c47651;
    --ember-bright: #e09a76;
    --moss: #648b76;
    --moss-soft: #223129;
    --danger: #d87575;
    --success: #7baa85;
    --shadow: 0 20px 52px rgb(0 0 0 / 42%);
    font-family: "Mulish", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #070809;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 9% -10%, rgb(180 100 66 / 14%), transparent 30rem),
        radial-gradient(circle at 92% 5%, rgb(72 112 88 / 15%), transparent 34rem),
        linear-gradient(155deg, #121419 0%, #08090b 72%);
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: var(--ember-bright);
}

.skip-link {
    position: fixed;
    z-index: 20;
    top: 1rem;
    left: 1rem;
    padding: .65rem .9rem;
    color: #fff;
    background: var(--ink);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4rem;
    padding: .55rem clamp(.85rem, 2vw, 2rem);
    border-bottom: 1px solid var(--line);
    background: rgb(17 19 23 / 88%);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgb(255 255 255 / 4%);
}

.brand {
    display: inline-flex;
    gap: .8rem;
    align-items: center;
    color: var(--ink);
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border: 1px solid var(--ember);
    border-radius: 50%;
    color: var(--ember-bright);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.3rem;
}

.brand strong,
.brand small {
    display: block;
}

.brand strong {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.15rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.brand small,
.version {
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .08em;
}

main {
    width: 100%;
    margin: 0;
    padding: clamp(.65rem, 1.2vw, 1rem);
}

h1,
h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 600;
}

.flash-stack {
    position: fixed;
    z-index: 10;
    top: 5.5rem;
    right: 1rem;
    width: min(28rem, calc(100vw - 2rem));
}

.flash {
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    background: var(--surface-raised);
    box-shadow: var(--shadow);
}

.error-page {
    max-width: 50rem;
    margin: 7vh auto;
    padding: clamp(2rem, 6vw, 5rem);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: center;
}

.eyebrow {
    margin-bottom: .35rem;
    color: var(--ember-bright);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.button {
    display: inline-block;
    padding: .75rem 1rem;
    border: 1px solid var(--ember);
    border-radius: .4rem;
    color: var(--ember);
    background: #15181d;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}