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

:root {
    /* Easing — natural settle (quick start, smooth finish) */
    --ease-out: cubic-bezier(0.33, 1, 0.2, 1);

    --serif: 'Averia Serif Libre', serif;
    --script: 'La Belle Aurore', cursive;
    --mono: 'Geist Mono', monospace;
    --sans: 'Geist', sans-serif;

    /*
     * Color system — moodboard palette
     * rose · sea · gold / cream (+ silk cool)
     */
    --rose: hsl(355, 28%, 72%);
    --coral: hsl(358, 42%, 48%);
    --sea: hsl(167, 22%, 55%);
    --sea-deep: hsl(167, 28%, 34%);
    --gold: hsl(41, 92%, 68%);
    --cream: hsl(35, 33%, 93%);
    --silk: hsl(200, 16%, 88%);
    /* Sky — dock lip + night-surface companion text */
    --sky-light: hsl(198, 55%, 82%);
    --sky: hsl(200, 48%, 68%);
    --sky-deep: hsl(205, 38%, 48%);
    --night-accent: color-mix(in srgb, var(--sky) 58%, var(--ivory) 42%);
    --night-accent-muted: color-mix(in srgb, var(--sky) 42%, var(--ivory) 58%);

    /* Semantic surfaces — hex so theme-color + dock share one paint */
    --navy: #050b16;
    --linen-scene-mix: 0;
    --ivory: hsl(33, 45%, 93%);
    --linen: var(--cream);

    /* Ink on light surfaces */
    --ink: hsl(210, 28%, 22%);
    --ink-soft: hsl(210, 16%, 36%);
    --ink-muted: hsl(210, 12%, 46%);
    --rule: color-mix(in srgb, var(--sea-deep) 55%, var(--ink-muted) 45%);

    /*
     * Interaction model
     * ─ Rest / primary:  --accent (teal)
     * ─ Interactive:     --coral (hover, active, open, focus rings)
     * ─ Fields:          --field-bg / --field-border (cream chapters; color-scheme: light)
     */
    --accent: var(--sea-deep);
    --link: var(--accent);
    --link-hover: var(--coral);
    --field-bg: color-mix(in srgb, var(--cream) 94%, white);
    --field-border: color-mix(in srgb, var(--ink-muted) 28%, transparent);
    --focus-ring: color-mix(in srgb, var(--coral) 28%, transparent);
    --hover-wash: color-mix(in srgb, var(--rose) 22%, transparent);
    --error: hsl(0, 45%, 42%);

    /* Section surfaces — clearer tint steps between linen chapters */
    --surface-celebrations: color-mix(in srgb, var(--cream) 93%, var(--rose) 7%);
    --surface-travel: color-mix(in srgb, var(--cream) 90%, var(--sea) 10%);
    --surface-faq: color-mix(in srgb, var(--cream) 91%, var(--silk) 9%);
    --surface-contact: color-mix(in srgb, var(--cream) 92%, var(--gold) 8%);

    /* Layout */
    --measure: 48rem;
    --measure-content: 40rem;
    --page-gutter: clamp(1.25rem, 5vw, 3rem);
    --nav-inline: var(--page-gutter);
    --nav-sidebar: 11.5rem;
    --sticky-dock-height: 5.25rem;
    --dock-wave-lip: 36px;

    /* Spacing — one rhythm across chapters */
    --section-y: clamp(4.25rem, 9vh, 7rem);
    --section-y-compact: clamp(3.25rem, 7vh, 5rem);
    --block-gap: clamp(3.25rem, 8vh, 5.5rem);
    --stack-sm: 0.75rem;
    --stack-md: 1.25rem;
    --stack-lg: 2rem;

    /*
     * Type roles (size) — robust, not cumbersome
     * label → ui → body → lead → title → title-lg → headline → display → script
     * Families: serif (story), sans (linen UI), mono (labels/CTAs), script (signature)
     */
    --text-label: 0.75rem;
    --text-ui: clamp(0.8rem, 0.7rem + 0.5vw, 0.95rem);
    --text-body: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lead: clamp(1.25rem, 1.1rem + 0.9vw, 1.5rem);
    --text-title: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
    --text-title-lg: clamp(1.85rem, 1.5rem + 1.6vw, 2.5rem);
    --text-headline: clamp(1.75rem, 1.5rem + 1.2vw, 2.4rem);
    --text-display: clamp(1.25rem, 0.7rem + 4vw, 3.5rem);
    --text-script: clamp(1.45rem, 3.6vw, 2rem);

    /* Line height — flat (single-line) · tight · snug · body · loose */
    --lh-flat: 1;
    --lh-tight: 1.25;
    --lh-snug: 1.35;
    --lh-normal: 1.5;
    --lh-relaxed: 1.6;
    --lh-loose: 1.75;
    --lh-body: var(--lh-relaxed);

    /* Tracking — tight (sans micro) · body (serif) · caps (mono uppercase) */
    --track-tight: 0.01em;
    --track-body: 0.02em;
    --track-caps: 0.1em;
}

::selection {
    background: color-mix(in srgb, var(--sea) 45%, transparent);
    color: inherit;
}

::-moz-selection {
    background: color-mix(in srgb, var(--sea) 45%, transparent);
    color: inherit;
}

html {
    font-size: 1rem;
    scroll-behavior: auto;
    scroll-padding-top: 5.5rem;
    overflow-x: clip;
    overscroll-behavior-x: none;
    touch-action: manipulation;
    color-scheme: dark;
    background-color: var(--navy);
}

body {
    background-color: var(--navy);
    color: var(--ivory);
    font-family: var(--serif);
    overflow-x: clip;
    overscroll-behavior-x: none;
    touch-action: manipulation;
}

/* Star ring cursor — desktop / fine pointer only */
@media (hover: hover) and (pointer: fine) {
    body,
    body * {
        cursor: url("src/assets/cursor-ring.svg") 12 12, auto;
    }

    a,
    button,
    [role="button"],
    label[for],
    select,
    summary,
    .calendar-dropdown-option,
    .address-suggestion {
        cursor: url("src/assets/cursor-ring-active.svg") 14 14, pointer;
    }

    input,
    textarea,
    [contenteditable="true"] {
        cursor: text;
    }
}

#canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#sea-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

#transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 2;
    /* Sky-blue curves up from bottom — radial, diffuse, whisper-soft */
    background: radial-gradient(
        ellipse 180% 120% at 50% 118%,
        hsla(200, 22%, 12%, 0.12) 0%,
        hsla(200, 20%, 11%, 0.07) 25%,
        hsla(200, 18%, 10.5%, 0.04) 45%,
        hsla(200, 16%, 10%, 0.02) 65%,
        transparent 85%
    );
    background-size: 100% 200%;
    background-position: 50% 0%;
    animation: teal-gradient-drift 20s ease-in-out infinite;
    opacity: 0;
    pointer-events: none;
}

@keyframes teal-gradient-drift {
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 0% 50%; }
}


#site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 1.1rem var(--nav-inline) 1rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    pointer-events: none;
    background: transparent;
    transition: padding 0.35s var(--ease-out);
}

#site-nav::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5.5rem;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(2,8,16,0.55) 0%, rgba(2,8,16,0) 100%);
    transition: background 0.3s var(--ease-out), backdrop-filter 0.3s var(--ease-out), height 0.35s var(--ease-out);
}

#site-nav .nav-bar,
#site-nav .nav-linen-cluster,
#site-nav .nav-brand,
#site-nav .nav-linen-links,
#site-nav button {
    pointer-events: auto;
}

.nav-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
    width: 100%;
    /* Keep brand Y stable when Save the Date hides on linen (48px = touch target) */
    min-height: 48px;
}

#site-nav .nav-brand,
#site-nav button,
#site-nav a {
    transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}

#site-nav .nav-brand {
    font-family: var(--serif);
    font-size: var(--text-body);
    font-weight: 300;
    letter-spacing: var(--track-body);
    line-height: var(--lh-tight);
    color: var(--ivory);
    text-decoration: none;
    justify-self: start;
}

/* Keep “& Andrew” together so wraps read: Madeleine / & Andrew */
#site-nav .nav-brand-pair {
    white-space: nowrap;
}

/*
 * Linen desktop: left sidebar — Dear + vertical links.
 * Left edge matches brand; sits under brand with breathing room.
 */
.nav-linen-cluster {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.15rem;
    width: max-content;
    max-width: var(--nav-sidebar);
    text-align: left;
}

#site-nav.is-linen .nav-linen-cluster:not([hidden]) {
    display: flex;
}

@media (min-width: 721px) {
    #site-nav.is-linen .nav-linen-cluster:not([hidden]) {
        position: fixed;
        left: var(--nav-inline);
        top: 4.75rem;
        transform: none;
        margin: 0;
    }

    #site-nav.is-linen .nav-dear:not([hidden]) {
        display: block !important;
    }
}

.nav-dear {
    display: none;
    position: relative;
    margin: 0 0 0.55rem;
    padding: 0.85rem 0 0;
    font-family: var(--serif);
    font-size: var(--text-body);
    font-weight: 300;
    font-style: italic;
    letter-spacing: var(--track-tight);
    line-height: var(--lh-snug);
    color: var(--ink);
    opacity: 0.82;
}

.nav-dear::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2.1rem;
    height: 1px;
    background: color-mix(in srgb, var(--ink) 28%, transparent);
}

/* Monogram stub — mobile linen only for now; swap for a logo later */
.nav-monogram {
    display: none;
    font-family: var(--serif);
    font-size: var(--text-body);
    font-weight: 300;
    font-style: normal;
    letter-spacing: var(--track-caps);
    line-height: var(--lh-flat);
    color: var(--ink);
    text-decoration: none;
    opacity: 0.9;
}

#site-nav.is-linen .nav-dear:not([hidden]) {
    display: block;
}

.nav-linen-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

#site-nav.is-linen .nav-linen-links:not([hidden]) {
    display: flex;
}

