/* ===== CUSTOM FONTS ===== */
@font-face { font-display: swap; font-family: 'July 01'; font-style: normal; font-weight: 400; src: url('assets/fonts/july01-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Bradford'; font-style: normal; font-weight: 400; src: url('assets/fonts/bradford-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Bradford'; font-style: italic; font-weight: 400; src: url('assets/fonts/bradford-italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'PP Mori'; font-style: normal; font-weight: 400; src: url('assets/fonts/ppmori-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'PP Mori'; font-style: normal; font-weight: 600; src: url('assets/fonts/ppmori-semibold.woff2') format('woff2'); }

/* ===== CSS VARIABLES ===== */
:root {
    --bg: #0F0F11;
    --bg-700: #2F2F33;
    --bg-light: #161618;
    --white: #ffffff;
    --cream: #F0EEE7;
    --accent: #ED8E71;
    --gray: #666666;
    --gray-light: #bbb;
    --border: #3D3D40;

    --font-display: 'July 01', 'Playfair Display', Georgia, serif;
    --font-serif: 'Bradford', 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'PP Mori', 'DM Sans', sans-serif;

    --header-h: 3.193vw;
    --sidebar-w: 4.819vw;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== SCREEN READER ONLY ===== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--white);
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; width: 100%; height: 100%; }
button { font-family: inherit; }

/* ===== TAP FEEDBACK ===== */
button:active, .action-card:active, .toggle-btn:active,
.menu-rsvp-btn:active, .venmo-btn:active, .submit-btn:active,
.password-gate-btn:active, .ladoo-close:active {
    transform: scale(0.97);
}

/* ===== KEYBOARD FOCUS ===== */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ===== GPU COMPOSITING ===== */
.custom-cursor, .custom-cursor-dot { will-change: transform; }
.chapter-spinner, .intheair-spinner { will-change: transform; }
.love-rotating-text { will-change: transform; }

/* ===== PRELOADER ===== */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.preloader.done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.preloader-inner {
    overflow: hidden;
    position: relative;
    z-index: 2;
    padding: 0.15em 0.05em;
}
.preloader-letter {
    font-family: var(--font-display);
    font-size: 18vw;
    color: var(--white);
    letter-spacing: 0.02em;
    display: block;
    line-height: 1.1;
}
.preloader-amp {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--accent);
    font-size: 0.5em;
    margin: 0 0.05em;
}
.preloader-mask {
    position: absolute;
    inset: 0;
    background: var(--bg);
    z-index: 3;
}

/* ===== PASSWORD GATE (Modal) ===== */
.password-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.205vw;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    backdrop-filter: blur(10px);
}
.password-gate.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.password-modal {
    background: var(--cream);
    width: 54.217vw;
    max-width: 900px;
    padding: 5.723vw 3.614vw 3.614vw;
    position: relative;
}
.password-modal-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 1.205vw 1.807vw;
    border-bottom: 1px solid #000;
}

.password-modal-inner { text-align: center; }
.password-gate-title {
    font-family: var(--font-sans);
    font-size: 0.783vw;
    font-weight: 600;
    letter-spacing: 0.18vw;
    color: var(--bg);
    text-transform: uppercase;
    margin-bottom: 1.446vw;
}
.password-gate-message {
    font-family: var(--font-serif);
    font-size: 1.084vw;
    font-weight: 300;
    line-height: 1.8;
    color: var(--bg);
    margin-bottom: 2.169vw;
}
.password-gate-form {
    display: flex;
    flex-direction: column;
    gap: 0.723vw;
}
.password-gate-input {
    width: 100%;
    padding: 1.084vw 1.205vw;
    font-family: var(--font-serif);
    font-size: 1.627vw;
    background: transparent;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 0.361vw;
    color: var(--bg);
    height: 5.542vw;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.password-gate-input:hover {
    border-color: rgba(0,0,0,0.4);
}
.password-gate-input::placeholder { color: var(--gray-light); }
.password-gate-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(237,142,113,0.12);
}
.password-gate-error {
    font-family: var(--font-sans);
    font-size: 0.783vw;
    color: var(--accent);
    margin: 0;
    min-height: 1.205vw;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s ease, max-height 0.4s ease, margin 0.4s ease;
}
.password-gate-error.visible {
    opacity: 1;
    max-height: 2em;
}
.password-gate-btn {
    padding: 1.084vw 1.446vw;
    font-family: var(--font-sans);
    font-size: 0.723vw;
    font-weight: 600;
    letter-spacing: 0.18vw;
    text-transform: uppercase;
    background: var(--accent);
    border: none;
    color: var(--white);
    cursor: pointer;
    border-radius: 12.048vw;
    transition: all 0.35s var(--ease);
}
.password-gate-btn:hover {
    opacity: 0.85;
}

/* ===== FIXED HEADER ===== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    min-height: 48px;
    background: rgba(15, 15, 17, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
    display: flex;
    align-items: center;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.site-header.light {
    background: rgba(240, 238, 231, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--gray-light);
}
.site-header.light .hamburger span { background: var(--bg); }
.site-header.light .header-date { color: var(--bg); }
.site-header.light .header-marquee-text { color: var(--bg); }
.site-header.light .header-line-v { background: var(--gray-light); }
.site-header.light .header-cta { background: var(--bg); color: var(--white); }

.header-left {
    width: var(--sidebar-w);
    min-width: 48px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    transition: border-color 0.3s ease;
}
.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    width: 1.807vw;
    min-width: 20px;
    height: 0.964vw;
    min-height: 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--white);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger.active { transform: scale(0.9); }
.hamburger.active span:first-child { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:last-child { transform: translateY(-7px) rotate(-45deg); }

.header-center {
    flex: 1;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
}
.header-marquee {
    display: flex;
    width: max-content;
    animation: headerMarquee 25s linear infinite;
}
.header-marquee-text {
    font-family: var(--font-serif);
    font-size: max(12px, 0.843vw);
    font-style: italic;
    color: var(--white);
    white-space: nowrap;
    padding: 0 0.241vw;
    transition: color 0.3s ease;
}
@keyframes headerMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.header-right {
    padding: 0 1.446vw;
    display: flex;
    align-items: center;
    gap: 1.205vw;
    height: 100%;
}
.header-line-v {
    width: 1px;
    height: 60%;
    background: var(--border);
    transition: background 0.3s ease;
}
.header-logo {
    height: 2.169vw;
    min-height: 24px;
    width: auto;
    max-width: 7.229vw;
    object-fit: contain;
    filter: brightness(1.4);
}
.header-date {
    font-family: var(--font-sans);
    font-size: 0.723vw;
    font-weight: 500;
    letter-spacing: 0.12vw;
    color: var(--white);
    transition: color 0.3s ease;
}
.header-cta {
    font-family: var(--font-sans);
    font-size: 0.723vw;
    font-weight: 600;
    letter-spacing: 0.12vw;
    text-transform: uppercase;
    padding: 0.602vw 1.807vw;
    background: var(--accent);
    color: var(--white);
    border-radius: 12.048vw;
    transition: all 0.35s var(--ease);
    white-space: nowrap;
}
.header-cta:hover { opacity: 0.85; }

/* ===== FIXED SIDEBAR ===== */
.sidebar {
    position: fixed;
    left: 0;
    top: var(--header-h);
    bottom: 0;
    width: var(--sidebar-w);
    min-width: 48px;
    background: var(--bg);
    border-right: 1px solid var(--border);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.sidebar.light {
    background: var(--cream);
    border-right-color: var(--gray-light);
}
.sidebar.light .sidebar-text { color: var(--bg); }

.sidebar-text {
    font-family: var(--font-serif);
    font-size: 0.904vw;
    font-style: italic;
    color: var(--white);
    opacity: 0.8;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 0.15em;
    white-space: nowrap;
    transition: color 0.3s ease;
    animation: sidebarScroll 12s linear infinite;
}
@keyframes sidebarScroll {
    0% { transform: rotate(180deg) translateY(0); }
    100% { transform: rotate(180deg) translateY(-50%); }
}

/* ===== FULLSCREEN MENU ===== */
.fullscreen-menu {
    position: fixed;
    inset: 0;
    z-index: 990;
    background: rgba(15, 15, 17, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    will-change: opacity;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.fullscreen-menu.open { opacity: 1; visibility: visible; }
.menu-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.807vw;
}
.menu-link-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: none;
}
.menu-label {
    font-family: var(--font-sans);
    font-size: 0.904vw;
    font-weight: 500;
    letter-spacing: 0.06vw;
    color: var(--gray-light);
    text-transform: uppercase;
    margin-bottom: 0.241vw;
}
.menu-link {
    font-family: var(--font-display);
    font-size: 9vw;
    letter-spacing: -0.01em;
    color: var(--accent);
    line-height: 1;
    position: relative;
    padding: 0;
    transition: opacity 0.3s ease;
    cursor: none;
}
.menu-link:hover { opacity: 0.7; }
.menu-footer { margin-top: 3.614vw; }
.menu-rsvp-btn {
    font-family: var(--font-sans);
    font-size: 0.723vw;
    font-weight: 600;
    letter-spacing: 0.18vw;
    padding: 0.964vw 2.410vw;
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 12.048vw;
    transition: all 0.35s var(--ease);
    position: relative;
    overflow: hidden;
}
.menu-rsvp-btn:hover {
    background: var(--accent);
    color: var(--bg);
}

/* ===== SECTION 01: HERO ===== */
.hero {
    min-height: 100vh;
    position: relative;
    background: var(--bg);
    overflow: hidden;
    padding-top: var(--header-h);
    padding-right: 1vw;
    margin-left: var(--sidebar-w);
}
.hero-title {
    position: relative;
    width: 100%;
    height: 55.422vw;
    min-height: 70vh;
}
.hero-name {
    font-family: var(--font-display);
    font-size: 22vw;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--white);
    line-height: 1;
    position: absolute;
}
.hero-name-1 {
    top: 1.928vw;
    left: 0.181vw;
    opacity: 0;
    transform: translateY(80px);
}
.hero-name-2 {
    bottom: 0;
    right: 0.422vw;
    opacity: 0;
    transform: translateY(80px);
}
.hero-name-amp {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--accent);
    font-size: 10vw;
    position: absolute;
    top: 1.928vw;
    right: 9.398vw;
    opacity: 0;
}

