@font-face {
    font-family: "Prata";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/collection-three/prata.woff2") format("woff2");
}

@font-face {
    font-family: "Parisienne";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/collection-three/parisienne.woff2") format("woff2");
}

:root {
    color-scheme: light;
    --sage: #e7ebe2;
    --evening-sage: #d3d9cf;
    --paper: #faf9f6;
    --ink: #26301f;
    --muted: #535d4c;
    --rule: #aab4a3;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--evening-sage);
}

body {
    min-width: 320px;
    margin: 0;
    overflow-x: clip;
    color: var(--ink);
    background: var(--paper);
    font-family: "Prata", Georgia, serif;
    font-size: 1.125rem;
    line-height: 1.4;
}

::selection {
    color: var(--ink);
    background: #edcccb;
}

a {
    color: inherit;
    text-underline-offset: 0.16em;
    text-decoration-thickness: 1px;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 5px;
}

.skip-link {
    position: absolute;
    z-index: 20;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.5rem 0.75rem;
    transform: translateY(-150%);
    background: var(--paper);
}

.skip-link:focus { transform: none; }

.site-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.5rem;
    padding: 1.5rem 1rem 0.75rem;
    background: var(--sage);
}

.site-header nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: clamp(1.75rem, 5vw, 5.5rem);
    row-gap: 0.35rem;
    text-align: center;
}

.site-header a {
    font-size: 1.125rem;
    letter-spacing: 0.025em;
    text-decoration: none;
}

.site-header a:hover { text-decoration: underline; }

.hero {
    position: relative;
    isolation: isolate;
    background: var(--paper);
}

h1, h2, p { margin-top: 0; }

.hero-heading { background: var(--sage); }

.hero h1 {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1rem 0.5rem;
    font-family: "Parisienne", Georgia, serif;
    font-size: clamp(5.25rem, 12vw, 11.75rem);
    font-weight: 400;
    line-height: 1.18;
    text-align: center;
    white-space: nowrap;
}

.shoreline {
    position: relative;
    z-index: 1;
}

.shoreline picture, .shoreline img {
    display: block;
    width: 100%;
}

.shoreline img {
    height: clamp(24rem, 44.5vw, 48rem);
    object-fit: cover;
    object-position: 50% 69%;
}

/* A single silk strand passes from sea and stone onto the paper. */
.shoreline::after {
    position: absolute;
    z-index: 2;
    top: calc(100% - 31.9rem);
    right: 0;
    width: 99.2rem;
    aspect-ratio: 1024 / 656;
    background: url("assets/collection-three/silk-and-sage-ribbon-lower-left.webp") center / contain no-repeat;
    content: "";
    mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
    pointer-events: none;
    transform: scaleX(-1);
}

.event-details {
    position: relative;
    z-index: 2;
    min-height: 38rem;
    padding: 3.5rem max(1.5rem, calc((100% - 1120px) / 2)) 11rem;
    font-size: clamp(1.55rem, 2.4vw, 2.05rem);
    line-height: 1.3;
}

.details-inner { max-width: 35rem; }
.event-details p { margin-bottom: 0.12em; }

.venue-block, .reception-block { margin-top: clamp(1.5rem, 3vw, 2.6rem); }

.venue-block::before, .reception-block::before {
    display: block;
    width: 3rem;
    height: 1px;
    margin-bottom: clamp(1.35rem, 2.7vw, 2.25rem);
    background: var(--rule);
    content: "";
}

.venue {
    max-width: 25rem;
    font-size: 1.12em;
    line-height: 1.06;
}

address {
    font-size: 0.78em;
    font-style: normal;
    line-height: 1.4;
}

.reception-block a {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.84em;
}
.reception-block a + a { margin-left: 1rem; }

.section-wave {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: clamp(7rem, 13vw, 11rem);
    fill: var(--evening-sage);
    pointer-events: none;
}

.song {
    position: relative;
    z-index: 4;
    min-height: 33rem;
    padding: 0 1.5rem 6rem;
    background: var(--evening-sage);
}

.song-inner { max-width: 1120px; margin: 0 auto; }

.song h2 {
    margin: -1.2rem 0 1rem;
    font-family: "Parisienne", Georgia, serif;
    font-size: clamp(4.25rem, 8.25vw, 7.5rem);
    font-weight: 400;
    line-height: 1.18;
    text-align: center;
}

.song form { max-width: 37rem; margin: 0 auto; }
.field + .field { margin-top: 1rem; }
.field label { display: block; margin-bottom: 0.18rem; font-size: 1.1rem; }
.cf-turnstile { margin-top: 1.4rem; }

.field input {
    display: block;
    width: 100%;
    min-height: 3.2rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid #85917e;
    border-radius: 4px;
    color: var(--ink);
    background: var(--paper);
    font: inherit;
    caret-color: var(--ink);
}

button {
    display: block;
    width: min(100%, 17rem);
    min-height: 3.2rem;
    margin: 1.4rem auto 0;
    border: 0;
    border-radius: 5px;
    color: #4d5a49;
    background: #e0e5dc;
    font: inherit;
    font-size: 1.2rem;
}

button:not(:disabled) {
    color: var(--paper);
    background: var(--ink);
    cursor: pointer;
}

button:disabled { cursor: not-allowed; }

.notice {
    margin: 1.2rem 0 0;
    color: var(--ink);
    font-size: 0.96rem;
    text-align: center;
}

@media (max-width: 900px) {
    .event-details { padding-bottom: 10rem; }
    .shoreline::after { width: 75rem; top: calc(100% - 25rem); }
}

@media (max-width: 760px) {
    .site-header { min-height: 0; padding: 0.7rem 0.8rem 0.4rem; }
    .site-header nav { gap: 0.2rem 1.2rem; }
    .site-header a { font-size: 0.95rem; }

    .hero h1 {
        padding: 0 0.55rem 0.3rem;
        font-size: clamp(2rem, 12vw, 5.2rem);
        line-height: 1.25;
        white-space: normal;
    }

    .shoreline img {
        height: auto;
        aspect-ratio: 1 / 1.05;
        object-fit: cover;
        object-position: 50% 65%;
    }

    .shoreline::after {
        top: calc(100% - min(35vw, 138px));
        right: 0;
        width: min(78vw, 304px);
    }

    .event-details {
        min-height: 0;
        padding: clamp(58px, 18vw, 76px) 1.5rem 7.5rem;
        font-size: clamp(1.35rem, 6vw, 1.95rem);
    }

    .details-inner { max-width: 29rem; margin: 0 auto; }
    .venue-block, .reception-block { margin-top: 1.5rem; }
    .venue-block::before, .reception-block::before { margin-bottom: 1.2rem; }
    .section-wave { height: 6rem; }
    .song { min-height: 0; padding: 0 1.15rem 5rem; }
    .song-inner { max-width: 29rem; }
    .song h2 { margin: -1.4rem 0 1rem; font-size: clamp(2.15rem, 14vw, 5.5rem); }
}

@media (max-width: 360px) {
    .site-header nav { column-gap: 0.75rem; }
    .site-header a { font-size: 0.9rem; }
    .event-details { padding-inline: 1.15rem; }
    .song { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}