.nav-linen-links a {
    font-family: var(--sans);
    font-size: var(--text-ui);
    font-weight: 400;
    letter-spacing: var(--track-body);
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.48;
}

.nav-linen-links a:hover,
.nav-linen-links a:focus-visible {
    opacity: 1;
    color: var(--coral);
}

.nav-linen-links a.is-active {
    opacity: 1;
    color: var(--coral);
    font-weight: 500;
    pointer-events: none;
    cursor: default;
}

/* Mid widths: drop Dear first, tighten sidebar, keep links clear of content */
@media (min-width: 721px) and (max-width: 1100px) {
    :root {
        --nav-sidebar: 8.5rem;
    }

    #site-nav.is-linen .nav-dear {
        display: none !important;
    }

    #site-nav.is-linen .nav-linen-cluster:not([hidden]) {
        top: 4.35rem;
        gap: 0.45rem;
    }

    .nav-linen-links a {
        font-size: var(--text-label);
    }
}

/* Linen: Save the Date goes away */
#site-nav.is-linen #nav-save-the-date {
    display: none;
}

.nav-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--ivory);
    cursor: pointer;
    justify-self: end;
    -webkit-tap-highlight-color: transparent;
}

.nav-hamburger-box {
    position: relative;
    display: block;
    width: 1.15rem;
    height: 0.85rem;
}

.nav-hamburger-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.25s var(--ease-out), opacity 0.2s ease, top 0.25s var(--ease-out);
}

.nav-hamburger-line:nth-child(1) { top: 0; }
.nav-hamburger-line:nth-child(2) { top: 50%; margin-top: -0.75px; }
.nav-hamburger-line:nth-child(3) { bottom: 0; top: auto; }

#site-nav.is-nav-open .nav-hamburger-line:nth-child(1) {
    top: 50%;
    margin-top: -0.75px;
    transform: rotate(45deg);
}

#site-nav.is-nav-open .nav-hamburger-line:nth-child(2) {
    opacity: 0;
}

#site-nav.is-nav-open .nav-hamburger-line:nth-child(3) {
    top: 50%;
    bottom: auto;
    margin-top: -0.75px;
    transform: rotate(-45deg);
}

/* Soft fade on the top strip only — not a hard opaque bar */
#site-nav.is-light::before {
    height: 5.75rem;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--cream) 78%, transparent) 0%,
        color-mix(in srgb, var(--cream) 32%, transparent) 55%,
        transparent 100%
    );
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
}

#site-nav.is-nav-compact.is-light::before {
    height: 4.75rem;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--cream) 82%, transparent) 0%,
        color-mix(in srgb, var(--cream) 28%, transparent) 55%,
        transparent 100%
    );
}

#site-nav.is-nav-compact {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

#site-nav.is-light .nav-brand {
    color: var(--ink);
}

#site-nav.is-light #nav-save-the-date {
    border-color: color-mix(in srgb, var(--ink-muted) 35%, transparent);
    color: var(--ink);
}

#site-nav.is-light .nav-hamburger {
    color: var(--ink);
}

#nav-save-the-date {
    background: transparent;
    border: 1px solid hsla(33, 25%, 85%, 0.3);
    color: var(--ivory);
    padding: 0.5rem 1.25rem 0.45rem;
    border-radius: 9999px;
    font-family: var(--mono);
    font-size: var(--text-label);
    font-weight: 300;
    letter-spacing: var(--track-caps);
    line-height: var(--lh-flat);
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
    justify-self: end;
}

#nav-save-the-date:focus-visible,
.nav-hamburger:focus-visible {
    outline: 2px solid hsla(33, 25%, 85%, 0.7);
    outline-offset: 3px;
}

#site-nav.is-light #nav-save-the-date:focus-visible,
#site-nav.is-light .nav-hamburger:focus-visible {
    outline-color: color-mix(in srgb, var(--ink) 50%, transparent);
}


main {
    position: relative;
    z-index: 3;
}

section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--section-y) var(--page-gutter);
}

#scene-1 {
    min-height: 0;
    position: relative;
    display: block;
    padding: 0;
}

#scene-1::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.09;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23g)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 250px 250px;
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

/* Tall scroll stage: hero dwell → crossfade → story dwell */
.scene-1-stage {
    min-height: 220vh;
    position: relative;
}

.scene-1-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    overflow: hidden;
}

/* Ghosted memory — dissolves into the starfield; bottom edge is a ripped-paper deckle mask */
.story-memory {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-mask-image:
        radial-gradient(
            ellipse 78% 88% at 28% 48%,
            #000 22%,
            rgba(0, 0, 0, 0.75) 52%,
            rgba(0, 0, 0, 0.35) 78%,
            transparent 96%
        ),
        url("src/assets/story-memory-deckle.svg?v=2");
    mask-image:
        radial-gradient(
            ellipse 78% 88% at 28% 48%,
            #000 22%,
            rgba(0, 0, 0, 0.75) 52%,
            rgba(0, 0, 0, 0.35) 78%,
            transparent 96%
        ),
        url("src/assets/story-memory-deckle.svg?v=2");
    -webkit-mask-size: 100% 100%, 100% 100%;
    mask-size: 100% 100%, 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.story-memory picture,
.invite-memory picture {
    display: block;
    width: 100%;
    height: 100%;
}

.story-memory::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 78% 72% at 26% 55%,
            hsla(217, 64%, 8%, 0.06) 0%,
            hsla(217, 64%, 6%, 0.35) 48%,
            hsla(217, 64%, 5%, 0.88) 100%
        ),
        linear-gradient(
            to bottom,
            hsla(217, 64%, 6%, 0.35) 0%,
            hsla(217, 50%, 8%, 0.08) 50%,
            hsla(217, 64%, 5%, 0.1) 88%,
            hsla(217, 64%, 5%, 0.25) 100%
        );
    mix-blend-mode: multiply;
}

.hero-stack,
.story-stack {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 var(--page-gutter);
    max-width: none;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Whole stack hidden until one intro fade — avoids per-line pop/flash */
.hero-stack {
    opacity: 0;
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .hero-stack {
        opacity: 1;
        visibility: visible;
    }
}

.story-stack {
    /* Optical middle between nav and dock — same idea as the invite pin */
    padding-top: calc(3.25rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(
        var(--sticky-dock-height, 4.5rem)
        + env(safe-area-inset-bottom, 0px)
        + 1.5rem
    );
}

.story-stack-shift {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
}

.story-stack .scene-2-body {
    max-width: none;
    text-shadow:
        0 0 24px hsla(217, 64%, 4%, 0.85),
        0 1px 2px hsla(217, 64%, 4%, 0.7);
}

#scene-2 {
    position: relative;
    z-index: 1;
    display: block;
    padding: 0;
}

/* Reddish sky runway — invite holds, then linen covers */
.scene-2-runway {
    /* Reveal + dwell + ~100svh overlap for linen takeover */
    min-height: 240vh;
    position: relative;
}

.scene-2-invite-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 var(--page-gutter);
    /* Optical middle: clear nav above + dock/wave below */
    padding-top: calc(3.25rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(
        var(--sticky-dock-height, 4.5rem)
        + env(safe-area-inset-bottom, 0px)
        + 1.25rem
    );
    z-index: 1;
    overflow: hidden;
}

/* Ghosted ring memory — ambient veil over the starfield; copy stays on top */
.invite-memory {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-mask-image:
        radial-gradient(
            ellipse 72% 70% at 50% 58%,
            #000 8%,
            rgba(0, 0, 0, 0.55) 38%,
            rgba(0, 0, 0, 0.18) 62%,
            transparent 82%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.45) 14%,
            #000 32%,
            #000 68%,
            rgba(0, 0, 0, 0.35) 86%,
            transparent 100%
        );
    mask-image:
        radial-gradient(
            ellipse 72% 70% at 50% 58%,
            #000 8%,
            rgba(0, 0, 0, 0.55) 38%,
            rgba(0, 0, 0, 0.18) 62%,
            transparent 82%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.45) 14%,
            #000 32%,
            #000 68%,
            rgba(0, 0, 0, 0.35) 86%,
            transparent 100%
        );
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.invite-memory-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 46%;
    /* Slightly lifted so it still reads at ambient opacity */
    filter: brightness(0.88) saturate(0.7) contrast(1.04);
}

.story-memory-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Shoes clear the dock; deckle mask tears just above it */
    object-position: 20% 92%;
    filter: brightness(0.58) saturate(0.62) contrast(1.1);
}

.invite-memory::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Soft reading well for type — keep light so stars stay visible */
        radial-gradient(
            ellipse 65% 50% at 50% 38%,
            hsla(217, 50%, 5%, 0.28) 0%,
            hsla(350, 30%, 8%, 0.1) 48%,
            transparent 78%
        ),
        radial-gradient(
            ellipse 100% 95% at 50% 55%,
            transparent 0%,
            hsla(217, 55%, 4%, 0.18) 70%,
            hsla(217, 55%, 4%, 0.35) 100%
        );
    mix-blend-mode: multiply;
    pointer-events: none;
}

.invite-sparkles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

.scene-2-invite {
    position: relative;
    z-index: 2;
    max-width: 44rem;
    width: 100%;
    margin: 0 auto;
}

.scene-2-invite-dear,
.scene-2-invite-rule,
.scene-2-invite-body {
    opacity: 0;
}

/* Greeting — hero-scale ivory call */
.scene-2-invite-dear {
    font-family: var(--serif);
    font-size: var(--text-headline);
    font-style: italic;
    font-weight: 300;
    letter-spacing: var(--track-body);
    line-height: var(--lh-snug);
    color: var(--ivory);
    margin: 0 0 0.85rem;
    text-shadow:
        0 0 28px hsla(217, 50%, 4%, 0.75),
        0 1px 2px hsla(217, 50%, 4%, 0.55);
}

