:root {
    --green: #7A9070;
    --green-light: #A9BFA1;
    --green-dark: #45553F;
    --red: #5E1226;
    --red-light: #83263C;
    --rose: #9E5A66;
    --cream: #F7F5EF;
    --ivory: #FCFBF7;
    --ink: #1C211B;
    --muted: #6E7566;
    /* Opening frame of the splash, and the gate's exit curtain */
    --preloader-dark: #24262A;

    --font-display: 'Slight', 'Playfair Display', Georgia, serif;
    --font-body: 'Gotham', 'Montserrat', system-ui, sans-serif;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --radius: 24px;
    --radius-sm: 16px;

    /* Apple-style frosted glass */
    --glass: rgba(255, 255, 255, 0.55);
    --glass-strong: rgba(255, 255, 255, 0.68);
    --glass-border: rgba(255, 255, 255, 0.65);
    --glass-blur: blur(24px) saturate(1.7);
    --shadow-soft: 0 1px 2px rgba(30, 30, 26, 0.04), 0 16px 40px -18px rgba(30, 30, 26, 0.16);
}

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

/* overflow-x: clip (not hidden): forbids horizontal panning on mobile
   without creating a scroll container, which would break position: sticky.
   The background-color paints the mobile rubber-band area: a champagne
   cream so pulling past the top reads as the foam above the champagne.
   (Only a flat color works there - iOS paints just the root bg color.) */
html {
    scroll-behavior: smooth;
    overflow-x: clip;
    background: #F6E9CB;
    /* Allow scrolling but block pinch-zoom / double-tap-zoom gestures */
    touch-action: pan-x pan-y;
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--ivory);
    line-height: 1.7;
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--green-dark); text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 28px; }

/* ═══════════════════ NAV ═══════════════════ */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 200;
    padding: 20px 0;
    transition: all 0.5s var(--ease-out-expo);
}

.nav.nav-hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
}

.nav.scrolled { padding: 12px 0; }

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    position: relative;
    transition: all 0.5s var(--ease-out-expo);
}

/* The capsule blur lives on a pseudo-element: backdrop-filter on
   .nav-inner itself would make it the containing block for the
   position:fixed mobile menu overlay, shrinking it to capsule size. */
.nav-inner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
}

/* Floating frosted capsule once scrolling starts */
.nav.scrolled .nav-inner {
    padding: 9px 26px;
    background: var(--glass);
    border-color: var(--glass-border);
    box-shadow: var(--shadow-soft);
}

.nav.scrolled .nav-inner::before {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.nav-brand {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: #4a381c;
    font-weight: 500;
    transition: color 0.4s ease;
}

.nav.scrolled .nav-brand { color: var(--green-dark); }

.nav-links { display: flex; gap: 32px; list-style: none; }

.nav-links a {
    font-size: 0.72rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(74, 56, 28, 0.85);
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
}

.nav.scrolled .nav-links a { color: var(--ink); }

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0; right: 0;
    height: 2px;
    background: var(--green);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.4s var(--ease-out-expo);
}

.nav-links a:hover::after { transform: scaleX(1); }

/* Language toggle pill */
.lang-switch a {
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 4px 12px;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.lang-switch a:hover { opacity: 1; }
.lang-switch a::after { display: none; }

.nav-toggle {
    display: none;
    background: none;
    border: none;
    width: 32px;
    height: 24px;
    position: relative;
    z-index: 310; /* stays clickable above the fixed menu overlay */
}

.nav-toggle span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #4a381c;
    transition: all 0.35s var(--ease-out-expo);
}

.nav.scrolled .nav-toggle span { background: var(--ink); }
.nav-toggle span:nth-child(1) { top: 2px; }
.nav-toggle span:nth-child(2) { top: 11px; }
.nav-toggle span:nth-child(3) { top: 20px; }

/* Burger morphs into an X while the menu is open */
.nav-toggle.open span { background: var(--ink); }
.nav-toggle.open span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* Lock the page behind the open menu */
body.menu-open { overflow: hidden; }

@media (max-width: 860px) {
    .nav-toggle { display: block; }
    .nav-links {
        position: fixed;
        inset: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 28px;
        background: rgba(253, 251, 245, 0.75);
        backdrop-filter: blur(36px) saturate(1.6);
        -webkit-backdrop-filter: blur(36px) saturate(1.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    .nav-links.open { opacity: 1; pointer-events: all; }
    .nav-links a { color: var(--ink) !important; font-size: 0.9rem; letter-spacing: 5px; }
}

/* ═══════════════════ HERO / CHAMPAGNE STAGE ═══════════════════
   One continuous scene: the hero IS the transition. It pins for
   340vh of scroll while its champagne layer condenses into a flute
   standing on the green backdrop that the rest of the site uses. */
.hero-stage {
    position: relative;
    height: 340vh;
    background: var(--green-dark);
}

.hero-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #4a381c;
}

/* Green ambience revealed as the champagne condenses.
   Sized radials that never reach the bottom edge, so the stage
   ends in flat --green-dark and merges invisibly into the next section. */
.hero-pin::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 45% at 20% 8%, rgba(169, 191, 161, 0.28), transparent 100%),
        radial-gradient(50% 30% at 80% 58%, rgba(94, 18, 38, 0.2), transparent 100%);
    pointer-events: none;
}