.hero-photo-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 25vw;
    max-width: 400px;
    height: 35vh;
    max-height: 500px;
    overflow: hidden;
    z-index: 5;
}
.hero-photo-reveal {
    width: 100%;
    height: 100%;
}
.hero-photo-reveal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-bottom-info {
    position: absolute;
    bottom: 1.807vw;
    right: 3%;
    display: flex;
    align-items: center;
    gap: 0.723vw;
    z-index: 10;
    opacity: 0;
}
.hero-label {
    font-family: var(--font-sans);
    font-size: 0.663vw;
    font-weight: 500;
    letter-spacing: 0.18vw;
    color: var(--gray-light);
}
.hero-divider { color: var(--gray); font-size: 0.723vw; }

.hero-scroll-cta {
    position: absolute;
    bottom: 1.807vw;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.482vw;
    z-index: 10;
    opacity: 0;
}
.hero-scroll-cta span {
    font-family: var(--font-sans);
    font-size: 0.602vw;
    font-weight: 500;
    letter-spacing: 0.18vw;
    text-transform: uppercase;
    color: var(--gray);
}
.scroll-line {
    width: 1px;
    height: 2.410vw;
    background: var(--gray);
    position: relative;
    overflow: hidden;
}
.scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent);
    animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
    0% { top: -100%; }
    50% { top: 100%; }
    100% { top: 100%; }
}


/* ===== SECTION 02: LOVE STORY ===== */
.love-story {
    position: relative;
    height: 74.096vw;
    min-height: 80vh;
    margin-left: var(--sidebar-w);
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--border);
    overflow: hidden;
    padding: 7.229vw 3%;
}
.love-vertical-line {
    position: absolute;
    left: 50%;
    width: 1px;
    background: var(--border);
    z-index: 1;
}
.love-line-top { top: 0; height: 4.819vw; }
.love-line-bottom { bottom: 0; height: 4.819vw; }

.love-corner { position: absolute; z-index: 10; }
.love-corner-tl {
    top: 3.614vw;
    left: 3%;
    display: flex;
    flex-direction: column;
    gap: 0.241vw;
}
.love-date {
    font-family: var(--font-sans);
    font-size: 0.783vw;
    font-weight: 600;
    letter-spacing: 0.2vw;
    color: var(--white);
}
.love-sublabel {
    font-family: var(--font-serif);
    font-size: 1.024vw;
    font-style: italic;
    color: var(--gray-light);
}
.love-corner-br {
    bottom: 4.819vw;
    left: 3%;
    max-width: 16.867vw;
}
.love-description {
    font-family: var(--font-serif);
    font-size: 1.084vw;
    font-weight: 300;
    line-height: 1.9;
    color: var(--gray-light);
}
.love-corner-bl {
    bottom: 1.807vw;
    right: 3%;
}
.love-info-btn {
    display: flex;
    align-items: center;
    gap: 0.602vw;
    padding: 0.723vw 1.446vw;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 12.048vw;
    transition: all 0.35s var(--ease);
    position: relative;
    overflow: hidden;
}
.love-info-btn:hover { border-color: var(--accent); background: rgba(237,142,113,0.1); }
.love-info-btn span {
    font-family: var(--font-sans);
    font-size: 0.663vw;
    font-weight: 500;
    letter-spacing: 0.12vw;
}
.love-info-btn svg { width: 0.964vw; height: 0.964vw; min-width: 14px; min-height: 14px; color: var(--accent); }

.love-center {
    position: relative;
    width: 16.747vw;
    height: 16.747vw;
    min-width: 180px;
    min-height: 180px;
}
.love-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
}
.love-circle-inner {
    width: 85%;
    height: 85%;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
}
.love-flower {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    pointer-events: none;
}
.love-flower img {
    width: 14vw;
    min-width: 140px;
    opacity: 0.9;
    filter: drop-shadow(0 0.241vw 1.205vw rgba(0,0,0,0.3));
}
.love-rotating-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22vw;
    height: 22vw;
    min-width: 220px;
    min-height: 220px;
    z-index: 7;
    animation: rotateText 20s linear infinite;
}
.love-rotating-text svg { width: 100%; height: 100%; }
.love-rotating-text text {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;
    fill: var(--white);
    text-transform: uppercase;
}
@keyframes rotateText {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===== SECTION 03: PHOTO MARQUEE ===== */
.photo-marquee {
    position: relative;
    margin-left: var(--sidebar-w);
    background: var(--bg);
    overflow: hidden;
    border-top: 1px solid var(--border);
}

/* Mask reveal section */
.marquee-mask-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 80vh;
    overflow: hidden;
}
.marquee-mask-image {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.marquee-mask-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.marquee-mask-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: var(--bg);
    z-index: 2;
}
.marquee-mask-text {
    position: absolute;
    z-index: 3;
    bottom: 3.614vw;
    left: 3.614vw;
    font-family: var(--font-display);
    font-size: 9.036vw;
    color: var(--white);
    letter-spacing: -0.01em;
    line-height: 1.1;
    transform: translateX(-100%);
    opacity: 0.6;
}

/* Horizontal gallery (auto-scrolling) */
.marquee-pin-wrapper {
    position: relative;
    height: 75vh;
    overflow: hidden;
}
.marquee-gallery-inner {
    display: flex;
    align-items: center;
    gap: 3.614vw;
    height: 100%;
    padding: 3.614vw;
    will-change: transform;
}
.marquee-photo-item {
    flex-shrink: 0;
    height: 100%;
}
.marquee-photo-mask {
    width: 22vw;
    height: 100%;
    border-radius: 12.048vw 12.048vw 0 0;
    overflow: hidden;
}
.marquee-photo-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.marquee-photo-item:hover .marquee-photo-mask img { transform: scale(1.05); }