/* Sky companion — three intentional invite lines */
.scene-2-invite-body {
    font-family: var(--serif);
    font-size: var(--text-lead);
    font-style: italic;
    font-weight: 300;
    letter-spacing: var(--track-body);
    line-height: var(--lh-snug);
    color: var(--night-accent);
    margin: 0 0 1rem;
    text-shadow:
        0 0 24px hsla(217, 50%, 4%, 0.7),
        0 1px 2px hsla(217, 50%, 4%, 0.45);
}

.invite-line {
    display: block;
}

.invite-line + .invite-line {
    margin-top: 0.12em;
}

.scene-2-invite-rule {
    border: none;
    width: 2.25rem;
    height: 1.5px;
    background: color-mix(in srgb, var(--sky) 50%, transparent);
    margin: 0 auto 1.5rem;
    transform-origin: 50% 50%;
}

.invite-continue {
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0.35rem auto 0;
    padding: 0.65rem;
    border: none;
    background: transparent;
    color: color-mix(in srgb, var(--sky-light) 72%, transparent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease-out), color 0.2s ease;
}

.invite-continue.is-visible {
    display: inline-flex;
    opacity: 1;
    pointer-events: auto;
}

.invite-continue:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--sky) 55%, transparent);
    outline-offset: 3px;
    border-radius: 999px;
}

.invite-continue-chevron {
    width: 1.35rem;
    height: 1.35rem;
    animation: chevron-drift 2s ease-in-out infinite;
}

@media (max-width: 720px) {
    .scene-2-invite-sticky {
        padding-inline: max(0.75rem, calc(var(--page-gutter) - 0.4rem));
    }

    .scene-2-invite {
        max-width: min(100%, 22rem);
        width: 100%;
        margin-inline: auto;
    }

    .scene-2-invite-dear {
        margin-bottom: 0.95rem;
    }

    .scene-2-invite-body {
        color: var(--sky);
        margin-bottom: 1rem;
    }

    .scene-2-invite-rule {
        margin-bottom: 1.35rem;
    }
}

@media (max-width: 480px) {
    .story-stack {
        padding-top: calc(4.25rem + env(safe-area-inset-top, 0px));
        padding-bottom: calc(
            var(--sticky-dock-height, 4.75rem)
            + env(safe-area-inset-bottom, 0px)
            + 1.5rem
        );
    }

    .scene-2-invite-sticky {
        align-items: center;
        justify-content: center;
        padding-top: calc(4.25rem + env(safe-area-inset-top, 0px));
        padding-bottom: calc(
            var(--sticky-dock-height, 4.75rem)
            + env(safe-area-inset-bottom, 0px)
            + 1.5rem
        );
    }

    .invite-memory-img {
        /* Keep the ring present in the lower half — ambient, not cropped away */
        object-position: 50% 54%;
    }

    .invite-memory::after {
        background:
            radial-gradient(
                ellipse 78% 46% at 50% 28%,
                hsla(217, 55%, 4%, 0.5) 0%,
                hsla(217, 50%, 5%, 0.22) 44%,
                transparent 72%
            ),
            radial-gradient(
                ellipse 100% 95% at 50% 55%,
                transparent 0%,
                hsla(217, 55%, 4%, 0.18) 72%,
                hsla(217, 55%, 4%, 0.36) 100%
            );
    }

    .scene-2-invite {
        margin-top: 0;
    }

    .invite-continue {
        margin-top: 0.1rem;
    }
}

.scene-linen {
    position: relative;
    z-index: 4;
    background: var(--linen);
    color-scheme: light;
    color: var(--ink);
    /* Gutter lives on .scene-inner — avoid double horizontal inset */
    padding-block: var(--section-y);
    padding-inline: 0;
    isolation: isolate;
}

/* Paper fiber — faint pulp grain across every linen sheet */
.scene-linen::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.07;
    mix-blend-mode: multiply;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23p)' opacity='0.55'/%3E%3C/svg%3E");
    background-repeat: repeat, repeat;
    background-size: 220px 220px, 420px 420px;
}

/* Soft paper falloff — sheets aren’t lit evenly edge-to-edge */
.scene-linen::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 115% 85% at 50% -10%, hsla(30, 28%, 52%, 0.07), transparent 52%),
        radial-gradient(ellipse 100% 70% at 50% 110%, hsla(28, 22%, 48%, 0.06), transparent 55%),
        linear-gradient(
            to right,
            hsla(30, 20%, 45%, 0.045),
            transparent 12%,
            transparent 88%,
            hsla(30, 20%, 45%, 0.045)
        );
    mix-blend-mode: multiply;
}

/*
 * Keep fiber/vignette out of deckle zones so canvas waves
 * (flat section color) and the sheet body share one seamless face.
 */
.scene-linen:has(> .scene-wave:not(.scene-wave--bottom))::before,
.scene-linen:has(> .scene-wave:not(.scene-wave--bottom))::after {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        transparent 48px,
        #000 110px
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        transparent 48px,
        #000 110px
    );
}

.scene-linen:has(> .scene-wave--bottom)::before,
.scene-linen:has(> .scene-wave--bottom)::after {
    -webkit-mask-image: linear-gradient(
        to top,
        transparent 0,
        transparent 48px,
        #000 110px
    );
    mask-image: linear-gradient(
        to top,
        transparent 0,
        transparent 48px,
        #000 110px
    );
}

/* Sections with both top + bottom waves need fiber in the middle only */
.scene-linen:has(> .scene-wave:not(.scene-wave--bottom)):has(> .scene-wave--bottom)::before,
.scene-linen:has(> .scene-wave:not(.scene-wave--bottom)):has(> .scene-wave--bottom)::after {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        transparent 48px,
        #000 110px,
        #000 calc(100% - 110px),
        transparent calc(100% - 48px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        transparent 48px,
        #000 110px,
        #000 calc(100% - 110px),
        transparent calc(100% - 48px),
        transparent 100%
    );
}

.scene-linen > .scene-inner {
    position: relative;
    z-index: 2;
}

.scene-linen--celebrations {
    background: var(--surface-celebrations);
    z-index: 7;
}

.scene-linen--travel {
    background: var(--surface-travel);
    z-index: 6;
}

.scene-linen--faq {
    background: var(--surface-faq);
    z-index: 5;
}

.scene-linen--contact {
    background: var(--surface-contact);
    z-index: 4;
    /* Extra bottom clearance for the sticky countdown dock */
    padding-bottom: calc(var(--section-y) + var(--sticky-dock-height) + 1.5rem);
    text-align: center;
}

#scene-3 {
    position: relative;
    z-index: 7;
    transform: translateZ(0);
    /* Transformed layers can clip painted shadows — keep overflow open */
    overflow: visible;
    min-height: 100svh;
    /* Pull up over the sticky invite so linen slides on top while invite holds */
    margin-top: -100svh;
    /* Slightly more top air for the wave handover; same family as other chapters */
    padding-top: calc(var(--section-y) + 1.25rem);
    /* Extra bottom linen so CTA glow can fall off before the deckle wave */
    padding-bottom: calc(var(--section-y-compact) + 1.75rem);
    padding-inline: 0;
    justify-content: flex-start;
}

/* No Keep the Party Going: hug content so the section doesn’t feel hollow */
body:not(.has-keep-party-going) #scene-3 {
    min-height: 0;
    padding-top: var(--section-y);
    padding-bottom: calc(var(--section-y-compact) + 1.75rem);
}

/* Open calendar panel: more cream under the menu so the shadow isn’t sheared by the wave */
#scene-3:has(.calendar-dropdown.is-open) {
    padding-bottom: calc(var(--section-y-compact) + 3.25rem);
}

body:not(.has-keep-party-going) #scene-3 .linen-blurb {
    margin-bottom: var(--stack-lg);
}

body:not(.has-keep-party-going) #scene-3 .day-list {
    margin-bottom: var(--stack-lg);
}

#scene-3 .scene-inner {
    position: relative;
    z-index: 1;
    overflow: visible;
}