.champagne-layer {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% -15%, rgba(255, 255, 255, 0.85), transparent 55%),
        linear-gradient(180deg, #fbf1d8 0%, #f5e2ae 28%, #eed092 52%, #e5bd66 78%, #dcac4e 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* The flute-liquid mask only engages once the scroll morph begins;
   at rest the layer is a plain full-bleed champagne field. */
.champagne-layer.masked {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3Cpath d='M37 26 L63 26 C62.5 56 59.5 80 51.5 89 C50.6 90 49.4 90 48.5 89 C40.5 80 37.5 56 37 26 Z' fill='%23fff'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3Cpath d='M37 26 L63 26 C62.5 56 59.5 80 51.5 89 C50.6 90 49.4 90 48.5 89 C40.5 80 37.5 56 37 26 Z' fill='%23fff'/%3E%3C/svg%3E");
}

/* Animated blobs */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: blobFloat 20s ease-in-out infinite alternate;
}

.hero-blob:nth-child(1) {
    width: 600px; height: 600px;
    background: radial-gradient(circle, #ffffff, transparent 70%);
    top: -10%; left: -10%;
    animation-duration: 18s;
}

.hero-blob:nth-child(2) {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #d9a852, transparent 70%);
    bottom: -15%; right: -5%;
    animation-duration: 22s;
    animation-delay: -6s;
}

.hero-blob:nth-child(3) {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #f3c96e, transparent 70%);
    top: 40%; left: 50%;
    animation-duration: 25s;
    animation-delay: -12s;
}

@keyframes blobFloat {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -40px) scale(1.05); }
    66% { transform: translate(-20px, 30px) scale(0.95); }
    100% { transform: translate(10px, -20px) scale(1.02); }
}

/* Grain overlay */
.champagne-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
}

/* Floating particles */
.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-particles .dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(212, 165, 80, 0.75);
    box-shadow: 0 0 6px 1px rgba(255, 246, 220, 0.9), inset 0 0 2px rgba(255,255,255,0.9);
    animation: particleRise linear infinite;
}

@keyframes particleRise {
    0% { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translateY(45vh) translateX(var(--sway, 12px)) scale(0.9); }
    90% { opacity: 1; }
    100% { transform: translateY(-10vh) translateX(calc(var(--sway, 12px) * -0.6)) scale(1); opacity: 0; }
}

.hero-content {
    text-align: center;
    padding: 0 24px;
    position: relative;
    z-index: 3;
    will-change: transform, opacity;
}

/* Staggered text reveal animation */
.hero-line {
    overflow: hidden;
    display: block;
}

.hero-line-inner {
    display: block;
    transform: translateY(110%);
    animation: heroReveal 1.2s var(--ease-out-expo) forwards;
}

.hero-line:nth-child(2) .hero-line-inner { animation-delay: 0.15s; }
.hero-line:nth-child(3) .hero-line-inner { animation-delay: 0.3s; }
.hero-line:nth-child(4) .hero-line-inner { animation-delay: 0.45s; }
.hero-line:nth-child(5) .hero-line-inner { animation-delay: 0.6s; }

@keyframes heroReveal {
    to { transform: translateY(0); }
}

.hero-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 10px;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 30px;
}

/* Personal invite greeting, e.g. "Lieve Rita & Jef," */
.hero-greeting {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.1rem, 2.6vw, 1.5rem);
    color: #6b5226;
    margin-bottom: 16px;
}

.hero-names {
    font-family: var(--font-display);
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -1px;
}

.hero-amp {
    display: inline-block;
    color: #b8860b;
    text-shadow: 0 0 24px rgba(216, 168, 82, 0.45);
    font-style: italic;
    animation: ampFloat 4s ease-in-out infinite;
    font-size: 0.7em;
    margin: 0 0.2em;
}

@keyframes ampFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}

