@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Caslon+Display&display=swap');
:root {
    color-scheme:light;
    --paper:#f3efe5;
    --ink:#284b43;
    --muted:#69776c;
    --gold:#b38a42;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'DM Sans',sans-serif;
    min-height:100svh;
    overflow-x:hidden;
}

body:before {
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.3;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.12' filter='url(%23n)'/%3E%3C/svg%3E");
}

header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:26px 6vw;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:2px;
}

header span:last-child {
    color:var(--muted);
}

main {
    max-width:900px;
    margin:auto;
    padding:44px 24px 30px;
    text-align:center;
}

.eyebrow {
    font-size:11px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--muted);
}

h1 {
    font-family:'Libre Caslon Display',Georgia,serif;
    font-size:clamp(54px,9vw,92px);
    font-weight:400;
    line-height:1.02;
    letter-spacing:-2px;
    margin:22px 0;
}

h1 em {
    font-weight:400;
    color:#698275;
}

.intro {
    font-size:15px;
    color:var(--muted);
    line-height:1.7;
    margin:0 auto 24px;
}

.envelope {
    display:block;
    position:relative;
    width:290px;
    height:182px;
    margin:50px auto 28px;
    border:0;
    border-radius:5px;
    background:#d5dfce;
    box-shadow:0 18px 45px #284b4315;
    cursor:pointer;
    transition:transform .3s;
    font:inherit;
    color:var(--ink);
}

.envelope:hover {
    transform:translateY(-7px) rotate(-2deg);
}

.envelope:before {
    content:'';
    position:absolute;
    inset:0;
    background:#bdcdb8;
    clip-path:polygon(0 0,100% 0,50% 65%);
}

.envelope:after {
    content:'';
    position:absolute;
    inset:0;
    background:#dce5d4;
    clip-path:polygon(0 100%,0 10%,50% 65%,100% 10%,100% 100%);
}

.seal {
    position:absolute;
    z-index:1;
    left:calc(50% - 24px);
    top:82px;
    background:var(--ink);
    color:var(--paper);
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:25px;
    box-shadow:0 3px 8px #284b4322;
}

.hint {
    font-size:12px;
    color:var(--muted);
}

.hint span {
    display:inline-block;
    margin-right:7px;
    color:var(--gold);
}

.letter {
    max-width:550px;
    margin:32px auto 0;
    background:#fffdf7;
    padding:38px 40px;
    border:2px solid var(--gold);
    border-radius:5px;
    box-shadow:0 16px 55px #284b430a;
    animation:appear .7s ease both;
}

.letter[hidden] {
    display:none;
}

.letter .star {
    color:var(--gold);
    font-size:30px;
}

h2 {
    font-family:'Libre Caslon Display',Georgia,serif;
    font-size:42px;
    font-weight:400;
    margin:12px 0 20px;
}

.message {
    font-size:17px;
    line-height:1.9;
    margin:0;
}

.signature {
    font-size:12px;
    color:var(--muted);
    margin-top:26px;
}

.again {
    border:0;
    border-bottom:1px solid #bfc8bb;
    background:none;
    color:var(--muted);
    padding:8px 0;
    margin-top:22px;
    cursor:pointer;
    font:inherit;
    font-size:12px;
}

.footer {
    margin:46px 0 12px;
    font-size:11px;
    letter-spacing:1px;
    color:var(--muted);
}

.sprig {
    position:fixed;
    bottom:-24px;
    right:-36px;
    width:240px;
    opacity:.18;
    pointer-events:none;
}

.confetti {
    position:fixed;
    top:-20px;
    width:7px;
    height:12px;
    pointer-events:none;
    animation:fall 2.8s ease-out forwards;
}

@keyframes appear {
    from {
        opacity:0;
        transform:translateY(22px);
    }

    to {
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes fall {
    to {
        transform:translate(var(--drift),110vh) rotate(540deg);
        opacity:0;
    }

}

:focus-visible {
    outline:3px solid var(--gold);
    outline-offset:6px;
}

@media(max-width:500px) {
    header {
        padding:22px;
        font-size:9px;
        letter-spacing:1.2px;
    }

    main {
        padding-top:42px;
    }

    h1 {
        font-size:62px;
    }

    .intro {
        font-size:14px;
    }

    .letter {
        padding:26px 23px;
    }

    .message {
        font-size:16px;
    }

    .sprig {
        width:160px;
    }

    .envelope {
        margin-top:42px;
        width:265px;
        height:170px;
    }

}

@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        animation:none!important;
        transition:none!important;
    }

    .confetti {
        display:none;
    }

}