/* ========================================
   Wedding Website - Main Stylesheet
   Gregory & Shannen's Wedding - March 25, 2026
   ======================================== */

/* Self-hosted webfonts */
@font-face {
    font-family: "BickhamScript3ProRegular";
    src: url('../fonts/BickhamScript3ProRegular/font.woff2') format('woff2'),
        url('../fonts/BickhamScript3ProRegular/font.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* @group Tokens — CSS Variables: design colors & spacing */
:root {
    /* Base Colors (60%) */
    --white: #FFFFFF;
    --off-white: #FAFAFA;

    /* Accent Colors (30%) */
    --champagne: #DDC2A4;
    --champagne-light: #E8D4BC;
    --champagne-dark: #C9A883;

    /* Supporting Colors (none reserved) */

    /* Neutral Grays */
    --gray-900: #212529;
    --gray-700: #495057;
    --gray-400: #CED4DA;
    --gray-100: #F8F9FA;

    /* Spacing System (8px grid) */
    --space-xs: 0.5rem;
    /* 8px */
    --space-sm: 1rem;
    /* 16px */
    --space-md: 1.5rem;
    /* 24px */
    --space-lg: 2rem;
    /* 32px */
    --space-xl: 3rem;
    /* 48px */
    --space-2xl: 4rem;
    /* 64px */

    /* Typography */
    --font-script: "BickhamScript3ProRegular", cursive;
    --font-serif-body: 'Source Serif 4', 'Playfair Display', Georgia, serif;

    /* Bootstrap link color overrides (brand champagne) */
    --bs-link-color: var(--champagne-dark);
    --bs-link-hover-color: var(--champagne);
    /* Secondary text color used by .text-body-secondary */
    --bs-secondary-color: rgba(var(--bs-body-color-rgb), 0.75);
}

/* ========================================
   @group Links
   Global link styling (non-button anchors)
   ======================================== */

a:not(.btn) {
    color: var(--champagne-dark);
    text-decoration-color: var(--champagne-dark);
}

a:not(.btn):hover,
a:not(.btn):focus {
    color: var(--champagne);
    text-decoration-color: var(--champagne);
}

/* ========================================
   @group Base & Typography
   Base element styles, fonts, and type scale
   ======================================== */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--gray-900);
    background: linear-gradient(135deg, var(--off-white) 0%, var(--champagne-light) 100%);
    min-height: 100vh;
}

.wedding-card {
    font-family: var(--font-serif-body);
}

.wedding-card p,
.wedding-card li {
    letter-spacing: 0.01em;
}

.wedding-card .btn,
.wedding-card .btn * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Headings - Elegant Serif */
h1,
h2,
h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    color: var(--gray-900);
}

/* Unified semantic type scale */
h1 {
    font-size: 2rem;
    line-height: 1.2;
}

@media (min-width: 992px) {
    h1 {
        font-size: 2.4rem;
    }
}

h2 {
    font-size: 1.35rem;
    line-height: 1.35;
}

@media (min-width: 992px) {
    h2 {
        font-size: 1.50rem;
    }
}

h3 {
    font-size: 1.125rem;
    line-height: 1.45;
}

@media (min-width: 992px) {
    h3 {
        font-size: 1.25rem;
    }
}

.lead {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
}

@media (min-width: 992px) {
    .lead {
        font-size: 1.25rem;
    }
}

small {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
}

@media (min-width: 992px) {

    small {
        font-size: 0.9375rem;
    }
}

/* ========================================
   @group Script Typography
   Bickham: sizes and helpers for script headlines
   ======================================== */

.script {
    color: var(--champagne-dark);
    font-family: var(--font-script);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-variant-ligatures: common-ligatures contextual;
    font-feature-settings: "liga" 1, "calt" 1;
}

/* ========================================
   @group Content Flow
   Readable content column and vertical rhythm for long-form pages
   ======================================== */

.prose {
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
}

.prose p,
.prose li {
    line-height: 1.7;
}

/* Section headings spacing within readable column */
.prose h2 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.prose h2:first-child {
    margin-top: 0;
}

/* Breathing room between list items */
.prose li+li {
    margin-top: 0.25rem;
}

/* Consistent spacing for lists */
.prose ul,
.prose ol {
    margin-bottom: var(--space-md);
}

/* ========================================
   @component Visual Stepper (details/summary)
   Compact, numbered steps with progressive disclosure
   ======================================== */

.stepper {
    list-style: none;
    margin: var(--space-sm) 0 var(--space-md);
    padding: 0;
    display: grid;
    gap: var(--space-sm);
}

.stepper__item {
    position: relative;
    padding-left: 2.5rem;
    /* room for larger marker */
}

/* Connector line */
.stepper__item::before {
    content: "";
    position: absolute;
    left: 1.375rem;
    /* centers under 2.5rem padding */
    top: 1.85rem;
    /* start just below the marker */
    bottom: -0.5rem;
    /* extend a touch past content */
    width: 1px;
    background: var(--champagne-light);
    opacity: 0.8;
}

/* Hide connector for the last item */
.stepper__item:last-child::before {
    display: none;
}

.stepper__marker {
    position: absolute;
    left: 0.5rem;
    top: 0.125rem;
    /* aligned with first line of title */
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--champagne-dark);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(221, 194, 164, 0.4);
}

.stepper__details {
    display: block;
}

.stepper__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    line-height: 1.35;
    padding: 0.25rem 0.5rem 0.25rem 0;
    border-radius: 6px;
    transition: color 160ms ease, background-color 160ms ease;
}

