@font-face {
    font-family  : "Felidae";
    src          : url("assets/font/Felidae.woff") format("woff");
    font-style   : normal;
    font-weight  : 400;
    font-display : swap;
}

@font-face {
    font-family  : "Great Vibes";
    src          : url("assets/font/GreatVibes-Regular.ttf") format("truetype");
    font-style   : normal;
    font-weight  : 400;
    font-display : swap;
}

:root {
    --ink                : #001725;
    --ink-soft           : #032237;
    --gold               : #a97135;
    --gold-bright        : #c18b4d;
    --form-focus         : #d1a052;
    --form-error         : #cf8176;
    --form-error-text    : #dda096;
    --cream              : #c7af8d;
    --copy               : #b9a488;
    --shell-width        : 900px;
    --section-gutter     : 50px;
    --section-gap        : 40px;
    --section-title-size : 24px;
    --desktop-scale      : 1.5;
    --serif              : "Felidae", Georgia, serif;
    --script             : "Great Vibes", cursive;
}

* { box-sizing : border-box; }

html {
    scroll-behavior    : smooth;
    scroll-padding-top : 78px;
}

body {
    min-width      : 1180px;
    margin         : 0;
    color          : var(--copy);
    caret-color    : transparent;
    letter-spacing : .15em;
    background     : radial-gradient(ellipse at 50% 17%, rgba(50, 85, 105, .18), transparent 30%),
    radial-gradient(ellipse at 50% 66%, rgba(30, 68, 91, .14), transparent 36%),
    linear-gradient(180deg, #03131d 0%, #062235 49%, #03131d 100%);
    font-family    : var(--serif);
    font-size      : 15px;
}

body::before {
    position            : fixed;
    inset               : 0;
    z-index             : -1;
    content             : "";
    opacity             : .19;
    background-image    : radial-gradient(circle, rgba(222, 174, 102, .54) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(218, 236, 240, .2) 0 .8px, transparent 1.2px);
    background-size     : 83px 89px, 137px 149px;
    background-position : 11px 18px, 53px 71px;
    pointer-events      : none;
}

body::after {
    position       : fixed;
    inset          : 0;
    z-index        : -1;
    content        : "";
    pointer-events : none;
    background     : url("assets/background-grain.svg") repeat;
}

svg { display : block; }

.svg-sprite {
    position : absolute;
    width    : 0;
    height   : 0;
    overflow : hidden;
}

.component-mount { display : contents; }

.component-error {
    position      : fixed;
    z-index       : 100;
    top           : 16px;
    right         : 16px;
    margin        : 0;
    padding       : 12px 16px;
    color         : #ffffff;
    background    : #7b2b28;
    border-radius : 6px;
    font-family   : Arial, sans-serif;
    font-size     : 14px;
}

.site-shell {
    position   : relative;
    width      : calc(var(--shell-width) * var(--desktop-scale));
    min-height : calc(966px * var(--desktop-scale));
    margin     : 0 auto 20px;
}

.desktop-canvas {
    position   : relative;
    width      : var(--shell-width);
    min-height : 966px;
    overflow   : hidden;
    /*background : radial-gradient(ellipse at 50% 15%, rgba(47, 86, 110, .18), transparent 240px),*/
    /*radial-gradient(ellipse at 50% 59%, rgba(25, 65, 89, .19), transparent 330px),*/
    /*linear-gradient(180deg, #03131d 0%, #062235 48%, #03131d 100%);*/
    /*box-shadow : inset 0 0 76px rgba(0, 7, 13, .54);*/
    zoom       : var(--desktop-scale);
}

.desktop-canvas::before {
    position            : absolute;
    inset               : 0;
    z-index             : 0;
    content             : "";
    opacity             : .3;
    background-image    : radial-gradient(circle, rgba(229, 181, 102, .48) 0 1px, transparent 1.35px),
    radial-gradient(circle, rgba(255, 255, 255, .18) 0 .8px, transparent 1.3px);
    background-position : 23px 41px, 62px 19px;
    background-size     : 71px 83px, 113px 127px;
    pointer-events      : none;
}

.desktop-canvas::after {
    position       : absolute;
    inset          : 9px;
    z-index        : 0;
    content        : "";
    pointer-events : none;
    /*box-shadow     : inset 0 0 44px rgba(0, 6, 11, .36);*/
}

.site-header {
    position      : relative;
    z-index       : 5;
    height        : 52px;
    display       : flex;
    align-items   : center;
    padding       : 0 24px;
    border-bottom : 1px solid rgba(194, 144, 79, .09);
}

.hero-header {
    width               : 100%;
    height              : 82px;
    padding             : 0 max(48px, calc((100% - 1220px) / 2));
    background          : rgba(0, 19, 31, .9);
    border-bottom-color : rgba(194, 144, 79, .21);
}

.hero-header .brand { width : 58px; }

.hero-header .brand-mark { width : 64px; height : 64px; }

.hero-header .main-nav { gap : clamp(45px, 6vw, 82px); }

.hero-header .main-nav a { font-size : 14px; }

.brand {
    color           : var(--gold);
    text-decoration : none;
}

.brand-mark {
    position : relative;
    display  : block;
    color    : transparent;
}

.main-nav {
    display         : flex;
    flex            : 1;
    justify-content : center;
    gap             : 45px;
    padding-left    : 7px;
}

.mobile-menu { display : none; }

.main-nav a {
    position        : relative;
    display         : inline-flex;
    align-items     : center;
    min-height      : 44px;
    padding-inline  : 10px;
    color           : var(--gold);
    font-size       : 12px;
    font-weight     : 600;
    text-decoration : none;
    text-transform  : uppercase;
    transition      : color .2s ease, border-color .2s ease, background .2s ease;
}

.main-nav a::after {
    position   : absolute;
    right      : 50%;
    bottom     : 1px;
    left       : 50%;
    height     : 1px;
    content    : "";
    background : var(--gold-bright);
    opacity    : 0;
    transition : right .2s ease, left .2s ease, opacity .2s ease;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
    right   : 0;
    left    : 0;
    opacity : .8;
}

.main-nav a:hover,
.main-nav a:focus-visible { color : #e0ae6b; }

.hero {
    position  : relative;
    z-index   : 1;
    height    : 370px;
    isolation : isolate;
}

.hero-screen {
    width      : 100%;
    height     : calc(100vh - 82px);
    min-height : 700px;
    overflow   : hidden;
    background : radial-gradient(circle 300px at 69% 47%, rgba(150, 126, 75, .14), transparent 100%),
    radial-gradient(circle 435px at 68% 45%, rgba(66, 117, 145, .22), transparent 100%),
    radial-gradient(ellipse at 15% 24%, rgba(22, 68, 91, .2), transparent 42%),
    linear-gradient(180deg, #03131d 0%, #062235 50%, #03131d 100%);
}

.hero-couple {
    position       : absolute;
    z-index        : 2;
    right          : 0;
    top            : 50px;
    width          : auto;
    object-fit     : contain;
    pointer-events : none;
    filter         : drop-shadow(0 18px 28px rgba(0, 7, 13, .34));
}

.hero-foreground {
    position       : absolute;
    z-index        : 4;
    bottom         : 0;
    height         : auto;
    pointer-events : none;
}

.hero-foreground--left {
    left : 0;
}

.hero-foreground--right {
    right : 0;
    width : 28%;
}

.hero::before {
    position   : absolute;
    inset      : 0;
    z-index    : -2;
    content    : "";
    background : radial-gradient(circle 275px at 69% 47%, rgba(193, 157, 84, .14), transparent 100%),
    radial-gradient(circle 410px at 67% 44%, rgba(64, 116, 148, .15), transparent 100%);
}

.hero::after {
    position       : absolute;
    inset          : 0;
    z-index        : -1;
    content        : "";
    pointer-events : none;
    background     : radial-gradient(ellipse at 70% 48%, transparent 39%, rgba(0, 10, 17, .17) 100%),
    linear-gradient(90deg, rgba(1, 15, 24, .22), transparent 52%, rgba(1, 14, 22, .16));
}

.hero-dust {
    position       : absolute;
    z-index        : 1;
    inset          : 0;
    pointer-events : none;
    background     : radial-gradient(circle at 12% 21%, rgba(239, 203, 136, .8) 0 1.7px, transparent 2.5px),
    radial-gradient(circle at 18% 40%, rgba(239, 203, 136, .58) 0 1px, transparent 1.8px),
    radial-gradient(circle at 29% 15%, rgba(239, 203, 136, .46) 0 .8px, transparent 1.5px),
    radial-gradient(circle at 37% 67%, rgba(239, 203, 136, .62) 0 1.2px, transparent 2px),
    radial-gradient(circle at 46% 26%, rgba(239, 203, 136, .48) 0 1px, transparent 1.7px),
    radial-gradient(circle at 56% 76%, rgba(239, 203, 136, .45) 0 .8px, transparent 1.5px),
    radial-gradient(circle at 63% 18%, rgba(239, 203, 136, .66) 0 1.3px, transparent 2.2px),
    radial-gradient(circle at 72% 38%, rgba(239, 203, 136, .52) 0 .9px, transparent 1.6px),
    radial-gradient(circle at 80% 69%, rgba(239, 203, 136, .69) 0 1.5px, transparent 2.4px),
    radial-gradient(circle at 88% 27%, rgba(239, 203, 136, .46) 0 .8px, transparent 1.5px),
    radial-gradient(circle at 91% 51%, rgba(239, 203, 136, .66) 0 1.1px, transparent 2px),
    radial-gradient(circle at 8% 79%, rgba(239, 203, 136, .44) 0 .8px, transparent 1.5px);
    opacity        : .72;
}

.hero-copy {
    position   : absolute;
    z-index    : 3;
    text-align : center;
    font-size  : 20px;
}

.hero-screen .hero-copy {
    top       : 48%;
    left      : calc(50% - 580px);
    width     : 500px;
    transform : translateY(-50%);
}

.hero-screen .eyebrow { font-size : 43px; }

.hero-screen h1 {
    position   : relative;
    margin-top : 19px;
    font-size  : 78px;
}

.hero-screen .mini-ornament { height : 22px; font-size : 16px; }

.hero-screen .mini-ornament span { width : 54px; }

.hero-screen .date { margin-top : 8px; font-size : 31px; }

.hero-screen .heart-mark { font-size : 28px; }

.hero-screen .lead { margin : 9px 0 23px; font-size : 20px; }

.hero-screen .button { min-height : 46px; padding : 0 27px; font-size : 15px;}

.eyebrow,
.name,
.date,
.section-title {
    margin         : 0 0 25px 0;
    color          : var(--gold-bright);
    font-weight    : 500;
    text-transform : uppercase;
}

.eyebrow {
    font-size   : 31px;
    line-height : 1.03;
}

.hero h1 {
    margin      : 20px 0;
    color       : #bd7838;
    font-family : var(--script);
    font-size   : 80px;
    font-weight : 400;
    line-height : .93;
    white-space : nowrap;
}

.hero h1 span {
    margin      : 0 .05em;
    font-family : var(--serif);
    font-size   : .67em;
    font-style  : italic;
}

.mini-ornament {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 4px;
    color           : var(--gold);
}

.mini-ornament i {
    display     : flex;
    align-items : center;
    width       : 12px;
    font-style  : normal;
    font-size   : 12px;
}

.mini-ornament span {
    width      : 50px;
    height     : 1px;
    background : linear-gradient(90deg, transparent, var(--gold));
    opacity    : 0.6;
}

.mini-ornament span:last-child { background : linear-gradient(90deg, var(--gold), transparent); }

.date {
    font-size : 23px;
}

.heart-mark {
    position : relative;
    display  : inline-block;
    margin   : 10px 0;
    color    : var(--gold);
}

.heart-mark:before {
    content          : '';
    position         : absolute;
    top              : 49%;
    left             : -75px;
    width            : 70px;
    height           : 1px;
    background-color : currentColor;
}

.heart-mark:after {
    content          : '';
    position         : absolute;
    top              : 49%;
    right            : -72px;
    width            : 70px;
    height           : 1px;
    background-color : currentColor;
}

.lead {
    margin      : 5px 0 13px;
    color       : #bba88d;
    font-size   : 16px;
    line-height : 1.1;
}

.button {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    min-height      : 32px;
    padding         : 0 17px;
    color           : #d9c2a0;
    background      : linear-gradient(180deg, #b9894e, #885d30);
    border          : 1px solid rgba(222, 174, 102, .43);
    border-radius   : 5px;
    box-shadow      : inset 0 1px rgba(255, 255, 255, .18), 0 5px 12px rgba(0, 0, 0, .34);
    font-family     : var(--serif);
    font-size       : 12px;
    font-weight     : 600;
    text-decoration : none;
    text-transform  : uppercase;
    transition      : filter .2s ease, transform .2s ease;
}

.button:hover,
.button:focus-visible { filter : brightness(1.15); transform : translateY(-1px); }

.frame {
    --frame-opacity : .72;
    position        : relative;
    z-index         : 1;
    overflow        : hidden;
    /*background      : linear-gradient(180deg, rgba(4, 31, 47, .64), rgba(0, 22, 35, .7));*/
}

.frame::before {
    position       : absolute;
    inset          : 11px;
    z-index        : 2;
    content        : "";
    opacity        : var(--frame-opacity);
    pointer-events : none;
    background     : linear-gradient(90deg, transparent 0%, rgba(187, 133, 67, .18) 12%, rgba(187, 133, 67, .78) 31%, rgba(187, 133, 67, .78) 69%, rgba(187, 133, 67, .18) 88%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(187, 133, 67, .18) 12%, rgba(187, 133, 67, .78) 31%, rgba(187, 133, 67, .78) 69%, rgba(187, 133, 67, .18) 88%, transparent 100%) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, transparent 0%, rgba(187, 133, 67, .18) 12%, rgba(187, 133, 67, .78) 31%, rgba(187, 133, 67, .78) 69%, rgba(187, 133, 67, .18) 88%, transparent 100%) left / 1px 100% no-repeat,
    linear-gradient(180deg, transparent 0%, rgba(187, 133, 67, .18) 12%, rgba(187, 133, 67, .78) 31%, rgba(187, 133, 67, .78) 69%, rgba(187, 133, 67, .18) 88%, transparent 100%) right / 1px 100% no-repeat;
}

.frame-art {
    position       : absolute;
    z-index        : 3;
    inset          : 0;
    pointer-events : none;
}

.frame-art i {
    position   : absolute;
    width      : 30px;
    height     : 30px;
    background : url("assets/angle.svg") center / contain no-repeat;
    filter     : invert(22%) sepia(56%) saturate(1451%) hue-rotate(7deg) brightness(173%) contrast(58%);
    opacity    : var(--frame-opacity);
}

.frame-art i:nth-child(1) { top : 0; left : 0; }

.frame-art i:nth-child(2) { top : 0; right : 0; transform : rotate(90deg); }

.frame-art i:nth-child(3) { right : 0; bottom : 0; transform : rotate(180deg); }

.frame-art i:nth-child(4) { bottom : 0; left : 0; transform : rotate(270deg); }

.frame > :not(.frame-art):not(.ambient-particles) {
    position : relative;
    z-index  : 4;
}

.desktop-canvas .section-title {
    margin-bottom : 18px;
    font-size     : var(--section-title-size);
    line-height   : 1.1;
}

.countdown {
    margin          : var(--section-gap) var(--section-gutter);
    padding         : 50px 47px;
    overflow        : hidden;
    text-align      : center;
    --frame-opacity : .84;
}

/* A short pause makes the transition from the hero into the invitation content feel intentional. */
.site-shell .countdown { margin-top : clamp(40px, 4vw, 64px); }

.countdown::after {
    position       : absolute;
    display        : block;
    inset          : -114px -58px;
    z-index        : 0;
    content        : "";
    pointer-events : none;
    opacity        : .72;
}

.countdown h2 { font-size : 19px; }

.countdown-grid {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    margin                : 20px 100px 0 100px;
}

.countdown-grid div {
    position       : relative;
    display        : flex;
    flex-direction : column;
    align-items    : center;
}

.countdown-grid div:not(:last-child)::after {
    position   : absolute;
    top        : 5px;
    right      : 0;
    width      : 1px;
    height     : 43px;
    content    : "";
    background : rgba(188, 135, 72, .8);
}

.countdown strong {
    color       : var(--gold-bright);
    font-size   : 31px;
    font-weight : 500;
    line-height : 1;
}

.countdown span {
    color          : #b7a184;
    font-size      : 13px;
    text-transform : uppercase;
}

.countdown.frame::before { background : none; }

.program {
    position  : relative;
    margin    : 0 var(--section-gutter) var(--section-gap);
    isolation : isolate;
}

.program::before {
    position       : absolute;
    z-index        : -1;
    top            : -58px;
    left           : 50%;
    width          : 330px;
    height         : 250px;
    content        : "";
    pointer-events : none;
    background     : radial-gradient(circle at 18% 54%, rgba(227, 190, 125, .46) 0 1px, transparent 1.5px),
    radial-gradient(circle at 30% 35%, rgba(227, 190, 125, .38) 0 1px, transparent 1.6px),
    radial-gradient(circle at 71% 40%, rgba(227, 190, 125, .34) 0 1px, transparent 1.4px),
    radial-gradient(circle at 85% 63%, rgba(227, 190, 125, .45) 0 1px, transparent 1.5px);
    opacity        : .7;
    transform      : translateX(-50%);
}

.program > :not(.ambient-particles) {
    position : relative;
    z-index  : 1;
}

.section-heading { text-align : center; }

.section-heading h2 { font-size : 26px; }

.timeline {
    position              : relative;
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
}

.timeline::before {
    position   : absolute;
    top        : 29px;
    right      : 10%;
    left       : 10%;
    height     : 1px;
    content    : "";
    background : rgba(184, 130, 67, .78);
}

.timeline-item {
    position   : relative;
    z-index    : 1;
    text-align : center;
}

.timeline-item:not(:last-child)::after {
    position      : absolute;
    top           : 26px;
    right         : -3px;
    width         : 6px;
    height        : 6px;
    content       : "";
    background    : #e3be86;
    border-radius : 50%;
    box-shadow    : 0 0 6px rgba(255, 209, 136, .65);
}

.timeline-icon {
    display       : grid;
    width         : 55px;
    height        : 55px;
    margin        : 0 auto 3px;
    background    : #001a2a;
    border        : 1px solid var(--gold);
    border-radius : 50%;
    place-items   : center;
}

.timeline-icon img {
    width      : 30px;
    height     : 30px;
    object-fit : contain;
    filter     : invert(22%) sepia(56%) saturate(1451%) hue-rotate(7deg) brightness(173%) contrast(58%);
}

.timeline time {
    display     : block;
    color       : var(--gold-bright);
    font-size   : 19px;
    line-height : 1.04;
    margin      : 10px 0 5px 0;
}

.timeline p {
    margin      : 0;
    font-size   : 14px;
    line-height : 1.1;
}

.details-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr 1fr;
    gap                   : 12px;
    margin                : 0 var(--section-gutter) var(--section-gap);
    padding               : 0;
}

.detail-card {
    padding         : 30px 30px 26px;
    text-align      : center;
    --frame-opacity : .7;
}

.detail-card h2 { font-size : 22px; }

.detail-card .mini-ornament { margin-bottom : 10px; }

.detail-card p { margin : 8px 0; font-size : 12px; line-height : 1.15; }

.location-line {
    display     : inline-flex;
    align-items : center;
    gap         : 4px;
}

.location-line svg {
    width        : 17px;
    height       : 17px;
    fill         : none;
    stroke       : var(--gold-bright);
    stroke-width : 2;
}

.venue-image {
    display   : block;
    width     : 100%;
    max-width : 214px;
    height    : auto;
    margin    : 5px auto 8px;
}

.button-small { min-height : 24px; padding : 0 14px; font-size : 10px; }

.swatches {
    position        : relative;
    z-index         : 2;
    display         : flex;
    justify-content : center;
    gap             : 7px;
    margin-top      : 13px;
}

.swatches span {
    flex          : 0 0 34px;
    width         : 34px;
    height        : 34px;
    background    : var(--swatch);
    border        : 1px solid rgba(239, 203, 145, .86);
    border-radius : 50%;
    box-shadow    : inset 0 0 7px rgba(255, 255, 255, .13), 0 3px 7px rgba(0, 0, 0, .25);
}

#dress-code::after {
    position   : absolute;
    z-index    : 2;
    bottom     : 17px;
    left       : 50%;
    width      : 88px;
    height     : 16px;
    content    : "";
    background : url("assets/ornament-3.svg") center / contain no-repeat;
    filter     : invert(22%) sepia(56%) saturate(1451%) hue-rotate(7deg) brightness(173%) contrast(58%);
    opacity    : .58;
    transform  : translateX(-50%);
}

.wishes {
    display               : grid;
    grid-template-columns : 72px minmax(0, 1fr);
    align-items           : center;
    width                 : 640px;
    height                : 132px;
    margin                : 0 auto 15px;
    padding               : 13px 54px;
    --frame-opacity       : .66;
}

.gift-icon {
    display     : grid;
    width       : 58px;
    height      : 58px;
    color       : var(--gold-bright);
    place-items : center;
}

.gift-icon svg {
    width           : 41px;
    height          : 41px;
    fill            : none;
    stroke          : currentColor;
    stroke-linecap  : round;
    stroke-linejoin : round;
    stroke-width    : 1.6;
}

.wishes-copy { min-width : 0; }

.wishes h2 { margin-bottom : 0; font-size : 23px; text-align : center; }

.wishes p { margin : 0; font-size : 13px; line-height : 1.22; }

.wishes::after {
    position   : absolute;
    z-index    : 2;
    right      : 30px;
    bottom     : 9px;
    width      : 78px;
    height     : 16px;
    content    : "";
    background : url("assets/ornament-2.svg") center / contain no-repeat;
    filter     : invert(22%) sepia(56%) saturate(1451%) hue-rotate(7deg) brightness(173%) contrast(58%);
    opacity    : .58;
}

.rsvp {
    margin          : 0 var(--section-gutter) var(--section-gap);
    padding         : 17px 20px 31px;
    --frame-opacity : .82;
}

.rsvp.frame::before,
.rsvp .frame-art { display : none; }

.rsvp::after {
    position       : absolute;
    z-index        : 1;
    right          : 45px;
    bottom         : 30px;
    width          : 180px;
    height         : 130px;
    content        : "";
    pointer-events : none;
    opacity        : .58;
    background     : radial-gradient(circle at 15% 70%, rgba(227, 190, 125, .52) 0 1px, transparent 1.6px),
    radial-gradient(circle at 45% 27%, rgba(227, 190, 125, .35) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 52%, rgba(227, 190, 125, .45) 0 1px, transparent 1.5px);
}

.rsvp .frame::before {
    border : 0;
}

.rsvp-heading h2 { font-size : 24px; }

.rsvp-form {
    position              : relative;
    z-index               : 2;
    display               : grid;
    grid-template-columns : 242px 1px 1fr;
    grid-template-rows    : auto auto;
    gap                   : 25px 20px;
    padding               : 5px 2px 0;
    font-size             : 13px;
}

.input-wrap {
    display       : flex;
    align-items   : center;
    height        : 30px;
    gap           : 7px;
    margin-bottom : 9px;
    padding       : 0 9px;
    background    : rgba(0, 13, 23, .4);
    border        : 1px solid rgba(175, 120, 58, .72);
    border-radius : 5px;
}

.input-wrap svg {
    width           : 17px;
    height          : 17px;
    flex            : 0 0 auto;
    fill            : none;
    stroke          : var(--gold);
    stroke-linecap  : round;
    stroke-linejoin : round;
    stroke-width    : 1.8;
}

input, textarea, button { font : inherit; }

input, textarea { caret-color : auto; }

.input-wrap input {
    width          : 100%;
    color          : var(--copy);
    letter-spacing : .1em;
    background     : transparent;
    border         : 0;
    outline        : 0;
}

.input-wrap input::placeholder {
    color          : rgba(199, 175, 141, .77);
    letter-spacing : .1em;
}

fieldset { min-width : 0; margin : 0; padding : 0; border : 0; }

legend,
.comment-label > span {
    display       : block;
    margin-bottom : 5px;
    color         : var(--gold-bright);
    font-size     : 14px;
}

.attendance {
    margin-top : 30px;
}

.segmented-control { display : grid; grid-template-columns : repeat(3, 1fr); gap : 7px; }

.segmented-control input, .checkbox-grid input { position : absolute; opacity : 0; pointer-events : none; }

.segmented-control label span {
    display       : grid;
    min-height    : 30px;
    border        : 1px solid rgba(175, 120, 58, .72);
    border-radius : 5px;
    cursor        : pointer;
    place-items   : center;
}

.segmented-control input:checked + span,
.segmented-control label:hover span {
    color      : #dfc8a6;
    background : linear-gradient(180deg, #b9894e, #875c30);
}

.form-divider { width : 0.5px; background : rgba(179, 127, 68, .76); }

.checkbox-grid { display : grid; grid-template-columns : repeat(3, 1fr); gap : 7px; }

.checkbox-grid label > span {
    position    : relative;
    display     : flex;
    align-items : center;
    min-height  : 30px;
    padding     : 3px 4px 3px 24px;
    font-size   : 12px;
    line-height : .92;
}

.checkbox-grid label > span::before {
    position  : absolute;
    top       : 50%;
    left      : 7px;
    width     : 11px;
    height    : 11px;
    content   : "";
    border    : 1px solid var(--gold);
    transform : translateY(-50%);
}

.checkbox-grid input:checked + span::before { background : var(--gold); box-shadow : inset 0 0 0 3px var(--ink); }

.comment-label { display : block; margin-top : 8px; }

.comment-label textarea {
    display       : block;
    width         : 100%;
    min-height    : 42px;
    padding       : 5px 7px;
    resize        : vertical;
    color         : var(--copy);
    background    : rgba(0, 13, 23, .4);
    border        : 1px solid rgba(175, 120, 58, .72);
    border-radius : 5px;
    outline       : 0;
}

.input-wrap:focus-within, .comment-label textarea:focus, .segmented-control input:focus-visible + span, .checkbox-grid input:focus-visible + span {
    border-color : #e0ad69;
    box-shadow   : 0 0 0 2px rgba(189, 132, 67, .16);
}

.submit-button {
    position     : static;
    grid-column  : 1 / -1;
    justify-self : center;
    min-width    : 210px;
    min-height   : 31px;
    margin-top   : 0;
    transform    : none;
}

.visually-hidden {
    position    : absolute !important;
    width       : 1px !important;
    height      : 1px !important;
    padding     : 0 !important;
    margin      : -1px !important;
    overflow    : hidden !important;
    clip        : rect(0, 0, 0, 0) !important;
    white-space : nowrap !important;
    border      : 0 !important;
}

.contact {
    position   : relative;
    z-index    : 1;
    min-height : 290px;
    margin     : 0 var(--section-gutter) 20px;
    padding    : 30px 42px 30px;
    overflow   : hidden;
    text-align : center;
    isolation  : isolate;
    background : linear-gradient(90deg, transparent 0%, rgba(190, 140, 75, .08) 6%, rgba(190, 140, 75, .48) 21%, rgba(216, 171, 105, .58) 50%, rgba(190, 140, 75, .48) 79%, rgba(190, 140, 75, .08) 94%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(190, 140, 75, .05) 6%, rgba(190, 140, 75, .32) 21%, rgba(216, 171, 105, .42) 50%, rgba(190, 140, 75, .32) 79%, rgba(190, 140, 75, .05) 94%, transparent 100%) bottom / 100% 1px no-repeat,
    radial-gradient(ellipse at 50% 6%, rgba(73, 120, 144, .15), transparent 49%),
    radial-gradient(ellipse at 50% 88%, rgba(181, 133, 72, .15), transparent 39%);
}

.contact::before,
.contact::after {
    position       : absolute;
    z-index        : -1;
    bottom         : -98px;
    width          : 200px;
    height         : 250px;
    content        : "";
    pointer-events : none;
    opacity        : .12;
    background     : url("assets/botanical-branch.png") center / contain no-repeat;
}

.contact::before { left : -32px; }

.contact::after {
    right     : -32px;
    transform : scaleX(-1);
}

.contact-heading {
    position : relative;
    z-index  : 1;
}

.contact-heading h2 {
    margin-bottom : 8px;
    font-size     : 25px;
}

.contact-heading h2::after {
    display    : block;
    width      : 55px;
    height     : 1px;
    margin     : 10px auto 0;
    content    : "";
    background : linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}

.contact-heading p {
    margin      : 0;
    color       : rgba(204, 185, 151, .86);
    font-size   : 13px;
    line-height : 1.25;
}

.contact__people {
    position              : relative;
    z-index               : 1;
    display               : grid;
    grid-template-columns : repeat(2, minmax(0, 1fr));
    gap                   : 16px;
    max-width             : 432px;
    margin                : 21px auto 17px;
}

.contact-card {
    display               : grid;
    grid-template-columns : 30px 1fr;
    grid-template-areas   : "icon name" "icon number";
    align-items           : center;
    min-height            : 56px;
    padding               : 8px 10px;
    color                 : var(--copy);
    text-align            : left;
    text-decoration       : none;
    background            : linear-gradient(145deg, rgba(2, 21, 43, .6), rgba(5, 35, 66, .3));
    border                : 1px solid rgba(179, 127, 68, .48);
    border-radius         : 3px;
    transition            : border-color .2s ease, background .2s ease, transform .2s ease;
}

.contact-card:hover,
.contact-card:focus-visible {
    border-color : rgba(224, 173, 105, .9);
    background   : rgba(8, 45, 80, .64);
    transform    : translateY(-2px);
}

.contact-card__icon {
    display     : grid;
    grid-area   : icon;
    width       : 23px;
    height      : 23px;
    color       : var(--gold-bright);
    place-items : center;
}

.contact-card__icon img {
    width  : 17px;
    height : 17px;
    filter : invert(68%) sepia(28%) saturate(799%) hue-rotate(357deg) brightness(89%) contrast(85%);
}

.contact-card__name {
    grid-area      : name;
    color          : var(--gold-bright);
    font-size      : 12px;
    line-height    : 1;
    text-transform : uppercase;
}

.contact-card__number {
    grid-area      : number;
    margin-top     : 4px;
    color          : #cbb99e;
    font-size      : 12px;
    line-height    : 1;
    letter-spacing : .08em;
}

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

.contact__closing p {
    margin         : 50px 0 0 0;
    color          : rgba(211, 190, 157, .93);
    font-family    : var(--script);
    font-size      : 27px;
    font-weight    : 400;
    line-height    : .82;
    letter-spacing : .1em;
}

.contact__closing img {
    display : block;
    width   : 17px;
    height  : 17px;
    margin  : 10px auto 0;
    filter  : invert(68%) sepia(28%) saturate(799%) hue-rotate(357deg) brightness(89%) contrast(85%);
    opacity : .9;
}

.contact__dust {
    position       : absolute;
    z-index        : -1;
    inset          : 0;
    pointer-events : none;
    opacity        : .6;
    background     : radial-gradient(circle at 9% 24%, rgba(235, 194, 127, .62) 0 1px, transparent 1.6px),
    radial-gradient(circle at 14% 47%, rgba(255, 222, 155, .55) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 21% 68%, rgba(235, 194, 127, .45) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 39% 18%, rgba(235, 194, 127, .4) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 48% 43%, rgba(246, 205, 127, .52) 0 .85px, transparent 1.5px),
    radial-gradient(circle at 63% 77%, rgba(235, 194, 127, .52) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 11%, rgba(255, 223, 160, .5) 0 .75px, transparent 1.35px),
    radial-gradient(circle at 82% 29%, rgba(235, 194, 127, .45) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 87% 51%, rgba(245, 200, 116, .58) 0 .9px, transparent 1.55px),
    radial-gradient(circle at 94% 66%, rgba(235, 194, 127, .6) 0 1px, transparent 1.6px);
}

/* Design system refresh */
:root {
    --ink                    : #032633;
    --ink-soft               : #031d37;
    --text-primary           : #f3eadc;
    --text-secondary         : #dfd4c5;
    --gold                   : #c8944b;
    --gold-bright            : #d6a45d;
    --cream                  : var(--text-primary);
    --copy                   : var(--text-primary);
    --copy-muted             : var(--text-secondary);
    --content-width          : 1200px;
    --hero-composition-width : min(calc(100% - 64px), 1280px);
    --hero-transition-height : 120px;
    --section-space          : clamp(64px, 8vw, 110px);
    --title-space            : clamp(24px, 3vw, 40px);
    --content-space          : clamp(16px, 2vw, 28px);
    --section-gap            : var(--section-space);
    --section-title-size     : 34px;
    --desktop-scale          : 1;
    --dress-slate-blue       : #667f96;
    --dress-dusty-blue       : #8fa9bd;
    --dress-sage             : #9eaa9b;
    --dress-champagne        : #c8b28f;
    --dress-taupe            : #8b7868;
}

body {
    min-width      : 0;
    color          : rgba(235, 239, 239, .78);
    letter-spacing : .1em;
    font-size      : 16px;
    background     : var(--ink);
}

html,
body {
    width      : 100%;
    max-width  : 100%;
    margin     : 0;
    overflow-x : clip;
}

img,
svg { max-width : 100%; }

.site-shell {
    width      : 100%;
    display    : flow-root;
    min-height : 0;
    margin     : 0;
    min-width  : 0;
    background : linear-gradient(180deg, var(--ink), transparent 100%) top / 100% var(--hero-transition-height) no-repeat;
}

.site-shell::before,
.site-shell::after {
    position          : absolute;
    z-index           : 0;
    top               : 0;
    bottom            : 0;
    width             : max(46px, calc((100% - var(--content-width)) / 2 - 12px));
    content           : "";
    opacity           : .7;
    pointer-events    : none;
    background-repeat : no-repeat;
}

.site-shell::before {
    left             : 0;
    background-image : radial-gradient(circle at 18% 4%, rgba(235, 192, 111, .72) 0 1.25px, transparent 1.8px),
    radial-gradient(circle at 67% 8%, rgba(245, 219, 165, .5) 0 .8px, transparent 1.25px),
    radial-gradient(circle at 31% 15%, rgba(224, 171, 87, .42) 0 .65px, transparent 1.1px),
    radial-gradient(circle at 78% 24%, rgba(235, 192, 111, .58) 0 1px, transparent 1.5px),
    radial-gradient(circle at 12% 33%, rgba(245, 219, 165, .46) 0 .7px, transparent 1.15px),
    radial-gradient(circle at 53% 42%, rgba(224, 171, 87, .5) 0 .9px, transparent 1.4px),
    radial-gradient(circle at 86% 51%, rgba(235, 192, 111, .44) 0 .7px, transparent 1.15px),
    radial-gradient(circle at 24% 63%, rgba(245, 219, 165, .6) 0 1px, transparent 1.45px),
    radial-gradient(circle at 72% 71%, rgba(224, 171, 87, .4) 0 .65px, transparent 1.05px),
    radial-gradient(circle at 39% 84%, rgba(235, 192, 111, .52) 0 .9px, transparent 1.35px),
    radial-gradient(circle at 81% 94%, rgba(245, 219, 165, .48) 0 .75px, transparent 1.2px);
}

.site-shell::after {
    right            : 0;
    background-image : radial-gradient(circle at 76% 2%, rgba(245, 219, 165, .54) 0 .85px, transparent 1.3px),
    radial-gradient(circle at 26% 11%, rgba(224, 171, 87, .66) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 61% 19%, rgba(235, 192, 111, .38) 0 .65px, transparent 1.05px),
    radial-gradient(circle at 13% 29%, rgba(245, 219, 165, .5) 0 .8px, transparent 1.25px),
    radial-gradient(circle at 73% 37%, rgba(224, 171, 87, .48) 0 .85px, transparent 1.3px),
    radial-gradient(circle at 43% 48%, rgba(235, 192, 111, .6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 89% 59%, rgba(245, 219, 165, .4) 0 .7px, transparent 1.1px),
    radial-gradient(circle at 18% 68%, rgba(224, 171, 87, .5) 0 .9px, transparent 1.35px),
    radial-gradient(circle at 64% 78%, rgba(235, 192, 111, .44) 0 .7px, transparent 1.15px),
    radial-gradient(circle at 29% 88%, rgba(245, 219, 165, .56) 0 1px, transparent 1.45px),
    radial-gradient(circle at 84% 97%, rgba(224, 171, 87, .38) 0 .65px, transparent 1.05px);
}

.desktop-canvas {
    z-index    : 1;
    width      : min(var(--content-width), calc(100% - 64px));
    min-height : 0;
    margin     : 0 auto;
    overflow   : visible;
    min-width  : 0;
    zoom       : 1;
}

.desktop-canvas::before { inset : 0 -32px; opacity : .16; }

.desktop-canvas::after { display : none; }

.countdown,
.program,
.detail-card,
.rsvp,
.contact { scroll-margin-top : 78px; }

section[id] { scroll-margin-top : 78px; }

.site-header,
.hero-header {
    position              : sticky;
    top                   : 0;
    z-index               : 20;
    display               : grid;
    grid-template-columns : minmax(0, 1fr) 168px minmax(0, 1fr);
    height                : 88px;
    padding               : 0 max(32px, calc((100% - var(--content-width)) / 2));
    background            : linear-gradient(180deg, rgba(2, 20, 40, .2), rgba(2, 20, 40, 0));
    border-bottom         : 1px solid rgba(214, 164, 93, .38);
    transition            : height .25s ease, background .25s ease, backdrop-filter .25s ease;
}

.hero-header.is-scrolled {
    position                : fixed;
    right                   : 0;
    left                    : 0;
    height                  : 76px;
    background              : rgba(1, 27, 40, .92);
    backdrop-filter         : blur(12px);
    -webkit-backdrop-filter : blur(12px);
    box-shadow              : 0 6px 18px rgba(0, 12, 20, .08);
}

.hero-header {
    position            : absolute;
    background          : transparent;
    border-bottom-color : transparent;
}

.hero-header.is-scrolled { border-bottom-color : rgba(201, 147, 65, .18); }

.hero-header.is-scrolled .brand { width : 68px; height : 68px; }

.hero-header.is-scrolled .brand-mark { width : 56px; height : 56px; }

.hero-header .main-nav {
    display : flex;
    flex    : 1;
    gap     : clamp(30px, 3.6vw, 56px);
    padding : 0;
}

.main-nav--left { justify-content : flex-end; }

.main-nav--right { justify-content : flex-start; }

.main-nav--left { padding-right : 18px !important; }

.main-nav--right { padding-left : 18px !important; }

.hero-header .main-nav a {
    display        : flex;
    min-height     : 48px;
    padding        : 0 10px;
    color          : var(--gold-bright);
    font-size      : 15px;
    letter-spacing : .12em;
    white-space    : nowrap;
}

.hero-header .main-nav a.is-current { color : #f0c275; }

.hero-header .main-nav a.is-current::after {
    right   : 34%;
    left    : 34%;
    opacity : .9;
}

.hero-header .brand {
    position      : relative;
    display       : grid;
    grid-column   : 2;
    grid-row      : 1;
    width         : 84px;
    height        : 84px;
    margin        : 0 auto;
    border        : 1px solid rgba(214, 164, 93, .68);
    border-radius : 50%;
    place-items   : center;
}

.hero-header .brand::before,
.hero-header .brand::after {
    position   : absolute;
    top        : 50%;
    width      : 18px;
    height     : 1px;
    content    : "";
    background : linear-gradient(90deg, transparent, var(--gold-bright));
    opacity    : .8;
}

.hero-header .brand::before { right : calc(100% + 5px); }

.hero-header .brand::after { left : calc(100% + 5px); transform : scaleX(-1); }

.hero-header .brand-mark {
    width      : 70px;
    height     : 70px;
    object-fit : contain;
}

.nav-toggle { display : none; }

.hero-screen {
    height     : 100svh;
    min-height : 670px;
    background : radial-gradient(ellipse at 14% 24%, rgba(13, 54, 91, .18), transparent 42%),
    linear-gradient(180deg, #021428 0%, #031b34 54%, var(--ink) 100%);
}

.hero-glow {
    position       : absolute;
    z-index        : 1;
    top            : 49%;
    right          : max(44px, calc((100% - var(--hero-composition-width)) / 2 - 110px));
    bottom         : auto;
    width          : min(48vw, 680px);
    height         : min(60%, 940px);
    max-width      : 58%;
    aspect-ratio   : 2 / 3;
    pointer-events : none;
    transform      : translateY(calc(-50% + 32px));
}

.hero-glow::before {
    position       : absolute;
    inset          : -18% -30% -10%;
    content        : "";
    pointer-events : none;
    background     : radial-gradient(ellipse at 48% 42%, rgba(224, 183, 105, .38) 0%, rgba(207, 171, 106, .24) 27%, rgba(121, 145, 135, .13) 51%, transparent 75%),
    radial-gradient(ellipse at 48% 45%, rgba(110, 139, 153, .13), transparent 67%),
    radial-gradient(ellipse at 47% 46%, rgba(35, 81, 128, .2), transparent 70%);
    filter         : blur(28px);
    will-change    : opacity, filter;
    animation      : hero-glow-breathe 7.5s ease-in-out infinite;
}

.hero-glow::after {
    position          : absolute;
    inset             : 0;
    content           : "";
    opacity           : .68;
    pointer-events    : none;
    background-image  : radial-gradient(circle at 26% 12%, rgba(242, 204, 131, .76) 0 1.1px, transparent 1.65px),
    radial-gradient(circle at 61% 7%, rgba(240, 218, 174, .54) 0 .75px, transparent 1.2px),
    radial-gradient(circle at 79% 21%, rgba(224, 172, 84, .5) 0 .65px, transparent 1px),
    radial-gradient(circle at 38% 30%, rgba(255, 232, 188, .42) 0 .5px, transparent .9px),
    radial-gradient(circle at 69% 39%, rgba(242, 204, 131, .7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 18% 48%, rgba(240, 218, 174, .48) 0 .7px, transparent 1.1px),
    radial-gradient(circle at 87% 54%, rgba(224, 172, 84, .56) 0 .85px, transparent 1.3px),
    radial-gradient(circle at 46% 63%, rgba(242, 204, 131, .48) 0 .7px, transparent 1.1px),
    radial-gradient(circle at 74% 76%, rgba(255, 232, 188, .45) 0 .65px, transparent 1px),
    radial-gradient(circle at 29% 83%, rgba(224, 172, 84, .5) 0 .8px, transparent 1.25px),
    radial-gradient(circle at 61% 93%, rgba(240, 218, 174, .46) 0 .65px, transparent 1px);
    background-repeat : no-repeat;
}

.hero-screen::after {
    position       : absolute;
    top            : auto;
    right          : 0;
    bottom         : 0;
    left           : 0;
    z-index        : 5;
    height         : var(--hero-transition-height);
    content        : "";
    pointer-events : none;
    background     : linear-gradient(to top, var(--ink) 0%, rgba(3, 38, 51, .76) 24%, rgba(3, 38, 51, .3) 58%, transparent 100%);
}

.hero-portrait {
    position       : absolute;
    z-index        : 2;
    top            : 49%;
    right          : max(44px, calc((100% - var(--hero-composition-width)) / 2 + 20px));
    bottom         : auto;
    width          : min(48vw, 680px);
    height         : min(102%, 940px);
    max-width      : 58%;
    aspect-ratio   : 2 / 3;
    isolation      : isolate;
    pointer-events : none;
    transform      : translateY(calc(-50% + 32px));
}

.hero-portrait .hero-couple {
    position   : absolute;
    z-index    : 1;
    inset      : 0;
    width      : 100%;
    height     : 100%;
    max-width  : none;
    object-fit : contain;
    filter     : drop-shadow(0 28px 36px rgba(0, 7, 13, .58));
    opacity    : 1;
    transform  : none;
}

.hero-portrait::after {
    position       : absolute;
    z-index        : 2;
    right          : -8%;
    bottom         : -2%;
    left           : -8%;
    height         : 24%;
    content        : "";
    pointer-events : none;
    background     : linear-gradient(180deg, transparent 8%, rgba(3, 38, 51, .18) 62%, rgba(3, 38, 51, .46));
}

.hero-foreground {
    z-index : 6;
    height  : min(84%, 690px);
}

.hero-foreground--left { left : 0; }

.hero-foreground--right { right : 0; width : auto; }

.hero-screen .hero-copy {
    z-index   : 7;
    top       : 49%;
    left      : max(32px, calc((100% - var(--hero-composition-width)) / 2));
    width     : 470px;
    transform : translateY(-50%);
}

.hero-screen .eyebrow {
    color       : var(--gold-bright);
    font-size   : 49px;
    line-height : 1.06;
    text-shadow : 0 2px 16px rgba(0, 8, 15, .45);
}

.hero-screen h1 {
    margin      : 26px 0 20px;
    color       : #d08a3e;
    font-size   : clamp(66px, 6vw, 82px);
    text-shadow : 0 3px 20px rgba(0, 8, 15, .38);
}

.hero-screen .date {
    color       : var(--gold-bright);
    font-size   : 37px;
    font-weight : 500;
}

.hero-screen .heart-mark { margin : 0 0 2px; }

.hero-screen .lead {
    margin      : 16px 0 28px;
    color       : #f0e7da;
    font-size   : 20px;
    font-weight : 400;
    line-height : 1.5;
    text-shadow : 0 2px 12px rgba(0, 8, 15, .45);
}

.hero-screen .button {
    min-width  : 326px;
    min-height : 54px;
    padding    : 0 30px;
    font-size  : 15px;
}

.hero-screen .hero-dust { opacity : .52; }

.hero-dust::after {
    position          : absolute;
    inset             : 0;
    content           : "";
    pointer-events    : none;
    opacity           : .7;
    background-image  : radial-gradient(circle at 7% 10%, rgba(237, 194, 112, .68) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 19% 28%, rgba(243, 212, 151, .46) 0 .7px, transparent 1.15px),
    radial-gradient(circle at 34% 8%, rgba(231, 179, 91, .4) 0 .6px, transparent 1px),
    radial-gradient(circle at 45% 37%, rgba(247, 225, 179, .44) 0 .7px, transparent 1.1px),
    radial-gradient(circle at 58% 17%, rgba(237, 194, 112, .53) 0 .85px, transparent 1.3px),
    radial-gradient(circle at 73% 30%, rgba(243, 212, 151, .4) 0 .6px, transparent 1px),
    radial-gradient(circle at 91% 14%, rgba(231, 179, 91, .48) 0 .8px, transparent 1.25px),
    radial-gradient(circle at 14% 57%, rgba(247, 225, 179, .38) 0 .6px, transparent 1px),
    radial-gradient(circle at 36% 69%, rgba(237, 194, 112, .48) 0 .8px, transparent 1.25px),
    radial-gradient(circle at 64% 58%, rgba(243, 212, 151, .38) 0 .6px, transparent 1px),
    radial-gradient(circle at 82% 73%, rgba(231, 179, 91, .52) 0 .85px, transparent 1.3px),
    radial-gradient(circle at 94% 48%, rgba(247, 225, 179, .4) 0 .65px, transparent 1.05px),
    radial-gradient(circle at 27% 88%, rgba(237, 194, 112, .45) 0 .75px, transparent 1.2px),
    radial-gradient(circle at 53% 94%, rgba(243, 212, 151, .36) 0 .55px, transparent .95px),
    radial-gradient(circle at 76% 91%, rgba(231, 179, 91, .46) 0 .75px, transparent 1.2px);
    background-repeat : no-repeat;
}

.frame {
    overflow        : hidden;
    background      : rgba(10, 49, 70, .1);
    --frame-opacity : 1;
}

.frame::before {
    inset         : 0;
    z-index       : 1;
    opacity       : 1;
    background    : none;
    border        : 1px solid rgba(199, 147, 75, .48);
    border-radius : 4px;
}

.input-wrap input::placeholder,
.comment-label textarea::placeholder {
    color   : var(--text-secondary);
    opacity : 1;
}

.comment-label textarea { color : var(--text-primary); }

.button { color : var(--text-primary); }

.frame-art { z-index : 2; }

.frame-art i {
    width   : 38px;
    height  : 38px;
    opacity : .74;
}

.frame > :not(.frame-art):not(.ambient-particles) { z-index : 3; }

.desktop-canvas .section-title,
.section-heading h2 {
    margin-bottom : 16px;
    color         : var(--gold-bright);
    font-size     : var(--section-title-size);
    font-weight   : 500;
    line-height   : 1.1;
}

.countdown {
    margin          : 72px 0 var(--section-gap);
    padding         : 44px 64px 48px;
    --frame-opacity : 1;
}

.countdown h2 { font-size : 32px; }

.countdown-grid {
    max-width  : 900px;
    min-height : 78px;
    margin     : 30px auto 0;
}

.countdown-complete {
    display     : grid;
    min-height  : 78px;
    margin      : 30px auto 0;
    color       : rgba(243, 234, 220, .9);
    font-size   : 21px;
    font-weight : 400;
    line-height : 1.5;
    place-items : center;
}

.countdown-complete[hidden] { display : none; }

.countdown-grid div:not(:last-child)::after {
    top        : 10px;
    height     : 58px;
    background : rgba(214, 164, 93, .76);
}

.countdown strong {
    color       : var(--gold-bright);
    font-size   : 54px;
    font-weight : 500;
}

.countdown span {
    margin-top  : 6px;
    color       : #d9d0c3;
    font-size   : 16px;
    font-weight : 400;
}

.program {
    margin  : 0 0 var(--section-gap);
    padding : 0 28px;
}

.program .section-title { font-size : 40px; }

.program::before { top : -78px; width : 520px; height : 320px; }

/* Two barely-there constellations keep the pauses between sections intentional. */
.program::after {
    position            : absolute;
    z-index             : 0;
    top                 : 24%;
    right               : 3%;
    width               : 190px;
    height              : 150px;
    content             : "";
    pointer-events      : none;
    opacity             : .78;
    background-image    : radial-gradient(circle at 12% 18%, rgba(242, 209, 144, .9) 0 1px, transparent 1.55px),
    radial-gradient(circle at 62% 46%, rgba(242, 209, 144, .72) 0 .8px, transparent 1.3px),
    radial-gradient(circle at 86% 18%, rgba(242, 209, 144, .72) 0 .8px, transparent 1.3px),
    radial-gradient(circle at 34% 82%, rgba(242, 209, 144, .68) 0 .75px, transparent 1.25px),
    linear-gradient(31deg, transparent 49.5%, rgba(232, 199, 132, .14) 50%, transparent 50.5%),
    linear-gradient(151deg, transparent 49.5%, rgba(232, 199, 132, .12) 50%, transparent 50.5%);
    background-size     : auto, auto, auto, auto, 132px 1px, 116px 1px;
    background-position : 0 0, 0 0, 0 0, 0 0, 18px 46px, 42px 78px;
    background-repeat   : no-repeat;
}

.timeline {
    max-width : 1080px;
    margin    : 38px auto 0;
}

.timeline::before {
    top        : 45px;
    right      : 9%;
    left       : 9%;
    background : rgba(199, 147, 75, .68);
}

.timeline-item:not(:last-child)::after { top : 42px; }

.timeline-icon {
    position   : relative;
    z-index    : 2;
    width      : 88px;
    height     : 88px;
    background : var(--ink);
    box-shadow : none;
}

.timeline-icon img { width : 46px; height : 46px; }

.timeline time {
    margin    : 18px 0 8px;
    font-size : 32px;
}

.timeline p {
    color       : rgba(235, 239, 239, .9);
    font-size   : 20px;
    font-weight : 400;
    line-height : 1.42;
}

.details-grid {
    grid-template-columns : repeat(2, minmax(0, 1fr));
    grid-template-areas   : "wishes location" "dress dress";
    column-gap            : 28px;
    row-gap               : 32px;
    margin                : 0 0 66px;
}

#wishes { grid-area : wishes; }

#location { grid-area : location; }

#dress-code { grid-area : dress; }

.detail-card {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    min-height      : 480px;
    padding         : 40px 48px;
    text-align      : center;
    --frame-opacity : 1;
}

.detail-card h2 { font-size : 36px; }

.detail-card .mini-ornament { margin-bottom : 20px; }

.detail-card p {
    margin      : 0;
    color       : rgba(235, 239, 239, .9);
    font-size   : 21px;
    font-weight : 400;
    line-height : 1.56;
}

.detail-card__content {
    display         : flex;
    flex            : 1 0 auto;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    width           : 100%;
    min-width       : 0;
}

.detail-card__content > * { flex-shrink : 0; }

.wishes-copy { width : min(100%, 420px); }

.wishes-copy p + p { margin-top : 24px; }

.wishes-gift {
    display     : grid;
    width       : 46px;
    height      : 46px;
    margin      : -4px 0 16px;
    color       : var(--gold-bright);
    place-items : center;
}

.wishes-gift svg {
    width        : 38px;
    height       : 38px;
    fill         : none;
    stroke       : currentColor;
    stroke-width : 1.5;
}

.location-line { color : rgba(235, 239, 239, .92) !important; font-size : 19px !important; }

.venue-image {
    width     : min(100%, 410px);
    max-width : none;
    height    : auto;
    margin    : 20px auto 32px;
}

.button-small { min-height : 52px; padding : 0 30px; font-size : 15px; }

.location-stay { max-width : 470px; margin : 0 auto 24px; }

.location-stay h3 {
    margin      : 0 0 10px;
    color       : var(--gold-bright);
    font-size   : 21px;
    font-weight : 400;
    line-height : 1.35;
}

.detail-card .location-stay p { color : rgba(235, 239, 239, .88); font-size : 17px; line-height : 1.55; }

.detail-card .location-stay p + p { margin-top : 8px; }

.detail-card .location-notice {
    max-width   : 410px;
    margin      : 16px 0 0;
    font-size   : 16px;
    line-height : 1.55;
}

#dress-code {
    min-height     : 274px;
    padding-inline : 46px;
    padding-bottom : 36px;
}

#dress-code .swatches { gap : clamp(18px, 2.4vw, 32px); margin-top : 34px; }

#dress-code .swatches span { flex-basis : 80px; width : 80px; height : 80px; }

#dress-code .swatch--slate-blue { --swatch : var(--dress-slate-blue); }

#dress-code .swatch--dusty-blue { --swatch : var(--dress-dusty-blue); }

#dress-code .swatch--sage { --swatch : var(--dress-sage); }

#dress-code .swatch--champagne { --swatch : var(--dress-champagne); }

#dress-code .swatch--taupe { --swatch : var(--dress-taupe); }

#dress-code .swatches span:last-child {
    border-color : rgba(244, 220, 164, .74);
    box-shadow   : inset 0 0 0 2px rgba(255, 241, 204, .17), 0 0 16px rgba(214, 164, 93, .2);
}

#dress-code::after { display : none; }

.rsvp {
    position  : relative;
    isolation : isolate;
    margin    : 0 0 36px;
    padding   : 72px 48px 64px;
    /*background      : rgba(10, 52, 72, .07);*/
}

.rsvp::before {
    position       : absolute;
    top            : 0;
    right          : 48px;
    left           : 48px;
    height         : 1px;
    content        : "";
    background     : linear-gradient(90deg, transparent, rgba(196, 147, 79, .48), transparent);
    pointer-events : none;
}

.rsvp::after { display : none; }

.rsvp-inner {
    position : relative;
    z-index  : 1;
    width    : min(100%, 1040px);
    margin   : 0 auto;
}

.rsvp-heading h2 { font-size : 38px; }

.rsvp-heading .mini-ornament { margin-bottom : 18px; }

.rsvp-deadline {
    margin      : 0 auto 28px;
    color       : rgba(235, 239, 239, .86);
    font-size   : 17px;
    font-weight : 400;
    line-height : 1.45;
}

.rsvp-form {
    grid-template-columns : minmax(0, .9fr) 1px minmax(0, 1.2fr);
    gap                   : 26px 52px;
    padding               : 0;
    font-size             : 17px;
}

.input-wrap {
    display       : grid;
    height        : auto;
    gap           : 8px;
    margin-bottom : 21px;
    padding       : 0;
    background    : none;
    border        : 0;
}

.input-wrap > span,
legend,
.comment-label > span {
    margin-bottom : 0;
    color         : rgba(235, 239, 239, .94);
    font-size     : 17px;
}

.field-error {
    display        : none;
    align-items    : flex-start;
    gap            : 7px;
    margin-top     : 7px;
    color          : var(--form-error-text) !important;
    font-size      : 14px !important;
    font-weight    : 400;
    letter-spacing : .12em;
    line-height    : 1.35;
}

.input-wrap.has-error .field-error { display : flex; }

.input-wrap.has-error,
.input-wrap.has-error:focus-within {
    border     : 0 !important;
    box-shadow : none !important;
}

.input-wrap input {
    height        : 56px;
    padding       : 0 18px;
    color         : var(--text-primary);
    background    : rgba(1, 18, 37, .58);
    border        : 1px solid rgba(199, 147, 75, .58);
    border-radius : 2px;
    outline       : none;
    transition    : border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.phone-input {
    display       : flex;
    min-width     : 0;
    height        : 56px;
    overflow      : hidden;
    background    : rgba(1, 18, 37, .58);
    border        : 1px solid rgba(199, 147, 75, .58);
    border-radius : 2px;
    transition    : border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.phone-prefix {
    display        : flex;
    flex           : 0 0 auto;
    align-items    : center;
    padding        : 0 7px 0 18px;
    color          : var(--text-primary);
    letter-spacing : .1em;
}

.phone-input input {
    flex          : 1 1 auto;
    min-width     : 0;
    height        : 100%;
    padding-left  : 0;
    background    : transparent;
    border        : 0;
    border-radius : 0;
}

.phone-input input:focus-visible { outline : none; }

.phone-input:hover { border-color : rgba(200, 148, 75, .78); }

.phone-input:focus-within {
    background   : rgba(4, 32, 54, .8);
    border-color : var(--form-focus);
    box-shadow   : 0 0 0 3px rgba(209, 160, 82, .14);
}

.attendance { margin-top : 36px; }

.attendance legend,
.drink-options legend { margin-bottom : 12px; }

.form-hint {
    margin      : -5px 0 14px;
    color       : rgba(235, 239, 239, .58);
    font-size   : 14px;
    line-height : 1.4;
}

.segmented-control { gap : 10px; }

.segmented-control label span { min-height : 52px; font-size : 17px; border-radius : 2px; }

.form-divider {
    grid-column : 2;
    grid-row    : 1 / 3;
    width       : 1px;
    background  : linear-gradient(to bottom, transparent, rgba(199, 147, 75, .32) 5%, rgba(199, 147, 75, .32) 92%, transparent);
}

.checkbox-grid { grid-template-columns : repeat(2, minmax(0, 1fr)); gap : 9px 24px; }

.drink-group { display : grid; align-content : start; gap : 9px; min-width : 0; }

.checkbox-grid label { display : flex; align-items : center; min-height : 44px; cursor : pointer; }

.checkbox-grid label > span { width : 100%; min-height : 44px; padding-left : 33px; font-size : 17px; line-height : 1.3; }

.checkbox-grid label > span::before { left : 0; width : 20px; height : 20px; }

.comment-label { margin-top : 24px; }

.comment-label > span { margin-bottom : 8px; }

.comment-label .comment-hint { display : block; margin-bottom : 12px; color : var(--text-secondary); font-size : 15px; line-height : 1.5; }

.comment-label textarea {
    min-height     : 132px;
    padding        : 15px 17px;
    font-size      : 17px;
    letter-spacing : .1em;
    border-color   : rgba(199, 147, 75, .58);
    border-radius  : 2px;
    outline        : none;
    transition     : border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

/* Keep both typed values and placeholders comfortably letter-spaced in the questionnaire. */
.rsvp-form input[type="text"],
.rsvp-form input[type="tel"],
.rsvp-form textarea { letter-spacing : .1em; }

.submit-button { min-width : 336px; min-height : 52px; margin-top : 28px; font-size : 17px; }

.rsvp-stay { display : contents; }

.rsvp-stay[hidden],
.stay-accommodation[hidden] { display : none !important; }

.rsvp-stay > .stay-question { grid-column : 1; grid-row : 2; }

.stay-accommodation { grid-column : 3; grid-row : 2; min-width : 0; }

.stay-accommodation:not([hidden]) { animation : form-follow-up-in .38s cubic-bezier(.22, .8, .3, 1) both; }

.stay-later-note {
    grid-column : 1;
    grid-row    : 3;
    margin      : -4px 0 0;
    color       : rgba(235, 239, 239, .66);
    font-size   : 15px;
    line-height : 1.45;
    animation   : form-follow-up-in .38s cubic-bezier(.22, .8, .3, 1) both;
}

.stay-later-note[hidden] { display : none; }

.stay-question legend { min-height : 2.9em; margin-bottom : 12px; line-height : 1.45; }

.rsvp-stay .segmented-control { grid-template-columns : repeat(3, minmax(0, 1fr)); }

.rsvp-stay .segmented-control label { display : grid; min-width : 0; }

.rsvp-stay .segmented-control label span { min-height : 54px; padding : 8px 6px; font-size : 16px; line-height : 1.25; text-align : center; }

.stay-question.has-error .field-error { display : flex; }

.stay-question.has-error .segmented-control span { border-color : var(--form-error); }

.overnight-guests { margin : 20px 0 0; }

.overnight-guests:focus-within { box-shadow : none; }

.overnight-guests[hidden] { display : none; }

.guest-stepper {
    position              : relative;
    display               : grid;
    grid-template-columns : 54px minmax(68px, 1fr) 54px;
    width                 : min(100%, 220px);
    min-height            : 52px;
    overflow              : hidden;
    background            : rgba(1, 18, 37, .58);
    border                : 1px solid rgba(199, 147, 75, .58);
    border-radius         : 2px;
}

.guest-stepper:focus-within {
    border-color : var(--form-focus);
    box-shadow   : 0 0 0 3px rgba(209, 160, 82, .14);
}

.guest-stepper__button {
    display     : grid;
    padding     : 0;
    color       : var(--gold-bright);
    background  : transparent;
    border      : 0;
    cursor      : pointer;
    font-size   : 28px;
    line-height : 1;
    place-items : center;
    transition  : color .18s ease, background .18s ease;
}

.guest-stepper__button:first-child { border-right : 1px solid rgba(199, 147, 75, .38); }

.guest-stepper__button:last-of-type { border-left : 1px solid rgba(199, 147, 75, .38); }

.guest-stepper__button:hover,
.guest-stepper__button:focus-visible { color : #f6ecdd; background : rgba(200, 148, 75, .16); }

.guest-stepper__button:disabled { color : rgba(235, 239, 239, .28); cursor : not-allowed; }

.guest-stepper__button:disabled:hover { background : transparent; }

.guest-stepper__value {
    display              : grid;
    color                : var(--text-primary);
    font-size            : 19px;
    font-variant-numeric : tabular-nums;
    place-items          : center;
}

.guest-stepper__input {
    position       : absolute;
    width          : 1px;
    height         : 1px;
    opacity        : 0;
    pointer-events : none;
}

.input-wrap input:hover,
.comment-label textarea:hover { border-color : rgba(200, 148, 75, .78); }

.input-wrap input:focus,
.comment-label textarea:focus {
    background   : rgba(4, 32, 54, .8);
    border-color : var(--form-focus);
    box-shadow   : 0 0 0 3px rgba(209, 160, 82, .14);
}

.input-wrap.has-error input,
.input-wrap input[aria-invalid="true"] {
    border-color : var(--form-error) !important;
    box-shadow   : 0 0 0 2px rgba(207, 129, 118, .12) !important;
    outline      : none !important;
}

.input-wrap.has-error:focus-within input,
.input-wrap input[aria-invalid="true"]:focus {
    border-color : var(--form-error) !important;
    box-shadow   : 0 0 0 3px rgba(207, 129, 118, .18) !important;
}

.phone-input input:hover,
.phone-input input:focus,
.input-wrap.has-error .phone-input input,
.input-wrap.has-error:focus-within .phone-input input,
.phone-input input[aria-invalid="true"],
.phone-input input[aria-invalid="true"]:focus {
    background : transparent;
    border     : 0 !important;
    box-shadow : none !important;
}

.input-wrap.has-error .phone-input {
    border-color : var(--form-error) !important;
    box-shadow   : 0 0 0 2px rgba(207, 129, 118, .12) !important;
}

.input-wrap.has-error:focus-within .phone-input {
    box-shadow : 0 0 0 3px rgba(207, 129, 118, .18) !important;
}

.segmented-control input:checked + span {
    border-color : rgba(232, 185, 112, .8);
    box-shadow   : 0 0 0 2px rgba(200, 148, 75, .14);
}

.checkbox-grid input:checked + span { color : var(--text-primary); }

.rsvp.is-submitting .submit-button {
    cursor  : wait;
    filter  : saturate(.72);
    opacity : .82;
}

.submit-button:disabled { pointer-events : none; }

.rsvp-success {
    position      : relative;
    z-index       : 3;
    display       : grid;
    justify-items : center;
    gap           : 10px;
    width         : min(100%, 560px);
    margin        : 10px auto 0;
    padding       : 36px 28px;
    color         : var(--text-primary);
    text-align    : center;
    background    : rgba(7, 43, 59, .22);
    border        : 1px solid rgba(198, 148, 76, .38);
    border-radius : 4px;
}

.rsvp-success__icon {
    display       : grid;
    width         : 40px;
    height        : 40px;
    margin-bottom : 4px;
    color         : var(--gold-bright);
    border        : 1px solid rgba(198, 148, 76, .56);
    border-radius : 50%;
    font-size     : 24px;
    line-height   : 1;
    place-items   : center;
}

.rsvp-success__status {
    color          : var(--gold-bright);
    font-size      : 12px;
    letter-spacing : .22em;
    text-transform : uppercase;
}

.rsvp-success__title { color : var(--gold-bright); font-size : 25px; font-weight : 500; }

.rsvp-success__text { color : rgba(235, 239, 239, .9); font-size : 18px; font-weight : 400; line-height : 1.5; }

.rsvp-edit {
    margin-top     : 8px;
    padding        : 4px;
    color          : var(--gold-bright);
    background     : transparent;
    border         : 0;
    border-bottom  : 1px solid rgba(214, 164, 93, .56);
    cursor         : pointer;
    font-family    : inherit;
    font-size      : 16px;
    letter-spacing : inherit;
    transition     : color .18s ease, border-color .18s ease;
}

.rsvp-edit:hover,
.rsvp-edit:focus-visible { color : #f1c982; border-bottom-color : currentColor; }

.rsvp-submit-error {
    grid-column : 1 / -1;
    margin      : 0;
    color       : var(--form-error-text);
    font-size   : 16px;
    line-height : 1.45;
    text-align  : center;
}

.rsvp-submit-error[hidden] { display : none; }

.rsvp-success[hidden] { display : none; }

.rsvp.is-submitted .rsvp-form,
.rsvp.is-submitted .rsvp-deadline { display : none; }

.rsvp.rsvp--success {
    margin-bottom : 28px;
    padding       : 56px 48px 64px;
}

.rsvp--success .rsvp-heading .mini-ornament { margin-bottom : 10px; }

.rsvp--success .rsvp-success { margin-top : 0; }

.contact {
    min-height : 460px;
    margin     : 0 -20px 0;
    padding    : 48px 72px 80px;
    overflow   : hidden;
    background : linear-gradient(90deg, transparent, rgba(190, 140, 75, .35), transparent) top / 100% 1px no-repeat;
}

.contact::before,
.contact::after { bottom : -80px; opacity : .14; }

@media (min-width : 768px) {
    #wishes { padding-block : 52px; }

    .contact::before,
    .contact::after {
        bottom  : -46px;
        width   : 286px;
        height  : 356px;
        opacity : .18;
    }
}

.contact-heading h2 { margin-bottom : 10px; font-size : 38px; }

.contact-heading p { color : rgba(235, 239, 239, .88); font-size : 18px; line-height : 1.5; }

.contact__people { max-width : 720px; gap : 28px; margin : 14px auto 20px; }

.contact-card {
    min-width             : 330px;
    min-height            : 90px;
    grid-template-columns : 48px 1fr;
    padding               : 16px 26px;
    border-color          : rgba(199, 147, 75, .4);
}

.contact-card__icon { width : 38px; height : 38px; }

.contact-card__icon img { width : 29px; height : 29px; }

.contact-card__name { font-size : 18px; }

.contact-card__number { color : rgba(243, 234, 220, .86); font-size : 17px; }

.contact__closing p { color : var(--gold-bright); font-size : 32px; line-height : .98; }

.contact__closing img { margin-top : 10px; }

.contact__closing b,
.contact__closing span { display : block; color : var(--gold-bright); font-weight : 500; }

.contact__closing b { margin-top : 8px; font-size : 22px; }

.contact__closing span { margin-top : 7px; font-size : 15px; }

.button {
    min-height    : 48px;
    padding       : 0 30px;
    color         : #f6ecdd;
    background    : linear-gradient(180deg, #c99a58, #a66d2c);
    border        : 1px solid rgba(232, 185, 112, .52);
    border-radius : 3px;
    box-shadow    : none;
    transition    : transform 180ms ease, filter 180ms ease;
}

button.button:not(:disabled) { cursor : pointer; }

.button:hover,
.button:focus-visible {
    filter    : brightness(1.08);
    transform : translateY(-1px);
}

.button--secondary {
    color      : #d7aa68;
    background : transparent;
    border     : 1px solid rgba(200, 148, 75, .72);
    transition : transform 180ms ease, filter 180ms ease, background 180ms ease;
}

.button--secondary:hover,
.button--secondary:focus-visible {
    background : linear-gradient(180deg, rgba(211, 164, 91, .18), rgba(166, 109, 44, .1));
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline        : 2px solid #d5a25a;
    outline-offset : 3px;
}

.input-wrap input[aria-invalid="true"]:focus-visible { outline : none !important; }

@media (min-width : 1600px) {
    :root {
        --content-width      : min(84vw, 1320px);
        --section-gap        : var(--section-space);
        --section-title-size : 38px;
    }

    .desktop-canvas { width : min(var(--content-width), calc(100% - 96px)); }

    .site-header,
    .hero-header { height : 96px; }

    .hero-header.is-scrolled { height : 84px; }

    .hero-header .main-nav a { min-height : 52px; font-size : 16px; }

    .hero-header .brand { width : 92px; height : 92px; }

    .hero-header .brand-mark { width : 74px; height : 74px; }

    .hero-screen .hero-copy { width : clamp(520px, 35vw, 600px); }

    .hero-screen .eyebrow { font-size : clamp(54px, 3.2vw, 64px); }

    .hero-screen h1 { font-size : clamp(72px, 4.4vw, 94px); }

    .hero-screen .date { font-size : clamp(40px, 2.2vw, 46px); }

    .hero-screen .lead { font-size : 22px; }

    .hero-screen .button { min-width : 352px; min-height : 58px; font-size : 16px; }

    .hero-portrait {
        width     : min(70vw, 1300px);
        max-width : 70%;
        right     : 0;
    }

    .hero-glow {
        right      : 70px;
        max-height : 60%;
    }

    .countdown { padding : 50px 72px 54px; }

    .countdown h2 { font-size : 36px; }

    .countdown strong { font-size : 59px; }

    .countdown span { font-size : 17px; }

    .program .section-title { font-size : 44px; }

    .timeline { max-width : 1160px; }

    .timeline-icon { width : 96px; height : 96px; }

    .timeline-icon img { width : 50px; height : 50px; }

    .timeline::before { top : 49px; }

    .timeline-item:not(:last-child)::after { top : 46px; }

    .timeline time { font-size : 35px; }

    .timeline p { font-size : 22px; }

    .details-grid { column-gap : 32px; row-gap : 36px; }

    .detail-card { min-height : 520px; padding : 44px 54px; }

    .detail-card h2 { font-size : 40px; }

    .detail-card p { font-size : 23px; }

    .location-line { font-size : 20px !important; }

    #dress-code { min-height : 296px; padding-inline : 54px; padding-bottom : 40px; }

    #dress-code .swatches span { flex-basis : 86px; width : 86px; height : 86px; }

    .rsvp { padding : 78px 56px 70px; }

    .rsvp-heading h2 { font-size : 42px; }

    .rsvp-deadline,
    .rsvp-form,
    .input-wrap > span,
    legend,
    .comment-label > span { font-size : 18px; }

    .contact { padding : 54px 80px 88px; }

    .contact-heading h2 { font-size : 42px; }

    .contact-heading p { font-size : 20px; }

    .contact-card { min-height : 98px; }

    .contact-card__name { font-size : 19px; }

    .contact-card__number { font-size : 18px; }

    .contact__closing p { font-size : 35px; }
}

/* Keep the Full HD hero proportions when the background has more horizontal room. */
@media (min-width : 1921px) {
    .hero-screen .hero-copy {
        left  : clamp(280px, 14.583333vw, 502px);
        width : clamp(650px, 33.854167vw, 1165px);
    }

    .hero-screen .eyebrow { font-size : clamp(54px, 2.75vw, 94px); }

    .hero-screen h1 {
        margin    : clamp(26px, 1.354167vw, 47px) 0 clamp(20px, 1.041667vw, 36px);
        font-size : clamp(80px, 4.1vw, 142px);
    }

    .hero-screen .date { font-size : clamp(39px, 2vw, 68px); }

    .hero-screen .heart-mark { font-size : clamp(26px, 1.35vw, 46px); }

    .hero-screen .lead {
        margin    : clamp(16px, .833333vw, 29px) 0 clamp(28px, 1.458333vw, 50px);
        font-size : clamp(21px, 1.08vw, 37px);
    }

    .hero-screen .button {
        min-width  : clamp(352px, 18.333333vw, 630px);
        min-height : clamp(58px, 3.020833vw, 104px);
        font-size  : clamp(15px, .76vw, 26px);
    }

    .hero-portrait {
        width  : clamp(840px, 53.75vw, 1205px);
        height : min(94%, 1155px);
    }

    .hero-glow,
    .hero-portrait {
        right     : clamp(200px, 10vw, 538px);
        transform : translateY(calc(-50% + clamp(32px, 1.666667vw, 57px)));
    }
}

@media (max-width : 960px) {
    .desktop-canvas { width : min(var(--content-width), calc(100% - 40px)); }

    .site-header,
    .hero-header { grid-template-columns : 1fr 72px 1fr; padding : 0 20px; }

    .hero-header .main-nav--left,
    .hero-header .main-nav--right { display : none; }

    .mobile-menu {
        position       : fixed;
        inset          : 0;
        z-index        : 9999;
        display        : flex;
        flex-direction : column;
        min-height     : 100dvh;
        overflow       : hidden;
        opacity        : 0;
        visibility     : hidden;
        pointer-events : none;
        isolation      : isolate;
        background     : radial-gradient(circle at 50% 30%, rgba(27, 66, 83, .28), transparent 45%), #021a29;
        transition     : opacity .35s ease, visibility .35s ease;
    }

    .mobile-menu::before {
        position          : absolute;
        inset             : 0;
        z-index           : -1;
        content           : "";
        opacity           : .38;
        background-image  : radial-gradient(circle at 13% 19%, rgba(230, 185, 109, .72) 0 1px, transparent 1.55px),
        radial-gradient(circle at 79% 15%, rgba(235, 220, 180, .46) 0 .75px, transparent 1.25px),
        radial-gradient(circle at 28% 71%, rgba(215, 159, 74, .58) 0 .9px, transparent 1.4px),
        radial-gradient(circle at 88% 78%, rgba(233, 205, 137, .48) 0 .7px, transparent 1.15px),
        radial-gradient(circle at 61% 89%, rgba(214, 158, 72, .45) 0 .7px, transparent 1.1px);
        background-repeat : no-repeat;
    }

    .mobile-menu.is-open {
        opacity        : 1;
        visibility     : visible;
        pointer-events : auto;
    }

    .mobile-menu__top {
        position        : relative;
        display         : flex;
        align-items     : center;
        justify-content : center;
        min-height      : 88px;
        padding         : max(12px, env(safe-area-inset-top)) 20px 12px;
        border-bottom   : 1px solid rgba(197, 139, 67, .22);
    }

    .mobile-menu__logo {
        display     : grid;
        width       : 62px;
        height      : 62px;
        place-items : center;
    }

    .mobile-menu__logo img {
        width      : 100%;
        height     : 100%;
        object-fit : contain;
    }

    .mobile-menu__close {
        position   : absolute;
        top        : calc(max(12px, env(safe-area-inset-top)) + 12px);
        right      : max(18px, env(safe-area-inset-right));
        width      : 48px;
        height     : 48px;
        padding    : 0;
        border     : 0;
        color      : var(--gold-bright);
        background : transparent;
        cursor     : pointer;
    }

    .mobile-menu__close span {
        position   : absolute;
        top        : 50%;
        left       : 50%;
        width      : 28px;
        height     : 1px;
        background : currentColor;
    }

    .mobile-menu__close span:first-child { transform : translate(-50%, -50%) rotate(45deg); }

    .mobile-menu__close span:last-child { transform : translate(-50%, -50%) rotate(-45deg); }

    .mobile-menu__nav {
        display         : flex;
        flex            : 1;
        flex-direction  : column;
        justify-content : center;
        align-items     : center;
        gap             : 30px;
        padding         : 36px clamp(32px, 12vw, 68px) max(48px, env(safe-area-inset-bottom));
    }

    .mobile-menu__nav a {
        position        : relative;
        width           : fit-content;
        color           : #d49a50;
        font-family     : var(--serif);
        font-size       : clamp(25px, 7vw, 34px);
        line-height     : 1.15;
        letter-spacing  : .04em;
        text-decoration : none;
        text-align      : center;
        text-transform  : uppercase;
        opacity         : 0;
        transform       : translateY(12px);
        transition      : color .2s ease, opacity .35s ease, transform .35s ease;
    }

    .mobile-menu__nav a::after {
        position   : absolute;
        bottom     : -8px;
        left       : 0;
        width      : 0;
        height     : 1px;
        content    : "";
        background : currentColor;
        transition : width .25s ease;
    }

    .mobile-menu__nav a:hover,
    .mobile-menu__nav a:focus-visible { color : #e2b675; }

    .mobile-menu__nav a:hover::after,
    .mobile-menu__nav a:focus-visible::after { width : 100%; }

    .mobile-menu.is-open .mobile-menu__nav a {
        opacity   : 1;
        transform : translateY(0);
    }

    .mobile-menu.is-open .mobile-menu__nav a:nth-child(1) { transition-delay : .08s; }

    .mobile-menu.is-open .mobile-menu__nav a:nth-child(2) { transition-delay : .12s; }

    .mobile-menu.is-open .mobile-menu__nav a:nth-child(3) { transition-delay : .16s; }

    .mobile-menu.is-open .mobile-menu__nav a:nth-child(4) { transition-delay : .20s; }

    .mobile-menu.is-open .mobile-menu__nav a:nth-child(5) { transition-delay : .24s; }

    .mobile-menu.is-open .mobile-menu__nav a:nth-child(6) { transition-delay : .28s; }

    .hero-header .brand { grid-column : 2; width : 62px; height : 62px; }

    .hero-header .brand-mark { width : 48px; height : 48px; }

    .nav-toggle {
        position     : relative;
        display      : grid;
        grid-column  : 3;
        justify-self : end;
        width        : 44px;
        height       : 44px;
        padding      : 8px;
        border       : 0;
        background   : none;
        cursor       : pointer;
        place-items  : center;
    }

    .nav-toggle i {
        position   : absolute;
        display    : block;
        width      : 24px;
        height     : 1px;
        background : var(--gold-bright);
        transition : transform .2s ease, opacity .2s ease;
    }

    .nav-toggle i:first-of-type { transform : translateY(-7px); }

    .nav-toggle i:last-of-type { transform : translateY(7px); }

    .hero-header.is-menu-open .nav-toggle i:first-of-type { transform : rotate(45deg); }

    .hero-header.is-menu-open .nav-toggle i:nth-of-type(2) { opacity : 0; }

    .hero-header.is-menu-open .nav-toggle i:last-of-type { transform : rotate(-45deg); }

    .details-grid { grid-template-columns : 1fr; grid-template-areas : "wishes" "location" "dress"; }

    .rsvp-form { grid-template-columns : 1fr; }

    .rsvp-stay > .stay-question,
    .stay-accommodation,
    .stay-later-note { grid-column : auto; grid-row : auto; }

    .stay-question legend { min-height : 0; }

    .form-divider { display : none; }

    .contact { margin-right : 0; margin-left : 0; padding-right : 32px; padding-left : 32px; }

    body.menu-open {
        position : fixed;
        top      : var(--menu-scroll-position, 0);
        right    : 0;
        left     : 0;
        width    : 100%;
        overflow : hidden;
    }

    .hero-foreground { --foreground-fade : 48px; }

    .has-js .program .timeline::before {
        transform        : scaleY(0);
        transform-origin : center top;
    }

    .has-js .program.is-visible .timeline::before { transform : scaleY(1); }
}

@media (min-width : 901px) and (max-height : 800px) {
    .hero-screen .heart-mark,
    .hero-screen .lead,
    .hero-screen .button { display : none; }

    .hero-screen { min-height : 100svh; }

    .hero-portrait {
        top    : 50%;
        bottom : auto;
        height : min(84svh, 680px);
        right  : max(44px, calc((100% - var(--hero-composition-width)) / 2 + 80px));
        width: min(48vw, 680px);
    }

    .hero-glow {
        width  : 480px;
        top    : 65%;
        height : 640px;
        right  : max(44px, calc((100% - var(--hero-composition-width)) / 2 + 80px));
    }

    .hero-screen .hero-copy {
        top  : 50%;
        left : max(calc(53% - 550px), 130px);
    }

    .hero-screen .eyebrow { font-size : 43px; }

    .hero-screen h1 { margin : 25px 0 20px; font-size : clamp(60px, 5.3vw, 72px); }

    .hero-screen .date { font-size : 33px; }
}

@media (min-width : 960px) and (max-width : 1680px) and (min-height : 860px) {
    .hero-screen .hero-copy {
        left : clamp(140px, 11vw, 164px);
        top  : 45%;
    }

    .hero-glow {
        width  : 580px;
        height : min(86svh, 690px);
        right  : max(5px, calc((100% - 2000px) / 2 + 60px));
    }

    .hero-portrait {
        width     : min(80vw, 1080px);
        max-width : 100%;
        right     : max(30px, calc((100% - 2000px) / 2 + 60px));
    }

    .hero-glow,
    .hero-portrait {
        top : clamp(300px, 62.8vh - 100px, 570px);
    }
}

@media (min-width : 768px) and (max-width : 960px) {
    /* Tablet cover: full portrait source, ample left copy column, foreground as a lower mask. */
    .hero-screen { height : 100svh; min-height : 720px; }

    .hero-screen .heart-mark,
    .hero-screen .lead,
    .hero-screen .button { display : none; }

    .hero-screen .hero-copy {
        z-index    : 7;
        top        : 35%;
        bottom     : auto;
        left       : clamp(76px, 14vw, 138px);
        width      : min(310px, 36vw);
        transform  : translateY(-50%);
        text-align : left;
    }

    .hero-screen .eyebrow {
        display   : block;
        margin    : 0 0 28px;
        font-size : clamp(30px, 4.1vw, 40px);
    }

    .hero-screen h1 {
        display               : grid;
        grid-template-columns : 1fr;
        justify-items         : center;
        width                 : max-content;
        max-width             : 100%;
        margin                : 0 0 18px;
        font-size             : clamp(52px, 6.8vw, 66px);
        line-height           : .88;
        text-align            : center;
        white-space           : normal;
    }

    .hero-screen h1 span { margin : -.06em 0; line-height : .7; }

    .hero-screen .date { margin : 0; font-size : clamp(27px, 3.6vw, 34px); }

    .hero-portrait {
        top       : 52%;
        right     : clamp(-72px, calc(-7vw + 48px), 0px);
        bottom    : auto;
        left      : auto;
        width     : min(100vw, 920px);
        height    : 92%;
        max-width : none;
        transform : translateY(-50%);
    }

    .hero-glow {
        top    : 52%;
        right  : clamp(-72px, calc(-7vw + 58px), 0px);
        bottom : auto;
        left   : auto;
        height : 67%;
        width  : min(100vw, 920px);
    }

    .hero-portrait .hero-couple { object-position : center bottom; }

    .hero-portrait::after { height : 26%; }

    .hero-foreground { z-index : 6; height : min(52%, 500px); }

    .site-shell .countdown { margin-top : 24px; }

    .details-grid {
        grid-template-columns : repeat(2, minmax(0, 1fr));
        grid-template-areas   : "wishes location" "dress dress";
    }

    .countdown { padding : 42px 36px; }

    .countdown-grid { grid-template-columns : repeat(2, 1fr); gap : 30px 0; }

    .countdown-grid div:nth-child(2)::after { display : none; }

    .timeline {
        grid-template-columns : 1fr;
        width                 : min(100%, 340px);
        gap                   : 30px;
        margin                : 36px auto 0;
    }

    .timeline::before {
        top        : 44px;
        right      : auto;
        bottom     : 44px;
        left       : 44px;
        z-index    : 0;
        width      : 1px;
        height     : auto;
        background : linear-gradient(to bottom, transparent, rgba(220, 168, 90, .88) 8%, rgba(220, 168, 90, .88) 92%, transparent);
        box-shadow : 0 0 5px rgba(220, 168, 90, .18);
    }

    .timeline-item { display : grid; grid-template-columns : 88px 1fr; column-gap : 22px; text-align : left; }

    .timeline-icon { grid-row : span 2; margin : 0; }

    .timeline time { align-self : end; margin : 0; }

    .timeline p { align-self : start; }

    .timeline-item:not(:last-child)::after { display : none; }

    .rsvp { padding : 56px 32px; }

    .rsvp.rsvp--success { padding : 32px 32px 40px; }

    .contact__people { grid-template-columns : 1fr; max-width : 420px; }
}

/* The full navigation stays readable through the narrow-desktop range. */
@media (min-width : 961px) and (max-width : 1120px) {
    .hero-screen .heart-mark,
    .hero-screen .lead,
    .hero-screen .button { display : none; }

    .site-header,
    .hero-header { padding-right : 18px; padding-left : 18px; }

    .hero-header .main-nav { gap : clamp(10px, 1.7vw, 20px); }

    .hero-header .main-nav--left { padding-right : 10px !important; }

    .hero-header .main-nav--right { padding-left : 10px !important; }

    .hero-header .main-nav a { min-height : 44px; padding : 0 4px; }

    .hero-header .brand { width : 72px; height : 72px; }

    .hero-header .brand-mark { width : 60px; height : 60px; }

    .hero-header .brand::before,
    .hero-header .brand::after { width : 13px; }

}

@media (min-width : 961px) and (max-width : 1120px) and (max-height : 1000px) {
    .hero-portrait {
        width     : 80vw;
        max-width : none;
        top       : 51%;
    }

    .hero-foreground {
        height : min(60%, 550px);
    }

    .hero-screen .hero-copy {
        left : max(82px, calc((100% - var(--hero-composition-width)) / 2));
        top  : 40%;
    }
}

/* Taller compact desktops can carry a slightly more generous hero composition. */
@media (min-width : 961px) and (max-width : 1120px) and (min-height : 1000px) {
    .hero-screen .hero-copy {
        left : clamp(90px, 9vw, 112px);
        top  : 36%;
    }

    .hero-screen .eyebrow {
        line-height : 1.26;
    }

    .hero-screen h1 {
        margin : 36px 0 25px 0;
    }

    .hero-portrait {
        right     : 30px;
        width     : 85vw;
        max-width : none;
        top       : 60%;
    }

    .hero-foreground {
        height : 600px;
    }
}

@media (min-width : 961px) {
    /* Keep the countdown visually connected to the end of the hero. */
    .site-shell .countdown { margin-top : clamp(24px, 2.2vw, 36px); }
}

/* Mobile foundations: shared layout, typography, form rhythm and contact area. */
@media (max-width : 767px) {
    :root {
        --section-space      : clamp(60px, 14vw, 72px);
        --title-space        : clamp(24px, 6vw, 28px);
        --content-space      : clamp(16px, 5vw, 20px);
        --section-gap        : var(--section-space);
        --section-title-size : 28px;
    }

    .desktop-canvas { width : min(var(--content-width), calc(100% - 32px)); }

    .site-shell::before,
    .site-shell::after { width : 24px; opacity : .38; }

    .hero-header {
        grid-template-columns : 44px minmax(0, 1fr) 44px;
        height                : calc(72px + max(12px, env(safe-area-inset-top)));
        /*padding-top           : max(12px, env(safe-area-inset-top));*/
        padding-right         : max(16px, env(safe-area-inset-right));
        padding-left          : max(16px, env(safe-area-inset-left));
    }

    .hero-header .brand { width : 58px; height : 58px; }

    .hero-header .brand-mark { width : 46px; height : 46px; }

    .hero-header.is-scrolled { height : calc(66px + max(12px, env(safe-area-inset-top))); }

    .hero-header.is-scrolled .brand { width : 58px; height : 58px; }

    .hero-header.is-scrolled .brand-mark { width : 46px; height : 46px; }

    .desktop-canvas .section-title,
    .section-heading h2 { margin-bottom : var(--title-space); font-size : clamp(28px, 7vw, 40px); }

    .site-shell .countdown { margin-top : 50px; }

    .countdown { padding : 38px 24px; }

    .countdown-grid { grid-template-columns : repeat(2, minmax(0, 1fr)); row-gap : 28px; }

    .countdown-grid div { min-width : 0; }

    .countdown-grid div:nth-child(even)::after { display : none; }

    .countdown-grid div:nth-child(odd)::after { top : 8px; height : 52px; }

    .countdown strong { font-size : 45px; }

    .countdown-complete { min-height : 132px; padding : 0 12px; font-size : 18px; text-align : center; }

    .program { padding : 0; }

    .timeline {
        grid-template-columns : 1fr;
        width                 : min(100%, 276px);
        gap                   : 0;
        margin                : 34px auto 0;
    }

    .timeline::before {
        top        : 38px;
        right      : auto;
        bottom     : 38px;
        left       : 38px;
        width      : 1px;
        height     : auto;
        z-index    : 0;
        background : linear-gradient(to bottom, transparent, rgba(220, 168, 90, .9) 8%, rgba(220, 168, 90, .9) 92%, transparent);
        box-shadow : 0 0 5px rgba(220, 168, 90, .18);
    }

    .timeline-item { display : grid; grid-template-columns : 76px minmax(0, 1fr); min-height : 112px; column-gap : 24px; align-items : center; text-align : left; }

    .timeline-icon { grid-row : span 2; margin : 0; }

    .timeline-icon { width : 76px; height : 76px; }

    .timeline-icon img { width : 42px; height : 42px; }

    .timeline time { align-self : end; margin : 0; }

    .timeline p { align-self : start; color : rgba(235, 239, 239, .9); font-size : 16px; line-height : 1.5; }

    .timeline-item:not(:last-child)::after { display : none; }

    .details-grid { row-gap : 32px; margin-bottom : var(--section-gap); }

    .detail-card { min-height : 0; padding : 48px 24px 40px; }

    .detail-card .mini-ornament { margin-bottom : var(--content-space); }

    .detail-card p { font-size : 16px; line-height : 1.65; }

    .location-line { font-size : 16px !important; }

    .venue-image { width : min(80%, 320px); margin-bottom : 32px; }

    .button-small { width : min(100%, 260px); min-height : 48px; }

    .frame-art i { width : 24px; height : 24px; }

    #dress-code { padding-right : 20px; padding-left : 20px; }

    #dress-code .swatches {
        display         : flex;
        flex-wrap       : nowrap;
        justify-content : center;
        gap             : clamp(8px, 2.7vw, 14px);
        margin-top      : 28px;
    }

    #dress-code .swatches span {
        --swatch-size : clamp(38px, 11.5vw, 46px);
        flex          : 0 0 var(--swatch-size);
        width         : var(--swatch-size);
        height        : var(--swatch-size);
    }

    .rsvp { margin-bottom : var(--section-gap); padding : 64px 20px 52px; }

    .rsvp::before { right : 24px; left : 24px; }

    .input-wrap > span,
    legend,
    .comment-label > span { color : rgba(235, 239, 239, .92); font-size : 16px; line-height : 1.4; }

    .input-wrap input,
    .comment-label textarea { font-size : 16px; }

    .input-wrap input::placeholder,
    .comment-label textarea::placeholder { color : rgba(238, 228, 214, .52); }

    .rsvp-deadline { font-size : 16px; }

    .rsvp.rsvp--success { margin-bottom : 24px; padding : 30px 20px 36px; }

    .rsvp-success { padding : 30px 20px; }

    .rsvp-success__title { font-size : 23px; }

    .rsvp-success__text { font-size : 17px; }

    .rsvp-edit { display : inline-flex; align-items : center; min-height : 44px; padding : 0 12px; }

    .checkbox-grid { grid-template-columns : 1fr; }

    .rsvp-form { gap : var(--content-space); }

    .form-hint { margin-bottom : 10px; font-size : 13px; }

    .stay-later-note { margin-top : -4px; font-size : 14px; }

    .guest-stepper { width : min(100%, 220px); }

    .rsvp-stay:not([hidden]) { animation : form-follow-up-in .38s cubic-bezier(.22, .8, .3, 1) both; }

    .submit-button { width : 100%; min-width : 0; }

    .contact__people { grid-template-columns : 1fr; }

    .contact { display : block; min-height : 0; height : auto; padding : 44px 24px max(80px, calc(64px + env(safe-area-inset-bottom))); overflow : visible; }

    .contact-card { width : 100%; min-width : 0; min-height : 80px; padding : 14px 18px; }

    .contact-card__number { color : rgba(238, 228, 214, .88); }

    .contact__closing p { font-size : 30px; }

    .contact::before,
    .contact::after { opacity : .08; }

    /* Form rhythm and centered guest counter. */
    .rsvp-form { gap : 26px; }

    .form-column-contact,
    .form-column-options {
        display : grid;
        gap     : 24px;
    }

    .form-column-contact .input-wrap,
    .form-column-options .comment-label { margin : 0; }

    .form-column-contact .attendance { margin-top : 0; }

    .stay-accommodation:not([hidden]),
    .overnight-guests { margin-top : 24px; }

    .overnight-guests {
        display        : flex;
        flex-direction : column;
        align-items    : center;
        text-align     : center;
    }

    .overnight-guests .guest-stepper {
        align-self    : center;
        margin-inline : auto;
    }

    .input-wrap > span,
    legend,
    .comment-label > span,
    .rsvp-deadline { font-size : 17px; }

    .form-hint { font-size : 15px; }
}

/* A single column is clearer once the paired cards no longer have enough room. */
@media (max-width : 650px) {
    .details-grid {
        grid-template-columns : 1fr;
        grid-template-areas   : "wishes" "location" "dress";
    }

    .venue-image { width : min(88%, 360px); }

    #dress-code .swatches { gap : clamp(8px, 2.4vw, 10px); }

    #dress-code .swatches span { --swatch-size : clamp(34px, 9.5vw, 36px); }
}

/* Hero responsive variants: narrow tablet preserves the editorial cover; phones reserve a text-only top zone. */
@media (min-width : 481px) and (max-width : 767px) {
    .hero-screen {
        height     : 100svh;
        min-height : 760px;
    }

    .hero-screen .heart-mark,
    .hero-screen .lead,
    .hero-screen .button { display : none; }

    .hero-screen .hero-copy {
        top        : 36%;
        bottom     : auto;
        left       : clamp(40px, 12vw, 98px);
        width      : min(270px, 42vw);
        transform  : translateY(-50%);
        text-align : left;
    }

    .hero-screen .eyebrow {
        display   : block;
        margin    : 0 0 13px;
        font-size : clamp(28px, 5vw, 36px);
    }

    .hero-screen h1 {
        display               : grid;
        grid-template-columns : 1fr;
        justify-items         : center;
        width                 : max-content;
        max-width             : 100%;
        margin                : 0 0 11px;
        font-size             : clamp(48px, 8vw, 60px);
        line-height           : .88;
        text-align            : center;
        white-space           : normal;
    }

    .hero-screen h1 span { margin : -.06em 0; line-height : .7; }

    .hero-screen .date {
        margin    : 0;
        font-size : clamp(25px, 4.4vw, 31px);
    }

    .hero-portrait {
        top       : 60%;
        right     : calc(-11vw + 14px);
        bottom    : auto;
        left      : auto;
        width     : min(130vw, 820px);
        max-width : none;
        transform : translateY(-50%);
    }

    .hero-glow {
        top       : 60%;
        right     : calc(-12vw + 24px);
        bottom    : auto;
        left      : auto;
        width     : min(120vw, 920px);
        max-width : 68%;
        height    : 68%;
    }

    .hero-portrait::after { height : 27%; }

    .hero-foreground { z-index : 6; height : min(50%, 420px); }
}

@media (max-width : 480px) {
    .hero-screen { min-height : max(820px, 100svh); }

    .hero-screen .heart-mark,
    .hero-screen .lead,
    .hero-screen .button { display : none; }

    .hero-screen .hero-copy {
        top        : 20%;
        bottom     : auto;
        left       : 0;
        width      : 100%;
        transform  : translateY(-50%);
        text-align : center;
    }

    .hero-screen .eyebrow {
        display   : block;
        margin    : 0 0 11px;
        font-size : clamp(26px, 7.3vw, 32px);
    }

    .hero-screen h1 {
        display     : block;
        width       : auto;
        margin      : 0 0 10px;
        font-size   : clamp(42px, 11vw, 52px);
        line-height : .95;
        text-align  : center;
        white-space : nowrap;
    }

    .hero-screen h1 span { margin : 0 .05em; line-height : inherit; }

    .hero-screen .date {
        margin    : 0;
        font-size : clamp(22px, 6vw, 28px);
    }

    .hero-portrait {
        top       : calc(28% - 10px);
        right     : calc(75% + 20px);
        bottom    : auto;
        left      : auto;
        width     : min(145vw, 680px);
        height    : 73%;
        max-width : none;
        transform : translateX(50%);
    }

    .hero-glow {
        width     : min(70vw, 880px);
        height    : 56%;
        max-width : none;
        right     : calc(15% + 15px);
        top       : calc(64% - 10px);
    }

    .hero-portrait .hero-couple { object-fit : cover; object-position : center bottom; }

    .hero-portrait::after { height : 24%; }

    .hero-foreground { z-index : 6; height : min(46%, 390px); }

    .hero-foreground--right { transform : translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0) scale(.8); }
}

@media (max-width : 375px) {
    :root { --section-gap : 60px; }
}

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

    *,
    *::before,
    *::after {
        animation-duration        : .01ms !important;
        animation-iteration-count : 1 !important;
        scroll-behavior           : auto !important;
        transition-duration       : .01ms !important;
    }

    .countdown strong.is-ticking { animation : none !important; }

    .has-js .reveal,
    .has-js .program .timeline-item {
        opacity   : 1 !important;
        transform : none !important;
    }

    .has-js .program .timeline::before { transform : none !important; }

    .has-js #dress-code.is-visible .swatches span { animation : none !important; }
}

@media (max-width : 767px) and (max-height : 700px) {
    .hero-screen { min-height : 760px; }
}

@keyframes ornament-float {
    0%, 100% { transform : translate3d(0, 0, 0); }
    50% { transform : translate3d(0, -7px, 0); }
}

@keyframes hero-glow-breathe {
    0%, 100% { opacity : .76; filter : blur(27px); }
    50% { opacity : 1; filter : blur(34px); }
}

@keyframes countdown-tick {
    0% { opacity : .65; transform : translateY(-3px); }
    100% { opacity : 1; transform : translateY(0); }
}

@keyframes timeline-item-in {
    to { opacity : 1; transform : translate3d(0, 0, 0); }
}

@keyframes form-follow-up-in {
    from { opacity : 0; transform : translateY(10px); }
    to { opacity : 1; transform : translateY(0); }
}

.hero-glow::before {
    transform  : translate3d(var(--glow-shift-x, 0px), var(--glow-shift-y, 0px), 0);
    transition : transform .45s ease-out;
}

.hero-dust {
    transform  : translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
    transition : transform .45s ease-out;
}

.hero-screen .hero-dust { opacity : .42; }

.hero-foreground {
    transform          : translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0) scale(1.045);
    transition         : transform .5s ease-out;
    /* Fade only the cropped base; the branches and candle flames keep their gold. */
    --foreground-fade  : clamp(64px, 10svh, 110px);
    -webkit-mask-image : linear-gradient(to bottom, #000000 calc(100% - var(--foreground-fade)), rgba(0, 0, 0, .85) calc(100% - var(--foreground-fade) * .75), rgba(0, 0, 0, .4) calc(100% - var(--foreground-fade) * .4), transparent 100%);
    mask-image         : linear-gradient(to bottom, #000000 calc(100% - var(--foreground-fade)), rgba(0, 0, 0, .85) calc(100% - var(--foreground-fade) * .75), rgba(0, 0, 0, .4) calc(100% - var(--foreground-fade) * .4), transparent 100%);
}

.hero-foreground--left { transform-origin : left bottom; }

.hero-foreground--right { transform-origin : right bottom; }

.contact__dust { display : none; }

.countdown::after {
    inset      : 0;
    opacity    : 1;
    background : rgba(91, 138, 157, .035);
}

.details-grid {
    position  : relative;
    isolation : isolate;
}

.rsvp::after {
    display : none;
}

.contact {
    background : linear-gradient(90deg, transparent, rgba(190, 140, 75, .35), transparent) top / 100% 1px no-repeat;
}

.countdown strong.is-ticking { animation : countdown-tick .28s ease-out; }

.has-js .reveal {
    opacity    : 0;
    transform  : translate3d(0, 24px, 0);
    transition : opacity .7s ease, transform .7s cubic-bezier(.22, .8, .3, 1);
}

.has-js .reveal.is-visible {
    opacity   : 1;
    transform : translate3d(0, 0, 0);
}

/* The questionnaire arrives calmly, without the upward motion used for content cards. */
.has-js .rsvp.reveal,
.has-js .rsvp.reveal.is-visible { transform : none; }

.has-js .details-grid .detail-card:nth-child(2) { transition-delay : .08s; }

.has-js .details-grid .detail-card:nth-child(3) { transition-delay : .16s; }

.has-js #dress-code.is-visible .swatches span {
    animation : swatch-in .42s cubic-bezier(.22, .8, .3, 1) both;
}

.has-js #dress-code.is-visible .swatches span:nth-child(1) { animation-delay : .04s; }

.has-js #dress-code.is-visible .swatches span:nth-child(2) { animation-delay : .11s; }

.has-js #dress-code.is-visible .swatches span:nth-child(3) { animation-delay : .18s; }

.has-js #dress-code.is-visible .swatches span:nth-child(4) { animation-delay : .25s; }

.has-js #dress-code.is-visible .swatches span:nth-child(5) { animation-delay : .32s; }

/* Desktop programme draws a horizontal line; the mobile vertical variant lives in its own breakpoint. */
@media (min-width : 961px) {
    .has-js .program .timeline::before {
        transform        : scaleX(0);
        transform-origin : left center;
        transition       : transform 1.1s cubic-bezier(.22, .8, .3, 1) .12s;
    }

    .has-js .program.is-visible .timeline::before { transform : scaleX(1); }
}

.has-js .program .timeline-item {
    opacity   : 0;
    transform : translate3d(0, 14px, 0);
}

.has-js .program.is-visible .timeline-item {
    animation : timeline-item-in .5s cubic-bezier(.22, .8, .3, 1) forwards;
}

.has-js .program.is-visible .timeline-item:nth-child(1) { animation-delay : .12s; }

.has-js .program.is-visible .timeline-item:nth-child(2) { animation-delay : .24s; }

.has-js .program.is-visible .timeline-item:nth-child(3) { animation-delay : .36s; }

.has-js .program.is-visible .timeline-item:nth-child(4) { animation-delay : .48s; }

@keyframes swatch-in {
    from { opacity : 0; transform : translateY(6px) scale(.92); }
    to { opacity : 1; transform : translateY(0) scale(1); }
}

/* Final readability and interaction polish. */
body { color : rgba(242, 246, 246, .88); }

.detail-card p { color : rgba(242, 246, 246, .96); }

.detail-card .location-stay p { color : rgba(242, 246, 246, .94); font-size : 18px; }

.rsvp-deadline { color : rgba(242, 246, 246, .93); font-size : 18px; }

.form-hint { color : rgba(242, 246, 246, .72); font-size : 15px; }

.contact-heading p,
.contact-card__number { color : rgba(242, 246, 246, .92); }

/* Every answer option follows the same control rhythm. */
.segmented-control label span,
.rsvp-stay .segmented-control label span {
    min-height  : 52px;
    padding     : 8px 6px;
    font-size   : 17px;
    line-height : 1.25;
}

/* Make selected drink choices unmistakable without changing the spoken label. */
.checkbox-grid input:checked + span::before {
    background-color    : rgba(200, 148, 75, .16);
    background-image    : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='%23d6a45d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.1'/%3E%3C/svg%3E");
    background-position : center;
    background-repeat   : no-repeat;
    background-size     : 15px;
    border-color        : var(--gold-bright);
    box-shadow          : none;
}

/* The guest count appears only after a positive overnight answer. */
.overnight-guests:not([hidden]) {
    animation : form-follow-up-in .32s cubic-bezier(.22, .8, .3, 1) both;
}

.guest-stepper {
    grid-template-columns : 56px minmax(70px, 1fr) 56px;
    min-height            : 48px;
}

.guest-stepper__button { min-width : 44px; min-height : 44px; }

/* Sections share one restrained entrance; the programme keeps its own sequence. */
.has-js .reveal { transform : translate3d(0, 20px, 0); }

.has-js .rsvp.reveal { transform : translate3d(0, 20px, 0); }

.has-js .rsvp.reveal.is-visible { transform : translate3d(0, 0, 0); }

.has-js .details-grid .detail-card:nth-child(2),
.has-js .details-grid .detail-card:nth-child(3) { transition-delay : 0s; }