:root {
    color-scheme:dark;
    --coal:#170d0d;
    --blood:#aa302c;
    --red:#e45d4b;
    --cream:#f1e3c9;
    --ink:#2c201c;
    --muted:#8c6d5a;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    min-height:100dvh;
    background:radial-gradient(ellipse at 50% 6%,#48221d 0%,#241211 40%,#100b0b 84%);
    font-family:Georgia,'Times New Roman',serif;
    color:var(--cream);
    padding:20px 14px 45px;
}

body:before {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.13;
    background-image:repeating-linear-gradient(0deg,transparent 0 3px,#ffd8b4 4px 4.5px);
    z-index:5;
}

.page {
    max-width:560px;
    margin:auto;
}

.brand {
    text-align:center;
    margin:12px auto 20px;
}

.brand .crest {
    width:74px;
    height:74px;
    border:1px solid #935b4a;
    border-radius:50%;
    display:grid;
    place-items:center;
    margin:auto auto 12px;
    font-size:39px;
    color:#e77b5c;
    background:#281311;
    box-shadow:0 0 0 6px #221110,0 0 35px #832d2380;
}

.brand .name {
    font-family:Georgia,serif;
    letter-spacing:.10em;
    font-size:clamp(24px,6vw,36px);
    font-weight:bold;
    text-transform:uppercase;
}

.brand .tag {
    font:11px/1.5 system-ui,sans-serif;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#d0a594;
    margin-top:6px;
}

.ornament {
    margin:13px 0;
    color:#bf6c56;
    letter-spacing:.35em;
    text-align:center;
}

.paper {
    color:var(--ink);
    background:var(--cream);
    padding:clamp(23px,5vw,43px);
    position:relative;
    box-shadow:0 20px 70px #0009, inset 0 0 55px #c2a17835;
    border:1px solid #a77b59;
}

.paper:before,.paper:after {
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid #a7836b80;
    pointer-events:none;
}

.paper:after {
    inset:13px;
    border-color:#bda08740;
}

.serial {
    text-align:center;
    font:700 10px/1.6 system-ui,sans-serif;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#835b4b;
}

.sep {
    height:1px;
    background:#a7836b70;
    margin:20px 0;
}

.office {
    text-align:center;
    color:#6f332b;
    text-transform:uppercase;
    font:700 12px/1.5 system-ui,sans-serif;
    letter-spacing:.12em;
    margin-top:19px;
}

.paper h1 {
    font-size:clamp(31px,7vw,45px);
    line-height:1.08;
    text-align:center;
    margin:17px 0 14px;
    letter-spacing:-.025em;
}

.intro {
    text-align:center;
    font-size:17px;
    line-height:1.45;
    margin:0 auto 22px;
    max-width:34ch;
}

.button {
    display:block;
    width:100%;
    min-height:62px;
    background:#902821;
    border:2px solid #5c1b16;
    color:#fff0d8;
    font:700 14px/1.3 system-ui,sans-serif;
    letter-spacing:.075em;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:4px 5px 0 #bca085;
    transition:transform .12s,box-shadow .12s;
}

.button:hover {
    background:#ad332a;
}

.button:active {
    transform:translate(3px,4px);
    box-shadow:1px 1px 0 #bca085;
}

.button:focus-visible {
    outline:3px solid #e85d38;
    outline-offset:4px;
}

.button:disabled {
    opacity:.65;
    cursor:progress;
}

.smallprint {
    text-align:center;
    font:12px/1.5 system-ui,sans-serif;
    color:#795c4f;
    margin-top:18px;
}

.details {
    margin-top:25px;
    border-top:1px solid #ab8e75;
    border-bottom:1px solid #ab8e75;
    font:13px/1.5 system-ui,sans-serif;
}

.details>div {
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:10px 0;
    border-bottom:1px dotted #b69d88;
}

.details>div:last-child {
    border:0;
}

.details span:first-child {
    color:#745a4d;
}

.details span:last-child {
    text-align:right;
    font-weight:700;
}

.result {
    display:none;
    animation:appear .4s ease-out;
}

.result.show {
    display:block;
}

.stamp {
    border:5px double #a22c29;
    color:#9b2927;
    transform:rotate(-7deg);
    padding:12px 10px;
    margin:22px auto 27px;
    max-width:310px;
    text-align:center;
    text-transform:uppercase;
    font:900 clamp(18px,5vw,25px)/1.08 system-ui,sans-serif;
    letter-spacing:.04em;
    box-shadow:0 0 0 1px #9b2927 inset;
    animation:stamp .48s cubic-bezier(.19,1,.22,1) both;
}

.receipt {
    text-align:center;
    font-size:17px;
    line-height:1.5;
}

.receipt strong {
    color:#922a24;
}

.count {
    margin:24px 0 8px;
    background:#211311;
    padding:21px 15px;
    text-align:center;
    border:1px solid #6d3027;
    color:#efcfaa;
}

.count .count-label {
    text-transform:uppercase;
    font:700 10px/1.6 system-ui,sans-serif;
    letter-spacing:.19em;
    color:#d7a08e;
}

.count output {
    display:block;
    font:700 clamp(45px,12vw,69px)/1.1 Georgia,serif;
    color:#fa7b5c;
    margin:7px 0 4px;
    font-variant-numeric:tabular-nums;
}

.count .unit {
    font:12px/1.5 system-ui,sans-serif;
    color:#edc6b1;
}

.count .note {
    font:11px/1.5 system-ui,sans-serif;
    color:#c7a29a;
    margin-top:6px;
}

.legal {
    text-align:center;
    font:11px/1.5 system-ui,sans-serif;
    color:#977766;
    margin-top:17px;
}

.footer {
    text-align:center;
    font:10px/1.8 system-ui,sans-serif;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#b88b7a;
    margin:24px 0 0;
}

.error {
    color:#9a2a20;
    font:13px/1.5 system-ui,sans-serif;
    text-align:center;
    margin-top:12px;
}

.secondary {
    margin:17px auto 0;
    display:block;
    border:0;
    background:transparent;
    text-decoration:underline;
    text-underline-offset:3px;
    color:#7d3830;
    cursor:pointer;
    font:13px system-ui,sans-serif;
}

@keyframes stamp {
    0% {
        transform:rotate(-7deg) scale(2.2);
        opacity:0;
    }
    80% {
        opacity:1;
    }
    100% {
        transform:rotate(-7deg) scale(1);
    }
}

@keyframes appear {
    from {
        opacity:0;
        transform:translateY(10px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

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

@media(max-width:380px) {
    .paper {
        padding:20px;
    }
    .brand .tag {
        letter-spacing:.10em;
    }
}