/* ─────────────────────────────────────────
   CUSTOM FONTS
───────────────────────────────────────── */
@font-face {
    font-family: 'PF Scandal Pro';
    src: url('fonts/PF_Scandal_Pro/PF Scandal Pro Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'PF Scandal Pro';
    src: url('fonts/PF_Scandal_Pro/PF Scandal Pro Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'STIX Two Text';
    src: url('fonts/STIX_Two_Text/STIXTwoText-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}
@font-face {
    font-family: 'STIX Two Text';
    src: url('fonts/STIX_Two_Text/STIXTwoText-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

/* ─────────────────────────────────────────
   RESET & ROOT VARIABLES
───────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --sage:        #9FB078;
    --sage-dark:   #7d8f5c;
    --sage-deeper: #6a7a4d;
    --text:        #1a1a1a;
    --text-mid:    #4a4a4a;
    --white:       #ffffff;
    --cream:       #faf9f0;
    --light:       #f4f4f0;
    /* Cover page palette */
    --dark-brown:  #593A12;
    --burgundy:    #831F1C;
    --dusty-rose:  #AF6660;
    --burnt-orange:#AB4A0D;
    --gold:        #E3A742;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--cream);
    font-family: 'STIX Two Text', serif;
}

/* ─────────────────────────────────────────
   PAGE SYSTEM
───────────────────────────────────────── */
.page {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.75s ease;
}
.page.active {
    opacity: 1;
    pointer-events: auto;
}

/* ─────────────────────────────────────────
   COVER PAGE  (unchanged)
───────────────────────────────────────── */
#cover-page { background: var(--white); }

.cover-scene {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.world-map {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    animation: mapFadeIn 1s ease 0.1s forwards;
}
@keyframes mapFadeIn { to { opacity: 0.7; } }

.passport-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 2.5vw, 30px);
    cursor: pointer;
    opacity: 0;
    animation: passportRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
@keyframes passportRise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.passport-img {
    width: 65%;
    max-width: 500px;
    filter: drop-shadow(0 10px 28px rgba(89,58,18,0.28));
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
    display: block;
}
.passport-wrapper:hover .passport-img {
    transform: translateY(-7px) scale(1.025);
    filter: drop-shadow(0 20px 40px rgba(89,58,18,0.38));
}

.click-to-open {
    font-family: 'STIX Two Text', serif;
    font-size: clamp(11px, 1.1vw, 14px);
    font-weight: 400;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--dark-brown);
    transition: color 0.3s ease, letter-spacing 0.3s ease;
}
.passport-wrapper:hover .click-to-open { color: var(--burgundy); letter-spacing: 0.46em; }
.click-to-open::after {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    background: var(--gold);
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: middle;
    animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%       { opacity: 0.3; transform: scale(0.5); }
}

.passport-wrapper.opening {
    animation: passportOpen 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes passportOpen {
    to { opacity: 0; transform: scale(1.18) translateY(-12px); }
}

/* Plane animation canvas */
#plane-trail-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 2;
}
#animated-plane {
    position: absolute;
    width: clamp(58px, 8vw, 72px);
    pointer-events: none; z-index: 3;
    opacity: 0; transition: opacity 0.6s ease;
    transform-origin: center center;
}
#animated-plane.visible { opacity: 1; }

/* ─────────────────────────────────────────
   MAIN PAGE — SCROLL WRAPPER
───────────────────────────────────────── */
#main-page {
    background: var(--cream);
    overflow: hidden;
    display: block;
    align-items: unset;
    justify-content: unset;
}

.wedding-site {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 20px 15px 0;
}

/* Narrow ticket-width centering */
.wedding-site > section {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 4px 4px rgba(100,100,100,0.12);
    border-radius: 30px;
    overflow: hidden;
    background: var(--white);
}

/* ─────────────────────────────────────────
   SHARED UTILITY — FILMSTRIP BAR
───────────────────────────────────────── */
.bp-filmstrip,
.itin-filmstrip,
.rsvp-filmstrip {
    height: 3px;
    background-color: var(--burgundy);
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0, transparent 5px,
        rgba(255,255,255,0.92) 5px, rgba(255,255,255,0.92) 15px,
        transparent 15px, transparent 21px
    );
}
.bp-filmstrip--bottom { margin-top: 0; }

/* ─────────────────────────────────────────
   SECTION 1 — BOARDING PASS TICKET
───────────────────────────────────────── */
.bp-section {
    background: #fff;
    overflow: hidden;
    border-radius:30px 30px 0 0;
}

.bp-body {
    padding: 28px 32px 0;
    text-align: center;
}

.bp-tagline {
    font-family: 'Stix Two Text', serif;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--text-mid);
    margin-bottom: 4px;
}