/* ===== SECTION 04: WHERE IT STARTED ===== */
.started-section {
    position: relative;
    min-height: 100vh;
    margin-left: var(--sidebar-w);
    background: var(--cream);
    padding: 7.229vw 3%;
    overflow: hidden;
}
.started-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.807vw;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.started-title-bg {
    font-family: var(--font-display);
    font-size: 12vw;
    letter-spacing: 0.05em;
    color: var(--bg);
    opacity: 0.12;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
}
.started-emblem {
    text-align: center;
    margin-bottom: 3.614vw;
    opacity: 0.2;
}
.started-emblem img { width: 4.819vw; min-width: 60px; margin: 0 auto; }

.started-image {
    overflow: hidden;
    border-radius: 0.602vw;
    position: relative;
}
.started-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.started-shutter {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: var(--cream);
    z-index: 3;
}
/* Fallback: if GSAP fails to reveal shutters, this class forces them open */
.shutters-revealed .started-shutter { height: 0 !important; transition: height 0.8s ease; }
.started-emblem { grid-column: 1 / -1; }
.started-image { aspect-ratio: 3/4; min-height: 180px; }
.started-img-2 { margin-top: 3.614vw; }
.started-img-5 { margin-top: -1.807vw; }

/* ===== SECTION 05: CHAPTER ===== */
.chapter-section {
    position: relative;
    min-height: 100vh;
    margin-left: var(--sidebar-w);
    width: calc(100vw - var(--sidebar-w));
    background: var(--cream);
    color: var(--bg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}
.chapter-content {
    padding: 6.024vw 3.614vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.chapter-kicker {
    font-family: var(--font-sans);
    font-size: 0.663vw;
    font-weight: 600;
    letter-spacing: 0.241vw;
    color: var(--gray);
    text-transform: uppercase;
    margin-bottom: 0.964vw;
}
.chapter-title {
    font-family: var(--font-display);
    font-size: 6vw;
    letter-spacing: 0.03em;
    color: var(--bg);
    line-height: 0.9;
    margin-bottom: 2.410vw;
}
.chapter-body p {
    font-family: var(--font-serif);
    font-size: 1.084vw;
    font-weight: 400;
    line-height: 2;
    color: var(--bg);
    margin-bottom: 1.205vw;
}
.chapter-cta { margin-top: 2.410vw; }
.chapter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.723vw;
    padding: 0.964vw 1.928vw;
    border: 1px solid var(--bg);
    color: var(--bg);
    border-radius: 12.048vw;
    transition: all 0.35s var(--ease);
    position: relative;
    overflow: hidden;
}
.chapter-btn:hover { background: var(--bg); color: var(--cream); }
.chapter-btn span {
    font-family: var(--font-sans);
    font-size: 0.663vw;
    font-weight: 600;
    letter-spacing: 0.18vw;
}
.chapter-btn svg { width: 1.084vw; height: 1.084vw; min-width: 14px; min-height: 14px; }

.chapter-image { position: relative; overflow: hidden; }
.chapter-image-mask {
    width: 100%;
    height: 100%;
    min-height: 36.145vw;
}
.chapter-image-mask img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

.chapter-spinner {
    position: absolute;
    top: 2.410vw;
    right: 2.410vw;
    z-index: 10;
    opacity: 0.25;
}
.chapter-spinner img { width: 6.024vw; min-width: 60px; }

/* ===== SECTION 06: JOURNEY ===== */
.journey-section {
    position: relative;
    margin-left: var(--sidebar-w);
    background: var(--cream);
    color: var(--bg);
    overflow: hidden;
    padding: 7.229vw 3%;
}
.journey-inner {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.410vw;
}
.journey-text-block {
    overflow: hidden;
    z-index: 2;
    width: 100%;
    padding-bottom: 3vw;
}
.journey-text-block span {
    font-family: var(--font-display);
    font-size: 18vw;
    letter-spacing: -0.01em;
    color: var(--bg);
    line-height: 1;
    display: block;
    text-align: center;
    transform: translateY(100%);
}
.journey-text-block.in-view span {
    transform: translateY(0%);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.journey-t4 span {
    font-family: var(--font-serif);
    font-style: italic;
    letter-spacing: -0.02em;
}

.journey-img {
    overflow: hidden;
    border-radius: 0.602vw;
    z-index: 1;
}
.journey-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.journey-img-1 {
    width: 30vw;
    height: 35vw;
    margin-right: auto;
}
.journey-img-2 {
    width: 26vw;
    height: 30vw;
    margin-left: auto;
}
.journey-img-3 {
    width: 28vw;
    height: 32vw;
    margin-right: auto;
}

.journey-cta-wrap {
    padding: 3.614vw 0 6.024vw;
    text-align: center;
}
.journey-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.602vw;
    padding: 0.964vw 1.928vw;
    border: 1px solid var(--bg);
    color: var(--bg);
    border-radius: 12.048vw;
    transition: all 0.35s var(--ease);
    font-family: var(--font-sans);
    font-size: max(11px, 0.663vw);
    font-weight: 600;
    letter-spacing: 0.18vw;
}
.journey-cta-btn:hover { background: var(--bg); color: var(--cream); }
.journey-cta-btn svg { width: 1.084vw; height: 1.084vw; min-width: 14px; min-height: 14px; }

/* ===== SECTION 07: TEXT MARQUEE ===== */
.text-marquee {
    margin-left: var(--sidebar-w);
    padding: 1.807vw 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 30s linear infinite;
}
.marquee-content {
    display: flex;
    align-items: center;
    gap: 1.446vw;
    padding-right: 1.446vw;
}
.marquee-content span {
    font-family: var(--font-serif);
    font-size: 1.566vw;
    font-weight: 300;
    font-style: italic;
    color: var(--white);
    white-space: nowrap;
}
.marquee-content .dot { color: var(--accent); font-size: 0.723vw; }
@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ===== SECTION 08: COUNTDOWN ===== */
.countdown-section {
    margin-left: var(--sidebar-w);
    padding: 8.434vw 3%;
    background: var(--bg);
    text-align: center;
}
.countdown-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.807vw;
}
.countdown-kicker {
    font-family: var(--font-sans);
    font-size: max(11px, 0.723vw);
    font-weight: 500;
    letter-spacing: 0.301vw;
    color: var(--gray-light);
}
.countdown {
    display: flex;
    justify-content: center;
    gap: 3.012vw;
}
.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.countdown-number {
    font-family: var(--font-display);
    font-size: 4.819vw;
    color: var(--accent);
    line-height: 1.15;
}
.countdown-label {
    font-family: var(--font-sans);
    font-size: 0.602vw;
    font-weight: 500;
    letter-spacing: 0.18vw;
    color: var(--gray-light);
    margin-top: 0.602vw;
    text-transform: uppercase;
}
.countdown-date {
    font-family: var(--font-display);
    font-size: 5.5vw;
    letter-spacing: 0.05em;
    color: var(--white);
}

/* ===== SECTION 09: ACTION CARDS ===== */
.action-section {
    margin-left: var(--sidebar-w);
    background: var(--bg-light);
}
.action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.action-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3.012vw 2.410vw;
    border: 1px solid var(--border);
    transition: all 0.35s var(--ease);
    cursor: pointer;
}
.action-card:hover { background: var(--bg); border-color: var(--accent); }
.card-text {
    display: flex;
    flex-direction: column;
    gap: 0.602vw;
}
.card-subtitle {
    font-family: var(--font-sans);
    font-size: max(9px, 0.542vw);
    font-weight: 500;
    letter-spacing: 0.12vw;
    color: var(--gray);
}
.card-title {
    font-family: var(--font-display);
    font-size: 3.373vw;
    letter-spacing: 0.02em;
    color: var(--white);
    transition: transform 0.3s var(--ease);
}
.card-arrow {
    width: 3.012vw;
    height: 3.012vw;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s var(--ease);
    flex-shrink: 0;
}
.card-arrow svg {
    width: 1.205vw;
    height: 1.205vw;
    min-width: 16px;
    min-height: 16px;
    color: var(--accent);
    transition: transform 0.4s var(--ease);
}
.action-card:hover .card-arrow { background: var(--accent); border-color: var(--accent); transform: scale(1.1); }
.action-card:hover .card-arrow svg { color: var(--bg); transform: rotate(-45deg); }
.action-card-wide {
    grid-column: span 2;
    justify-content: space-between;
    background: var(--bg);
}

