:root {
    color-scheme: light;
    font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    font-synthesis: none;
    --ink: #17302e;
    --forest: #0b2d2a;
    --gold: #e3bd76;
    --paper: #f8f5ed;
    --muted: #607471;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6.5rem;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

body, button, input, select, textarea { font-family: inherit; }
::selection { color: #fff; background: #22615b; }
a, button { -webkit-tap-highlight-color: transparent; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid rgb(227 189 118 / 65%);
    outline-offset: 3px;
}

h1, h2, h3, p { text-wrap: pretty; }
h1:focus { outline: none; }

.shell {
    width: min(100% - 3rem, 82rem);
    margin-inline: auto;
}

.section { padding: clamp(5.5rem, 11vw, 10rem) 0; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: #102f2c;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    color: #f8f5ed;
    background: #0d3431;
    border-radius: .65rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 700;
}

.brand > span:last-child {
    display: grid;
    gap: .08rem;
}

.brand strong {
    font-size: .84rem;
    letter-spacing: .1em;
}

.brand small {
    color: #73837f;
    font-size: .57rem;
    font-weight: 650;
    letter-spacing: .03em;
}

.eyebrow {
    margin: 0;
    color: #9a6f2b;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.eyebrow--light { color: #e3bd76; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 3.6rem;
    padding: .8rem .9rem .8rem 1.4rem;
    border-radius: 100px;
    font-size: .8rem;
    font-weight: 850;
    text-decoration: none;
}

.button b {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
}

.button--gold { color: #0f302d; background: #e3bd76; }
.button--gold b { color: #fff; background: #0e3431; }
.button--dark { color: #fff; background: #0e3431; }
.button--dark b { color: #0e3431; background: #e3bd76; }

.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    color: #193b38;
    font-size: .8rem;
    font-weight: 850;
    text-decoration: none;
}

.arrow-link span {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    color: #0e3431;
    background: #e3bd76;
    border-radius: 50%;
}

.validation-message {
    margin-top: .3rem;
    color: #a53c32;
    font-size: .72rem;
}

.invalid:not([type="checkbox"]) { border-color: #b55248 !important; }

#blazor-error-ui {
    position: fixed;
    z-index: 1000;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: none;
    max-width: 42rem;
    margin: auto;
    padding: 1rem 3rem 1rem 1.2rem;
    color: #fff;
    background: #8d352f;
    border-radius: .75rem;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 25%);
}

#blazor-error-ui a { margin-left: .5rem; color: #fff; font-weight: 800; }
#blazor-error-ui .dismiss { position: absolute; top: .7rem; right: 1rem; cursor: pointer; font-size: 1.4rem; }

.app-loading {
    display: grid;
    place-items: center;
    min-height: 100vh;
    align-content: center;
    gap: 1.2rem;
    color: #f8f5ed;
    background: #0b2d2a;
}

.loading-mark {
    font-family: Georgia, serif;
    font-size: 4rem;
    font-style: italic;
}

.loading-line {
    width: min(16rem, 60vw);
    height: 2px;
    overflow: hidden;
    background: rgb(255 255 255 / 10%);
}

.loading-line span {
    display: block;
    width: 35%;
    height: 100%;
    background: #e3bd76;
    animation: load 1.4s ease-in-out infinite alternate;
}

.app-loading p {
    color: #78908b;
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .15em;
    text-transform: uppercase;
}

@keyframes load {
    from { transform: translateX(-100%); }
    to { transform: translateX(285%); }
}

@media (max-width: 620px) {
    .shell { width: min(100% - 2rem, 82rem); }
    .brand small { display: none; }
    .brand strong { font-size: .75rem; }
}

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