.bp-script {
    font-family: 'PF Scandal Pro', sans-serif;
    font-size: clamp(48px, 14vw, 62px);
    color: var(--text);
    line-height: 1;
    margin-bottom: 6px;
}

.bp-names {
    font-family: 'PF Scandal Pro', serif;
    font-size: clamp(16px, 5vw, 22px);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--text);
    margin-bottom: 16px;
}

.bp-compass-wrap {
    position: relative;
    width: 100%;
    max-width: 240px;
    margin: 0 auto 16px;
    aspect-ratio: 1;
}
.bp-compass-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.88;
}

.bp-passengers {
    text-align: left;
    padding: 0 0 10px;
}

.bp-field-label {
    font-family: 'STIX Two Text', serif;
    font-size: 8.5px;
    letter-spacing: 0.28em;
    color: var(--text-mid);
    text-transform: uppercase;
    margin-bottom: 3px;
}

.bp-field-value {
    font-family: 'STIX Two Text', serif;
    font-size: 13px;
    color: var(--text);
    letter-spacing: 0.05em;
}
.bp-field-bold {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.bp-field-lg {
    font-size: clamp(16px, 5vw, 20px);
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Dotted divider */
.bp-dots-divider {
    border-top: 1.5px dashed rgba(100,100,100,0.35);
    margin: 12px 0;
}

.bp-info-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1.4fr;
    gap: 8px;
    padding: 0 0 14px;
    text-align: left;
}
.bp-info-row--2 {
    grid-template-columns: 1fr 1fr;
}

.bp-barcode-wrap {
    background: var(--white);
    padding: 18px 32px 14px;
    border-radius: 25px;
    overflow: hidden;
}
.bp-barcode {
    height: 58px;
    background: repeating-linear-gradient(
        90deg,
        #1a1a1a 0,    #1a1a1a 2px,
        transparent   2px,  transparent   5px,
        #1a1a1a 5px,  #1a1a1a 6px,
        transparent   6px,  transparent   9px,
        #1a1a1a 9px,  #1a1a1a 11px,
        transparent   11px, transparent   14px,
        #1a1a1a 14px, #1a1a1a 16px,
        transparent   16px, transparent   18px,
        #1a1a1a 18px, #1a1a1a 19px,
        transparent   19px, transparent   22px,
        #1a1a1a 22px, #1a1a1a 25px,
        transparent   25px, transparent   27px,
        #1a1a1a 27px, #1a1a1a 28px,
        transparent   28px, transparent   31px,
        #1a1a1a 31px, #1a1a1a 33px,
        transparent   33px, transparent   36px,
        #1a1a1a 36px, #1a1a1a 37px,
        transparent   37px, transparent   40px,
        #1a1a1a 40px, #1a1a1a 43px,
        transparent   43px, transparent   45px,
        #1a1a1a 45px, #1a1a1a 46px,
        transparent   46px, transparent   48px
    );
    background-size: 48px 100%;
}

/* ─────────────────────────────────────────
   SECTION 2 — OUR BIG DAY
───────────────────────────────────────── */
.obd-section {
    background:#fff;
    overflow: visible;
}

.obd-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 12 / 3;
    background: var(--burgundy);
}
.obd-photo {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: grayscale(30%) contrast(1.04);
    display: block;
}