/* Remove default marker arrow for consistent look */
.stepper__details>summary::-webkit-details-marker {
    display: none;
}

.stepper__details>summary {
    list-style: none;
}

/* Custom chevron indicator */
.stepper__title::after {
    content: '▸';
    margin-left: 0.25rem;
    color: var(--champagne-dark);
    transition: transform 160ms ease, color 160ms ease;
}

.stepper__details[open] .stepper__title::after {
    transform: rotate(90deg);
    color: var(--champagne);
}

.stepper__details>summary:hover .stepper__title,
.stepper__details>summary:focus .stepper__title {
    background: rgba(221, 194, 164, 0.12);
}

.stepper__details>summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(221, 194, 164, 0.35);
    border-radius: 6px;
}

.stepper__content {
    margin-top: var(--space-xs);
    color: var(--gray-700);
}

/* Subtle open state accent */
.stepper__details[open] .stepper__title {
    color: var(--champagne-dark);
}

.script-title {
    font-size: 4.5rem;
}

@media (min-width: 992px) {
    .script-title {
        font-size: 5.0rem;
    }
}

.script-subtitle {
    font-size: 3.75rem;
}

@media (min-width: 992px) {
    .script-subtitle {
        font-size: 4.25rem;
    }
}

.script-section {
    font-size: 2.25rem;
}

@media (min-width: 992px) {
    .script-section {
        font-size: 3rem;
    }
}

.script-section-lg {
    font-size: 3.6rem;
}

@media (min-width: 992px) {
    .script-section-lg {
        font-size: 4.6rem;
    }
}

.script-subtitle-sm {
    font-size: 3.125rem;
}

@media (min-width: 992px) {
    .script-subtitle-sm {
        font-size: 3.5rem;
    }
}

.script-tight {
    line-height: 0.95;
}

/*
   Fine-tune spacing after a forced line break in script titles.
   Usage: wrap the text on the line after the <br> in a span.
   Example: "Asked <br> <span class=\"script-pullup-md\">…</span>"
   This lightly reduces the gap between the two lines without
   affecting single-line headings or other script titles.
*/
.script-pullup-md {
    display: inline-block;
    position: relative;
    /* Default: no adjustment on wide viewports */
    top: 0;
}

/* Apply the pull-up only when the first break (br.script-break-md) is active,
   which is at md and smaller viewports in our system. */
@media (max-width: 768px) {
    .script-title .script-pullup-md {
        /* Pull the following line up slightly to tighten the break */
        top: -0.18em;
    }
}

/* Names helper (spacing only) */
.couple-names {
    line-height: 0.9;
}

/*
   Stylistic set helpers
   Use on elements that need alternate glyph shapes (e.g., a clearer "Q").
   Example: <h1 class="script script-title">Frequently Asked <span class="clear-q">Q</span>uestions</h1>
*/
.clear-q {
    /* Bickham’s alternate Q is exposed via swash (swsh) */
    -webkit-font-feature-settings: "liga" 1, "calt" 1, "swsh" 1;
    /* Older Safari/Chrome */
    -moz-font-feature-settings: "liga" 1, "calt" 1, "swsh" 1;
    /* Firefox */
    font-feature-settings: "liga" 1, "calt" 1, "swsh" 1;
    /* Reduce just the Q size ~30% to match A visually */
    font-size: 0.64em;
    /* Increase space after Q so it’s not tighter than & A */
    margin-right: 0.19em;
    /* Maintenance: If script title sizes change, revisit this scaling
       to keep the Q visually balanced with adjacent letters. */
}

/* Other alternates you can try (preserve liga/calt):
   .clear-q { font-feature-settings: "liga" 1, "calt" 1, "salt" 1; }  (stylistic alternate)
   .clear-q { font-feature-settings: "liga" 1, "calt" 1, "ss01" 1; }  (if your cut maps Q under ss01)
*/

br.script-break-md {
    display: none;
}

@media (max-width: 768px) {
    br.script-break-md {
        display: inline;
    }
}

br.script-break-xl {
    display: none;
}

@media (max-width: 1200px) {
    br.script-break-xl {
        display: inline;
    }
}

/* Offset helper to visually center palm over '&' on Home */
.couple-names-offset {
    margin-left: 38px;
}

@media (max-width: 768px) {
    .couple-names-offset {
        margin-left: 0;
    }
}