/* ===== SECTION 10: RSVP ===== */
.rsvp-section {
    margin-left: var(--sidebar-w);
    padding: 7.229vw 3%;
    background: var(--bg);
    border-top: 1px solid var(--border);
}
.rsvp-container {
    max-width: 42.169vw;
    margin: 0 auto;
    text-align: center;
}
.rsvp-title {
    font-family: var(--font-display);
    font-size: 5.5vw;
    letter-spacing: 0.05em;
    color: var(--white);
    margin-bottom: 0.723vw;
}
.rsvp-subtitle {
    font-family: var(--font-serif);
    font-size: 0.964vw;
    font-style: italic;
    color: var(--gray-light);
    margin-bottom: 2.410vw;
}
.form-error {
    display: none;
    font-size: 0.75rem;
    color: var(--accent);
    margin-top: 4px;
    font-family: var(--font-sans);
}
.form-error.visible { display: block; }
.rsvp-form input:invalid:not(:placeholder-shown) { border-color: var(--accent); }
.rsvp-status {
    font-family: var(--font-sans);
    font-size: 0.843vw;
    margin-top: 1.205vw;
    min-height: 1.446vw;
    color: var(--accent);
    letter-spacing: 0.06vw;
}
.rsvp-form {
    display: flex;
    flex-direction: column;
    gap: 1.205vw;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.205vw;
}
.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea {
    width: 100%;
    padding: 1.205vw;
    font-family: var(--font-sans);
    font-size: 0.843vw;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0.361vw;
    color: var(--white);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.rsvp-form input:hover,
.rsvp-form select:hover,
.rsvp-form textarea:hover {
    border-color: var(--gray);
}
.rsvp-form input::placeholder,
.rsvp-form textarea::placeholder { color: var(--gray); }
.rsvp-form input:focus,
.rsvp-form select:focus,
.rsvp-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(237,142,113,0.1); }
.rsvp-form input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px var(--bg) inset;
    -webkit-text-fill-color: var(--white);
}
.rsvp-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.205vw center;
    cursor: pointer;
}
.rsvp-form select option { background: var(--bg); color: var(--white); }

/* Attending toggle buttons */
.form-section { text-align: left; }
.form-label {
    font-family: var(--font-sans);
    font-size: 0.723vw;
    font-weight: 500;
    letter-spacing: 0.12vw;
    color: var(--gray-light);
    text-transform: uppercase;
    margin-bottom: 0.723vw;
    display: block;
    text-align: center;
}
.attending-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.205vw;
}
.attending-toggle input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.toggle-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.361vw;
    padding: 1.446vw 1.205vw;
    border: 1px solid var(--border);
    border-radius: 0.602vw;
    cursor: pointer;
    transition: all 0.35s var(--ease);
    text-align: center;
}
.toggle-btn:hover { border-color: var(--gray); }
.toggle-emoji { font-size: 1.807vw; line-height: 1; }
.toggle-text {
    font-family: var(--font-display);
    font-size: 1.807vw;
    color: var(--white);
    letter-spacing: 0.02em;
}
.toggle-sub {
    font-family: var(--font-serif);
    font-size: 0.723vw;
    font-style: italic;
    color: var(--gray);
}
input#attendYes:checked + .toggle-btn.toggle-yes {
    border-color: var(--accent);
    background: rgba(237, 142, 113, 0.1);
    box-shadow: 0 0 0 3px rgba(237, 142, 113, 0.12);
}
input#attendNo:checked + .toggle-btn.toggle-no {
    border-color: var(--gray);
    background: rgba(102, 102, 102, 0.08);
    box-shadow: 0 0 0 3px rgba(102, 102, 102, 0.08);
}
input#attendYes:focus-visible + .toggle-btn,
input#attendNo:focus-visible + .toggle-btn {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.nahi-reaction {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--gray-light);
    font-size: 0.9vw;
    text-align: center;
    margin-top: 0.6vw;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s ease, max-height 0.4s ease;
}

.submit-btn {
    padding: 1.205vw 3.012vw;
    font-family: var(--font-sans);
    font-size: 0.723vw;
    font-weight: 600;
    letter-spacing: 0.18vw;
    background: var(--accent);
    border: 2px solid var(--accent);
    color: var(--bg);
    cursor: pointer;
    border-radius: 12.048vw;
    transition: all 0.35s var(--ease);
    margin-top: 1.205vw;
}
.submit-btn:hover { background: transparent; color: var(--accent); transform: translateY(-1px); }
.submit-btn:active { transform: translateY(0); }

/* ===== SECTION 11: REGISTRY ===== */
.registry-section {
    margin-left: var(--sidebar-w);
    padding: 7.229vw 3%;
    background: var(--bg-light);
    text-align: center;
    border-top: 1px solid var(--border);
}
.registry-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.205vw;
}
.registry-kicker {
    font-family: var(--font-sans);
    font-size: 0.723vw;
    font-weight: 400;
    letter-spacing: 0.18vw;
    color: var(--gray-light);
}
.registry-link {
    font-family: var(--font-display);
    font-size: 4.5vw;
    letter-spacing: 0.05em;
    color: var(--white);
    position: relative;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.25);
    text-underline-offset: 0.15em;
    transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}
.registry-link:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
}

.registry-arrow {
    font-size: 0.65em;
    vertical-align: super;
    margin-left: 0.1em;
    display: inline-block;
    transition: transform 0.25s var(--ease);
}
.registry-link:hover .registry-arrow {
    transform: translate(3px, -3px);
}
.registry-hint {
    font-family: var(--font-sans);
    font-size: 0.65vw;
    letter-spacing: 0.15vw;
    color: var(--gray);
    text-transform: uppercase;
    margin-top: -0.5vw;
}

/* ===== SECTION 12: DETAILS ===== */
.details-section {
    margin-left: var(--sidebar-w);
    padding: 7.229vw 3%;
    background: var(--bg);
    text-align: center;
    border-top: 1px solid var(--border);
}
.details-container {
    max-width: 36.145vw;
    margin: 0 auto;
}
.details-title {
    font-family: var(--font-display);
    font-size: 4.337vw;
    letter-spacing: 0.05em;
    color: var(--white);
    margin-bottom: 1.807vw;
}
.details-divider {
    width: 3.614vw;
    height: 1px;
    background: var(--gray);
    margin: 1.446vw auto;
}
.details-date,
.details-time {
    font-family: var(--font-serif);
    font-size: 1.446vw;
    font-weight: 300;
    color: var(--cream);
    margin-bottom: 0.602vw;
}
.details-venue {
    font-family: var(--font-sans);
    font-size: 1.084vw;
    font-weight: 500;
    letter-spacing: 0.12vw;
    color: var(--white);
    margin-bottom: 0.482vw;
}
.details-address {
    font-family: var(--font-sans);
    font-size: 0.843vw;
    color: var(--gray);
    margin-bottom: 1.205vw;
}
.details-map-link {
    font-family: var(--font-sans);
    font-size: 0.723vw;
    font-weight: 500;
    letter-spacing: 0.12vw;
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 0.12vw;
    transition: opacity 0.3s ease;
}
.details-map-link:hover { opacity: 0.7; }

/* Details action buttons */
.details-actions {
    display: flex;
    gap: 1.205vw;
    justify-content: center;
    margin-top: 1.807vw;
}
.details-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.602vw;
    padding: 0.723vw 1.446vw;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 12.048vw;
    background: transparent;
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 0.663vw;
    font-weight: 500;
    letter-spacing: 0.12vw;
    cursor: pointer;
    transition: all 0.35s var(--ease);
    text-decoration: none;
}
.details-action-btn:hover {
    border-color: var(--accent);
    background: rgba(237,142,113,0.1);
    color: var(--accent);
}
.details-action-btn svg {
    width: 1.084vw;
    height: 1.084vw;
    min-width: 16px;
    min-height: 16px;
}