/* Travel stamp (white outlined rectangle on photo) */
.obd-stamp {
    position: absolute;
}
.obd-stamp--travel {
    top: 10%;
    left: 14%;
    transform: rotate(-4deg);
    border: 1.8px solid rgba(255,255,255,0.85);
    padding: 6px 8px 8px;
    width: 118px;
}
.obd-travel-waves {
    width: 100%;
    height: 16px;
    display: block;
    margin-bottom: 4px;
}
.obd-travel-num {
    font-family: 'STIX Two Text', serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.92);
    margin-bottom: 6px;
    line-height: 1.2;
}
.obd-travel-footer {
    display: flex;
    align-items: center;
    gap: 6px;
}
.obd-travel-icon {
    width: 18px;
    height: 14px;
    flex-shrink: 0;
}
.obd-travel-word {
    font-family: 'STIX Two Text', serif;
    font-size: 9px;
    letter-spacing: 0.24em;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
}

/* Arrived stamp (sage green, overlaps below photo) */
.obd-stamp--arrived {
    bottom: -26px;
    right: 10px;
    width: 88px;
    height: 88px;
    background: var(--burnt-orange);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px;
    z-index: 3;
    border: 2.5px dotted rgba(255,255,255,0.55);
    outline: 4px solid var(--burnt-orange);
    outline-offset: 3px;
}
.obd-arrived-code {
    font-family: 'STIX Two Text', serif;
    font-size: 7px;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.8);
    line-height: 1;
}
.obd-arrived-rule {
    width: 60%;
    height: 1px;
    background: rgba(255,255,255,0.5);
}
.obd-arrived-text {
    font-family: 'STIX Two Text', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: white;
    line-height: 1;
}
.obd-arrived-plane {
    width: 22px;
    height: 12px;
}

.obd-content {
    padding: 32px 32px 36px;
    text-align: center;
}
.obd-script {
    font-family: 'PF Scandal Pro', sans-serif;
    font-size: clamp(40px, 12vw, 65px);
    color: var(--burgundy);
    margin-bottom: 20px;
    font-weight: 400;
}
.obd-body {
    font-family: 'STIX Two Text', serif;
    font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1.8;
    color: var(--text-mid);
    margin-bottom: 32px;
}

