:root {
    color-scheme: light;
    font-family: Aptos, "Segoe UI", Arial, sans-serif;
    color: #3a4b30;
    background: #e9e5dc;
}

* { box-sizing: border-box; }

body { margin: 0; }

.page {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    justify-items: center;
    width: 100%;
    max-width: 1900px;
    min-height: 640px;
    min-height: max(640px, 100svh);
    margin-inline: auto;
    padding-inline: 24px;
    overflow: hidden;
    background: #ffffff;
    text-align: center;
}

.logo {
    display: block;
    width: min(100%, 580px);
    height: auto;
}

.message {
    align-self: start;
    max-width: 680px;
    padding-block: clamp(28px, 5vh, 48px) 72px;
}

.divider {
    display: block;
    width: 40px;
    height: 1px;
    margin: 0 auto 24px;
    background: #bf954b;
}

.eyebrow {
    margin: 0 0 14px;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .18em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    font-size: clamp(1.5rem, 3.3vw, 2.25rem);
    font-weight: 350;
    line-height: 1.25;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.description {
    margin: 18px 0 0;
    color: #57634f;
    font-size: .9375rem;
    line-height: 1.8;
    text-wrap: pretty;
}

.water {
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    width: 100%;
    height: clamp(70px, 12vh, 140px);
    pointer-events: none;
}

@media (min-width: 700px) {
    .page { padding-inline: 48px; }
}

@media (max-width: 420px) {
    .desktop-break { display: none; }
}

@media (min-width: 1901px) {
    .page {
        border-inline: 1px solid #d8d2c6;
        box-shadow: 0 0 32px #26362212;
    }
}

@media print {
    :root, .page { background: white; }
    .page { min-height: 90vh; border: 0; box-shadow: none; }
    .water { display: none; }
}