.hero-date-wrap {
    margin-top: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.hero-date-wrap .dash {
    width: 40px;
    height: 1px;
    background: rgba(122, 90, 40, 0.5);
}

.hero-date {
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: 6px;
    text-transform: uppercase;
}

.hero-venue {
    margin-top: 14px;
    font-size: 0.88rem;
    letter-spacing: 1px;
    opacity: 0.75;
}

.hero-scroll {
    position: absolute;
    z-index: 3;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #6b5226;
    font-size: 0.65rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0.7;
}

.hero-scroll .arrow {
    width: 24px;
    height: 24px;
    border-right: 1.5px solid #6b5226;
    border-bottom: 1.5px solid #6b5226;
    transform: rotate(45deg);
    animation: scrollArrow 2s ease-in-out infinite;
}

@keyframes scrollArrow {
    0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.7; }
    50% { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* ═══════════════════ SCROLL REVEAL ═══════════════════ */
.sr {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1s var(--ease-out-expo), transform 1.2s var(--ease-out-expo);
}

.sr.visible {
    opacity: 1;
    transform: none;
}

.sr-left { transform: translateX(-60px); }
.sr-left.visible { transform: none; }

.sr-right { transform: translateX(60px); }
.sr-right.visible { transform: none; }

.sr-scale { transform: scale(0.88); }
.sr-scale.visible { transform: none; }

.sr-d1 { transition-delay: 0.1s; }
.sr-d2 { transition-delay: 0.2s; }
.sr-d3 { transition-delay: 0.3s; }
.sr-d4 { transition-delay: 0.4s; }
.sr-d5 { transition-delay: 0.5s; }

/* parallax wrapper for sections */
.parallax-section {
    will-change: transform;
}

/* ═══════════════════ SECTIONS ═══════════════════ */
section {
    padding: 120px 0;
    position: relative;
}

section.alt-bg { background: var(--cream); }

.sec-header {
    text-align: center;
    margin-bottom: 70px;
}

.sec-tag {
    display: inline-block;
    font-size: 0.68rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--green);
    font-weight: 600;
    margin-bottom: 14px;
}

.sec-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    color: var(--green-dark);
    font-weight: 400;
    margin-bottom: 16px;
    line-height: 1.15;
}

.sec-desc {
    max-width: 560px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 0.98rem;
}

/* ═══════════════════ COUNTDOWN ═══════════════════ */
.countdown-section {
    background: var(--green-dark);
    color: #fff;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.countdown-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 35% at 20% 45%, rgba(169, 191, 161, 0.28), transparent 100%),
        radial-gradient(50% 26% at 80% 70%, rgba(94, 18, 38, 0.2), transparent 100%);
    pointer-events: none;
}

.countdown-section .sec-title { color: #fff; }
.countdown-section .sec-tag { color: rgba(255,255,255,0.7); }

.cd-grid {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0 auto;
}

.cd-cell {
    flex: 1 1 140px;
    max-width: 180px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius);
    padding: 34px 16px;
    text-align: center;
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: transform 0.5s var(--ease-out-expo), background 0.4s ease;
}

.cd-cell:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.13);
}

.cd-num {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 4.2rem);
    font-weight: 400;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.cd-label {
    margin-top: 10px;
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.7;
}

/* ═══════════════════ STORY ═══════════════════ */
.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; gap: 48px; } }

.story-visual {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: var(--radius);
    overflow: hidden;
}

.story-visual-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--green) 0%, var(--green-dark) 100%);
}

.story-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out-expo);
}

.story-visual:hover .story-photo { transform: scale(1.04); }

.story-visual-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ring {
    position: absolute;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    animation: ringPulse 6s ease-in-out infinite;
}

.ring:nth-child(1) { width: 120px; height: 120px; animation-delay: 0s; }
.ring:nth-child(2) { width: 200px; height: 200px; animation-delay: -1.5s; }
.ring:nth-child(3) { width: 280px; height: 280px; animation-delay: -3s; }
.ring:nth-child(4) { width: 360px; height: 360px; animation-delay: -4.5s; }

@keyframes ringPulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.08); opacity: 0.6; }
}

.story-visual .monogram {
    position: relative;
    font-family: var(--font-display);
    font-size: 4rem;
    color: rgba(255,255,255,0.9);
    letter-spacing: 4px;
}

.story-text h3 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--green-dark);
    margin-bottom: 20px;
}

.story-text p {
    color: var(--muted);
    margin-bottom: 18px;
    font-size: 1.02rem;
    line-height: 1.85;
}

.story-sig {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--rose);
    margin-top: 28px;
    font-style: italic;
}