.scene-wave {
    position: absolute;
    top: -56px;
    left: -1%;
    right: -1%;
    height: 100px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.scene-wave--bottom {
    top: auto;
    bottom: -56px;
}

#wave-canvas,
.wave-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.scene-inner {
    max-width: var(--measure);
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.scene-linen .scene-inner {
    padding-inline: var(--page-gutter);
    margin-left: auto;
    margin-right: auto;
    max-width: var(--measure);
}

.hero-title {
    font-family: var(--serif);
    font-size: var(--text-display);
    font-style: italic;
    font-weight: 300;
    letter-spacing: var(--track-body);
    color: var(--ivory);
    line-height: var(--lh-tight);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.hero-title-line {
    display: block;
    max-width: 100%;
}

.hero-title-line:nth-child(2) {
    margin-top: 0.25em;
}

.hero-word {
    white-space: nowrap;
}

.hero-letter {
    display: inline-block;
    cursor: default;
    letter-spacing: var(--track-body);
    pointer-events: none;
    filter: url(#letter-grain);
}

/* SVG displacement per letter is expensive during scroll — skip on small / reduced-motion */
@media (max-width: 720px), (prefers-reduced-motion: reduce) {
    .hero-letter {
        filter: none;
    }
}

.hero-letters-ready .hero-letter {
    pointer-events: auto;
}

.hero-letter:last-child {
    letter-spacing: 0;
}


.scroll-indicator {
    position: fixed;
    /* Clear the dock + soft wave lip, then a little air so it doesn’t nest in the curve */
    bottom: calc(var(--sticky-dock-height) + var(--dock-wave-lip, 36px) + 1.35rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
}

.scroll-chevron {
    width: 22px;
    height: 22px;
    /* Same ivory family as the countdown — teal was competing with the dock */
    color: color-mix(in srgb, var(--ivory) 55%, transparent);
    animation: chevron-drift 2.4s ease-in-out infinite;
}

@keyframes chevron-drift {
    0%, 100% { transform: translateY(0);    opacity: 0.45; }
    50%       { transform: translateY(4px); opacity: 0.85; }
}

/* ─── Sticky night-wave dock ────────────────────────────────────────────────── */

.sticky-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12;
    height: calc(var(--sticky-dock-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /*
     * Soft sea-night at the crest → pure --navy at the bottom
     * so the iOS theme-color / home-indicator still reads as ink.
     */
    background: linear-gradient(
        to bottom,
        #0c1a28 0%,
        #08121e 42%,
        var(--navy) 78%,
        var(--navy) 100%
    );
    pointer-events: none;
    transition:
        transform 0.35s var(--ease-out),
        opacity 0.3s ease;
    /*
     * Linen depth — sky rim + soft upward glow (opacity via --linen-scene-mix).
     * Dock body stays navy so theme-color stays matched.
     */
    box-shadow:
        0 -1px 0 color-mix(in srgb, var(--sky-light) calc(62% * var(--linen-scene-mix, 0)), transparent),
        0 -8px 26px color-mix(in srgb, var(--sky) calc(38% * var(--linen-scene-mix, 0)), transparent),
        0 -22px 52px color-mix(in srgb, var(--sky-light) calc(28% * var(--linen-scene-mix, 0)), transparent);
}

/* Sky aura along the wave crest */
.sticky-dock::before {
    content: "";
    display: block;
    position: absolute;
    left: -3%;
    right: -3%;
    top: calc(-1 * var(--dock-wave-lip, 36px));
    height: calc(var(--dock-wave-lip, 36px) + 18px);
    z-index: 1;
    pointer-events: none;
    opacity: var(--linen-scene-mix, 0);
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--sky-light) 72%, transparent) 0%,
        color-mix(in srgb, var(--sky) 42%, transparent) 55%,
        transparent 100%
    );
    filter: blur(11px);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 88%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 88%);
}

.sticky-dock.is-at-footer::before {
    opacity: 0;
}

/* Near page footer: solid ink once the scrubbed fade finishes */
.sticky-dock.is-at-footer {
    background: var(--navy);
}

.sticky-dock.is-at-footer .sticky-dock-stars {
    opacity: 0;
    animation: none;
}

.sticky-dock.is-tucked {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
}

body.form-focused .scene-linen--contact {
    padding-bottom: var(--section-y);
}

.scene-linen--contact {
    transition: padding-bottom 0.35s var(--ease-out);
}

.sticky-dock-wave {
    position: absolute;
    left: -2%;
    right: -2%;
    top: auto;
    bottom: 0;
    /* Soft rolling lip sits above the dock box against linen/stars */
    height: calc(100% + var(--dock-wave-lip, 36px));
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(
        0 calc(-3px * var(--linen-scene-mix, 0))
        calc(18px * var(--linen-scene-mix, 0))
        color-mix(in srgb, var(--sky-light) calc(68% * var(--linen-scene-mix, 0)), transparent)
    );
}

/* Sparse star dust — fades out before the navy floor (theme-color zone) */
.sticky-dock-stars {
    position: absolute;
    left: 0;
    right: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    height: var(--sticky-dock-height);
    z-index: 1;
    pointer-events: none;
    opacity: 0.72;
    background-image:
        radial-gradient(1px 1px at 8% 28%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1.5px 1.5px at 18% 62%, rgba(255, 252, 240, 0.55), transparent),
        radial-gradient(1px 1px at 27% 18%, rgba(210, 235, 240, 0.5), transparent),
        radial-gradient(1px 1px at 36% 48%, rgba(255, 255, 255, 0.65), transparent),
        radial-gradient(1.5px 1.5px at 44% 22%, rgba(255, 248, 220, 0.45), transparent),
        radial-gradient(1px 1px at 52% 58%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 61% 32%, rgba(200, 230, 235, 0.55), transparent),
        radial-gradient(1.5px 1.5px at 70% 52%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 78% 20%, rgba(255, 252, 240, 0.5), transparent),
        radial-gradient(1px 1px at 86% 44%, rgba(255, 255, 255, 0.45), transparent),
        radial-gradient(1.5px 1.5px at 93% 30%, rgba(210, 235, 240, 0.55), transparent),
        radial-gradient(1px 1px at 14% 78%, rgba(255, 255, 255, 0.28), transparent),
        radial-gradient(1px 1px at 48% 72%, rgba(255, 248, 220, 0.22), transparent),
        radial-gradient(1px 1px at 82% 68%, rgba(255, 255, 255, 0.25), transparent);
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 18%,
        black 55%,
        transparent 92%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 18%,
        black 55%,
        transparent 92%
    );
    transition: opacity 0.55s var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
    .sticky-dock-stars {
        animation: dock-stars-twinkle 5.5s ease-in-out infinite;
    }

    .sticky-dock.is-linen-scene .sticky-dock-stars {
        animation-name: dock-stars-twinkle-linen;
    }
}

@keyframes dock-stars-twinkle {
    0%, 100% { opacity: 0.62; }
    45%      { opacity: 0.82; }
    70%      { opacity: 0.7; }
}

@keyframes dock-stars-twinkle-linen {
    0%, 100% { opacity: 0.78; }
    45%      { opacity: 0.95; }
    70%      { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
    .sticky-dock.is-linen-scene .sticky-dock-stars {
        opacity: 0.88;
    }
}

.sticky-dock-inner {
    position: relative;
    z-index: 2;
    height: var(--sticky-dock-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem clamp(1.25rem, 5vw, 3rem) 0.7rem;
    pointer-events: auto;
}

.sticky-dock-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.28em;
    font-family: var(--sans);
    font-size: var(--text-ui);
    font-weight: 400;
    letter-spacing: var(--track-tight);
    color: var(--ivory);
    line-height: var(--lh-tight);
    min-width: 0;
    text-align: center;
}

.sticky-dock-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: 0.35em;
    row-gap: 0.1em;
    margin: 0;
}

.sticky-dock-chunk {
    display: inline;
    white-space: nowrap;
}

.sticky-dock-chunk [data-unit] {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: var(--track-body);
    color: #fff;
    min-width: 1.15ch;
    text-align: center;
}

.sticky-dock-label-short {
    display: none;
}

.sticky-dock-label,
.sticky-dock-amp,
.sticky-dock-tail {
    font-weight: 300;
    color: color-mix(in srgb, var(--ivory) 58%, transparent);
}

.sticky-dock-amp {
    color: color-mix(in srgb, var(--ivory) 48%, transparent);
}

.sticky-dock-tail {
    margin: 0;
    white-space: nowrap;
    font-size: 0.94em;
    letter-spacing: var(--track-body);
}

@media (max-width: 480px) {
    :root {
        --sticky-dock-height: 3.1rem;
        --dock-wave-lip: 14px;
    }

    .sticky-dock-countdown {
        font-size: var(--text-label);
        letter-spacing: -0.01em;
    }

    .sticky-dock-line {
        column-gap: 0.22em;
    }

    .sticky-dock-inner {
        padding-top: 0.2rem;
        padding-bottom: 0.35rem;
    }

    .sticky-dock-label,
    .sticky-dock-amp,
    .sticky-dock-tail {
        color: color-mix(in srgb, var(--ivory) 68%, transparent);
    }
}

@media (max-width: 720px) {
    .sticky-dock-amp {
        display: none;
    }

    .sticky-dock-label-long {
        display: none;
    }

    .sticky-dock-label-short {
        display: inline;
    }
}


.hero-love-line {
    font-family: var(--serif);
    font-size: var(--text-lead);
    font-style: italic;
    font-weight: 300;
    letter-spacing: var(--track-body);
    line-height: var(--lh-snug);
    color: var(--night-accent);
    margin: 1.5rem auto 0;
    opacity: 0.92;
    white-space: normal;
    max-width: min(36rem, 100%);
    text-wrap: balance;
}

.hero-love-line-seg {
    display: inline;
}

.hero-love-line-seg + .hero-love-line-seg::before {
    content: " ";
}

.hero-love-word {
    white-space: nowrap;
}

.hero-love-letter {
    display: inline-block;
    letter-spacing: var(--track-body);
}

.hero-love-letter:last-child {
    letter-spacing: 0;
}

@media (min-width: 721px) {
    .hero-love-line {
        white-space: nowrap;
        max-width: none;
        text-wrap: unset;
    }

    .hero-love-line-seg + .hero-love-line-seg::before {
        content: "\00a0";
    }
}

/* Mobile hero: calm centered stack — no verse bridge / split layout */
.hero-verse-bridge {
    display: none;
}

@media (max-width: 720px) {
    .hero-stack {
        justify-content: center;
        padding-top: calc(5.25rem + env(safe-area-inset-top, 0px));
        padding-bottom: calc(
            var(--sticky-dock-height)
            + env(safe-area-inset-bottom, 0px)
            + 3rem
        );
    }

    .hero-title {
        line-height: var(--lh-snug);
        text-align: center;
    }

    .hero-title-line:nth-child(2) {
        margin-top: 0.3em;
    }

    /* Sky companion — a touch smaller than the call so it stays two lines */
    .hero-love-line {
        margin-top: 1.35rem;
        margin-bottom: 0;
        max-width: min(100%, 24rem);
        color: var(--sky);
        opacity: 1;
        text-align: center;
        text-wrap: unset;
    }

    .hero-love-line-seg {
        display: block;
        white-space: nowrap;
    }

    .hero-love-line-seg + .hero-love-line-seg::before {
        content: none;
    }

    .hero-love-line-seg + .hero-love-line-seg {
        margin-top: 0.28em;
    }

}

@media (max-width: 720px) and (min-height: 780px) {
    .hero-stack {
        padding-top: calc(5.75rem + env(safe-area-inset-top, 0px));
        padding-bottom: calc(
            var(--sticky-dock-height)
            + env(safe-area-inset-bottom, 0px)
            + 3.5rem
        );
    }
}

.scene-2-body {
    font-family: var(--serif);
    font-size: var(--text-body);
    font-style: normal;
    font-weight: 300;
    letter-spacing: var(--track-body);
    line-height: var(--lh-loose);
    color: color-mix(in srgb, var(--ivory) 84%, transparent);
    opacity: 0;
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.scene-2-body--beat {
    margin: 0 0 1.35rem;
}

.scene-2-body--beat:last-child {
    margin-bottom: 0;
}

.scene-2-body--close {
    margin-top: 0.35rem;
}

.scene-2-body-emphasis {
    display: inline;
    font-style: italic;
    font-size: var(--text-lead);
    letter-spacing: var(--track-body);
    line-height: var(--lh-snug);
    color: var(--night-accent-muted);
}

/* ─── Footer: family dedication ─────────────────────────────────────────────── */

.footer-close {
    max-width: min(100%, 40rem);
    margin: 0 auto;
}

.footer-rule {
    border: none;
    width: 2.5rem;
    height: 1px;
    background: var(--ivory);
    margin: 1.35rem auto;
    opacity: 0.18;
}

.footer-names {
    font-family: var(--serif);
    font-weight: 300;
    font-size: var(--text-ui);
    letter-spacing: var(--track-body);
    line-height: var(--lh-normal);
    color: var(--night-accent);
    opacity: 0.92;
    margin: 0 auto;
    max-width: 100%;
    white-space: nowrap;
}

@media (max-width: 360px) {
    .footer-names {
        white-space: normal;
        text-wrap: balance;
        max-width: 16em;
    }
}

.footer-families {
    margin-top: 1.25rem;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

.footer-families-together {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: var(--text-ui);
    letter-spacing: var(--track-body);
    color: var(--ivory);
    opacity: 0.4;
    margin-bottom: 0.65rem;
}

.footer-families-names {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: var(--serif);
    font-weight: 300;
    font-size: var(--text-ui);
    letter-spacing: var(--track-body);
    color: var(--night-accent);
    opacity: 0.92;
    line-height: var(--lh-normal);
    text-wrap: balance;
}

.footer-families-names li {
    margin: 0;
}

.footer-amp {
    font-style: italic;
    opacity: 0.65;
    padding: 0 0.1em;
}

/* ─── Footer: paw prints (Reilly & Jonesy) ──────────────────────────────────── */

.footer-paws {
    display: block;
    width: min(240px, 58%);
    margin: 0.75rem auto 0;
    color: var(--ivory);
    opacity: 0.05;
    pointer-events: none;
}


.section-title {
    font-family: var(--serif);
    font-size: var(--text-title);
    font-weight: 300;
    letter-spacing: var(--track-body);
    line-height: var(--lh-snug);
    text-align: center;
    margin-bottom: var(--stack-md);
    color: var(--ink-soft);
}

/* Linen section titles share one scale */
.scene-linen .section-title {
    font-size: var(--text-title-lg);
    font-style: normal;
    font-weight: 300;
    margin-bottom: var(--stack-sm);
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--lh-snug);
    color: var(--ink);
    text-wrap: balance;
}

/* One rule type: short hairline under the headline block, before content */
.section-rule {
    border: none;
    width: 2.5rem;
    height: 1px;
    background: var(--rule);
    margin: 0 auto var(--stack-lg);
    opacity: 0.4;
    transform-origin: 50% 50%;
}

.section-title-sub {
    font-family: var(--sans);
    font-size: var(--text-body);
    font-weight: 300;
    line-height: var(--lh-normal);
    text-align: center;
    color: var(--ink-muted);
    margin-bottom: var(--stack-md);
}

.scene-linen .section-title-sub {
    color: var(--ink-soft);
}

b, strong {
    font-weight: 500;
    color: inherit;
}

.calendar-dropdown {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 18rem);
    z-index: 5;
}

.calendar-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.calendar-dropdown-chevron {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-left: 0.15rem;
    vertical-align: middle;
    transition: transform 0.2s var(--ease-out);
}

.calendar-dropdown.is-open .calendar-dropdown-trigger {
    border-color: var(--coral);
    background-color: color-mix(in srgb, var(--coral) 92%, black);
    color: var(--cream);
}

.calendar-dropdown.is-open .calendar-dropdown-chevron {
    transform: rotate(180deg);
}

/*
 * In-flow panel under the CTA — expands the linen instead of overlaying
 * Travel / day-list (absolute menus were getting clipped by the next sheet).
 */
.calendar-dropdown-menu {
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
    right: auto;
    transform: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0.4rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: var(--cream);
    border: 1px solid transparent;
    border-radius: 0.85rem;
    box-shadow: none;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    box-sizing: border-box;
    transition:
        max-height 0.32s var(--ease-out),
        opacity 0.28s var(--ease-out),
        margin 0.28s var(--ease-out),
        padding 0.28s var(--ease-out),
        border-color 0.2s ease,
        box-shadow 0.28s var(--ease-out);
}

.calendar-dropdown.is-open .calendar-dropdown-menu {
    max-height: 9rem;
    opacity: 1;
    margin-top: 0.65rem;
    margin-bottom: 0.35rem;
    padding: 0.4rem;
    border-color: color-mix(in srgb, var(--ink-muted) 22%, transparent);
    /* Softer / shorter falloff so it finishes on cream, not into the wave seam */
    box-shadow:
        0 8px 22px hsla(210, 20%, 18%, 0.12),
        0 2px 6px hsla(210, 20%, 18%, 0.05);
    pointer-events: auto;
}

.calendar-dropdown-option {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.7rem 1rem;
    text-align: center;
    font-family: var(--mono);
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    border: none;
    border-radius: 0.55rem;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        color 0.18s var(--ease-out),
        background-color 0.18s var(--ease-out);
    white-space: nowrap;
    min-height: 2.75rem;
    box-sizing: border-box;
}

.pill-btn {
    display: inline-block;
    padding: 0.72rem 1.7rem;
    background: none;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    border-radius: 9999px;
    font-family: var(--mono);
    font-size: var(--text-label);
    font-weight: 300;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color 0.2s var(--ease-out),
        background-color 0.2s var(--ease-out),
        color 0.2s var(--ease-out),
        transform 0.18s var(--ease-out),
        box-shadow 0.2s var(--ease-out);
    white-space: nowrap;
}

.pill-btn:focus-visible,
.calendar-dropdown-trigger:focus-visible,
.calendar-dropdown-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 30%, transparent);
}