/* ===== SECTION 13: HONEYMOON ===== */
.honeymoon-section {
    margin-left: var(--sidebar-w);
    padding: 7.229vw 3%;
    background: var(--bg-light);
    text-align: center;
    border-top: 1px solid var(--border);
}
.honeymoon-container { max-width: 30.120vw; margin: 0 auto; }
.honeymoon-title {
    font-family: var(--font-display);
    font-size: 3.373vw;
    letter-spacing: 0.05em;
    color: var(--white);
    margin-bottom: 0.482vw;
}
.blessing-subtitle {
    font-family: var(--font-serif);
    font-size: 0.964vw;
    font-style: italic;
    color: var(--gray-light);
    margin-bottom: 1.446vw;
}
.honeymoon-text {
    font-family: var(--font-serif);
    font-size: 1.084vw;
    font-weight: 300;
    line-height: 1.8;
    color: var(--cream);
    margin-bottom: 1.205vw;
}
.blessing-note {
    font-family: var(--font-serif);
    font-size: 0.904vw;
    font-style: italic;
    color: var(--accent);
    margin-bottom: 0.964vw;
}

.venmo-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.361vw;
    padding: 1.084vw 2.410vw;
    background: var(--accent);
    color: var(--bg);
    border-radius: 12.048vw;
    transition: all 0.35s var(--ease);
    text-decoration: none;
}
.venmo-btn:hover { opacity: 0.85; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(237, 142, 113, 0.25); }
.venmo-btn-label {
    font-family: var(--font-sans);
    font-size: 0.723vw;
    font-weight: 600;
    letter-spacing: 0.12vw;
    text-transform: uppercase;
}
.venmo-btn-user {
    font-family: var(--font-sans);
    font-size: 0.602vw;
    font-weight: 400;
    opacity: 0.7;
}

/* ===== SECTION 14: IN THE AIR ===== */
.intheair-section {
    margin-left: var(--sidebar-w);
    background: var(--bg);
    padding: 9.639vw 3%;
    text-align: center;
    border-top: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.intheair-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.807vw;
    position: relative;
}
.intheair-line1 {
    font-family: var(--font-serif);
    font-size: 7.229vw;
    font-style: italic;
    color: var(--white);
    line-height: 1;
}
.intheair-line2 {
    font-family: var(--font-display);
    font-size: 17vw;
    color: var(--white);
    line-height: 1;
    letter-spacing: -0.01em;
}
.intheair-spinner {
    margin: 1.807vw 0;
    opacity: 0.3;
}
.intheair-spinner img { width: 6.024vw; min-width: 60px; }
.intheair-verse {
    font-family: var(--font-serif);
    font-size: 1.627vw;
    font-style: italic;
    color: var(--gray-light);
}

/* ===== FOOTER ===== */
.footer {
    margin-left: var(--sidebar-w);
    padding: 4.819vw 3%;
    background: var(--bg);
    border-top: 1px solid var(--border);
    text-align: center;
}
.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.904vw;
}
.footer-names {
    font-family: var(--font-display);
    font-size: 3.5vw;
    letter-spacing: 0.05em;
}
.footer-names span { color: var(--white); }
.footer-names .amp {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--accent);
    margin: 0 0.602vw;
}
.footer-date {
    font-family: var(--font-sans);
    font-size: 0.663vw;
    letter-spacing: 0.18vw;
    color: var(--gray);
}
.footer-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.301vw 0.602vw;
    justify-content: center;
    margin-top: 0.602vw;
}
.footer-hashtag {
    font-family: var(--font-serif);
    font-size: 2.2vw;
    font-style: italic;
    color: var(--accent);
}
.footer-border {
    width: 3.614vw;
    height: 1px;
    background: var(--border);
    margin: 1.205vw 0 0.602vw;
}
.footer-credit {
    font-family: var(--font-serif);
    font-size: 0.783vw;
    font-style: italic;
    color: var(--gray);
}

/* ===== LADOO CELEBRATION POPUP ===== */
.ladoo-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.ladoo-popup.active {
    opacity: 1;
    visibility: visible;
}
.ladoo-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ladoo-modal {
    position: relative;
    background: var(--cream);
    padding: 48px 40px 36px;
    border-radius: 16px;
    text-align: center;
    max-width: 380px;
    width: 90vw;
    transform: scale(0.8) translateY(20px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.ladoo-popup.active .ladoo-modal {
    transform: scale(1) translateY(0);
}
.ladoo-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.ladoo-confetti-piece {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: -10px;
    animation: confettiFall 2.5s ease-in forwards;
}
@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translateY(400px) rotate(720deg) scale(0); opacity: 0; }
}
.ladoo-emoji {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 16px;
    animation: ladooBounce 0.8s ease-out;
    display: flex;
    justify-content: center;
}
.ladoo-ball {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #FFD166 0%, #F4A435 50%, #C67C00 100%);
    box-shadow: 0 6px 20px rgba(196, 124, 0, 0.55), inset 0 -4px 8px rgba(0,0,0,0.18);
    position: relative;
    flex-shrink: 0;
}
.ladoo-ball::before {
    content: '';
    position: absolute;
    top: 13%;
    left: 18%;
    width: 28%;
    height: 18%;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    filter: blur(4px);
}
.ladoo-ball::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image:
        radial-gradient(circle 3px at 28% 48%, rgba(255,220,80,0.7) 50%, transparent 50%),
        radial-gradient(circle 2px at 55% 32%, rgba(255,220,80,0.6) 50%, transparent 50%),
        radial-gradient(circle 3px at 72% 62%, rgba(255,220,80,0.7) 50%, transparent 50%),
        radial-gradient(circle 2px at 42% 72%, rgba(255,220,80,0.6) 50%, transparent 50%),
        radial-gradient(circle 2px at 18% 68%, rgba(255,220,80,0.6) 50%, transparent 50%),
        radial-gradient(circle 2px at 65% 48%, rgba(255,220,80,0.5) 50%, transparent 50%);
}
@keyframes ladooBounce {
    0% { transform: scale(0) rotate(-20deg); }
    50% { transform: scale(1.3) rotate(10deg); }
    70% { transform: scale(0.9) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.ladoo-title {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--bg);
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    line-height: 1.2;
}
.ladoo-message {
    font-family: var(--font-serif);
    font-size: 16px;
    font-style: italic;
    color: var(--gray);
    line-height: 1.6;
    margin-bottom: 16px;
}
.ladoo-hashtag {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: 22px;
    font-style: italic;
    color: var(--accent);
    margin-bottom: 24px;
    letter-spacing: 0.02em;
}
.ladoo-close {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--accent);
    border: none;
    color: var(--white);
    cursor: pointer;
    border-radius: 100px;
    transition: all 0.35s var(--ease);
}
.ladoo-close:hover { opacity: 0.85; transform: translateY(-1px); }
.ladoo-close:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }

/* ===== STARTED IMAGE POSITIONING ===== */
.started-image img { object-position: center 20%; }

/* ===== ACTION CARD HOVER TEXT SLIDE ===== */
.action-card:hover .card-title {
    transform: translateX(4px);
    transition: transform 0.3s var(--ease);
}

/* ===== LOADING SPINNER ===== */
@keyframes spin { to { transform: rotate(360deg); } }
.submit-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}
.submit-btn.loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

/* ===== TEXTAREA RESIZE ===== */
.rsvp-form textarea { resize: vertical; }

/* ===== SUBMITTED FORM STATE ===== */
.rsvp-form.submitted {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* ===== MENU ACTIVE INDICATOR ===== */
.menu-link { position: relative; }
.menu-link.active::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
}

/* ===== IN THE AIR "ALWAYS" STYLING ===== */
.intheair-always {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.8vw;
    color: var(--accent);
    letter-spacing: 0.1em;
    margin-top: 1vw;
    opacity: 0.85;
    display: block;
}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    z-index: 1001;
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
    will-change: transform;
}