/* Palm Tree Icon */
.palm-tree-icon {
    color: var(--champagne-dark);
    vertical-align: middle;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

/* Mobile sizing for palm icons in headers (10% smaller) */
@media (max-width: 768px) {

    /* Page header palm: base 120px -> 108px on mobile */
    .palm-tree-icon.palm-page-header {
        width: 70px;
        height: 70px;
    }

    /* Wedding hero header palm: base 96px -> 86.4px on mobile */
    .palm-tree-icon.palm-wedding-header {
        width: 70px;
        height: 70px;
    }
}

/* Invite-only pill */
.badge-invite {
    background-color: var(--champagne);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ========================================
   @group Buttons
   Bootstrap overrides + custom button components
   ======================================== */

.btn-primary {
    /* Bootstrap 5 button theming via CSS variables */
    --bs-btn-bg: var(--champagne);
    --bs-btn-border-color: var(--champagne);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--champagne-dark);
    --bs-btn-hover-border-color: var(--champagne-dark);
    --bs-btn-active-bg: var(--champagne-dark);
    --bs-btn-active-border-color: var(--champagne-dark);
    --bs-btn-disabled-bg: var(--champagne-light);
    --bs-btn-disabled-border-color: var(--champagne-light);
    --bs-btn-disabled-color: rgba(255, 255, 255, 0.85);
    --bs-btn-focus-shadow-rgb: 221, 194, 164;
    /* champagne */

    background-color: var(--champagne);
    border-color: var(--champagne);
    color: white;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-primary:hover {
    background-color: var(--champagne-dark);
    border-color: var(--champagne-dark);
    transform: translateY(-2px);
    color: white;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:focus {
    background-color: var(--champagne-dark) !important;
    border-color: var(--champagne-dark) !important;
    color: white !important;
    box-shadow: 0 0 0 0.2rem rgba(221, 194, 164, 0.5) !important;
}

/* Disabled champagne-style button (distinct from outline/Back) */
.btn-disabled {
    background-color: var(--champagne-light) !important;
    border-color: var(--champagne-light) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    opacity: 0.75;
    cursor: not-allowed !important;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

.btn-disabled:hover,
.btn-disabled:active,
.btn-disabled:focus {
    background-color: var(--champagne-light) !important;
    border-color: var(--champagne-light) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Special RSVP Button - Not RSVPed Yet */
.btn-rsvp-highlight {
    background: linear-gradient(135deg, var(--champagne) 0%, var(--champagne-dark) 100%);
    border: none;
    color: white;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(221, 194, 164, 0.3);
    transition: all 0.3s ease;
    transform: translateY(0);
}

.btn-rsvp-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.btn-rsvp-highlight:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(221, 194, 164, 0.5);
    background: linear-gradient(135deg, var(--champagne-dark) 0%, #D4AF37 100%);
    color: white;
}

.btn-rsvp-highlight:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(221, 194, 164, 0.4);
}

/* RSVP Button - Already Completed */
.btn-rsvp-completed {
    background-color: var(--champagne);
    border-color: var(--champagne);
    color: white;
    font-weight: 500;
    position: relative;
    transition: all 0.3s ease;
}

/* Move checkmark to the left for completed Edit RSVP button */
.btn-rsvp-completed::before {
    content: '✓';
    margin-right: 8px;
}

.btn-rsvp-completed:hover {
    background-color: var(--champagne-dark);
    border-color: var(--champagne-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(221, 194, 164, 0.3);
}

/* Logout Button - Custom Style */
.btn-logout {
    background-color: var(--white);
    border-color: var(--champagne);
    color: var(--champagne-dark);
    font-weight: 500;
    transition: all 0.2s;
}

/* Champagne outline button */
/* Outline button using brand champagne color */
.btn-outline-champagne {
    /* Bootstrap 5 button theming via CSS variables (ensures consistent disabled/active states) */
    --bs-btn-color: var(--champagne-dark);
    --bs-btn-border-color: var(--champagne);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--champagne);
    --bs-btn-hover-border-color: var(--champagne);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--champagne);
    --bs-btn-active-border-color: var(--champagne);
    --bs-btn-focus-shadow-rgb: 221, 194, 164;
    /* champagne */
    /* Keep outline styling when disabled (HTMX temporarily disables submit buttons) */
    --bs-btn-disabled-color: var(--champagne-dark);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--champagne);
    /* Optional: align with Bootstrap default disabled opacity without washing out color */
    --bs-btn-disabled-opacity: 0.65;

    color: var(--champagne-dark);
    border-color: var(--champagne);
    background-color: transparent;
    transition: all 0.2s ease;
}

.btn-outline-champagne:hover {
    color: #fff;
    background-color: var(--champagne);
    border-color: var(--champagne);
    transform: translateY(-2px);
}


.btn-outline-champagne:active,
.btn-outline-champagne.active,
.btn-outline-champagne:focus {
    color: #fff !important;
    background-color: var(--champagne) !important;
    border-color: var(--champagne) !important;
    box-shadow: 0 0 0 0.2rem rgba(221, 194, 164, 0.35) !important;
    transform: translateY(-1px);
}

/* Ensure disabled state stays on-brand even when HTMX disables the button */
.btn-outline-champagne:disabled,
.btn-outline-champagne.disabled,
fieldset:disabled .btn-outline-champagne {
    color: var(--champagne-dark) !important;
    background-color: transparent !important;
    border-color: var(--champagne) !important;
    opacity: var(--bs-btn-disabled-opacity, 0.65);
}

/* Changed pill for review diffs */
.rsvp-changed-pill {
    display: inline-block;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    color: var(--champagne-dark);
    background-color: rgba(221, 194, 164, 0.18);
}

/* HTMX Loading States */
.htmx-request {
    opacity: 0.6;
    transition: opacity 300ms ease-in-out;
}

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

/* Loading spinner for buttons during HTMX requests */
button.htmx-request {
    position: relative;
    pointer-events: none;
}

button.htmx-request::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}

/* Disable pseudo spinner for buttons that manage their own indicator */
button.no-auto-spinner.htmx-request::after {
    content: none;
}

/* @component RSVP Next Button
   Centered spinner replaces label on submit */
.rsvp-next-btn {
    position: relative;
    /* allow centered overlay spinner */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Keep button width stable: hide label but preserve space */
.htmx-request .rsvp-next-btn .rsvp-next-label {
    visibility: hidden;
}

/* Center spinner overlay while request is active */
.htmx-request .rsvp-next-btn .htmx-indicator {
    position: absolute;
    inset: 0;
    /* top/right/bottom/left: 0 */
    margin: auto;
    /* center within button without using transform */
}

@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Smooth transition for HTMX swaps */
#rsvp-card-content.htmx-swapping {
    opacity: 0;
    transition: opacity 200ms ease-out;
}

#rsvp-card-content {
    transition: opacity 200ms ease-in;
}

