@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Montserrat:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700&display=swap');

:root {
    --font-sans: 'Montserrat', Arial, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-hand: 'Caveat', cursive;
    --paper: #f6efe4;
    --paper-deep: #eadfce;
    --ink: #1d140f;
    --muted: #746158;
    --brown: #6b1d0f;
    --brown-2: #8b3526;
    --red: #b7382b;
    --line: rgba(42, 25, 17, 0.28);
    --shadow: 0 18px 40px rgba(65, 36, 20, 0.14);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    font-family: var(--font-sans);
    color: var(--ink);
    background: #e9dfd1;
    line-height: 1.5;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

img {
    display: block;
    max-width: 100%;
}

button {
    cursor: pointer;
}

.invite-shell {
    width: min(100%, 430px);
    margin: 0 auto;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 24% 8%, rgba(255, 255, 255, 0.65), transparent 22%),
        linear-gradient(180deg, #fbf6ee 0%, var(--paper) 45%, #f7f0e6 100%);
    box-shadow: 0 0 32px rgba(30, 18, 12, 0.18);
}