/* Calendar */
.obd-calendar { text-align: center; }
.obd-cal-month {
    font-family: 'STIX Two Text', serif;
    font-size: 11px;
    letter-spacing: 0.35em;
    color: var(--text);
    margin-bottom: 10px;
}
.obd-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px 4px;
    margin-bottom: 0;
}
.obd-cal-hdr {
    font-family: 'STIX Two Text', serif;
    font-size: 8px;
    letter-spacing: 0.06em;
    color: var(--text-mid);
    font-style: italic;
    text-align: center;
    padding-bottom: 6px;
}
.obd-cal-day {
    font-family: 'STIX Two Text', serif;
    font-size: 14px;
    color: var(--text);
    text-align: center;
    line-height: 28px;
    width: 28px;
    height: 28px;
    margin: 0 auto;
}
/* Heart outline around today's date */
.obd-cal-today {
    position: relative;
    background: transparent;
    color: var(--burnt-orange);
    border-radius: 0;
    font-weight: 400;
    width: 36px;
    height: 32px;
    line-height: 30px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.obd-cal-today::before {
    content: '';
    position: absolute;
    inset: -4px -6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 38'%3E%3Cpath d='M22,35 C22,35 4,22 4,11 C4,6 8,3.5 12.5,5 C15,5.8 17,7.5 22,12 C27,7.5 29,5.8 31.5,5 C36,3.5 40,6 40,11 C40,22 22,35 22,35Z' fill='none' stroke='%23AB4A0D' stroke-width='1.3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

/* Dashed connector from heart to date */
.obd-cal-connector {
    width: 1px;
    height: 60px;
    border-left: 1.5px dashed var(--burnt-orange);
    margin: 6px auto 12px;
}

.obd-cal-date {
    font-family: 'STIX Two Text', serif;
    font-size: clamp(13px, 3.5vw, 15px);
    letter-spacing: 0.12em;
    color: var(--text);
    font-weight: 600;
    line-height: 1.8;
}

/* ─────────────────────────────────────────
   SECTION 2b — BAPTISM
───────────────────────────────────────── */
.bap-section {
    overflow: hidden;
}

.bap-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.bap-photo {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    filter: grayscale(15%) contrast(1.03);
}

/* Stamp overlay on photo */
.bap-overlay-stamp {
    position: absolute;
    top: 14px;
    left: 14px;
    border: 1.8px solid rgba(255,255,255,0.85);
    padding: 7px 10px 9px;
    width: 120px;
    transform: rotate(-3deg);
    background: rgba(0,0,0,0.12);
}
.bap-stamp-waves {
    width: 100%;
    height: 16px;
    display: block;
    margin-bottom: 5px;
}
.bap-stamp-label {
    font-family: 'STIX Two Text', serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: rgba(255,255,255,0.95);
    text-transform: uppercase;
    line-height: 1;
}

/* Content area */
.bap-content {
    padding: 32px 32px 36px;
    text-align: center;
    background: var(--white);
}

.bap-eyebrow {
    font-family: 'STIX Two Text', serif;
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--sage-dark);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.bap-script {
    font-family: 'PF Scandal Pro', sans-serif;
    font-size: clamp(52px, 15vw, 72px);
    color: var(--sage-dark);
    line-height: 0.95;
    font-weight: 400;
    margin-bottom: 20px;
}

.bap-body {
    font-family: 'STIX Two Text', serif;
    font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1.85;
    color: var(--text-mid);
    margin-bottom: 28px;
}
.bap-body em {
    font-style: italic;
    color: var(--sage-dark);
    font-weight: 600;
}

/* Mini ticket row */
.bap-ticket-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 1.5px dashed rgba(100,100,100,0.3);
    border-radius: 8px;
    padding: 14px 10px;
    background: rgba(255,255,255,0.65);
}
.bap-ticket-cell {
    flex: 1;
    text-align: center;
}
.bap-ticket-sep {
    width: 1px;
    height: 36px;
    background: rgba(100,100,100,0.22);
    margin: 0 4px;
}
.bap-field-label {
    font-family: 'STIX Two Text', serif;
    font-size: 7.5px;
    letter-spacing: 0.22em;
    color: var(--text-mid);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.bap-field-value {
    font-family: 'STIX Two Text', serif;
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.06em;
}

/* ─────────────────────────────────────────
   HONOR BLOCK — κουμπάρος / νονοί
───────────────────────────────────────── */
.honor-block {
    text-align: center;
    padding: 20px 0 8px;
}

.honor-label {
    font-family: 'STIX Two Text', serif;
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 10px;
}
.honor-label--sage { color: var(--sage-dark); }

.honor-name {
    font-family: 'STIX Two Text', serif;
    font-size: clamp(17px, 4.5vw, 20px);
    font-weight: 600;
    color: var(--text);
    line-height: 1.6;
    letter-spacing: 0.03em;
}
.honor-name--sage { color: var(--sage-deeper); }

/* ─────────────────────────────────────────
   SECTION 3 — SAVE THE DATE / COUNTDOWN
───────────────────────────────────────── */
.std-section {
    background: var(--cream);
    padding: 40px 32px 44px;
    text-align: center;
}

.std-script {
    font-family: 'PF Scandal Pro', sans-serif;
    font-size: clamp(42px, 12vw, 54px);
    color: var(--burnt-orange);
    line-height: 1;
    margin-bottom: 28px;
}

.std-countdown {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    margin-bottom: 36px;
}
.std-cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.std-cd-number {
    font-family: 'PF Scandal Pro', sans-serif;
    font-size: clamp(28px, 13vw, 60px);
    font-weight: 700;
    color: var(--dark-brown);
    letter-spacing: -0.01em;
    line-height: 1;
}
.std-cd-label {
    font-family: 'STIX Two Text', serif;
    font-size: 7px;
    letter-spacing: 0.28em;
    color: var(--text-mid);
    text-transform: uppercase;
}
.std-cd-colon {
    font-family: 'STIX Two Text', serif;
    font-size: clamp(22px, 7vw, 36px);
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    padding-top: 2px;
    flex-shrink: 0;
}

/* Venue circle */
.std-venue-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}
.std-venue-circle {
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    margin-bottom: -12px;
    box-shadow: 0 0 4px 4px rgba(100,100,100,0.12);
}
.std-venue-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.std-pin-icon {
    font-size: 20px;
    position: relative;
    z-index: 2;
}
.std-venue-label {
    font-family: 'STIX Two Text', serif;
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--text);
    background: rgba(240,240,234,0.92);
    border: 1px solid rgba(100,100,100,0.25);
    border-radius: 30px;
    padding: 5px 16px;
    margin-top: 6px;
}
.std-venue-desc {
    font-family: 'STIX Two Text', serif;
    font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1.8;
    color: var(--text-mid);
    max-width: 320px;
    margin: 0 auto;
}