.btn-logout:hover {
    background-color: var(--champagne);
    border-color: var(--champagne);
    color: white;
    transform: translateY(-2px);
}

.btn-logout:active,
.btn-logout.active,
.btn-logout:focus {
    background-color: var(--champagne) !important;
    border-color: var(--champagne) !important;
    color: white !important;
    box-shadow: 0 0 0 0.2rem rgba(221, 194, 164, 0.25) !important;
}

/* ========================================
   @group Forms
   Form inputs and accessibility helpers
   ======================================== */

.form-control:focus {
    border-color: var(--champagne);
    box-shadow: 0 0 0 0.2rem rgba(221, 194, 164, 0.25);
}

/* Reusable visually hidden utility */
.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;
}

/* Invitation Choice Cards (radio styled as checkbox cards) */
.invitation-group {
    display: flex;
    flex-wrap: wrap;
    /* allow wrap on small widths to prevent clipping */
    gap: 0.5rem;
}

@media (min-width: 576px) {
    .invitation-group {
        flex-wrap: nowrap;
    }
}

.invitation-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    /* large touch target */
    border: 1px solid var(--champagne);
    background-color: var(--white);
    color: var(--gray-700);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    /* prevent label wrap */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Use Inter for RSVP interactive labels */
.invitation-choice,
.invitation-choice * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Hover effect only on devices that actually support hover (avoid sticky hover on touch) */
@media (hover: hover) and (pointer: fine) {
    .invitation-choice:hover {
        background-color: var(--champagne-light);
        color: var(--champagne-dark);
    }
}

/* Focus ring via input focus */
.invitation-choice-input:focus-visible+.invitation-choice {
    box-shadow: 0 0 0 0.2rem rgba(221, 194, 164, 0.35);
}

/* Selected state */
.invitation-choice-input:checked+.invitation-choice {
    border-color: var(--champagne-dark);
    background-color: #F4E9DC;
    /* very light champagne tint */
    color: var(--gray-900);
}

.invitation-choice__box {
    width: 18px;
    height: 18px;
    border: 2px solid var(--champagne);
    border-radius: 50%;
    /* radio circle */
    background-color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease;
    flex-shrink: 0;
}

.invitation-choice__check {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--champagne-dark);
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.invitation-choice-input:checked+.invitation-choice .invitation-choice__box {
    border-color: var(--champagne-dark);
}

.invitation-choice-input:checked+.invitation-choice .invitation-choice__check {
    opacity: 1;
}

/* ========================================
   @group Cards
   ======================================== */

/* @component Wedding Card */

.wedding-card {
    border: 1px solid var(--gray-400);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: var(--white);
    transition: all 0.3s ease;
}

.wedding-card:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

/* ========================================
   @group Alerts
   Bootstrap alert tweaks for wedding site
   ======================================== */

.alert {
    border-radius: 8px;
    border-left: 4px solid var(--champagne);
}

/* Removed variant overrides not in use: .alert-success, .alert-danger */