.faq-contact {
    margin-top: 3.25rem;
    padding-top: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    text-align: center;
}

.faq-contact-label {
    font-family: var(--sans);
    font-size: var(--text-body);
    font-weight: 300;
    color: var(--ink-muted);
}

.faq-contact-links {
    display: flex;
    gap: 1.5rem;
}

.faq-contact-links a {
    font-family: var(--mono);
    font-size: var(--text-label);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--link);
    /* One rule only — linen's text-decoration:underline is higher specificity */
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--link) 40%, transparent);
    padding-bottom: 2px;
    -webkit-tap-highlight-color: transparent;
    transition:
        color 0.28s var(--ease-out),
        border-color 0.28s var(--ease-out);
}

/* Inline links — teal at rest. Wash is fine-pointer only (touch uses :active coral). */
.scene-linen a:not(.pill-btn):not(.calendar-dropdown-option):not([data-nav-section]) {
    color: var(--link);
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    -webkit-tap-highlight-color: transparent;
    transition:
        color 0.28s var(--ease-out),
        text-decoration-color 0.28s var(--ease-out);
}

.scene-linen a:not(.pill-btn):not(.calendar-dropdown-option):not([data-nav-section]):active,
.scene-linen .faq-contact-links a:active {
    color: var(--link-hover);
    text-decoration-color: color-mix(in srgb, var(--link-hover) 70%, transparent);
    border-bottom-color: color-mix(in srgb, var(--link-hover) 70%, transparent);
}

/* FAQ contact row keeps mono + bottom rule, but same color / wash language as body links */
.scene-linen .faq-contact-links a {
    font-weight: 400;
    border-bottom-color: color-mix(in srgb, var(--link) 40%, transparent);
}


.faq-list {
    text-align: left;
    width: 100%;
    max-width: var(--measure-content);
    margin: 0 auto;
}

.faq-item {
    border-top: 1px solid color-mix(in srgb, var(--ink-muted) 22%, transparent);
}

.faq-item:first-child {
    border-top: none;
}

.faq-item:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 22%, transparent);
}

.faq-item > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 0;
    font-family: var(--sans);
    font-size: var(--text-body);
    font-weight: 400;
    letter-spacing: var(--track-tight);
    color: var(--ink);
    line-height: var(--lh-snug);
    transform: translateX(0);
    -webkit-tap-highlight-color: transparent;
    transition:
        color 0.28s var(--ease-out),
        transform 0.28s var(--ease-out);
}

.faq-item > summary::-webkit-details-marker {
    display: none;
}

.faq-item > summary::after {
    content: "";
    flex-shrink: 0;
    width: 0.45em;
    height: 0.45em;
    border-right: 1.5px solid var(--ink-muted);
    border-bottom: 1.5px solid var(--ink-muted);
    transform: rotate(45deg);
    transition:
        transform 0.28s var(--ease-out),
        border-color 0.28s var(--ease-out);
    opacity: 0.75;
}

.faq-item > summary:active {
    color: var(--coral);
}

.faq-item > summary:active::after {
    border-color: var(--coral);
    opacity: 1;
}

.faq-item[open] > summary {
    padding-bottom: 1rem;
}

.faq-item[open] > summary::after {
    transform: rotate(-135deg);
}

.faq-answer {
    padding: 0.2rem 0 0.15rem;
}

.faq-item p {
    font-family: var(--sans);
    font-size: var(--text-body);
    font-weight: 300;
    line-height: var(--lh-relaxed);
    color: var(--ink-soft);
    padding-bottom: 0.65rem;
}

.faq-item p:last-child {
    padding-bottom: 1.25rem;
}