.std-map-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 28px;
    border: 1.5px solid var(--text-mid);
    border-radius: 30px;
    font-family: 'STIX Two Text', serif;
    font-size: clamp(13px, 3.5vw, 15px);
    letter-spacing: 0.08em;
    color: var(--text-mid);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.std-map-btn:hover {
    background: var(--text-mid);
    color: #fff;
}

/* Event block (church / reception) */
.std-event-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.std-event-tag {
    font-family: 'STIX Two Text', serif;
    font-size: 9px;
    letter-spacing: 0.32em;
    color: var(--burnt-orange);
    margin-bottom: 16px;
}

/* Connector between church and reception */
.std-venue-connector {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 28px 0;
}
.std-connector-line {
    flex: 1;
    border-top: 1.5px dashed rgba(74, 74, 74, 0.35);
}
.std-connector-label {
    font-family: 'STIX Two Text', serif;
    font-style: italic;
    font-size: 11px;
    color: var(--text-mid);
    white-space: nowrap;
    opacity: 0.75;
}

/* ─────────────────────────────────────────
   SECTION 4 — PLACES / ITINERARY
───────────────────────────────────────── */
.itin-section {
    background: #fff;
    overflow: hidden;
}

/* Sage green barcode header */
.itin-header {
    background: var(--gold);
    padding: 20px 28px 20px;
    border-bottom: 3px dashed rgba(255,255,255,0.55);
}
.itin-header-barcode {
    height: 56px;
    background: repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.9) 0,    rgba(255,255,255,0.9) 2px,
        transparent   2px,  transparent   5px,
        rgba(255,255,255,0.9) 5px,  rgba(255,255,255,0.9) 6px,
        transparent   6px,  transparent   9px,
        rgba(255,255,255,0.9) 9px,  rgba(255,255,255,0.9) 11px,
        transparent   11px, transparent   14px,
        rgba(255,255,255,0.9) 14px, rgba(255,255,255,0.9) 16px,
        transparent   16px, transparent   18px,
        rgba(255,255,255,0.9) 18px, rgba(255,255,255,0.9) 19px,
        transparent   19px, transparent   22px,
        rgba(255,255,255,0.9) 22px, rgba(255,255,255,0.9) 25px,
        transparent   25px, transparent   27px,
        rgba(255,255,255,0.9) 27px, rgba(255,255,255,0.9) 28px,
        transparent   28px, transparent   31px,
        rgba(255,255,255,0.9) 31px, rgba(255,255,255,0.9) 33px,
        transparent   33px, transparent   36px,
        rgba(255,255,255,0.9) 36px, rgba(255,255,255,0.9) 37px,
        transparent   37px, transparent   40px,
        rgba(255,255,255,0.9) 40px, rgba(255,255,255,0.9) 43px,
        transparent   43px, transparent   45px,
        rgba(255,255,255,0.9) 45px, rgba(255,255,255,0.9) 46px,
        transparent   46px, transparent   48px
    );
    background-size: 48px 100%;
}

.itin-content {
    padding: 28px 32px 20px;
}

