@font-face {
    font-family: Aboreto;
    src: url("../fonts/aboreto-regular.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: Satoshi;
    src: url("../fonts/satoshi-regular.woff2") format("woff2");
    font-display: swap;
}
:root {
    --cream: #f6f3eb;
    --burgundy: #8b1920;
    --ink: #0a0a0a;
    --monogram-scale: .6;
    --float-distance: -53.333px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); }
img { display: block; }

.hero {
    height: auto;
    overflow: clip;
    background: var(--cream);
}
.hero-layout {
    position: relative;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(14px, 4.5vh, 38px);
    padding: 32px 32px 80px;
}
/* Empty space below the title belongs to the original composition. */
.hero-layout::after { content: ""; flex: 0 0 24px; }
.paper, .particles {
    position: absolute;
    left: 4.54167%;
    top: 4.52128%;
    width: 91%;
    height: 91%;
}
.paper {
    background: #f7f7f7;
    mix-blend-mode: multiply;
    transform: translate(var(--paper-x, 0px), var(--paper-y, 0px)) scale(1.1);
    transition: transform .3s ease-out;
    pointer-events: none;
}
.paper-tint {
    position: absolute;
    z-index: 1;
    left: 4.54167%;
    top: calc(49.8936% - 45.3192vh);
    width: 91%;
    height: 90.6383vh;
    background: #f6f3ea;
    filter: contrast(1.25) hue-rotate(27deg) saturate(2);
    mix-blend-mode: multiply;
}
.monogram {
    flex: 0 1 auto;
    min-height: 0;
    max-width: 100%;
    height: 55.125vh;
    aspect-ratio: 1546 / 2702;
    position: relative;
    transform: scale(var(--monogram-scale));
}
.monogram img, .wordmark { width: 100%; height: 100%; object-fit: contain; }
.wordmark { position: relative; flex: none; height: 74px; transform: scale(1.3); }
h1 { position: relative; margin: 0; font: 400 27px/1.2 Aboreto, serif; white-space: pre; }

/* In-flow spacing protects the seal even when the viewport is very short. */
.footer {
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    gap: clamp(24px, 4vmin, 48px);
    min-height: 53.375vh;
    padding: clamp(32px, 6vmin, 72px) clamp(20px, 5vw, 64px)
             max(24px, env(safe-area-inset-bottom));
    color: var(--cream);
    background: var(--burgundy);
}
.seal-area {
    width: min(100%, clamp(104px, 24vmin, 244px));
    align-self: center;
}
.seal-area img {
    width: 100%;
    height: auto;
}
.credits {
    width: min(100%, 1312px);
    margin: 0;
    font: 400 15px/1.4 Satoshi, sans-serif;
    overflow-wrap: anywhere;
}

@media (max-width: 1199.98px) {
    :root { --monogram-scale: .5; --float-distance: -64px; }
}
@media (max-width: 809.98px) {
    .hero { height: auto; }
    .hero-layout { padding-bottom: clamp(36px, 13.3vh, 112px); }
    .paper-tint, .particles { display: none; }
    .wordmark { height: 45px; }
    h1 { font-size: 21px; }
    .footer { min-height: auto; }
    .credits { text-align: center; font-size: 12px; }
}
/* Short landscape screens need enough room for the title and both marks. */
@media (max-height: 560px) {
    .hero-layout { gap: 14px; padding: 12px 24px 18px; }
    .hero-layout::after { flex-basis: 4px; }
    .wordmark { height: min(45px, 11vh); }
}
@media (prefers-reduced-motion: no-preference) {
    .monogram { animation: arrive 1.6s .4s cubic-bezier(0,.5,.5,1) backwards; }
    .monogram img { animation: float 5s 1s ease-in-out infinite alternate; }
    .letter {
        display: inline-block;
        animation: letter-in 1.6s calc(2s + var(--order) * .1s) cubic-bezier(.2,.7,.2,1) backwards;
    }
}
@keyframes arrive {
    from { opacity: .001; transform: translateY(-250px) scale(1); }
    to { opacity: 1; transform: scale(var(--monogram-scale)); }
}
@keyframes float { to { transform: translateY(var(--float-distance)); } }
@keyframes letter-in {
    from { opacity: 0; filter: blur(15px); transform: translate(45px,45px) skew(-45deg,-15deg); }
    to { opacity: 1; filter: blur(0); transform: none; }
}

/* The reference keeps the system pointer and adds a spring-following accent. */
.cursor-accent {
    position: fixed;
    z-index: 13;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border: 1px solid var(--cream);
    border-radius: 50%;
    background: var(--burgundy);
    pointer-events: none;
}