#site-footer {
    position: relative;
    z-index: 4;
    background: var(--navy);
    text-align: center;
    padding: var(--section-y-compact) var(--page-gutter);
    /* Extra 1.25rem clears the dock wave crest so dedication type doesn’t crowd the countdown */
    padding-bottom: calc(
        var(--section-y-compact)
        + var(--sticky-dock-height)
        + 1.25rem
        + env(safe-area-inset-bottom, 0px)
    );
    border-top: none;
}

.footer-wave {
    z-index: 0;
}

#site-footer > :not(.footer-wave) {
    position: relative;
    z-index: 1;
}

.footer-note {
    font-family: var(--script);
    font-size: var(--text-script);
    color: var(--ivory);
    margin: 0 auto;
    max-width: 14em;
    opacity: 0.9;
    line-height: var(--lh-snug);
    text-wrap: balance;
}





@media (min-width: 481px) {
    .scene-linen .section-title {
        margin-bottom: var(--stack-sm);
    }

    .scene-linen .section-title-sub {
        font-size: var(--text-body);
        line-height: var(--lh-normal);
        margin-bottom: var(--stack-md);
    }
}

/* ─── Mobile ────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
    :root {
        --section-y: clamp(3.5rem, 8vh, 5.5rem);
        --section-y-compact: clamp(2.75rem, 6vh, 4.25rem);
        --block-gap: clamp(2.75rem, 7vh, 4.5rem);
        --sticky-dock-height: 3.35rem;
        --dock-wave-lip: 18px;
        /* Mobile legibility — night hero/invite sizes live in tokens, not per-component clamps */
        --text-label: 0.8rem;
        --text-ui: clamp(0.9rem, 0.82rem + 0.45vw, 1rem);
        --text-body: clamp(1.05rem, 0.95rem + 0.55vw, 1.2rem);
        --text-lead: clamp(1.2rem, 0.72rem + 2.6vw, 1.48rem);
        --text-title: clamp(1.6rem, 1.35rem + 1.1vw, 2rem);
        --text-title-lg: clamp(1.95rem, 1.55rem + 1.7vw, 2.55rem);
        --text-headline: clamp(1.55rem, 1.15rem + 3.2vw, 2.15rem);
        --text-display: clamp(1.55rem, 1.15rem + 3.2vw, 2.15rem);
    }

    html {
        scroll-padding-top: 6.75rem;
    }

    .sticky-dock-countdown {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: center;
        font-size: var(--text-ui);
        gap: 0;
        line-height: var(--lh-tight);
        max-width: 100%;
    }

    .sticky-dock-line {
        flex-wrap: nowrap;
        flex: 0 1 auto;
        min-width: 0;
        column-gap: 0.2em;
    }

    .sticky-dock-tail {
        flex: 0 1 auto;
        margin: 0;
        white-space: nowrap;
        font-size: inherit;
    }

    .sticky-dock-tail::before {
        content: "\00a0";
    }

    .sticky-dock-inner {
        padding-top: 0.25rem;
        padding-bottom: 0.4rem;
    }

    .scene-linen .scene-inner {
        padding-inline: var(--page-gutter);
    }

    #scene-3 {
        padding-top: calc(var(--section-y) + 0.75rem);
        padding-bottom: calc(var(--section-y-compact) + 2rem);
    }

    body:not(.has-keep-party-going) #scene-3 {
        padding-top: var(--section-y);
        padding-bottom: calc(var(--section-y-compact) + 2rem);
    }

    #scene-3:has(.calendar-dropdown.is-open) {
        padding-bottom: calc(var(--section-y-compact) + 3.75rem);
    }

    .scene-linen--contact {
        padding-bottom: calc(var(--section-y) + var(--sticky-dock-height) + 1.25rem);
    }

    /* Title → sub → rule: tight stack, then air before body */
    .scene-linen .section-title {
        margin-bottom: 0.5rem;
    }

    .scene-linen .section-title-sub {
        margin-bottom: var(--stack-md);
    }

    .scene-linen .section-rule {
        margin-bottom: var(--stack-lg);
    }

    /* Travel / Accommodations subheads → content */
    .linen-subhead {
        margin-top: 2rem;
        margin-bottom: 0.5rem;
    }

    .linen-article .linen-subhead:first-of-type {
        margin-top: 0.15rem;
    }

    .linen-article p {
        margin-bottom: 0.9rem;
    }

    .linen-blurb {
        margin-bottom: var(--stack-lg);
    }

    .day-list {
        margin-bottom: var(--stack-lg);
    }

    .day-list-date,
    .day-list-label {
        padding: 0.85rem 0;
    }

    .linen-actions {
        margin-top: var(--stack-md);
        /* Room under the CTA so the in-flow calendar panel breathes before Travel */
        margin-bottom: var(--stack-lg);
        padding-bottom: 0.5rem;
    }

    .linen-actions:has(.calendar-dropdown.is-open) {
        margin-bottom: calc(var(--stack-lg) + 0.75rem);
        padding-bottom: 1rem;
    }

    .calendar-dropdown-option {
        padding: 0.85rem 1rem;
        min-height: 48px;
        font-size: var(--text-label);
    }

    .faq-item > summary {
        padding: 1.2rem 0;
    }

    .faq-item p {
        padding-bottom: 0.65rem;
    }

    .faq-item p:last-child {
        padding-bottom: 1.25rem;
    }

    .faq-contact {
        margin-top: var(--stack-lg);
        gap: var(--stack-md);
    }

    .faq-contact-links {
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .faq-contact-links a {
        /* Keep as inline-block so the border underline stays a single clean stroke */
        display: inline-block;
        padding: 0.85rem 0 2px;
        min-height: 0;
        line-height: var(--lh-tight);
    }

    .contact-stub {
        margin-top: var(--stack-sm);
    }

    .contact-stub-group {
        gap: var(--stack-md);
    }

    .contact-stub-field {
        gap: 0.5rem;
    }

    .contact-stub-field input,
    .contact-stub-field textarea {
        padding: 0.85rem 0.95rem;
        min-height: 3rem;
    }

    .contact-stub-submit {
        margin-top: var(--stack-md);
        min-height: 52px;
        padding: 0.85rem 1.85rem;
    }
}

/* Touch targets — min 44px on all interactive controls */
#nav-save-the-date,
.nav-hamburger,
.pill-btn,
.calendar-dropdown-trigger {
    min-height: 48px;
}

.calendar-dropdown-option {
    min-height: 0;
}

/* Guard hover styles so they don't stick on iOS after tap */
@media (hover: hover) and (pointer: fine) {
    #nav-save-the-date:hover {
        border-color: hsla(33, 25%, 85%, 0.6);
        background-color: hsla(33, 25%, 85%, 0.06);
    }

    #site-nav.is-light #nav-save-the-date:hover {
        border-color: color-mix(in srgb, var(--ink-muted) 55%, transparent);
        background-color: color-mix(in srgb, var(--ink-muted) 8%, transparent);
    }

    .calendar-dropdown-option:hover {
        color: var(--coral);
        background: var(--hover-wash);
    }

    .scene-linen a:not(.pill-btn):not(.calendar-dropdown-option):not([data-nav-section]),
    .scene-linen .faq-contact-links a {
        background-image: linear-gradient(
            color-mix(in srgb, var(--coral) 18%, transparent),
            color-mix(in srgb, var(--coral) 18%, transparent)
        );
        background-repeat: no-repeat;
        background-size: 0% 100%;
        background-position: left center;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        transition:
            color 0.28s var(--ease-out),
            background-size 0.38s var(--ease-out),
            text-decoration-color 0.28s var(--ease-out),
            border-color 0.28s var(--ease-out);
    }

    .scene-linen a:not(.pill-btn):not(.calendar-dropdown-option):not([data-nav-section]) {
        padding: 0.05em 0.14em;
        margin: 0 -0.14em;
        border-radius: 0.1em;
    }

    .scene-linen a:not(.pill-btn):not(.calendar-dropdown-option):not([data-nav-section]):hover,
    .scene-linen .faq-contact-links a:hover {
        color: var(--link-hover);
        background-size: 100% 100%;
        text-decoration-color: color-mix(in srgb, var(--link-hover) 70%, transparent);
        border-bottom-color: color-mix(in srgb, var(--link-hover) 70%, transparent);
    }

    .faq-item > summary:hover {
        color: var(--coral);
        transform: translateX(0.35rem);
    }

    .faq-item > summary:hover::after {
        border-color: var(--coral);
        opacity: 1;
    }
}

/* Reduce motion — disable all animations for guests who prefer it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #scene-1::after,
    .scene-linen::before,
    .scene-linen::after { display: none; }
}

/* ─── Linen informational ─────────────────────────────────────────────────── */

.linen-block {
    margin-bottom: var(--block-gap);
    text-align: center;
    overflow: visible;
}

.linen-group .linen-block:last-child,
.linen-block:last-child {
    margin-bottom: 0;
}

.linen-blurb {
    font-family: var(--sans);
    font-size: var(--text-body);
    font-weight: 300;
    line-height: var(--lh-loose);
    color: var(--ink-soft);
    max-width: var(--measure-content);
    width: 100%;
    margin: 0 auto var(--stack-lg);
}

.linen-em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: var(--text-lead);
    color: var(--sea-deep);
    display: inline-block;
    margin-bottom: 0.35em;
}

.linen-em--meta {
    display: block;
    margin-bottom: 0;
    font-size: var(--text-lead);
    line-height: var(--lh-snug);
}

/* Meta line links match surrounding italic; coral wash still on hover */
.linen-em a {
    font-weight: inherit;
}

/* Emphasis = +200 Geist weight, same color as surrounding copy */
.linen-strong {
    font-family: inherit;
    font-style: normal;
    font-weight: 500;
    color: inherit;
}