.itin-script {
    font-family: 'PF Scandal Pro', sans-serif;
    font-size: clamp(52px, 14vw, 68px);
    color: var(--gold);
    line-height: 1;
    margin-bottom: 24px;
    text-align: center;
    font-weight: 400;
}

/* Timeline: full-width zigzag, items alternate left / right */
.itin-timeline-wrap {
    position: relative;
    height: 1160px;
    margin: 0 4px;
}

.itin-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: visible;
}

/* Path segments — hidden until JS initialises dasharray, then drawn one by one */
.itin-seg {
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: 0;
}

/* Stop dots — revealed one by one */
.itin-dot {
    fill: var(--gold);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.itin-dot--visible {
    opacity: 1;
}

/* Item list overlay */
.itin-items {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    list-style: none;
    padding: 0; margin: 0;
}

/* Each item absolutely positioned, starts hidden */
.itin-item {
    position: absolute;
    width: 65%;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.itin-item--left  { left: 0;  transform: translateX(-18px); }
.itin-item--right { right: 0; transform: translateX(18px);  }
.itin-item--visible {
    opacity: 1;
    transform: translateX(0);
}

/* Vertical positions — centred on each dot's y coordinate (1160px container) */
.itin-item[data-itin-index="0"] { top:    5px; }
.itin-item[data-itin-index="1"] { top:  205px; }
.itin-item[data-itin-index="2"] { top:  405px; }
.itin-item[data-itin-index="3"] { top:  605px; }
.itin-item[data-itin-index="4"] { top:  805px; }
.itin-item[data-itin-index="5"] { top: 1005px; }

.itin-item-inner {
    display: flex;
    align-items: center;
    gap: 7px;
}
.itin-item--right .itin-item-inner {
    flex-direction: row-reverse;
}
.itin-item-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.itin-item--right .itin-item-text {
    text-align: right;
}

.itin-dest-img {
    max-width: 100px;
    width: 100%;
    height: auto;
    border-radius: 7px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14);
    display: block;
}
.itin-time {
    font-family: 'STIX Two Text', serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.itin-event {
    font-family: 'STIX Two Text', serif;
    font-size: 12px;
    color: var(--text-mid);
    font-style: italic;
}

/* Moving plane that follows the zigzag path */
.itin-plane-moving {
    position: absolute;
    width: 38px;
    height: auto;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transform-origin: center center;
    will-change: transform, left, top;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

/* Plane icon */
.itin-plane-icon {
    display: flex;
    justify-content: flex-end;
    padding-right: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}
.itin-plane-img {
    width: 44px;
    height: auto;
    opacity: 0.85;
}

/* Bottom couple photo */
.itin-bottom-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.itin-bottom-img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: grayscale(30%);
    display: block;
}

/* ─────────────────────────────────────────
   SECTION 5-6 — RSVP
───────────────────────────────────────── */
.rsvp-section {
    background: var(--cream);
    overflow: hidden;
}

.rsvp-inner {
    padding: 36px 32px 28px;
    text-align: center;
}

.rsvp-title {
    font-family: 'PF Scandal Pro', serif;
    font-size: clamp(72px, 22vw, 100px);
    font-weight: 300;
    color: var(--burgundy);
    line-height: 0.9;
    margin-bottom: 22px;
}

.rsvp-desc {
    font-family: 'STIX Two Text', serif;
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.75;
    color: var(--burgundy);
    max-width: 300px;
    margin: 0 auto 28px;
}

/* Form */
.rsvp-form {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rsvp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rsvp-label {
    font-family: 'STIX Two Text', serif;
    font-size: 13px;
    color: var(--burgundy);
    font-style: normal;
}

.rsvp-input {
    background: #af666069;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    padding: 10px 12px;
    font-family: 'STIX Two Text', serif;
    font-size: 14px;
    color: var(--burgundy);
    outline: none;
    transition: background 0.2s, border-color 0.2s;
    width: 100%;
}
.rsvp-input::placeholder { color: rgba(69, 10, 10, 0.45); }
.rsvp-input:focus {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.6);
}

/* Choice buttons (radio style) */
.rsvp-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rsvp-choice {
    background: #af666069;
    border: 1px solid rgba(69, 10, 10, 0.28);
    border-radius: 4px;
    padding: 10px 14px;
    font-family: 'STIX Two Text', serif;
    font-size: 14px;
    color: rgba(69, 10, 10, 0.88);
    cursor: pointer;
    text-align: left;
    transition: background 0.2s, border-color 0.2s;
    width: 100%;
}
.rsvp-choice:hover {
    background: rgba(69, 10, 10, 0.26);
}
.rsvp-choice.selected {
    background: var(--sage);
    border-color: rgba(69, 10, 10, 0.6);
    color: var(--white);
}

.rsvp-submit {
    background: var(--burgundy);
    color: var(--cream);
    border: none;
    border-radius: 30px;
    padding: 12px 24px;
    font-family: 'PF Scandal Pro', serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    width: 100%;
    margin-top: 4px;
    transition: background 0.2s, transform 0.15s;
}
.rsvp-submit:hover {
    transform: translateY(-1px);
}

.rsvp-note {
    font-family: 'STIX Two Text', serif;
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    margin-top: 6px;
}

/* Guest count fields — hidden until "attending" is selected */
.rsvp-field--guests {
    transition: opacity 0.25s, max-height 0.3s;
}
.rsvp-field--guests-hidden {
    display: none;
}

/* Inline submission feedback */
.rsvp-feedback {
    display: none;
    border-radius: 4px;
    padding: 10px 14px;
    font-family: 'STIX Two Text', serif;
    font-size: 13px;
    line-height: 1.5;
}
.rsvp-feedback--success {
    display: block;
    background: rgba(100, 130, 95, 0.35);
    border: 1px solid rgba(100, 130, 95, 0.6);
    color: var(--white);
}
.rsvp-feedback--error {
    display: block;
    background: rgba(175, 50, 50, 0.3);
    border: 1px solid rgba(175, 50, 50, 0.5);
    color: var(--white);
}

/* Back to top */
.rsvp-back-top {
    display: block;
    margin-top: 32px;
    font-family: 'STIX Two Text', serif;
    font-size: 11px;
    letter-spacing: 0.28em;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    text-align: center;
    transition: color 0.25s;
}
.rsvp-back-top:hover { color: var(--white); }

.rsvp-back-arrow {
    margin-top: 12px;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: rgba(255,255,255,0.75);
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.rsvp-back-arrow:hover { border-color: white; color: white; }

/* Tear line */
.rsvp-tear {
    position: relative;
    height: 24px;
    background: var(--burgundy);
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.rsvp-tear-circle {
    position: absolute;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--cream);
    top: 50%; transform: translateY(-50%);
    z-index: 1;
}
.rsvp-tear-circle--left  { left: -10px; }
.rsvp-tear-circle--right { right: -10px; }
.rsvp-tear-dashes {
    flex: 1;
    margin: 0 16px;
    border-top: 2px dashed var(--cream);
}

/* Barcode stub */
.rsvp-barcode-stub {
    background: var(--white);
    border-radius: 0 0 18px 18px;
    padding: 18px 24px 24px;
}
.rsvp-barcode {
    height: 66px;
    overflow: hidden;
    background: repeating-linear-gradient(
        90deg,
        var(--burgundy) 0,    var(--burgundy) 2px,
        transparent        2px,  transparent        5px,
        var(--burgundy) 5px,  var(--burgundy) 6px,
        transparent        6px,  transparent        9px,
        var(--burgundy) 9px,  var(--burgundy) 11px,
        transparent        11px, transparent        14px,
        var(--burgundy) 14px, var(--burgundy) 16px,
        transparent        16px, transparent        18px,
        var(--burgundy) 18px, var(--burgundy) 19px,
        transparent        19px, transparent        22px,
        var(--burgundy) 22px, var(--burgundy) 25px,
        transparent        25px, transparent        27px,
        var(--burgundy) 27px, var(--burgundy) 28px,
        transparent        28px, transparent        31px,
        var(--burgundy) 31px, var(--burgundy) 33px,
        transparent        33px, transparent        36px,
        var(--burgundy) 36px, var(--burgundy) 37px,
        transparent        37px, transparent        40px,
        var(--burgundy) 40px, var(--burgundy) 43px,
        transparent        43px, transparent        45px,
        var(--burgundy) 45px, var(--burgundy) 46px,
        transparent        46px, transparent        48px
    );
    background-size: 48px 100%;
}

/* ─────────────────────────────────────────
   BOTTOM PADDING (barcode-stub is last)
───────────────────────────────────────── */
.rsvp-section { padding-bottom: 0; }

/* ─────────────────────────────────────────
   SECTION 7 — UPLOAD PHOTOS & VIDEOS
───────────────────────────────────────── */
.upload-section {
    background: var(--cream);
    padding: 60px 32px 72px;
    text-align: center;
}

.upload-inner {
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}


.upload-eyebrow {
    font-family: 'STIX Two Text', serif;
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--sage-dark);
    text-transform: uppercase;
}

.upload-script {
    font-family: 'PF Scandal Pro', serif;
    font-size: clamp(32px, 9vw, 48px);
    color: var(--text);
    line-height: 1.15;
}

.upload-desc {
    font-family: 'STIX Two Text', serif;
    font-size: clamp(13px, 3.8vw, 15px);
    color: var(--text-mid);
    line-height: 1.7;
}

.upload-icon-wrap {
    margin: 8px 0;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--sage);
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-icon {
    width: 38px; height: 38px;
    color: var(--white);
}

.upload-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 13px 32px;
    background: var(--sage);
    border-radius: 30px;
    font-family: 'PF Scandal Pro', serif;
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--white);
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

.upload-btn:hover {
    background: var(--sage-dark);
    transform: translateY(-2px);
}

.upload-or-divider {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}
.upload-or-divider::before,
.upload-or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(159,176,120,0.35);
}
.upload-or-divider span {
    font-family: 'STIX Two Text', serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: rgba(74,74,74,0.42);
    text-transform: uppercase;
}