/* @component Wedding Message - Champagne styled error/info messages */
.wedding-message {
    background-color: var(--white);
    border: 1px solid var(--champagne);
    border-left: 4px solid var(--champagne);
    color: var(--gray-700);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

/* ========================================
   @group Hero Image
   ======================================== */

.hero-image-container {
    position: relative;
    width: 100%;
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Invitation divider under couple names */
.invitation-divider {
    width: 72px;
    height: 1px;
    background-color: var(--champagne);
    margin: var(--space-lg) auto var(--space-sm);
    opacity: 0.9;
}

/* ========================================
   @group Layout Utilities
   ======================================== */

.full-height-container {
    min-height: 100vh;
    padding: 1rem 0;
}

/* Narrower max width for RSVP card on desktop */
.rsvp-card-col,
.site-card-col {
    max-width: 770px;
    /* consistent site-wide card width (~15% wider) */
}

/* Narrow button stack on desktop for Home */
.btn-stack-narrow {
    width: 100%;
}

@media (min-width: 992px) {
    .btn-stack-narrow {
        /* Match reading width for message copy */
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Floating Home link (outside the card) */
.rsvp-home-row {
    margin-bottom: 1rem;
}

.btn-home-floating {
    background-color: var(--white);
    border: 1px solid var(--champagne);
    color: var(--champagne-dark);
    padding: 0.3rem 0.7rem;
    border-radius: 10px;
    /* match rounded-rectangle buttons */
    font-weight: 500;
    box-shadow: none;
    /* reduce prominence */
}

.btn-home-floating:hover,
.btn-home-floating:focus {
    background-color: var(--champagne);
    border-color: var(--champagne);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* ========================================
      @group Story Timeline
      ======================================== */
.story-sticky-home {
    position: sticky;
    top: 1rem;
    z-index: 20;
    transition: transform 180ms ease, opacity 180ms ease;
    /* Align with story content column */
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

.story-sticky-home.is-hidden {
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
}

.story-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 1040px;
    /* keep media + text within a readable width */
    margin: 0 auto;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

/* Bottom nav container aligned with story content column */
.story-bottom-nav {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

/* ========================================
   @component Bottom Nav Controls (Back / Next)
   ======================================== */

.nav-controls {
    display: flex;
    gap: 0.5rem;
}

/* Desktop/tablet: side-by-side, back left and next right */
@media (min-width: 768px) {
    .nav-controls {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
}

/* Mobile: stack with Next above Back; center button text */
@media (max-width: 767.98px) {
    .nav-controls {
        flex-direction: column-reverse;
        align-items: stretch;
        /* make children full width */
        gap: 0.75rem;
    }

    .nav-controls .btn {
        text-align: center;
        /* for non-flex fallbacks */
        justify-content: center;
        /* center contents when inline-flex */
    }

    /* RSVP next controller wrapper should expand full width */
    .nav-controls .rsvp-next-controller {
        display: block !important;
        width: 100%;
    }

    /* Ensure RSVP Next button spans full width when stacked */
    .nav-controls .rsvp-next-controller .btn {
        width: 100%;
        display: inline-flex;
    }
}

/* Ensure icons and text align nicely inside buttons */
.btn-align-middle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-align-middle .btn-icon {
    line-height: 1;
    display: inline-block;
}


/* On Our Story, ensure Back to Home has white background for contrast */
.story-bottom-nav .btn-outline-champagne {
    /* Soften contrast: translucent white over champagne background */
    background-color: rgba(255, 255, 255, 0.85);
    border-color: var(--champagne-light);
}

/* On hover/focus within Story bottom nav, elevate to full champagne like other pages */
.story-bottom-nav .btn-outline-champagne:hover,
.story-bottom-nav .btn-outline-champagne:focus {
    background-color: var(--champagne);
    border-color: var(--champagne);
    color: #fff;
    transform: translateY(-2px);
}

.story-bottom-nav .btn-outline-champagne:active,
.story-bottom-nav .btn-outline-champagne.active {
    background-color: var(--champagne);
    border-color: var(--champagne);
    color: #fff;
    transform: translateY(-1px);
}

.story-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: center;
}

.story-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* balanced crop */
    max-height: min(55vh, 540px);
    /* ensure photo fits on screen */
}

.story-section .story-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 12px;
}

.story-text p {
    color: var(--gray-700);
}

@media (min-width: 992px) {
    .story-section {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    /* Alternate layout left/right for visual rhythm */
    .story-section:nth-child(2n) .story-media {
        order: 2;
    }

    .story-section:nth-child(2n) .story-text {
        order: 1;
    }
}

@media (max-width: 991.98px) {
    .story-media {
        aspect-ratio: 16 / 9;
        /* wider crop on mobile */
        max-height: 45vh;
    }
}

/* ========================================
   @group Story Chapters & Micro-Galleries
   New chapter-based layout without alternating grid
   ======================================== */

.story-chapter {
    display: block;
    position: relative;
    background: #fff;
    /* revert to crisp white for contrast */
    border: 1px solid var(--champagne-light);
    border-radius: 12px;
    padding: calc(var(--space-md) + 10px) var(--space-md) var(--space-md);
    /* subtle lift + hairline inner border for letterpress feel */
    box-shadow:
        0 1px 8px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(0, 0, 0, 0.04) inset;
}

/* Subtle top accent bar for a printed-card feel */
.story-chapter::before {
    content: "";
    position: absolute;
    top: var(--space-sm);
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 1px;
    background: var(--champagne-light);
    border-radius: 2px;
    opacity: 0.6;
}

.story-chapter+.story-chapter {
    /* breathing room between chapters; .story-timeline gap also applies */
    margin-top: var(--space-xl);
}

.story-chapter h2 {
    margin-top: 0;
    margin-bottom: var(--space-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.story-blurb {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xl);
}

/* Blurb body copy uses elegant Source Serif 4 on Our Story page */
.story-blurb p {
    font-family: var(--font-serif-body);
    letter-spacing: 0.01em;
    line-height: 1.7;
}

/* Base image behavior inside chapter galleries */
.story-gallery {
    display: block;
    /* Extra breathing room below galleries before blurb text */
    margin-bottom: var(--space-lg);
}

.story-gallery a {
    display: block;
}

.story-gallery img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

/* Interactive affordance: indicate images are clickable */
.story-gallery a {
    border-radius: 12px;
}

.story-gallery a:hover img {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
}

.story-gallery a:active img {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.story-gallery a:focus-visible img {
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 0 0 3px rgba(221, 194, 164, 0.45), 0 6px 20px rgba(0, 0, 0, 0.24);
}

@media (prefers-reduced-motion: reduce) {
    .story-gallery img {
        transition: none;
    }

    .story-gallery a:hover img,
    .story-gallery a:active img,
    .story-gallery a:focus-visible img {
        transform: none;
    }
}

/* Two images: simple two-column grid */
.story-gallery[data-gallery-size="2"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

/* Optional vertical stack variant for two images */
.story-gallery.stack-vertical {
    display: block !important;
    /* override the size-based grid */
}

.story-gallery.stack-vertical a+a {
    margin-top: var(--space-sm);
}

/* Three images: one large + two stacked */
.story-gallery[data-gallery-size="3"] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-sm);
}

.story-gallery[data-gallery-size="3"]>a:first-child {
    grid-row: 1 / span 2;
}

/* Sokka layout: balance portrait width so two right landscapes (stacked)
   naturally sum to the same height without cropping or letterboxing. */
.story-gallery[data-gallery-size="3"].sokka-balanced {
    /* Balance portrait width so left height ≈ stacked right heights + gap. */
    grid-template-columns: 1.03fr 1fr;
    /* default for narrower containers */
    align-items: start;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .story-gallery[data-gallery-size="3"].sokka-balanced {
        grid-template-columns: 1.03fr 1fr;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .story-gallery[data-gallery-size="3"].sokka-balanced {
        grid-template-columns: 1.02fr 1fr;
    }
}

@media (min-width: 1200px) {
    .story-gallery[data-gallery-size="3"].sokka-balanced {
        grid-template-columns: 1.01fr 1fr;
    }
}

/* Equalized rows variant for 3-up mosaic (portrait left spanning two rows).
   Ensures the two right images combined height + gap equals the left image height. */
.story-gallery[data-gallery-size="3"].rows-fixed {
    grid-auto-rows: var(--story-row-height, 260px);
}

.story-gallery[data-gallery-size="3"].rows-fixed img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Show entire image for right-hand tiles (no crop) */
.story-gallery[data-gallery-size="3"].rows-fixed>a:not(:first-child) img {
    object-fit: contain;
    background: #fff;
}

@media (min-width: 992px) {
    .story-gallery[data-gallery-size="3"].rows-fixed {
        --story-row-height: 280px;
    }
}

@media (min-width: 1200px) {
    .story-gallery[data-gallery-size="3"].rows-fixed {
        --story-row-height: 300px;
    }
}

/* On small screens, let images flow naturally (no fixed heights). */
@media (max-width: 767.98px) {
    .story-gallery[data-gallery-size="3"].rows-fixed {
        display: block;
    }

    .story-gallery[data-gallery-size="3"].rows-fixed a+a {
        margin-top: var(--space-sm);
    }

    .story-gallery[data-gallery-size="3"].rows-fixed img {
        height: auto;
    }
}

/* Four images: tidy 2×2 */
.story-gallery[data-gallery-size="4"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

/* On small screens, stack standard grids vertically for readability */
@media (max-width: 767.98px) {

    .story-gallery[data-gallery-size="2"],
    .story-gallery[data-gallery-size="3"],
    .story-gallery[data-gallery-size="4"] {
        display: block;
    }

    .story-gallery[data-gallery-size="2"] a+a,
    .story-gallery[data-gallery-size="3"] a+a,
    .story-gallery[data-gallery-size="4"] a+a {
        margin-top: var(--space-sm);
    }
}

/* Custom layout for Engagement gallery: wide hero + three tiles */
.story-gallery.engagement-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-sm);
}

.story-gallery.engagement-grid>a:first-child {
    grid-column: 1 / -1;
    /* full width top row */
}

/* Engagement mosaic: hero left spanning two rows; small banner at bottom */
.story-gallery.engagement-mosaic {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-sm);
}

.story-gallery.engagement-mosaic>a:first-child {
    grid-column: 1 / 2;
    grid-row: 1 / span 2;
    /* hero spans two rows */
}

.story-gallery.engagement-mosaic>a:last-child {
    grid-column: 1 / -1;
    /* full-width banner on third row */
}

@media (max-width: 767.98px) {
    .story-gallery.engagement-mosaic {
        display: block;
    }

    .story-gallery.engagement-mosaic a+a {
        margin-top: var(--space-sm);
    }
}

@media (max-width: 767.98px) {
    .story-gallery.engagement-grid {
        display: block;
    }

    .story-gallery.engagement-grid a+a {
        margin-top: var(--space-sm);
    }
}

/* Engagement split 2×2: equal top row; ratio-balanced bottom row */
.story-gallery.engagement-split {
    display: block;
}

.story-gallery.engagement-split .eng-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.story-gallery.engagement-split .eng-bottom {
    display: grid;
    /* Beach (left) AR ≈ 0.420; Ring (right) AR ≈ 0.753 → columns 0.753 : 0.420 */
    grid-template-columns: 0.753fr 0.420fr;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

@media (max-width: 767.98px) {

    .story-gallery.engagement-split .eng-top,
    .story-gallery.engagement-split .eng-bottom {
        display: block;
    }

    .story-gallery.engagement-split .eng-top a+a,
    .story-gallery.engagement-split .eng-bottom a+a {
        margin-top: var(--space-sm);
    }
}

/* Where We Are Now: two-row, ratio-balanced per row */
.story-gallery.where-now-split {
    display: block;
}

.story-gallery.where-now-split .wn-top {
    display: grid;
    /* Both are 1440×1080 (AR 0.75), so equal halves */
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.story-gallery.where-now-split .wn-bottom {
    display: grid;
    /* Left 1500×1000 (AR 0.667), Right 810×1080 (AR 1.333) => 2:1 widths */
    grid-template-columns: 2fr 1fr;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

@media (max-width: 767.98px) {

    .story-gallery.where-now-split .wn-top,
    .story-gallery.where-now-split .wn-bottom {
        display: block;
    }

    .story-gallery.where-now-split .wn-top a+a,
    .story-gallery.where-now-split .wn-bottom a+a {
        margin-top: var(--space-sm);
    }
}

/* ========================================
   @group Story Lightbox
   Minimal, accessible image viewer
   ======================================== */

.story-lightbox .modal-content {
    background: transparent;
}

.story-lightbox .modal-dialog {
    max-width: 98vw;
}

/* Prefer flexible height limits to avoid iOS auto-zoom on rotation.
   Fallback uses vh; modern browsers pick up dvh below. */
.story-lightbox .modal-body {
    min-height: 70vh;
    max-height: 95vh;
    height: auto;
    /* Prevent browser scroll/overscroll during custom pinch/pan */
    touch-action: none;
    overscroll-behavior: contain;
    /* Account for notches when fullscreen on mobile */
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-top: max(0px, env(safe-area-inset-top));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
}

/* Let image size naturally within viewport-bounded modal body.
   Use max constraints to preserve aspect ratio without forcing fill. */
.story-lightbox-image {
    max-width: 100%;
    max-height: 95vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}
/* Zoom canvas wraps the image and receives transforms */
.story-zoom-canvas {
    will-change: transform;
    transform-origin: center center;
    display: inline-block;
}

/* Prefer dynamic viewport height on browsers that support it (iOS Safari, modern Chrome/Firefox). */
@supports (height: 100dvh) {
    .story-lightbox .modal-body {
        min-height: 70dvh;
        max-height: 95dvh;
    }

    .story-lightbox-image {
        max-height: 95dvh;
    }
}

.story-lightbox-prev,
.story-lightbox-next {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(221, 194, 164, 0.35);
    color: #fff;
    border: 1px solid var(--champagne-light);
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 5; /* ensure above zoom canvas */
}

.story-lightbox-prev:hover,
.story-lightbox-next:hover,
.story-lightbox-prev:focus,
.story-lightbox-next:focus {
    background: var(--champagne);
    border-color: var(--champagne);
}

/* High-contrast, champagne-infused close button */
.story-lightbox-close {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(221, 194, 164, 0.35);
    color: #fff;
    border: 1px solid var(--champagne-light);
    font-size: 26px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 6; /* keep above arrows */
}

.story-lightbox-close:hover,
.story-lightbox-close:focus {
    background: var(--champagne);
    border-color: var(--champagne);
}

/* Champagne-tinted backdrop only while story lightbox is open */
.story-lightbox-open .modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.30);
}

/* ========================================
   @group Utilities
   Project utility classes
   ======================================== */

/* Removed unused utilities: .text-champagne-dark, .border-champagne-light */
/* Removed unused: .invitation-subtitle */

/* Invitation lines: consistent typography + spacing */
.invitation-line {
    font-family: var(--font-serif-body);
    margin-bottom: 0.75rem;
    line-height: 1.55;
    letter-spacing: 0.01em;
}

@media (min-width: 992px) {
    .invitation-line {
        margin-bottom: 1rem;
        line-height: 1.65;
    }
}


.invitation-callout {
    font-family: var(--font-serif-body);
    font-weight: 600;
}

/* Home page: keep the invitation copy in Playfair for a formal headline feel */
.home-invitation .invitation-line {
    font-family: 'Playfair Display', Georgia, serif;
}

/* Extra breathing room after couple names */
.couple-names+.invitation-line {
    margin-top: 1rem;
}

@media (min-width: 992px) {
    .couple-names+.invitation-line {
        margin-top: 1rem;
    }
}

/* (Removed) .rsvp-script-title and tag-based script sizing in favor of .script-*
   helpers above. */

/* Guest names (RSVP): use elegant serif */
.guest-name-script {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.125rem;
    /* align with h3 scale */
    line-height: 1.45;
    color: var(--gray-900);
}

@media (min-width: 768px) {
    .guest-name-script {
        font-size: 1.25rem;
    }
}

/* RSVP-only mobile bump for script-subtitle (step headings) */
.rsvp-card-col .script-subtitle {
    font-size: 4rem;
    /* mobile: a touch larger than global 3.75rem */
}

@media (min-width: 992px) {
    .rsvp-card-col .script-subtitle {
        font-size: 4.25rem;
        /* align with global desktop */
    }
}

/* Vertically center text (and arrows) inside buttons */
.btn-align-middle {
    display: inline-flex;
    align-items: center;
}

/* Larger spacing around RSVP headings and footers */
.rsvp-title-gap {
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .rsvp-title-gap {
        margin-top: 1.5rem;
    }
}

.rsvp-footer-gap {
    margin-top: 3.5rem;
}

@media (min-width: 768px) {
    .rsvp-footer-gap {
        margin-top: 4.5rem;
    }
}

/* Guest rows: coherent spacing across breakpoints */
.rsvp-guest-row {
    gap: 0.75rem 1.25rem !important;
}

@media (min-width: 768px) {
    .rsvp-guest-row {
        gap: 1rem 2rem !important;
    }
}

.rsvp-guest-row .guest-name-script {
    flex: 1 1 auto;
    min-width: 200px;
    /* ensures breathing room against radios on tablet */
}

.rsvp-guest-row .invitation-group {
    flex: 0 0 auto;
}

/* Add vertical breathing room between stacked guest rows on mobile */
.rsvp-guest-row+.rsvp-guest-row {
    margin-top: 2.75rem;
}

@media (min-width: 768px) {
    .rsvp-guest-row+.rsvp-guest-row {
        margin-top: 1.25rem;
    }
}

/* ==============================
   Review Page Hierarchy Tweaks
   ============================== */
.rsvp-review-event {
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .rsvp-review-event {
        margin-top: 2.25rem;
    }
}

.rsvp-review-event+.rsvp-review-event {
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .rsvp-review-event+.rsvp-review-event {
        margin-top: 2.75rem;
    }
}

.rsvp-review-title {
    font-family: var(--font-serif-body);
    color: var(--gray-900);
    font-weight: 600;
    font-size: 1.125rem;
    /* align with h3 scale */
}

@media (min-width: 768px) {
    .rsvp-review-title {
        font-size: 1.25rem;
    }
}

/* RSVP titles (event sections) */
.rsvp-event-title {
    font-family: var(--font-serif-body);
    color: var(--gray-900);
    font-weight: 600;
    font-size: 1.125rem;
    /* align with h3 scale */
}

@media (min-width: 768px) {
    .rsvp-event-title {
        font-size: 1.25rem;
    }
}

.rsvp-event-meta {
    font-family: var(--font-serif-body);
    font-style: normal;
    /* remove italics for cleaner look */
    letter-spacing: 0.01em;
}

.guest-name-script-sm {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    /* meta scale mobile */
    line-height: 1.5;
    color: var(--gray-900);
}

@media (min-width: 768px) {
    .guest-name-script-sm {
        font-size: 1.0625rem;
    }
}

/* Review page: switch guest names to Source Serif 4, scoped */
.rsvp-review-event .guest-name-script-sm {
    font-family: var(--font-serif-body);
    font-size: 1rem;
    letter-spacing: 0.01em;
}

@media (min-width: 768px) {
    .rsvp-review-event .guest-name-script-sm {
        font-size: 1.0625rem;
    }
}

/* RSVP content area: increase horizontal padding under hero image */
#rsvp-card-content {
    padding-left: 1.5rem;
    /* override Bootstrap px-3 on xs */
    padding-right: 1.5rem;
    padding-top: 1rem;
    /* add breathing room under hero on RSVP */
}

/* ==============================
   Event Meta (shared component)
   ============================== */
.event-meta {
    font-family: var(--font-serif-body);
    color: var(--gray-900);
    letter-spacing: 0.01em;
}

.event-meta--center {
    max-width: 42ch;
    margin-left: auto;
    margin-right: auto;
}

.event-meta__date {
    font-weight: 600;
}

.event-meta__sub {
    color: var(--gray-700);
}

.event-description {
    display: block;
}

.event-description[open]>.event-description__summary::after,
.event-description>.event-description__summary::after {
    /* reserve space for marker to avoid layout shift */
    content: '';
}

.event-description__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    user-select: none;
    color: var(--champagne-dark);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
}

.event-description__summary:hover,
.event-description__summary:focus {
    color: var(--champagne);
}

.event-description__content {
    margin-top: 0.25rem;
}

/* Limit description height visually when not open via details/summary is not trivial;
   for this pass we keep it fully collapsed until expanded. */

/* Wedding/Additional: guest names in Source Serif 4 with reduced size */
.rsvp-wedding-step .guest-name-script,
.rsvp-additional-step .guest-name-script,
.rsvp-dietary-step .guest-name-script {
    font-family: var(--font-serif-body);
    font-size: 1.0625rem;
    /* slightly larger on mobile to balance Inter labels */
    letter-spacing: 0.01em;
}

@media (min-width: 768px) {

    .rsvp-wedding-step .guest-name-script,
    .rsvp-additional-step .guest-name-script,
    .rsvp-dietary-step .guest-name-script {
        font-size: 1.125rem;
    }
}

/* Wedding step: calm the instruction line */
.rsvp-instruction {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
}

/* Subtle separators between stacked guest rows for readability */
/* Wedding: rows are wrapped in .mb-3 containers, so target next wrapper's row */
.rsvp-wedding-step .mb-3+.mb-3 .rsvp-guest-row,
/* Future-proof: if rows are direct siblings */
.rsvp-wedding-step .rsvp-guest-row+.rsvp-guest-row {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 1rem;
}

/* Additional Events: add consistent spacing and separators for readability */
.additional-event .rsvp-guest-row+.rsvp-guest-row {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 1rem;
    /* match Wedding: distance from divider to next content */
}

.additional-event {
    /* breathing room between events */
}

/* Neutralize global stacked-row margin on Additional; rely on divider padding */
.rsvp-additional-step .rsvp-guest-row+.rsvp-guest-row {
    /* match Wedding: distance from previous row bottom to divider */
    margin-top: 1rem;
}

/* Dietary: no dividers; use more space handled via template classes */

/* Slightly reduce label text to balance with Source Serif 4 names while preserving 44px hit target */
.invitation-choice__label {
    font-size: 0.95rem;
}

/* Larger bottom spacing helpers */
.mb-6 {
    margin-bottom: 4rem !important;
}

/* Additional step: render guest names in Source Serif 4 like Wedding */
.rsvp-additional-step .guest-name-script {
    font-family: var(--font-serif-body);
    letter-spacing: 0.01em;
}

/* Wedding meta: dedicated layout and Source Serif 4 type */
.wedding-meta {
    font-family: var(--font-serif-body);
    letter-spacing: 0.01em;
}

.wedding-meta__date {
    font-weight: 600;
    font-size: 1.125rem;
}

.wedding-meta__time,
.wedding-meta__location {
    /* inherit color; avoid muted styles */
    font-size: 1rem;
}

.wedding-meta__desc-preview {
    display: inline;
}

/* (Expand/Collapse link removed on Wedding page) */

@media (min-width: 576px) {
    #rsvp-card-content {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 1.25rem;
    }
}

@media (min-width: 768px) {
    #rsvp-card-content {
        padding-left: 4rem;
        padding-right: 4rem;
        padding-top: 1.5rem;
    }

    /* beyond px-md-5 (3rem) */
}

@media (min-width: 992px) {
    #rsvp-card-content {
        padding-left: 4.5rem;
        padding-right: 4.5rem;
        padding-top: 1.75rem;
    }
}

@media (min-width: 1200px) {
    #rsvp-card-content {
        padding-left: 5rem;
        padding-right: 5rem;
        padding-top: 2rem;
    }
}

/* RSVP Overview: remove extra top padding to match other pages' palm spacing */
#rsvp-card-content.no-top-pad {
    padding-top: 0 !important;
}

/* ========================================
   @group Pages — Travel & Stay
   Page-specific tweaks for Travel & Stay
   ======================================== */

.travel-and-stay-page .flights-subheading {
    margin-left: var(--space-sm);
}