.linen-subhead {
    font-family: var(--serif);
    font-size: var(--text-lead);
    font-weight: 400;
    letter-spacing: var(--track-tight);
    line-height: var(--lh-snug);
    color: var(--ink);
    margin: 2.25rem 0 0.55rem;
}

.linen-article {
    max-width: var(--measure-content);
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

.linen-article .linen-subhead:first-of-type {
    margin-top: 0.15rem;
}

.linen-article p {
    font-family: var(--sans);
    font-size: var(--text-body);
    font-weight: 300;
    line-height: var(--lh-relaxed);
    color: var(--ink-soft);
    margin: 0 0 0.85rem;
}

.linen-article p:last-child {
    margin-bottom: 0;
}

.day-list {
    list-style: none;
    margin: 0 auto var(--stack-lg);
    padding: 0;
    width: min(100%, var(--measure-content));
    display: table;
    border-collapse: collapse;
}

.day-list-item {
    display: table-row;
}

.day-list-date,
.day-list-label {
    display: table-cell;
    padding: 0.7rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 22%, transparent);
    font-family: var(--sans);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--lh-snug);
    vertical-align: baseline;
}

.day-list-item:first-child .day-list-date,
.day-list-item:first-child .day-list-label {
    border-top: 1px solid color-mix(in srgb, var(--ink-muted) 22%, transparent);
}

.day-list-date {
    text-align: right;
    padding-right: 1.35rem;
    white-space: nowrap;
    width: 42%;
    font-family: var(--mono);
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--accent);
}

.day-list-label {
    text-align: left;
    padding-left: 1.35rem;
    font-weight: 300;
    color: var(--ink);
}

@media (max-width: 480px) {
    .day-list {
        display: block;
        width: min(100%, 22rem);
    }

    .day-list-item {
        display: grid;
        grid-template-columns: 5.75rem 1fr;
        gap: 0 1rem;
        align-items: baseline;
        border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 22%, transparent);
    }

    .day-list-item:first-child {
        border-top: 1px solid color-mix(in srgb, var(--ink-muted) 22%, transparent);
    }

    .day-list-date,
    .day-list-label {
        display: block;
        border: none;
        padding: 0.7rem 0;
        width: auto;
    }

    /* Table-mode puts border-top on each cell; on grid that leaves a gap in the rule */
    .day-list-item:first-child .day-list-date,
    .day-list-item:first-child .day-list-label {
        border-top: none;
    }

    .day-list-date {
        text-align: right;
        padding-right: 0;
        font-size: var(--text-label);
    }

    .day-list-label {
        padding-left: 0;
    }
}

/* ─── Linen primary controls (teal solid → coral on interaction) ───────────── */

.scene-linen .pill-btn {
    border: 1px solid var(--accent);
    color: var(--cream);
    background: var(--accent);
    font-family: var(--mono);
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    padding: 0.85rem 1.85rem;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent);
}

.scene-linen .pill-btn:focus-visible {
    outline: none;
    box-shadow:
        0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent),
        0 0 0 3px var(--focus-ring);
}

@media (hover: hover) and (pointer: fine) {
    .scene-linen .pill-btn:hover {
        border-color: var(--coral);
        background-color: color-mix(in srgb, var(--coral) 92%, black);
        color: var(--cream);
        box-shadow: 0 6px 18px color-mix(in srgb, var(--coral) 25%, transparent);
        transform: translateY(-1px);
    }
}

.linen-actions {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
    overflow: visible;
    position: relative;
}

.linen-actions .calendar-dropdown {
    position: relative;
}

/* Primary pill CTAs — see .scene-linen .pill-btn (teal rest → coral interaction) */
.scene-linen .pill-btn:active,
.linen-actions .calendar-dropdown.is-open .pill-btn,
.contact-stub-submit:active {
    transform: scale(0.97);
}

.linen-actions .calendar-dropdown.is-open .pill-btn {
    border-color: var(--coral);
    background-color: color-mix(in srgb, var(--coral) 92%, black);
    color: var(--cream);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--coral) 25%, transparent);
}

.contact-stub-submit:active {
    border-color: var(--coral);
    background-color: color-mix(in srgb, var(--coral) 92%, black);
    color: var(--cream);
}

.contact-stub {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: var(--measure-content);
    width: 100%;
    margin: 0.5rem auto 0;
    text-align: left;
    align-items: start;
}

.contact-stub-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem 1.25rem;
    padding: 1.55rem 0 1.65rem;
    border-top: 1px solid color-mix(in srgb, var(--ink-muted) 22%, transparent);
}

.contact-stub-group--identity {
    border-top: none;
    padding-top: 0.35rem;
}

.contact-stub-group--phone {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    border-top-color: color-mix(in srgb, var(--ink-muted) 22%, transparent);
}

.contact-stub-group--address {
    padding-bottom: 0.35rem;
}

.contact-stub-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: var(--sans);
    font-size: var(--text-ui);
    font-weight: 500;
    letter-spacing: var(--track-tight);
    text-transform: none;
    color: var(--ink-soft);
    min-width: 0;
}

.contact-stub-field--full {
    grid-column: 1 / -1;
}

.contact-stub-wa-block {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.45rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    transition:
        max-height 0.45s var(--ease-out),
        opacity 0.35s var(--ease-out),
        transform 0.4s var(--ease-out),
        visibility 0.35s;
}

.contact-stub-wa-block.is-open {
    max-height: 11rem;
    margin-top: 0.15rem;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}

.contact-stub-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    min-height: 44px;
    font-family: var(--sans);
    font-size: var(--text-body);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
    cursor: pointer;
    width: fit-content;
    max-width: 100%;
    transition: color 0.2s var(--ease-out);
}

.contact-stub-wa-hint-lockup {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.contact-stub-wa-hint-lockup .contact-stub-wa-icon {
    /* Exactly two text lines tall — sits as a lockup with the helper copy */
    width: 2lh;
    height: 2lh;
    margin-top: 0.05em;
    flex-shrink: 0;
    display: block;
    pointer-events: none;
    -webkit-touch-callout: none;
    user-select: none;
}

.contact-stub-wa:hover {
    color: var(--ink);
}

.contact-stub-wa input {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    accent-color: var(--coral);
    cursor: pointer;
}

.contact-stub-wa-hint {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    visibility: hidden;
    pointer-events: none;
    font-family: var(--sans);
    font-size: var(--text-ui);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: var(--lh-normal);
    color: var(--ink-soft);
    transition:
        max-height 0.42s var(--ease-out),
        opacity 0.32s var(--ease-out),
        transform 0.36s var(--ease-out),
        visibility 0.32s;
}

.contact-stub-wa-hint strong {
    font-weight: 500;
    color: var(--ink);
}

.contact-stub-wa-hint.is-open {
    max-height: 7.5rem;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .contact-stub-wa-hint {
        transition: none;
    }
}

.contact-stub-field input,
.contact-stub-field textarea {
    font-family: var(--sans);
    font-size: var(--text-body);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: 0.35rem;
    padding: 0.7rem 0.85rem;
    width: 100%;
    resize: vertical;
    transition:
        border-color 0.2s var(--ease-out),
        box-shadow 0.2s var(--ease-out);
}

.contact-stub-field input::placeholder,
.contact-stub-field textarea::placeholder {
    color: var(--ink-muted);
    opacity: 1;
}

.contact-stub-field input:-webkit-autofill,
.contact-stub-field input:-webkit-autofill:hover,
.contact-stub-field input:-webkit-autofill:focus,
.contact-stub-field textarea:-webkit-autofill,
.contact-stub-field textarea:-webkit-autofill:hover,
.contact-stub-field textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset;
    box-shadow: 0 0 0 1000px var(--field-bg) inset;
    transition: background-color 99999s ease-out 0s;
}

.contact-stub-field input.is-invalid,
.contact-stub-field textarea.is-invalid {
    border-color: var(--error);
}

.contact-stub-field input:focus,
.contact-stub-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.faq-contact-links a:focus-visible,
.scene-linen a:not(.pill-btn):not(.calendar-dropdown-option):not([data-nav-section]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
    border-radius: 2px;
}

.contact-stub-error {
    font-size: var(--text-label);
    letter-spacing: var(--track-body);
    text-transform: none;
    color: var(--error);
}

.contact-stub-submit {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 1.25rem;
    cursor: pointer;
    padding: 0.72rem 1.7rem;
}

.contact-stub-form-error {
    grid-column: 1 / -1;
    margin: 0.35rem 0 0;
    font-family: var(--sans);
    font-size: var(--text-ui);
    font-weight: 300;
    line-height: var(--lh-normal);
    text-align: center;
    color: var(--error);
}