/* ═══════════════════ DETAILS ═══════════════════ */
.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 860px) { .details-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

.detail-card {
    background: var(--glass-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 44px 28px 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.5s var(--ease-out-expo), box-shadow 0.4s ease;
}

.detail-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1px 2px rgba(30, 30, 26, 0.04), 0 24px 56px -20px rgba(30, 30, 26, 0.22);
}

/* Illustration variant of the icon slot (e.g. the castle sketch).
   multiply blends the white paper away against the glass card. */
.detail-img {
    height: 96px;
    width: auto;
    max-width: 100%;
    margin: -10px auto 10px;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.4s var(--ease-out-expo);
}

.detail-card:hover .detail-img { transform: scale(1.05); }

.detail-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(122, 144, 112, 0.1);
    border-radius: 18px;
    font-size: 1.6rem;
    color: var(--green);
    transition: transform 0.4s var(--ease-out-expo), background 0.3s ease, color 0.3s ease;
}

.detail-card:hover .detail-icon {
    transform: scale(1.06);
    background: var(--green);
    color: #fff;
}

.detail-card .meta {
    font-size: 0.68rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--rose);
    margin-bottom: 10px;
    font-weight: 600;
}

.detail-card h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--green-dark);
    margin-bottom: 10px;
}

.detail-card p { color: var(--muted); font-size: 0.92rem; }

/* ═══════════════════ TIMELINE ═══════════════════ */
.timeline {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    padding-left: 60px;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 24px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--green) 5%, var(--green) 95%, transparent);
}

.tl-item {
    position: relative;
    margin-bottom: 48px;
    padding-left: 36px;
}

.tl-item:last-child { margin-bottom: 0; }

.tl-dot {
    position: absolute;
    left: -36px;
    top: 6px;
    width: 14px;
    height: 14px;
    background: var(--green);
    border-radius: 50%;
    border: 3px solid var(--ivory);
    box-shadow: 0 0 0 3px rgba(122, 144, 112, 0.3);
    transition: transform 0.4s var(--ease-spring);
}

.tl-item:hover .tl-dot { transform: scale(1.4); }

.tl-time {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--green-dark);
    font-weight: 500;
    margin-bottom: 4px;
}

.tl-card {
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    padding: 20px 24px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.3s ease;
}

.tl-card:hover {
    transform: translateX(4px);
    box-shadow: 0 1px 2px rgba(30, 30, 26, 0.04), 0 20px 44px -18px rgba(30, 30, 26, 0.2);
}

.tl-card h4 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--green-dark);
    margin-bottom: 4px;
}

.tl-card p { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* ═══════════════════ LOCATION ═══════════════════ */
.loc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

@media (max-width: 900px) { .loc-grid { grid-template-columns: 1fr; } }

.loc-info h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--green-dark);
    margin-bottom: 6px;
}

.loc-info .addr {
    color: var(--muted);
    font-style: italic;
    margin-bottom: 28px;
}

.loc-info ul { list-style: none; }

.loc-info li {
    padding: 14px 0 14px 28px;
    position: relative;
    color: var(--ink);
    border-bottom: 1px solid rgba(122, 144, 112, 0.12);
    font-size: 0.95rem;
}

.loc-info li::before {
    content: '';
    position: absolute;
    left: 0; top: 20px;
    width: 8px; height: 8px;
    background: var(--green);
    border-radius: 50%;
}

.loc-actions { margin-top: 28px; }

.map-wrap {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    aspect-ratio: 1;
    border: 1px solid var(--glass-border);
}

.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* ═══════════════════ FAQ ═══════════════════ */
.faq-list { max-width: 720px; margin: 0 auto; }

.faq-item {
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: 0 1px 2px rgba(30, 30, 26, 0.03), 0 8px 24px -14px rgba(30, 30, 26, 0.1);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.faq-item:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }

.faq-q {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--green-dark);
    font-weight: 500;
    text-align: left;
}

.faq-q .icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(122, 144, 112, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--green);
    transition: transform 0.4s var(--ease-spring), background 0.3s ease;
    flex-shrink: 0;
}

.faq-item.open .faq-q .icon { transform: rotate(45deg); background: var(--green); color: #fff; }

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--ease-out-expo), padding 0.4s ease;
    padding: 0 24px;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.7;
}

.faq-item.open .faq-a { max-height: 300px; padding: 0 24px 20px; }

/* ═══════════════════ RSVP ═══════════════════ */
.rsvp-wrap {
    max-width: 680px;
    margin: 0 auto;
    background: var(--glass-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 52px;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

@media (max-width: 600px) { .rsvp-wrap { padding: 32px 22px; } }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; }

.field label {
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--green-dark);
    margin-bottom: 8px;
    font-weight: 600;
    /* Grow to match the tallest label in the row, so inputs
       stay aligned even when a label wraps to two lines */
    flex: 1;
}

