@font-face {
    font-family: "Montserrat";
    src: url("/fonts/Montserrat-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    color-scheme: dark;

    --ds-bg: #0a0908;
    --ds-bg-elevated: #0f0e0c;
    --ds-surface: #151310;
    --ds-surface-2: #1c1915;
    --ds-surface-3: #242019;

    --ds-text: #f8f3e9;
    --ds-text-soft: #d0c6b7;
    --ds-text-muted: #aaa092;

    --ds-gold: #d9b96f;
    --ds-gold-bright: #f0d28b;
    --ds-gold-deep: #8c6c35;

    --ds-accent: var(--ds-gold);
    --ds-accent-bright: var(--ds-gold-bright);
    --ds-accent-soft: rgba(217, 185, 111, 0.12);

    --ds-border: rgba(217, 185, 111, 0.24);
    --ds-border-strong: rgba(217, 185, 111, 0.48);

    --ds-focus: #ffd98b;
    --ds-danger: #ffb4ab;
    --ds-success: #9fd5b2;

    --ds-shadow-sm: 0 0.55rem 1.6rem rgba(0, 0, 0, 0.22);
    --ds-shadow-md: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.32);
    --ds-shadow-lg: 0 2rem 6rem rgba(0, 0, 0, 0.46);

    --ds-radius-sm: 0.625rem;
    --ds-radius-md: 0.95rem;
    --ds-radius-lg: 1.35rem;
    --ds-radius-pill: 999px;

    --ds-touch: 44px;
    --ds-container: 75rem;
    --ds-reading: 68ch;
    --ds-header-mobile: 3.75rem;
    --ds-header-desktop: 4.25rem;

    --ds-space-1: 0.25rem;
    --ds-space-2: 0.5rem;
    --ds-space-3: 0.75rem;
    --ds-space-4: 1rem;
    --ds-space-5: 1.5rem;
    --ds-space-6: 2rem;
    --ds-space-7: 3rem;
    --ds-space-8: 4rem;
    --ds-space-9: 6rem;

    --ds-font-body:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --ds-font-brand:
        "Montserrat",
        var(--ds-font-body);

    --ds-font-display:
        "Montserrat",
        var(--ds-font-body);

    --ds-font-editorial:
        Georgia,
        "Times New Roman",
        serif;

    --ds-font-display-size: clamp(2.55rem, 7vw, 5.2rem);
    --ds-font-h1: clamp(2rem, 5vw, 3.7rem);
    --ds-font-h2: clamp(1.5rem, 3vw, 2.25rem);
    --ds-font-h3: clamp(1.2rem, 2vw, 1.5rem);
    --ds-font-body-size: 1rem;
    --ds-font-small: 0.875rem;

    --ds-line-display: 1.02;
    --ds-line-heading: 1.12;
    --ds-line-body: 1.65;
    --ds-line-small: 1.5;

    --ds-motion-fast: 120ms;
    --ds-motion-normal: 220ms;
    --ds-motion-slow: 420ms;
    --ds-ease-standard: cubic-bezier(.2, .8, .2, 1);
    --ds-ease-emphasized: cubic-bezier(.2, 0, 0, 1);

    --ds-z-base: 0;
    --ds-z-sticky: 100;
    --ds-z-dropdown: 200;
    --ds-z-backdrop: 300;
    --ds-z-dialog: 400;
    --ds-z-toast: 500;

    --ds-page-gutter: 1rem;
}

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

html {
    min-block-size: 100%;
    background: var(--ds-bg);
    color: var(--ds-text);
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-padding-block-start: calc(var(--ds-header-mobile) + var(--ds-space-4));
    scroll-behavior: smooth;
}

body {
    min-block-size: 100vh;
    min-block-size: 100dvh;
    margin: 0;
    background: var(--ds-bg);
    color: var(--ds-text);
    font-family: var(--ds-font-body);
    font-size: var(--ds-font-body-size);
    line-height: var(--ds-line-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    display: block;
    max-inline-size: 100%;
}

svg {
    flex: none;
}

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

button,
summary,
a {
    -webkit-tap-highlight-color: transparent;
}

button,
summary {
    touch-action: manipulation;
}

button {
    border: 0;
}

a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 3px solid var(--ds-focus);
    outline-offset: 3px;
}

::selection {
    background: var(--ds-accent);
    color: #090807;
}

.sr-only {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ds-icon {
    inline-size: 22px;
    block-size: 22px;
    stroke-width: 1.8;
}

.ds-icon--small {
    inline-size: 18px;
    block-size: 18px;
}

.ds-icon--large {
    inline-size: 24px;
    block-size: 24px;
}

.ds-icon-button {
    display: inline-grid;
    inline-size: var(--ds-touch);
    min-inline-size: var(--ds-touch);
    block-size: var(--ds-touch);
    min-block-size: var(--ds-touch);
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-pill);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition:
        background-color var(--ds-motion-fast) var(--ds-ease-standard),
        border-color var(--ds-motion-fast) var(--ds-ease-standard),
        color var(--ds-motion-fast) var(--ds-ease-standard),
        transform var(--ds-motion-fast) var(--ds-ease-standard);
}

.ds-icon-button:hover {
    border-color: var(--ds-border);
    background: var(--ds-accent-soft);
}

.ds-icon-button:active {
    transform: translateY(1px);
}

.ds-inline-link {
    display: inline-flex;
    min-block-size: var(--ds-touch);
    align-items: center;
    gap: var(--ds-space-2);
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: var(--ds-ease-standard);
}

@media (min-width: 24.5rem) {
    :root {
        --ds-page-gutter: 1.25rem;
    }
}

@media (min-width: 48rem) {
    :root {
        --ds-page-gutter: 2rem;
    }

    html {
        scroll-padding-block-start: calc(var(--ds-header-desktop) + var(--ds-space-4));
    }
}

@media (min-width: 80rem) {
    :root {
        --ds-page-gutter: clamp(2rem, 5vw, 5rem);
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation-duration: 0.001ms !important;
    }
}