.contact-confirm {
    max-width: var(--measure-content);
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.contact-confirm-title {
    margin: 0;
    font-family: var(--serif);
    font-size: var(--text-lead);
    font-weight: 300;
    font-style: italic;
    letter-spacing: var(--track-tight);
    color: var(--sea-deep);
}

.contact-confirm-body {
    margin: 0.65rem auto 0;
    max-width: 26rem;
    font-family: var(--sans);
    font-size: var(--text-body);
    font-weight: 300;
    line-height: var(--lh-loose);
    color: var(--ink-soft);
}

.contact-stub .iti {
    display: block;
    width: 100%;
    z-index: 5;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: 0.35rem;
    overflow: hidden;
    transition:
        border-color 0.2s var(--ease-out),
        box-shadow 0.2s var(--ease-out);
    --iti-hover-color: color-mix(in srgb, var(--sea) 10%, transparent);
    --iti-border-color: var(--field-border);
    --iti-dialcode-color: var(--ink-muted);
    --iti-dropdown-bg: var(--field-bg);
    --iti-arrow-color: var(--ink-muted);
    --iti-path-flags-1x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/img/flags.webp");
    --iti-path-flags-2x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/img/flags.webp");
    --iti-path-globe-1x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/img/globe.webp");
    --iti-path-globe-2x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/img/globe.webp");
}

.contact-stub .iti:has(.iti__tel-input:focus) {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.contact-stub .iti:has(.iti__tel-input.is-invalid) {
    border-color: var(--error);
}

.contact-stub-field:has(.iti) {
    position: relative;
    z-index: 6;
}

.contact-stub .iti input.iti__tel-input {
    width: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.contact-stub .iti input.iti__tel-input:focus {
    border: none;
    box-shadow: none;
}

.contact-stub .iti .iti__selected-country,
.contact-stub .iti .iti__selected-dial-code {
    color: var(--ink-soft);
}

.contact-stub .iti .iti__selected-country-primary:hover {
    background-color: var(--iti-hover-color);
}

/* Dropdown portaled to body — must set ink explicitly (body color is ivory) */
.iti__dropdown-content {
    z-index: 80;
    background-color: var(--field-bg);
    box-shadow: 0 10px 28px hsla(210, 20%, 20%, 0.14);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--text-ui);
    font-weight: 300;
    letter-spacing: normal;
    text-transform: none;
}

.iti__country-list {
    background-color: var(--field-bg);
}

.iti__country {
    color: var(--ink);
    padding: 0.55rem 0.75rem;
    line-height: var(--lh-snug);
}

.iti__country-name {
    color: var(--ink);
}

.iti__dial-code {
    color: var(--ink-muted);
}

.iti__country.iti__highlight {
    background-color: var(--hover-wash);
}

.iti__search-input {
    background-color: var(--field-bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--text-ui);
    font-weight: 300;
    padding: 0.65rem 0.75rem;
    border: none;
    outline: none;
    box-shadow: none;
}

.iti__search-input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.iti__search-input::placeholder {
    color: var(--ink-muted);
    opacity: 1;
}

.address-field {
    position: relative;
    display: flex;
    flex-direction: column;
}

.contact-stub-field-note {
    display: block;
    margin: 0 0 0.45rem;
    font-family: var(--sans);
    font-size: var(--text-ui);
    font-weight: 300;
    letter-spacing: normal;
    text-transform: none;
    line-height: var(--lh-normal);
    color: var(--ink-muted);
    transition: opacity 0.2s var(--ease-out);
}

.contact-stub-field--address.is-suggesting .contact-stub-field-note {
    opacity: 0.4;
}

.contact-stub-field--address textarea {
    min-height: 4.25rem;
    max-height: 9rem;
    resize: vertical;
}

/* In-flow panel attached under the textarea — never overlays the hint */
.address-suggestions {
    position: static;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-top: none;
    border-radius: 0 0 0.45rem 0.45rem;
    max-height: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        max-height 0.28s var(--ease-out),
        opacity 0.22s var(--ease-out),
        visibility 0.22s,
        padding 0.22s var(--ease-out);
}

.address-suggestions.is-open {
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.2rem 0 0.15rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.contact-stub-field--address:has(.address-suggestions.is-open) textarea {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: color-mix(in srgb, var(--ink-muted) 16%, transparent);
}

.address-suggestion {
    padding: 0.7rem 0.95rem;
    font-family: var(--sans);
    font-size: var(--text-body);
    font-weight: 300;
    letter-spacing: normal;
    text-transform: none;
    line-height: var(--lh-snug);
    color: var(--ink);
    cursor: pointer;
}

.address-suggestion:hover,
.address-suggestion:focus {
    background: var(--hover-wash);
    outline: none;
}

.address-suggestion--freewrite {
    border-top: 1px solid color-mix(in srgb, var(--ink-muted) 18%, transparent);
    margin-top: 0.1rem;
    color: var(--ink-muted);
    font-size: var(--text-ui);
    font-style: italic;
    cursor: default;
}

.address-suggestion--freewrite:hover,
.address-suggestion--freewrite:focus {
    background: transparent;
    color: var(--ink);
}

.contact-stub-address-attr {
    grid-column: 1 / -1;
    margin: -0.25rem 0 0;
    font-family: var(--sans);
    font-size: var(--text-label);
    font-weight: 300;
    letter-spacing: var(--track-body);
    color: color-mix(in srgb, var(--ink-muted) 85%, transparent);
}

@media (max-width: 640px) {
    .contact-stub {
        max-width: none;
    }

    .contact-stub-group {
        grid-template-columns: 1fr;
        gap: 1.35rem;
        padding: 1.45rem 0 1.55rem;
    }

    .contact-stub-group--identity {
        padding-top: 0.2rem;
    }

    .contact-stub-group--phone {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .contact-stub-field {
        font-size: var(--text-label);
    }

    .contact-stub-field input,
    .contact-stub-field textarea {
        font-size: var(--text-body);
        padding: 0.9rem 1rem;
        border-radius: 0.45rem;
    }

    .contact-stub .iti {
        border-radius: 0.45rem;
    }

    .contact-stub-field-note {
        font-size: var(--text-ui);
        margin-bottom: 0.55rem;
    }

    .contact-stub-field--address textarea {
        min-height: 5rem;
    }

    .address-suggestions.is-open {
        max-height: min(16rem, 42vh);
    }

    .address-suggestion {
        font-size: var(--text-body);
        padding: 0.85rem 1rem;
        min-height: 2.75rem;
    }

    .contact-stub-submit {
        padding: 0.85rem 1.9rem;
        margin-top: 1.5rem;
    }
}

.scene-linen--contact .linen-blurb {
    margin-bottom: 1.5rem;
    font-size: var(--text-lead);
    font-weight: 400;
    line-height: var(--lh-relaxed);
    color: var(--ink);
}

@media (max-width: 720px) {
    #site-nav {
        padding: calc(1.15rem + env(safe-area-inset-top, 0px)) var(--page-gutter) 0.65rem;
    }

    #site-nav.is-linen {
        padding-top: calc(1.35rem + env(safe-area-inset-top, 0px));
        padding-bottom: 1rem;
        overflow: visible;
    }

    /*
     * Solid-ish cream field through the strip, then soft fade below —
     * extends past the nav box so titles can’t read through the links.
     */
    #site-nav.is-linen.is-light::before {
        inset: 0 0 auto 0;
        height: calc(100% + 3.75rem);
        background: linear-gradient(
            to bottom,
            color-mix(in srgb, var(--cream) 96%, white) 0%,
            color-mix(in srgb, var(--cream) 94%, transparent) 38%,
            color-mix(in srgb, var(--cream) 82%, transparent) 55%,
            color-mix(in srgb, var(--cream) 42%, transparent) 78%,
            transparent 100%
        );
        -webkit-backdrop-filter: blur(52px) saturate(1.12);
        backdrop-filter: blur(52px) saturate(1.12);
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
    }

    #site-nav.is-linen.is-nav-compact.is-light::before {
        height: calc(100% + 3.75rem);
        background: linear-gradient(
            to bottom,
            color-mix(in srgb, var(--cream) 96%, white) 0%,
            color-mix(in srgb, var(--cream) 94%, transparent) 40%,
            color-mix(in srgb, var(--cream) 78%, transparent) 58%,
            color-mix(in srgb, var(--cream) 36%, transparent) 80%,
            transparent 100%
        );
    }

    /* Non-linen mobile night→light (hero) keeps a lighter veil */
    #site-nav.is-light:not(.is-linen)::before {
        inset: 0;
        height: auto;
        background: linear-gradient(
            to bottom,
            color-mix(in srgb, var(--cream) 72%, transparent) 0%,
            color-mix(in srgb, var(--cream) 48%, transparent) 55%,
            color-mix(in srgb, var(--cream) 18%, transparent) 82%,
            transparent 100%
        );
        -webkit-backdrop-filter: blur(42px) saturate(1.1);
        backdrop-filter: blur(42px) saturate(1.1);
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
    }

    #site-nav.is-linen .nav-dear {
        display: none !important;
    }

    /* Brand lives in the starfield header; linen mobile is strip-only */
    #site-nav.is-linen .nav-brand {
        display: none;
    }

    #site-nav.is-linen .nav-bar {
        display: none;
    }

    /* Monogram above the strip — placeholder until a real logo */
    #site-nav.is-linen .nav-monogram {
        display: block;
        margin: 0.15rem 0 0.5rem;
        text-align: center;
        font-size: var(--text-body);
        letter-spacing: var(--track-caps);
        color: var(--ink);
        opacity: 0.92;
    }

    /* Centered section strip — scrolls when chips outgrow the width */
    #site-nav.is-linen .nav-linen-cluster:not([hidden]) {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: none;
        margin: 0;
        padding-top: 0.15rem;
        gap: 0.25rem;
    }

    #site-nav.is-linen .nav-linen-links:not([hidden]) {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: safe center;
        align-items: baseline;
        gap: 1.35rem;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0.3rem 0 0.85rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    #site-nav.is-linen .nav-linen-links:not([hidden])::-webkit-scrollbar {
        display: none;
    }

    #site-nav.is-linen .nav-linen-links a {
        flex: 0 0 auto;
        scroll-snap-align: center;
        position: relative;
        padding: 0.45rem 0;
        border: none;
        border-radius: 0;
        background: none;
        font-family: var(--sans);
        font-size: var(--text-ui);
        font-weight: 400;
        font-style: normal;
        letter-spacing: var(--track-body);
        color: var(--ink);
        opacity: 0.58;
        transition: opacity 0.2s ease, color 0.2s ease;
    }

    #site-nav.is-linen .nav-linen-links a:hover,
    #site-nav.is-linen .nav-linen-links a:focus-visible {
        opacity: 1;
        color: var(--coral);
        background: none;
        border: none;
    }

    #site-nav.is-linen .nav-linen-links a.is-active {
        opacity: 1;
        color: var(--coral);
        font-weight: 500;
        background: none;
        border: none;
        pointer-events: none;
    }

    #site-nav.is-linen .nav-linen-links a.is-active::after {
        content: none;
    }

    #site-nav .nav-brand {
        font-size: var(--text-body);
    }

    #site-nav button {
        font-size: var(--text-label);
    }
}