html,
body {
    min-height: 100%;
}

.home-hero {
    background: #f7f8f5;
    border-bottom: 1px solid rgba(24, 35, 28, .1);
}

.home-kicker {
    color: #5b684c;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-title {
    color: #17211b;
    font-size: clamp(2.1rem, 5vw, 4.25rem);
    line-height: 1;
}

.home-visual {
    aspect-ratio: 1;
    background: #ffffff;
    border: 1px solid rgba(24, 35, 28, .08);
    box-shadow: 0 20px 55px rgba(24, 35, 28, .12);
    max-width: 360px;
}

.membership-option {
    border: 1px solid rgba(24, 35, 28, .12);
    border-radius: 8px;
    color: #17211b;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.membership-option:hover,
.membership-option:focus {
    border-color: #5b684c;
    box-shadow: 0 16px 38px rgba(24, 35, 28, .12);
    color: #17211b;
    transform: translateY(-2px);
}

.membership-price {
    color: #8a641d;
    font-size: 1.55rem;
}

.home-panel {
    background: #ffffff;
    border: 1px solid rgba(24, 35, 28, .12);
    border-radius: 8px;
}

.home-muted {
    color: #5f675f;
}

.sdl-page,
.donation-page {
    --sdl-ink: #211f1d;
    --sdl-muted: #6a665f;
    --sdl-line: #e3e0d9;
    --sdl-bg: #fbfaf7;
    --sdl-surface: #ffffff;
    --sdl-accent: oklch(0.42 0.02 40);
    --sdl-track: #e9e6df;
    --sdl-serif: "Spectral", Georgia, "Times New Roman", serif;
    background: var(--sdl-bg);
    color: var(--sdl-ink);
    font-family: var(--sdl-serif);
    font-size: 1.075rem;
    font-weight: 400;
    line-height: 1.62;
    min-height: calc(100vh - 145px);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.sdl-page h1,
.sdl-page h2,
.sdl-page h3,
.donation-page h1,
.donation-page h2,
.donation-page h3 {
    color: var(--sdl-ink);
    font-family: var(--sdl-serif);
    font-weight: 500;
}

.text-sdl-muted {
    color: var(--sdl-muted) !important;
}

.sdl-h1 {
    font-weight: 400;
    letter-spacing: .005em;
    line-height: 1.14;
    max-width: 18ch;
}

.sdl-lead {
    color: var(--sdl-ink);
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.5;
}

.sdl-thanks {
    color: var(--sdl-ink);
    font-size: 1.16rem;
    font-style: italic;
    line-height: 1.5;
}

.sdl-maxw {
    max-width: 56ch;
}

.sdl-rule {
    border: 0;
    border-top: 1px solid var(--sdl-line);
    opacity: 1;
}

.sdl-why {
    border-top: 1px solid var(--sdl-line);
}

.sdl-card,
.donation-form-card {
    background: var(--sdl-surface);
    border: 1px solid var(--sdl-line);
    border-radius: 0;
    height: 100%;
    transition: border-color .2s ease;
}

.sdl-card {
    padding: 1.5rem;
}

.sdl-card:hover {
    border-color: var(--sdl-muted);
}

.sdl-card .sdl-card-title {
    font-size: 1.22rem;
    font-weight: 500;
    line-height: 1.28;
}

.sdl-card .sdl-card-text,
.donation-card__text {
    color: var(--sdl-muted);
    font-size: .99rem;
    line-height: 1.5;
}

.sdl-progress {
    background: var(--sdl-track);
    border-radius: 0;
    height: 3px;
    overflow: hidden;
}

.sdl-progress .sdl-bar {
    background: var(--sdl-accent);
    display: block;
    height: 100%;
}

.sdl-amount {
    font-size: .98rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sdl-amount strong {
    font-weight: 600;
}

.sdl-pct,
.sdl-funded {
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sdl-pct {
    color: var(--sdl-muted);
}

.sdl-funded {
    color: var(--sdl-accent);
    font-weight: 600;
}

.sdl-tbd {
    border-top: 1px solid var(--sdl-line);
    color: var(--sdl-muted);
    font-size: .92rem;
    font-style: italic;
    padding-top: .5rem;
}

.btn-sdl {
    --bs-btn-active-bg: #000;
    --bs-btn-bg: var(--sdl-ink);
    --bs-btn-border-color: var(--sdl-ink);
    --bs-btn-border-radius: 0;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-hover-color: #fff;
    font-weight: 500;
    letter-spacing: .01em;
}

.btn-sdl-outline {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--sdl-line);
    --bs-btn-border-radius: 0;
    --bs-btn-color: var(--sdl-ink);
    --bs-btn-hover-bg: var(--sdl-bg);
    --bs-btn-hover-border-color: var(--sdl-muted);
    --bs-btn-hover-color: var(--sdl-ink);
    font-weight: 500;
}

.sdl-footer {
    background: var(--sdl-surface);
    border-top: 1px solid var(--sdl-line);
    color: var(--sdl-muted);
    font-size: .95rem;
}

.sdl-footer a {
    color: var(--sdl-ink);
}

.sdl-tax-slot {
    border: 1px dashed var(--sdl-line);
    color: var(--sdl-muted);
    font-size: .82rem;
}

.donation-form-card {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.donation-back-link {
    color: var(--sdl-muted);
    display: inline-flex;
    font-weight: 500;
    gap: .45rem;
    margin-bottom: 1.5rem;
    text-decoration: none;
}

.donation-back-link:hover,
.donation-back-link:focus {
    color: var(--sdl-ink);
}

.donation-kicker {
    color: var(--sdl-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.donation-mini-goal {
    align-items: center;
    border-top: 1px solid var(--sdl-line);
    display: flex;
    justify-content: space-between;
    padding-top: .75rem;
}

.donation-mini-goal span {
    color: var(--sdl-muted);
    font-size: .9rem;
}

.donation-mini-goal strong {
    font-size: 1.1rem;
    font-weight: 600;
}

.donation-form-button,
.donation-button,
.donation-button--standalone {
    background: var(--sdl-ink);
    border: 1px solid var(--sdl-ink);
    border-radius: 0;
    color: #ffffff;
    display: inline-flex;
    font-weight: 500;
    justify-content: center;
    padding: .75rem 1.1rem;
    text-decoration: none;
}

.donation-form-button:hover,
.donation-form-button:focus,
.donation-button:hover,
.donation-button:focus,
.donation-button--standalone:hover,
.donation-button--standalone:focus {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}

.donation-success-icon {
    align-items: center;
    background: var(--sdl-bg);
    border: 1px solid var(--sdl-line);
    border-radius: 999px;
    color: var(--sdl-ink);
    display: flex;
    font-size: 2rem;
    height: 76px;
    justify-content: center;
    width: 76px;
}

@media (min-width: 992px) {
    .sdl-pt-lg {
        padding-top: 4.5rem !important;
    }
}