@font-face {
    font-family: "Manrope";
    src: url("Manrope[wght].woff2") format("woff2");
    font-weight: 125 950;
    font-stretch: 75% 125%;
    font-style: normal;
}

:root {
    --space-unit: 1em;
    --space-xxs: calc(0.25 * var(--space-unit));
    --space-xs: calc(0.5 * var(--space-unit));
    --space-xsplus: calc(0.65 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    --space-smplus: calc(0.8 * var(--space-unit));
    --space-norm: var(--space-unit);
    --space-normplus: calc(var(--space-unit) + var(--space-sm));
    --space-md: calc(1.25 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --space-xl: calc(3.25 * var(--space-unit));
    --space-xxl: calc(5.25 * var(--space-unit));

    --radius-unit: 0.5em;
    --radius-xxs: calc(0.25 * var(--radius-unit));
    --radius-xs: calc(0.5 * var(--radius-unit));
    --radius-xsplus: calc(0.65 * var(--radius-unit));
    --radius-sm: calc(0.75 * var(--radius-unit));
    --radius-norm: var(--radius-unit);
    --radius-md: calc(1.25 * var(--radius-unit));
    --radius-mdplus: calc(1.5 * var(--radius-unit));
    --radius-lg: calc(2 * var(--radius-unit));
    --radius-xl: calc(3.25 * var(--radius-unit));
    --radius-xxl: calc(5.25 * var(--sradius-unit));

    --h1: 3.815rem;
    --h2: 3.052rem;
    --h3: 2.441rem;
    --h4: 1.953rem;
    --h5: 1.563rem;
    --h6: 1.25rem;
    --p: 1rem;
    --small: 0.8rem;

    --white: #fff;
    --soft-black: #040404;
    --neutral-50: hsl(0, 0%, 98%);
    --neutral-100: hsl(0, 0%, 95%);
    --neutral-200: hsl(0, 0%, 86%);
    --accent: hsl(268, 58%, 52%);
}

body {
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
        "Helvetica Neue", sans-serif;
    color: var(--neutral-50);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    accent-color: var(--accent);
    line-height: 1.4;
    background-color: var(--soft-black);
}

b { font-variation-settings: "wght" 700; }
p { font-size: var(--h6); }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }


.lucide {
    flex-shrink: 0;
}

.Card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.Card.text {
    display: block;
    padding: var(--space-lg);
    padding-bottom: var(--space-xl);
    width: clamp(120px, 60em, 87%);
    line-height: 1.6;
    font-variation-settings: "wght" 500;
    color: var(--neutral-50);
}

.Card.accent-one {
    background-color: #e1352c;
}
.Card.accent-two {
    background-color: #f97d0f;
}

.instructions {
    font-size: var(--h6);
    line-height: 2em;
    height: auto;
}

.Card.cta {
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: var(--space-xl);
    width: clamp(120px, 60em, 87%);
    font-variation-settings: "wght" 500;
    font-size: var(--h6);
}

.Card.intro {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: var(--white);
    height: 80vh;
    margin-bottom: var(--xl);
    /* border-radius: var(--radius-sm); */
    background-color: #f99b10;
    background-image: url(/amber-l-crop.webp);
    background-repeat: no-repeat;
    background-clip: border-box;
    background-position: cover;
}

.Card.intro::before {
    content: "";
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    backdrop-filter: blur(12px);
}

.Card.intro span, .Card.intro a {
    z-index: 2;
}

.Card.intro .date {
    font-size: var(--p);
    font-variation-settings: "wght" 450;
}

.Card.intro .heading {
    font-size: var(--h2);
    font-variation-settings: "wght" 550;
}

.Card.intro .desc {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-md);
    max-width: 50ch;
    font-size: var(--h5);
    font-variation-settings: "wght" 600;
    color: cornsilk;
}

.Button {
    text-align: center;
    border: none;
    color: inherit;
    padding: 0.85em;
    padding-top: 0.65em;
    padding-bottom: 0.65em;
    border-radius: 9999px;
    font: inherit;
    font-size: inherit;
    user-select: none;
    font-variation-settings: "wght" 600;
}

.Card.intro .Button.filled {
    background-color: var(--soft-black);
    color: var(--neutral-100);
}

a {
    color: var(--neutral-100);
}

a.Button {
    text-decoration: none;
}

a.Button:hover {
    text-decoration: underline;
}

.Button.filled {
    background-color: var(--neutral-100);
    color: var(--soft-black);
}

.Command {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: var(--space-md);
    background-color: #121212;
    color: var(--neutral-200);
    border-radius: 9999px;
    padding: var(--space-md);
    font-family: monospace;
    font-size: var(--p);
}

.Card.cta .or {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
    font-size: var(--p);
    font-variation-settings: "wght" 550;
}

footer {
    color: var(--neutral-200);
    border-top-left-radius: var(--space-sm);
    border-top-right-radius: var(--space-sm);
    padding: var(--space-xl);
    font-variation-settings: "wght" 500;
}