/* ===== JOURNEY IMAGE CLIP REVEAL ===== */
.journey-img {
    clip-path: inset(15% 0 0 0);
    transition: clip-path 0.8s var(--ease);
}
.journey-img.in-view {
    clip-path: inset(0);
}

/* ===== PRELOADER FALLBACK ===== */
@keyframes preloaderFallback {
    to { opacity: 0; pointer-events: none; visibility: hidden; }
}
.preloader { animation: preloaderFallback 0s 4s forwards; }
@media (prefers-reduced-motion: reduce) {
    .preloader { display: none; }
}

/* ===== GSAP OVERRIDES ===== */
/* Default: everything visible. GSAP hides elements only after confirming it loaded. */
.hero-name-1, .hero-name-2, .hero-name-amp,
.hero-bottom-info, .hero-scroll-cta,
.chapter-section, .love-center,
.love-rotating-text, .love-corner {
    opacity: 1;
    transform: none;
}
.love-flower {
    opacity: 1;
}

.has-gsap .hero-name-1,
.has-gsap .hero-name-2 {
    opacity: 0;
    transform: translateY(80px);
}
.has-gsap .hero-name-amp {
    opacity: 0;
    transform: scale(0.8);
}
.has-gsap .hero-bottom-info,
.has-gsap .hero-scroll-cta {
    opacity: 0;
}
.has-gsap .hero-photo-reveal {
    clip-path: inset(100% 0 0 0);
}
.has-gsap .chapter-section {
    opacity: 0;
    transform: translateX(60px);
}
.has-gsap .love-center {
    transform: scale(0);
    opacity: 0;
}
.has-gsap .love-flower {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}
.has-gsap .love-rotating-text {
    opacity: 0;
}
.has-gsap .love-corner {
    opacity: 0;
    transform: translateY(40px);
}

/* ===== LENIS ===== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ===== CUSTOM CURSOR ===== */
.custom-cursor {
    width: 1.205vw;
    height: 1.205vw;
    min-width: 16px;
    min-height: 16px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--ease), height 0.3s var(--ease), border-color 0.3s ease, background 0.3s ease;
    will-change: transform;
    mix-blend-mode: difference;
}
.custom-cursor.hover {
    width: 3.012vw;
    height: 3.012vw;
    min-width: 40px;
    min-height: 40px;
    border-color: var(--white);
    background: rgba(237, 142, 113, 0.08);
}
.custom-cursor-dot {
    width: 0.241vw;
    height: 0.241vw;
    min-width: 3px;
    min-height: 3px;
    background: var(--accent);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
}

/* ===== SCROLL REVEAL (CSS fallback) ===== */
.reveal {
    opacity: 0;
    transform: translateY(2.410vw);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===== IMAGE LIGHTBOX ===== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox.active {
    opacity: 1;
    visibility: visible;
}
.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.lightbox-img {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lightbox.active .lightbox-img {
    transform: scale(1);
}
.lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: var(--white);
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1;
}
.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}
.lightbox-prev, .lightbox-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--white);
    font-size: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.3); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox.active .lightbox-prev,
.lightbox.active .lightbox-next { display: flex; }
@media (max-width: 768px) {
    .lightbox-prev, .lightbox-next { display: none !important; }
}

/* ===== ENHANCED ACTION CARD HOVER ===== */
.action-card {
    background: linear-gradient(135deg, transparent 0%, transparent 100%);
}
.action-card:hover {
    background: linear-gradient(135deg, var(--bg) 0%, rgba(237, 142, 113, 0.05) 100%);
    border-color: var(--accent);
    box-shadow: inset 0 0 30px rgba(237, 142, 113, 0.03);
}

/* ===== RESPONSIVE ===== */

/* Intermediate desktop: slightly smaller fonts */
@media (max-width: 1200px) {
    .hero-name { font-size: 18vw; }
    .hero-name-amp { font-size: 9vw; }
    .marquee-photo-mask { width: 40vw; }
}