.field input,
.field select,
.field textarea {
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 13px 16px;
    border: 1px solid rgba(30, 30, 26, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink);
    transition: all 0.3s ease;
    width: 100%;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--green);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(122, 144, 112, 0.12);
}

.field textarea { resize: vertical; min-height: 90px; }
.field .v-msg { color: var(--red); font-size: 0.78rem; margin-top: 6px; }

.rsvp-actions { text-align: center; margin-top: 20px; }

.rsvp-success { text-align: center; padding: 36px 20px; }

.rsvp-success .check-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: #fff;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    animation: popBounce 0.6s var(--ease-spring);
}

@keyframes popBounce {
    0% { transform: scale(0); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.rsvp-success h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--green-dark);
    margin-bottom: 10px;
}

.rsvp-success p { color: var(--muted); }

/* ═══════════════════ BUTTONS ═══════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 34px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--green);
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    cursor: pointer;
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s var(--ease-out-expo);
    z-index: 0;
}

.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:hover { color: var(--green-dark); }
.btn span { position: relative; z-index: 1; }

.btn-ghost {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px) saturate(1.5);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    border-color: rgba(122, 144, 112, 0.35);
    color: var(--green-dark);
}

.btn-ghost:hover { color: var(--green-dark); }

/* ═══════════════════ FOOTER ═══════════════════ */
footer {
    background: var(--green-dark);
    color: rgba(255,255,255,0.85);
    text-align: center;
    padding: 70px 24px 40px;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at center, rgba(122, 144, 112, 0.1), transparent 50%);
    animation: footerGlow 15s ease-in-out infinite;
}

@keyframes footerGlow {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(5%, -5%); }
}

footer .brand {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;
    position: relative;
}

footer .date {
    font-size: 0.75rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 28px;
    opacity: 0.7;
}

footer .love { color: var(--red); }

footer .copy {
    margin-top: 24px;
    font-size: 0.72rem;
    opacity: 0.5;
}

/* ═══════════════════ GLASS DRESSING (shimmer · outline · glow · sparkles) ═══════════════════ */
/* Light sweep across the champagne */
.glass-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.32) 50%, transparent 58%);
    background-size: 300% 100%;
    mix-blend-mode: screen;
    animation: shimmerSweep 3.6s ease-in-out infinite;
}

@keyframes shimmerSweep {
    0% { background-position: 130% 0; }
    65%, 100% { background-position: -60% 0; }
}

/* Frosted glass body of the flute - Apple-style material.
   Masked to the full silhouette (bowl + stem + foot); the backdrop-filter
   blurs the champagne and green scene behind it like real frosted glass. */
.glass-frost {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* No backdrop-filter here: live blur + mask + per-frame resizing
       makes the compositor repaint the whole page (visible flashing).
       A layered translucent gradient fakes the frosted material instead. */
    background:
        radial-gradient(120% 55% at 30% 20%, rgba(255, 255, 255, 0.32), transparent 60%),
        linear-gradient(105deg,
            rgba(255, 255, 255, 0.38) 0%,
            rgba(255, 255, 255, 0.12) 38%,
            rgba(255, 255, 255, 0.30) 58%,
            rgba(255, 255, 255, 0.10) 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3Cpath d='M36 6 L64 6 C64 52 61 82 52 92 L52 154 C52 157 54 158.5 57 159.2 L68 162 C70.5 162.6 72 164 72 166 C72 169 62 171 50 171 C38 171 28 169 28 166 C28 164 29.5 162.6 32 162 L43 159.2 C46 158.5 48 157 48 154 L48 92 C39 82 36 52 36 6 Z' fill='%23fff'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3Cpath d='M36 6 L64 6 C64 52 61 82 52 92 L52 154 C52 157 54 158.5 57 159.2 L68 162 C70.5 162.6 72 164 72 166 C72 169 62 171 50 171 C38 171 28 169 28 166 C28 164 29.5 162.6 32 162 L43 159.2 C46 158.5 48 157 48 154 L48 92 C39 82 36 52 36 6 Z' fill='%23fff'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
}

/* Hairline rim + specular highlight streaks, like light on polished glass */
.glass-outline {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3Cpath d='M36 6 L64 6 C64 52 61 82 52 92 L52 154 C52 157 54 158.5 57 159.2 L68 162 C70.5 162.6 72 164 72 166 C72 169 62 171 50 171 C38 171 28 169 28 166 C28 164 29.5 162.6 32 162 L43 159.2 C46 158.5 48 157 48 154 L48 92 C39 82 36 52 36 6 Z' fill='none' stroke='rgba(255,255,255,0.85)' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M41 18 C41 46 42.5 68 46.5 79' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M59 18 C59 40 58.5 55 57 66' fill='none' stroke='rgba(255,255,255,0.28)' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 26px rgba(242, 216, 148, 0.4));
}