.upload-icon-wrap--pulse {
    animation: upload-mic-pulse 2.4s ease-in-out infinite;
}
@keyframes upload-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(159,176,120,0.45); }
    50%       { box-shadow: 0 0 0 10px rgba(159,176,120,0); }
}

/* ─────────────────────────────────────────
   RESPONSIVE  (very narrow screens)
───────────────────────────────────────── */
@media (max-width: 480px) {
    .bp-body, .obd-content, .std-section,
    .itin-content, .rsvp-inner {
        padding-left: 25px;
        padding-right: 25px;
    }
    .bp-barcode-wrap { padding-left: 25px; padding-right: 25px; }
    .bp-info-row { gap: 6px; }

    /* Body / paragraph text — larger for readability */
    .obd-body,
    .bap-body,
    .std-venue-desc,
    .obd-cal-date,
    .upload-desc { font-size: 19px; }

    .rsvp-desc { font-size: 19px; }

    .bp-tagline,
    .bp-field-value { font-size: 17px; }

    .bp-field-bold { font-size: 19px; }

    .rsvp-label { font-size: 18px; }
    .rsvp-input,
    .rsvp-choice { font-size: 18px; }

    .itin-time  { font-size: 18px; }
    .itin-event { font-size: 17px; }

    .bap-field-value { font-size: 17px; }

    .std-map-btn { font-size: 18px; }

    .honor-name { font-size: 19px; }
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.site-footer {
    text-align: center;
    padding: 18px 16px;
    font-family: 'STIX Two Text', serif;
    font-size: 13px;
    color: var(--text-mid);
    background: var(--cream);
    border-top: 1px solid rgba(0,0,0,0.07);
}

.site-footer .footer-heart {
    display: inline-block;
    width: 13px;
    height: 13px;
    vertical-align: -1px;
    color: var(--sage-dark);
}

.site-footer a {
    color: var(--sage-dark);
    text-decoration: none;
    font-weight: 500;
}

.site-footer a:hover {
    text-decoration: underline;
}