/* Convert vw units to reasonable minimums for smaller screens */
@media (max-width: 1024px) {
    :root {
        --sidebar-w: 0px;
        --header-h: 48px;
    }
    .sidebar { display: none; }
    .site-header { height: 48px; }
    .header-left { width: 48px; min-width: 48px; }
    .header-center { display: none; animation-play-state: paused; }
    .header-right { padding: 0 12px; gap: 10px; }
    .header-date { font-size: 10px; letter-spacing: 1.5px; }
    .header-logo { height: 22px; min-height: 22px; max-width: 60px; }
    .header-cta { font-size: 10px; padding: 10px 18px; letter-spacing: 1.5px; min-height: 44px; display: inline-flex; align-items: center; }
    .header-line-v { height: 50%; }

    /* Hero - mobile: centered vertical stack */
    .hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px 5% 40px;
    }
    .hero-title {
        position: relative;
        width: 100%;
        height: auto;
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .hero-name {
        position: static;
        font-size: 14vw;
        text-align: center;
    }
    .hero-name-1 { top: auto; left: auto; }
    .hero-name-2 { bottom: auto; right: auto; }
    .hero-name-amp {
        position: static;
        font-size: 10vw;
        top: auto;
        right: auto;
        transform: none;
    }
    .hero-photo-container {
        position: relative;
        width: 60vw;
        max-width: 280px;
        height: 40vh;
        max-height: 350px;
        margin: 24px auto;
        border-radius: 8px;
        bottom: auto;
        left: auto;
    }
    .hero-bottom-info {
        position: static;
        justify-content: center;
        opacity: 1;
    }
    .hero-label { font-size: 10px; letter-spacing: 2px; }
    .hero-scroll-cta { bottom: 20px; }
    .hero-scroll-cta span { font-size: 10px; }
    .scroll-line { height: 24px; }

    /* Love Story */
    .love-story {
        height: auto;
        min-height: auto;
        flex-direction: column;
        gap: 28px;
        padding: 48px 5%;
        align-items: center;
    }
    .love-vertical-line { display: none; }
    .love-corner {
        position: static;
        text-align: center;
        max-width: 100%;
    }
    .love-corner-br { order: 3; }
    .love-corner-bl { order: 4; }
    .love-center { width: 200px; height: 200px; min-width: 160px; min-height: 160px; order: 1; }
    .love-corner-tl { order: 0; }
    .love-rotating-text { width: 260px; height: 260px; min-width: 220px; min-height: 220px; }
    .love-flower img { width: 160px; min-width: 120px; }
    .love-description { font-size: 15px; max-width: 85%; margin: 0 auto; line-height: 1.8; }
    .love-info-btn { margin: 0 auto; padding: 12px 24px; gap: 8px; }
    .love-info-btn span { font-size: 11px; letter-spacing: 1.5px; }
    .love-date { font-size: 11px; letter-spacing: 2px; }
    .love-sublabel { font-size: 14px; }

    /* Mobile: disable GSAP-dependent hidden states */
    .has-gsap .chapter-section { opacity: 1; transform: none; }
    .has-gsap .love-center { transform: none !important; opacity: 1 !important; }
    .has-gsap .love-flower { transform: translate(-50%, -50%) !important; opacity: 1 !important; }
    .has-gsap .love-rotating-text { opacity: 1 !important; }
    .has-gsap .love-corner { opacity: 1 !important; transform: none !important; }
    .started-shutter { transition: height 0.6s ease; }
    .started-shutter.in-view { height: 0 !important; }
    .journey-text-block span { transform: translateY(0) !important; }
    .marquee-mask-overlay { transition: opacity 0.8s ease; }
    .marquee-mask-overlay.in-view { opacity: 0; }
    .marquee-mask-text { transform: translateX(0) !important; opacity: 1 !important; }

    /* Photo marquee */
    .marquee-mask-wrapper { aspect-ratio: 3/4; max-height: 70vh; }
    .marquee-mask-text { font-size: 12vw; bottom: 20px; left: 20px; }
    /* Photo marquee - native scroll on mobile */
    .marquee-pin-wrapper {
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .marquee-pin-wrapper::-webkit-scrollbar { display: none; }
    .marquee-gallery-inner {
        display: flex;
        gap: 16px;
        padding: 24px 16px;
        height: 55vh;
    }
    .marquee-photo-item {
        scroll-snap-align: center;
        flex-shrink: 0;
    }
    .marquee-photo-mask {
        width: 65vw;
        border-radius: 60px 60px 0 0;
    }

    /* Started */
    .started-section { padding: 36px 5%; }
    .started-inner { grid-template-columns: 1fr 1fr; }
    .started-image { border-radius: 4px; height: 40vw; }
    .started-img-2 { margin-top: 0; }
    .started-img-5 { margin-top: 0; }
    .started-title-bg { font-size: 20vw; }

    /* Chapter */
    .chapter-section { grid-template-columns: 1fr; }
    .chapter-image { order: -1; }
    .chapter-content { padding: 36px 24px; }
    .chapter-title { font-size: 10vw; }
    .chapter-kicker { font-size: 10px; letter-spacing: 3px; }
    .chapter-body p { font-size: 15px; line-height: 1.9; }
    .chapter-image-mask { min-height: 45vh; }
    .chapter-btn { padding: 12px 24px; gap: 8px; }
    .chapter-btn span { font-size: 11px; letter-spacing: 2px; }
    .chapter-spinner { top: 16px; right: 16px; }
    .chapter-spinner img { width: 50px; min-width: 40px; }

    /* Journey */
    .journey-text-block span { font-size: 13vw; }
    .journey-img {
        width: 65vw !important;
        height: 75vw !important;
        margin: 0 auto !important;
        border-radius: 8px;
    }
    .journey-section { padding: 48px 5%; }
    .journey-inner { gap: 24px; }
    .journey-cta-wrap { padding: 32px 0 48px; }
    .journey-cta-btn { font-size: 11px; padding: 12px 24px; gap: 8px; letter-spacing: 2px; }

    /* Text Marquee */
    .text-marquee { padding: 20px 0; }
    .marquee-content span { font-size: 18px; }
    .marquee-content { gap: 16px; padding-right: 16px; }

    /* Countdown - dramatic visual statement */
    .countdown-section { padding: 56px 5%; }
    .countdown-inner { gap: 24px; }
    .countdown { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
    .countdown-number { font-size: 56px; }
    .countdown-label { font-size: 10px; margin-top: 8px; letter-spacing: 2.5px; }
    .countdown-kicker { font-size: 11px; letter-spacing: 3px; }
    .countdown-date { font-size: 44px; }

    /* Action Cards */
    .action-grid { grid-template-columns: 1fr; }
    .action-card-wide { grid-column: span 1; }
    .action-card { padding: 24px 20px; min-height: 72px; gap: 12px; overflow: hidden; }
    .card-title { font-size: 24px; }
    .card-subtitle { font-size: 10px; letter-spacing: 1.5px; }
    .card-arrow { width: 40px; height: 40px; min-width: 40px; min-height: 40px; flex-shrink: 0; }
    .card-text { min-width: 0; flex: 1; }

    /* RSVP */
    .rsvp-section { padding: 48px 5%; }
    .rsvp-container { max-width: 100%; }
    .rsvp-title { font-size: 44px; }
    .rsvp-subtitle { font-size: 14px; margin-bottom: 24px; }
    .form-row { grid-template-columns: 1fr; gap: 14px; }
    .rsvp-form input,
    .rsvp-form select,
    .rsvp-form textarea {
        padding: 16px; font-size: 16px; min-height: 52px; border-radius: 6px; -webkit-appearance: none; -moz-appearance: none;
    }
    .rsvp-form { gap: 14px; }
    .nahi-reaction { font-size: 13px; margin-top: 8px; }
    .submit-btn { padding: 16px 40px; width: 100%; min-height: 52px; font-size: 11px; letter-spacing: 2px; }
    .rsvp-status { font-size: 13px; }
    .form-label { font-size: 11px; letter-spacing: 2px; margin-bottom: 12px; }
    .attending-toggle { gap: 12px; }
    .toggle-btn { padding: 20px 16px; border-radius: 10px; gap: 6px; }
    .toggle-emoji { font-size: 28px; }
    .toggle-text { font-size: 22px; }
    .toggle-sub { font-size: 12px; }

    /* Registry */
    .registry-section { padding: 48px 5%; }
    .registry-kicker { font-size: 11px; letter-spacing: 2px; }
    .registry-link { font-size: 40px; }
    .registry-hint { font-size: 10px; letter-spacing: 1.5px; margin-top: -4px; }

    /* Details */
    .details-section { padding: 48px 5%; }
    .details-container { max-width: 100%; }
    .details-title { font-size: 32px; }
    .details-date, .details-time { font-size: 18px; }
    .details-venue { font-size: 15px; }
    .details-address { font-size: 13px; }
    .details-map-link { font-size: 11px; padding: 10px 0; display: inline-block; }
    .details-divider { width: 40px; }
    .details-actions { gap: 10px; margin-top: 20px; flex-direction: column; align-items: center; }
    .details-action-btn { font-size: 10px; padding: 12px 20px; letter-spacing: 1.5px; min-height: 44px; gap: 8px; }

    /* Honeymoon/Aashirvaad */
    .honeymoon-section { padding: 48px 5%; }
    .honeymoon-container { max-width: 100%; }
    .honeymoon-title { font-size: 28px; }
    .blessing-subtitle { font-size: 14px; }
    .honeymoon-text { font-size: 15px; line-height: 1.9; }
    .blessing-note { font-size: 14px; }
    .venmo-btn { padding: 16px 32px; gap: 4px; }
    .venmo-btn-label { font-size: 12px; letter-spacing: 1.5px; }
    .venmo-btn-user { font-size: 11px; }

    /* In The Air - dramatic on mobile */
    .intheair-section { padding: 64px 5%; }
    .intheair-line1 { font-size: 10vw; }
    .intheair-line2 { font-size: 16vw; }
    .intheair-spinner img { width: 44px; }
    .intheair-verse { font-size: 15px; }
    .intheair-inner { gap: 20px; }

    /* Footer - hashtag is the statement piece */
    .footer { padding: 48px 5%; }
    .footer-names { font-size: 32px; }
    .footer-date { font-size: 10px; letter-spacing: 2px; }
    .footer-hashtag { font-size: 26px; }
    .footer-credit { font-size: 12px; }
    .footer-border { width: 40px; }
    .footer-hashtags { margin-top: 8px; }
    .footer-inner { gap: 14px; }

    /* Menu */
    .menu-inner { gap: 16px; }
    .menu-label { font-size: 10px; letter-spacing: 1.5px; }
    .menu-link { font-size: clamp(28px, 9vw, 52px); }
    .menu-rsvp-btn { font-size: 11px; padding: 12px 28px; letter-spacing: 2px; }
    .menu-footer { margin-top: 24px; }

    /* Password Modal */
    .password-modal {
        width: min(90vw, 420px);
        padding: 48px 24px 24px;
        max-height: 90vh;
        max-height: 90dvh;
        overflow-y: auto;
    }
    .password-gate { padding: 16px; }
    .password-gate-form { gap: 12px; }
    .password-gate-title { font-size: 11px; letter-spacing: 2px; margin-bottom: 16px; }
    .password-gate-message { font-size: 14px; line-height: 1.7; margin-bottom: 20px; }
    .password-gate-input {
        padding: 16px;
        font-size: 16px;
        height: auto;
        min-height: 52px;
        border-radius: 6px;
    }
    .password-gate-error { font-size: 11px; min-height: 16px; }
    .password-gate-btn {
        padding: 14px 24px;
        font-size: 11px;
        letter-spacing: 2px;
    }
    .password-modal-top { padding: 12px 16px; }

    /* CRITICAL: Ensure hero content visible if GSAP animation stalls on mobile */
    .has-gsap .hero-photo-reveal { clip-path: none !important; }
    .has-gsap .hero-name-1,
    .has-gsap .hero-name-2 { opacity: 1 !important; transform: none !important; }
    .has-gsap .hero-name-amp { opacity: 1 !important; transform: none !important; }
    .has-gsap .hero-bottom-info,
    .has-gsap .hero-scroll-cta { opacity: 1 !important; }

    /* Fix text clipping on mobile */
    .hero { overflow: visible; min-height: auto; }
    .hero-name { line-height: 1; }
    .love-story { overflow: visible; }
    .journey-text-block { overflow: visible; }

    /* Menu CSS fallback (works even if GSAP menu timeline fails) */
    body.menu-open .fullscreen-menu { opacity: 1; visibility: visible; }
    body.menu-open .menu-link-wrapper { opacity: 1; transform: none; }
    body.menu-open .menu-rsvp-btn { opacity: 1; transform: none; }
    .fullscreen-menu { padding-top: 48px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .menu-inner { padding-bottom: 80px; }
    .menu-link-wrapper, .menu-link { cursor: pointer; }

    /* Fix gallery scroll-snap edges */
    .marquee-pin-wrapper { scroll-padding: 0 16px; }
    .marquee-photo-item:first-child { scroll-snap-align: start; }
    .marquee-photo-item:last-child { scroll-snap-align: end; }

    /* Fix started grid gap */
    .started-inner { gap: 16px; }

    /* Touch targets: minimum 44px per Apple HIG */
    .hamburger {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }
    .love-info-btn { padding: 14px 24px; min-height: 44px; }
    .love-info-btn svg { width: 18px; height: 18px; }
    .details-map-link { padding: 16px 0; min-height: 44px; display: inline-flex; align-items: center; }
    .chapter-btn, .journey-cta-btn { padding: 14px 24px; min-height: 44px; }
    .menu-rsvp-btn { padding: 14px 28px; min-height: 44px; }

    /* Hide custom cursor on mobile */
    .custom-cursor, .custom-cursor-dot { display: none !important; }

    /* Fix vw units that become too small on mobile */
    .footer-inner { gap: 12px; }
    .intheair-inner { gap: 16px; }
    .marquee-content .dot { font-size: 10px; }

    /* Fix hero scroll CTA overlap with photo */
    .hero-scroll-cta { position: static; transform: none; margin-top: 16px; }

    /* Safe area insets for notched phones */
    .site-header {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    .footer {
        padding-bottom: calc(40px + env(safe-area-inset-bottom));
    }

    /* Safe area insets for action sections */
    .action-section { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    .rsvp-section, .details-section, .honeymoon-section { padding-left: max(5%, env(safe-area-inset-left)); padding-right: max(5%, env(safe-area-inset-right)); }

    /* Gallery scroll fade */
    .marquee-gallery-inner {
        -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
    }

    /* Footer hashtag mobile */
    .footer-hashtag { font-size: 24px; }

    /* In The Air "always" mobile */
    .intheair-always { font-size: 16px; margin-top: 8px; }
}

/* Tablets and small laptops */
@media (max-width: 768px) {
    /* Hero */
    .hero-name { font-size: 16vw; }
    .hero-name-amp { font-size: 12vw; }
    .hero-photo-container {
        width: 50vw;
        max-width: 220px;
        height: 30vh;
        max-height: 250px;
    }

    /* Love Story */
    .love-center { width: 180px; height: 180px; }
    .love-rotating-text { width: 240px; height: 240px; }
    .love-flower img { width: 140px; }
    .love-description { font-size: 14px; max-width: 90%; }

    /* Started: keep 2 columns for gallery feel on tablets */
    .started-inner { grid-template-columns: 1fr 1fr; }
    .started-image { height: auto; min-height: 160px; aspect-ratio: 3/4; }

    /* Chapter */
    .chapter-image { order: -1; }
    .chapter-image-mask { min-height: 50vw; aspect-ratio: 4/3; }
    .chapter-content { padding: 32px 20px; }
    .chapter-title { font-size: 12vw; }
    .chapter-body p { font-size: 15px; line-height: 1.8; }

    /* Journey */
    .journey-text-block span { font-size: 14vw; }
    .journey-img {
        width: 70vw !important;
        height: 80vw !important;
        margin: 0 auto !important;
    }
    .journey-section { padding: 40px 5%; }

    /* Countdown */
    .countdown { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .countdown-number { font-size: 56px; }
    .countdown-date { font-size: 44px; }

    /* Love Story */
    .love-center { width: 220px; height: 220px; }
    .love-rotating-text { width: 280px; height: 280px; }

    /* Action Cards */
    .action-card { padding: 24px 20px; min-height: 80px; }
    .card-title { font-size: 28px; }

    /* RSVP */
    .rsvp-title { font-size: 44px; }

    /* Details + Honeymoon */
    .details-title { font-size: 32px; }
    .honeymoon-title { font-size: 28px; }

    /* In The Air */
    .intheair-line1 { font-size: 8vw; }
    .intheair-line2 { font-size: 16vw; }

    /* Footer */
    .footer-names { font-size: 32px; }
}

/* Small phones */
@media (max-width: 480px) {
    .hero { padding: 56px 5% 24px; }
    .hero-name { font-size: 20vw; }
    .hero-name-amp { font-size: 10vw; }
    .hero-photo-container {
        width: 60vw;
        max-width: none;
        height: auto;
        max-height: none;
        aspect-ratio: 3/4;
        margin: 16px auto;
    }
    .header-logo { max-width: 40px; }
    .hero-bottom-info { flex-direction: column; gap: 4px; text-align: center; }
    .hero-divider { display: none; }
    .hero-label { font-size: 10px; }
    .love-center { width: 160px; height: 160px; }
    .love-rotating-text { width: 220px; height: 220px; }
    .love-flower img { width: 120px; }
    .header-date { display: none; }
    .header-line-v:first-child { display: none; }
    .header-right { gap: 8px; padding: 0 10px; }
    .header-cta { font-size: 10px; padding: 8px 14px; }
    .marquee-photo-mask { width: 60vw; }
    .menu-link { font-size: 14vw; }
    .chapter-title { font-size: 14vw; }

    .hero-name { margin-bottom: 2px; }
    .countdown-number { font-size: 40px; }
    .countdown-item { gap: 4px; }
    .card-title { font-size: 20px; }

    /* Countdown - more dramatic on small phones */
    .countdown-date { font-size: 36px; }
    .countdown { gap: 16px; }
    .countdown-section { padding: 56px 5%; }

    /* Action cards - smaller title to prevent cramping */
    .action-card { padding: 20px 16px; gap: 16px; }

    /* Journey - tighter on small phones */
    .journey-text-block span { font-size: 16vw; }
    .journey-img {
        width: 70vw !important;
        height: 80vw !important;
    }

    /* Footer - prominent hashtag */
    .footer-hashtag { font-size: 24px; }
    .footer-names { font-size: 28px; }
}

/* Very small phones */
@media (max-width: 380px) {
    .toggle-emoji { font-size: 24px; }
    .toggle-text { font-size: 18px; }
    .toggle-sub { font-size: 11px; }
    .hero-name { font-size: 13vw; }
}

/* Landscape orientation guard */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-name { font-size: 8vw; }
    .hero-photo-container { max-height: 50vh; }
    .countdown-number { font-size: 32px; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .has-gsap .hero-name-1,
    .has-gsap .hero-name-2,
    .has-gsap .hero-name-amp,
    .has-gsap .hero-bottom-info,
    .has-gsap .hero-scroll-cta,
    .has-gsap .hero-photo-reveal,
    .has-gsap .chapter-section,
    .has-gsap .love-center,
    .has-gsap .love-flower,
    .has-gsap .love-rotating-text,
    .has-gsap .love-corner,
    .registry-content,
    .details-container,
    .honeymoon-container,
    .intheair-inner,
    .intheair-line1,
    .intheair-line2,
    .footer-names,
    .footer-hashtag,
    .countdown-item,
    .countdown-date,
    .action-card {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
    .chapter-spinner, .intheair-spinner { animation: none !important; }
    .marquee-track { animation: none !important; }
    .marquee-content { animation: none !important; }
}