/* Pulsing golden aura behind the glass */
.glass-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80vmin;
    height: 80vmin;
    margin: -40vmin 0 0 -40vmin;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 216, 148, 0.38), transparent 62%);
    opacity: 0;
    pointer-events: none;
    animation: glowPulse 3.4s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Twinkling sparkles around the formed glass */
.glass-sparkles {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.glass-sparkles .spark {
    position: absolute;
    width: var(--s, 10px);
    height: var(--s, 10px);
    background: #fff3d0;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    filter: drop-shadow(0 0 6px rgba(255, 232, 170, 0.9));
    animation: sparkTwinkle var(--t, 2.4s) ease-in-out var(--d, 0s) infinite;
    opacity: 0;
}

@keyframes sparkTwinkle {
    0%, 100% { transform: scale(0.15) rotate(0deg); opacity: 0; }
    50% { transform: scale(1) rotate(90deg); opacity: 1; }
}

/* ═══════════════════ CHAMPAGNE SPLASH PRELOADER ═══════════════════ */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Opens on a quiet dark slate; the champagne washes in with the pop. */
    background: var(--preloader-dark, #24262a);
    transition: opacity 0.9s ease, visibility 0.9s;
}

#preloader::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% -15%, rgba(255, 255, 255, 0.85), transparent 55%),
        linear-gradient(180deg, #fbf1d8 0%, #f5e2ae 28%, #eed092 52%, #e5bd66 78%, #dcac4e 100%);
    opacity: 0;
    transition: opacity 0.55s ease;
}

#preloader.pop::before { opacity: 1; }

/* Hold the whole splash choreography until the champagne washes in */
#preloader .pre-monogram,
#preloader .pre-tag,
#preloader .pre-burst::before,
#preloader .pre-burst::after,
#preloader .pre-drop,
#preloader .pre-bubbles .dot { animation-play-state: paused; }

#preloader.pop .pre-monogram,
#preloader.pop .pre-tag,
#preloader.pop .pre-burst::before,
#preloader.pop .pre-burst::after,
#preloader.pop .pre-drop,
#preloader.pop .pre-bubbles .dot { animation-play-state: running; }

/* Hold the hero text reveal until the splash has finished */
body:has(#preloader:not(.done)) .hero-line-inner { animation-play-state: paused; }

#preloader.done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.pre-center {
    position: relative;
    text-align: center;
    z-index: 2;
    transition: transform 0.9s var(--ease-out-expo);
}

#preloader.done .pre-center { transform: scale(1.12); }

.pre-monogram {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 8vw, 5rem);
    letter-spacing: 8px;
    color: #4a381c;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.7);
    opacity: 0;
    animation: preFadeUp 1s var(--ease-out-expo) 0.45s forwards;
}

.pre-monogram span {
    font-style: italic;
    color: #b8860b;
    font-size: 0.7em;
    margin: 0 0.15em;
}

.pre-tag {
    margin-top: 14px;
    font-size: 0.68rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(246, 223, 166, 0.75);
    opacity: 0;
    animation: preFadeUp 1s var(--ease-out-expo) 0.75s forwards;
}

@keyframes preFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Radial splash burst behind the monogram */
.pre-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
}

/* Expanding foam rings */
.pre-burst::before,
.pre-burst::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(184, 134, 11, 0.55);
    transform: translate(-50%, -50%);
    animation: preRing 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) 0.2s forwards;
    opacity: 0;
}

.pre-burst::after { animation-delay: 0.45s; border-width: 1px; }

@keyframes preRing {
    0% { width: 12px; height: 12px; opacity: 1; }
    100% { width: 340px; height: 340px; opacity: 0; }
}

/* Champagne droplets flying outward */
.pre-drop {
    position: absolute;
    top: 0; left: 0;
    width: var(--s, 8px);
    height: calc(var(--s, 8px) * 1.5);
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: linear-gradient(180deg, #f2c96a, #b8860b);
    box-shadow: 0 0 10px rgba(184, 134, 11, 0.5);
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(0) scale(0.3);
    animation: preSplash var(--t, 1.1s) cubic-bezier(0.15, 0.65, 0.3, 1) var(--d, 0.2s) forwards;
}

@keyframes preSplash {
    0% { transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(0.3); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--dist, 140px) * -1)) scale(1); opacity: 0; }
}

/* Rising bubbles across the whole overlay */
.pre-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pre-bubbles .dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(212, 165, 80, 0.75);
    box-shadow: 0 0 6px 1px rgba(255, 246, 220, 0.9);
    animation: particleRise linear infinite;
}

