@font-face {
    font-family: "EB Garamond";
    font-style: normal;
    font-weight: 400 800;
    font-display: block;
    src: url(/public/ebgaramond.woff2) format("woff2");
}

@font-face {
    font-family: "EB Garamond";
    font-style: italic;
    font-weight: 400 800;
    font-display: block;
    src: url(/public/ebgaramond-italic.woff2) format("woff2");
}

@view-transition {
    navigation: auto;
}

:root {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    color: rgba(16, 16, 15, 0.9);
    text-wrap: balance;
}

hr {
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    height: 10px;
}

ul {
    text-align: center;
}

a {
    color: inherit;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    background-color: #fefaf4;
    background-image: url("/public/ging.svg");
    background-repeat: repeat;
    padding: clamp(16px, 4vw, 48px) 12px;
    max-width: 560px;
}

/* Two-up hero on wider screens: photo beside the invitation */
@media (min-width: 920px) {
    body.landing {
        max-width: 1000px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        column-gap: 28px;
    }
}

img {
    width: 100%;
}

.shadow {
    position: relative;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.12)) drop-shadow(0 8px 24px rgb(0 0 0 / 0.16));
}

.paper {
    background-color: #f5f5f4;
    background-image: url("/public/paper.jpg");
    background-size: 100px;
    background-repeat: repeat;
    padding: clamp(32px, 6vw, 60px);
    margin: 16px 8px 28px 8px;

    --r: 32px;

    mask: radial-gradient(var(--r) at var(--r) var(--r), transparent 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r));
}

.paper > :first-child {
    margin-top: 0;
}

.paper > :last-child {
    margin-bottom: 0;
}

.embossed {
    color: rgb(182 244 251 / 70%);
    text-shadow:
        0px -1px 0px rgba(147, 140, 128, 0.7),
        0px 1px 0px rgba(250, 250, 249, 0.3);
}

h1 {
    font-style: italic;
    text-align: center;
    font-weight: 400;
    font-size: 42px;
}

h2 {
    text-align: center;
    font-weight: 400;
    font-style: italic;
    font-size: 28px;
}

p,
label {
    text-align: center;
    display: block;
}

input {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
}

input[type="text"] {
    background: transparent;
    border: 0;
    font-size: 32px;
    font-style: italic;
    padding: 6px;

    border-bottom: 2px dashed rgba(0, 0, 0, 0.15);

    width: 100%;

    &:focus {
        outline: 0;
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 6px;
    }
}

.caps {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 20px;
}

input[type="submit"] {
    font-family: "EB Garamond", serif;
    font-size: 20px;
    color: inherit;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    background-color: rgba(0, 0, 0, 0.05);

    &:hover,
    &:focus {
        background-color: rgba(0, 0, 0, 0.15);
    }
}

#thistle {
    position: absolute;
    left: -51px;
    top: 10%;
    width: 180px;
}

main {
    view-transition-name: main;
}

::view-transition-old(main) {
    animation: unfurl-out 0.4s ease-in forwards;
}

::view-transition-new(main) {
    animation: unfurl-in 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2) forwards;
}

@keyframes unfurl-out {
    to {
        transform: scale(0.85) rotateZ(-6deg);
        opacity: 0;
    }
}

@keyframes unfurl-in {
    from {
        transform: scale(0.85) rotateZ(-6deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotateZ(0deg);
        opacity: 1;
    }
}