/* ═══════════════════ ADMIN ═══════════════════ */
.admin-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 24px;
    min-height: 100vh;
}

.admin-login {
    max-width: 380px;
    margin: 15vh auto 0;
    text-align: center;
    background: var(--glass-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 40px 32px;
    box-shadow: var(--shadow-soft);
}

.admin-login h1 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--green-dark);
    margin-bottom: 8px;
}

.admin-login p { color: var(--muted); font-size: 0.9rem; margin-bottom: 20px; }

.admin-login input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(30, 30, 26, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.6);
    font-family: var(--font-body);
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.admin-login input:focus { outline: none; border-color: var(--green); }

.admin-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.admin-head h1 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--green-dark);
    font-size: 2rem;
}

.admin-stats { display: flex; gap: 20px; color: var(--muted); font-size: 0.85rem; }
.admin-stats strong { color: var(--green-dark); }

.admin-card {
    background: var(--glass-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 24px;
}

.admin-card h2 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--green-dark);
    font-size: 1.3rem;
    margin-bottom: 16px;
}

.admin-empty { color: var(--muted); font-size: 0.9rem; margin-bottom: 12px; }

.admin-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.admin-form input,
.admin-form select {
    padding: 11px 14px;
    border: 1px solid rgba(30, 30, 26, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.admin-form input:first-child { flex: 1 1 220px; }
.admin-form input[type="number"] { width: 76px; }

.admin-table-wrap { overflow-x: auto; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.admin-table th {
    text-align: left;
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 12px;
    border-bottom: 1px solid rgba(30, 30, 26, 0.1);
}

.admin-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(30, 30, 26, 0.06);
    vertical-align: middle;
}

.admin-code {
    font-size: 0.75rem;
    color: var(--muted);
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

.tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    white-space: nowrap;
}

.tag-pending { background: rgba(30, 30, 26, 0.07); color: var(--muted); }
.tag-yes { background: rgba(122, 144, 112, 0.2); color: var(--green-dark); }
.tag-no { background: rgba(94, 18, 38, 0.12); color: var(--red); }

.admin-qr {
    width: 64px;
    height: 64px;
    display: block;
    border-radius: 8px;
}

.admin-dl { font-size: 0.75rem; }

.admin-del {
    background: none;
    border: 1px solid rgba(94, 18, 38, 0.3);
    color: var(--red);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.75rem;
    font-family: var(--font-body);
    transition: all 0.25s ease;
}

.admin-del:hover, .admin-del.confirm { background: var(--red); color: #fff; }

.admin-detail-row td {
    background: rgba(122, 144, 112, 0.06);
    font-size: 0.82rem;
    color: var(--muted);
}

.admin-detail-row span { margin-right: 24px; }

/* ═══════════════════ MOBILE ═══════════════════ */
@media (max-width: 640px) {
    .container { padding: 0 20px; }

    section,
    .countdown-section { padding: 72px 0; }

    .sec-header { margin-bottom: 44px; }

    .hero-eyebrow { letter-spacing: 6px; }
    .hero-date { letter-spacing: 4px; font-size: 1rem; }
    .hero-date-wrap { gap: 14px; }
    .hero-date-wrap .dash { width: 26px; }

    /* Lighter ambient effects for phone GPUs */
    .hero-blob { filter: blur(50px); }
    .hero-blob:nth-child(1) { width: 380px; height: 380px; }
    .hero-blob:nth-child(2) { width: 320px; height: 320px; }
    .hero-blob:nth-child(3) { width: 260px; height: 260px; }
    .glass-shimmer { display: none; }

    .cd-grid { gap: 12px; }
    .cd-cell { padding: 24px 12px; flex-basis: 130px; }

    .story-grid { gap: 32px; }

    .detail-card { padding: 34px 22px 28px; }
    .detail-img { height: 80px; }

    .timeline { padding-left: 46px; }
    .timeline::before { left: 17px; }
    .tl-item { padding-left: 28px; margin-bottom: 36px; }
    .tl-dot { left: -29px; }
    .tl-time { font-size: 1.2rem; }

    .loc-grid { gap: 36px; }
    .map-wrap { aspect-ratio: 4 / 3; }

    .faq-q { padding: 16px 18px; font-size: 1rem; gap: 12px; }
    .faq-a { padding: 0 18px; }
    .faq-item.open .faq-a { padding: 0 18px 16px; }

    footer { padding: 56px 20px 32px; }

    .admin-page { padding: 32px 16px; }
    .admin-card { padding: 20px 16px; }
    .admin-form { flex-direction: column; align-items: stretch; }
    .admin-form input,
    .admin-form select,
    .admin-form .btn { width: 100%; }
    .admin-form input[type="number"] { width: 100%; }
    .admin-head h1 { font-size: 1.5rem; }
}

/* Short landscape phones: keep the hero content from clipping */
@media (max-height: 540px) {
    .hero-eyebrow { margin-bottom: 12px; }
    .hero-date-wrap { margin-top: 18px; }
    .hero-scroll { display: none; }
}

/* ═══════════════════ REDUCED MOTION ═══════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .sr { opacity: 1; transform: none; }
}

/* ═══════════════════ INVITATION GATE ("/") ═══════════════════ */
.gate {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    overflow: hidden;
    background: #F6E9CB;
}

/* Curtain that closes over the gate once a code is accepted; its colour
   matches the preloader's opening frame so the handover reads as one beat. */
.gate-exit {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: var(--preloader-dark, #24262a);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0.45s;
}

.gate-exit.is-on {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gate-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.gate-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    animation: blobFloat 22s ease-in-out infinite alternate;
}
.gate-blob:nth-child(1) {
    width: 560px; height: 560px;
    background: radial-gradient(circle, #ffffff, transparent 70%);
    top: -12%; left: -12%;
}
.gate-blob:nth-child(2) {
    width: 480px; height: 480px;
    background: radial-gradient(circle, #d9a852, transparent 70%);
    bottom: -16%; right: -10%;
    animation-delay: -7s;
}
.gate-blob:nth-child(3) {
    width: 360px; height: 360px;
    background: radial-gradient(circle, #A9BFA1, transparent 70%);
    top: 45%; left: 55%;
    animation-delay: -13s;
}

.gate-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    padding: 40px 34px 34px;
    text-align: center;
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    animation: gateIn 0.9s var(--ease-out-expo) both;
}

@keyframes gateIn {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.gate-monogram {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 6px;
    color: #4a381c;
    font-weight: 500;
}
.gate-monogram span { color: var(--green); }

.gate-eyebrow {
    margin-top: 10px;
    font-size: 0.72rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--muted);
}

.gate-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.1rem, 8vw, 2.7rem);
    color: var(--ink);
    margin: 6px 0 12px;
}

.gate-lead {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 auto 24px;
    max-width: 34ch;
}

/* Scanner viewport */
.gate-scanner {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 320px;
    margin: 0 auto;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: linear-gradient(160deg, #eef2ea, #e3ded2);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gate-scanner video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gate-scanner.is-live video { opacity: 1; }

/* Corner viewfinder frame */
.gate-frame {
    position: absolute;
    inset: 16px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.gate-scanner.is-live .gate-frame { opacity: 1; }
.gate-frame span {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.gate-frame span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.gate-frame span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.gate-frame span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.gate-frame span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }

/* Scanning laser line */
.gate-scanner.is-live::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(122,144,112,0.9), transparent);
    box-shadow: 0 0 12px 2px rgba(122,144,112,0.6);
    animation: gateScan 2.4s ease-in-out infinite;
}
@keyframes gateScan {
    0%, 100% { top: 18%; }
    50% { top: 82%; }
}

.gate-cam-start {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px;
    background: none;
    border: none;
    color: var(--green-dark);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 500;
}
.gate-cam-icon { font-size: 2.2rem; }

.gate-cam-msg {
    position: relative;
    z-index: 2;
    padding: 20px;
    font-size: 0.85rem;
    color: var(--red-light);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.gate-cam-retry {
    background: none;
    border: 1px solid var(--green);
    color: var(--green-dark);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 0.82rem;
}

/* Divider */
.gate-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px auto 18px;
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.gate-divider::before,
.gate-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(28, 33, 27, 0.14);
}

/* Manual code entry */
.gate-form { text-align: left; }
.gate-label {
    display: block;
    font-size: 0.74rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}
.gate-input-row {
    display: flex;
    gap: 10px;
}
.gate-input {
    flex: 1;
    min-width: 0;
    padding: 13px 16px;
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.gate-input::placeholder { color: #b3b3a6; letter-spacing: 2px; }
.gate-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(122, 144, 112, 0.18);
}
.gate-input.is-invalid {
    border-color: var(--red-light);
    box-shadow: 0 0 0 3px rgba(131, 38, 60, 0.15);
}

.gate-go {
    flex: 0 0 auto;
    padding: 0 20px;
    background: var(--green-dark);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.3s ease, transform 0.2s ease;
}
.gate-go:hover:not(:disabled) { background: var(--green); }
.gate-go:active { transform: scale(0.97); }
.gate-go:disabled { opacity: 0.6; cursor: default; }

.gate-error {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--red-light);
}

@media (max-width: 420px) {
    .gate-card { padding: 32px 22px 26px; }
}