/* Optional studio looks layer over the original invitation, which remains selectable. */
.theme-ivory { --primary-blue:#7f8c72; --primary-blue-light:#afbaa3; --primary-blue-dark:#37432f; --accent-blue:#c4cbb8; --soft-blue:#e5e7db; --pale-blue:#f2f3eb; --cream:#faf8f2; --gold-accent:#b39a72; --text-dark:#363b31; --text-medium:#5c6355; --text-light:#6b7262; --paper-line:#d9dbce; }
.theme-blush { --primary-blue:#b08185; --primary-blue-light:#cfaaad; --primary-blue-dark:#633f46; --accent-blue:#d6b6b4; --soft-blue:#f1e4e1; --pale-blue:#faf1ee; --cream:#fff9f4; --gold-accent:#b69772; --text-dark:#50383e; --text-medium:#775b62; --text-light:#82656d; --paper-line:#e7d7d2; }
.theme-ivory .envelope-section,.theme-blush .envelope-section { background:radial-gradient(ellipse at 15% 20%,#fff9,transparent 65%),linear-gradient(135deg,var(--soft-blue),var(--cream)); }
.theme-ivory .envelope-back,.theme-blush .envelope-back,.theme-ivory .envelope-front,.theme-blush .envelope-front { background:linear-gradient(145deg,var(--cream),var(--soft-blue)); }
.theme-ivory .envelope-flap,.theme-blush .envelope-flap { background:linear-gradient(150deg,var(--cream),var(--accent-blue)); }
.hero-actions,.registry-links { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero-subtitle { font:italic 1.4rem var(--font-serif); margin:8px 0 20px; }
.hero-venue { font:500 9px/1.8 var(--font-sans); letter-spacing:2px; margin-bottom:25px; text-transform:uppercase; }
.back-to-top { display:inline-block; margin-top:22px; color:inherit; font:500 10px var(--font-sans); letter-spacing:1px; text-underline-offset:5px; }
.wedding-nav { background:var(--cream); }
.nav-links { flex-wrap:wrap; gap:10px 22px; justify-content:flex-end; }
.moments-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.moments-grid a { display:block; overflow:hidden; border-radius:16px; background:var(--soft-blue); }
.moments-grid img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .4s; }
.moments-grid a:hover img { transform:scale(1.03); }
/* A steady landscape frame keeps the full photo visible without a tall empty stage. */
.gallery-section .slideshow { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:0 12px; padding:6px 6px 0; border:1px solid var(--paper-line); border-radius:20px; background:var(--cream); }
.layout-scene .gallery-section .slideshow { border-radius:20px; }
.gallery-section .slides { grid-column:1 / -1; aspect-ratio:16 / 9; border-radius:14px; overflow:hidden; background:var(--soft-blue); }
.gallery-section .slide { transform:none; }
.gallery-section .slide img { object-fit:contain; background:transparent; }
.gallery-section .slide-nav { position:static; top:auto; width:44px; height:44px; margin:3px 0; transform:none; border:0; background:transparent; }
.gallery-section .slide-nav:hover { transform:none; background:var(--soft-blue); }
.gallery-section .slide-nav:disabled { opacity:.35; cursor:default; }
.gallery-section .slide-nav.prev { grid-column:1; grid-row:2; }
.gallery-section .slide-nav.next { grid-column:3; grid-row:2; }
.slide-count { grid-column:2; grid-row:2; text-align:center; color:var(--text-medium); font:500 10px/1.8 var(--font-sans); letter-spacing:2px; }
.extras-section { padding:90px 28px; background:var(--cream); color:var(--text-dark); }
.extras-section:nth-of-type(even) { background:var(--pale-blue); }
.day-timeline { list-style:none; max-width:640px; margin:auto; text-align:left; }
.day-timeline li { display:grid; grid-template-columns:110px 1fr; gap:22px; padding:22px 0; border-bottom:1px solid var(--paper-line); }
.day-timeline time { font:500 11px/1.8 var(--font-sans); color:var(--primary-blue-dark); }
.day-timeline span { font:400 1.5rem/1.4 var(--font-serif); }
.guest-faqs { max-width:740px; margin:auto; text-align:left; }
.guest-faqs details { border-bottom:1px solid var(--paper-line); padding:20px 4px; }
.guest-faqs summary { cursor:pointer; font:500 14px/1.7 var(--font-sans); color:var(--primary-blue-dark); }
.guest-faqs p { padding:15px 0 5px; font-size:13px; line-height:1.9; white-space:normal; }
.story-text,.section-intro,.guest-faqs p,.day-timeline span,.registry-links a { overflow-wrap:anywhere; }
/* Photo scene: the guest's own hero image, editorial type and translucent paper. */
.layout-scene .hero-section { min-height:calc(100svh - 76px); background-color:var(--soft-blue); }
.layout-scene .hero-section:not(.hero-photo) { background:radial-gradient(ellipse at 80% 20%,var(--accent-blue),transparent 65%),linear-gradient(135deg,var(--cream),var(--soft-blue)); }
.layout-scene .hero-section.hero-photo { background-position:70% center; }
.layout-scene .hero-overlay { background:linear-gradient(90deg,var(--cream) 0%,color-mix(in srgb,var(--cream) 96%,transparent) 25%,color-mix(in srgb,var(--cream) 76%,transparent) 46%,transparent 78%),linear-gradient(0deg,var(--cream),transparent 23%); }
.layout-scene .hero-section::after { border:0; }
.layout-scene .hero-content { max-width:1120px; text-align:left; }
.layout-scene .hero-content > * { max-width:520px; }
.layout-scene .save-the-date { margin-bottom:25px; }
.layout-scene .couple-names { font-size:clamp(4.5rem,7vw,7rem); margin-bottom:18px; }
.layout-scene .couple-names .name-line { display:block; }
.layout-scene .couple-names .second-name { padding-left:38px; }
.layout-scene .ampersand { font-size:.45em; margin:0 12px 0 0; }
.layout-scene .hero-date { font-style:italic; font-size:1.5rem; margin-bottom:12px; }
.layout-scene .hero-actions,.layout-scene .countdown-container { justify-content:flex-start; }
.layout-scene .hero-cta { border-radius:30px; background:color-mix(in srgb,var(--cream) 90%,transparent); padding:13px 22px; gap:15px; }
.layout-scene .countdown-container { gap:24px; margin-top:26px; }
.layout-scene .countdown-item { padding:0; background:none; border:0; min-width:52px; backdrop-filter:none; }
.layout-scene .countdown-number { font-style:italic; }
.layout-scene .scroll-indicator { align-items:flex-start; }
.layout-scene .message-section,.layout-scene .story-section,.layout-scene .gallery-section,.layout-scene .details-section,.layout-scene .rsvp-section,.layout-scene .social-section,.layout-scene .entourage-section,.layout-scene .guidelines-section { padding:85px 28px; background-color:var(--cream); }
.layout-scene .with-bg::before { opacity:.16; }
.layout-scene .with-bg::after { background:linear-gradient(180deg,color-mix(in srgb,var(--cream) 85%,transparent),color-mix(in srgb,var(--cream) 65%,transparent)); }
.layout-scene .story-section .container { display:block; max-width:780px; padding:48px; border:1px solid var(--paper-line); border-radius:28px; background:color-mix(in srgb,var(--cream) 94%,transparent); box-shadow:0 25px 60px #282d1c12; }
.layout-scene .story-section .eyebrow,.layout-scene .story-section .section-heading { text-align:center; }
.layout-scene .story-card { border-radius:24px; border:0; background:color-mix(in srgb,var(--cream) 92%,white); padding:32px; }
.layout-scene .story-section .story-card { padding:0; background:none; box-shadow:none; }
.layout-scene .message-section .container,.layout-scene .detail-card,.layout-scene .attire-card,.layout-scene .rsvp-form,.layout-scene .wedding-notes { border-radius:24px; background:color-mix(in srgb,var(--cream) 92%,white); border-color:var(--paper-line); }
.layout-scene .slideshow:not(.custom-section) { border-radius:24px; overflow:hidden; }
.layout-scene .footer { background:var(--soft-blue); color:var(--primary-blue-dark); }
.layout-scene .footer-names,.layout-scene .footer-hashtag,.layout-scene .footer-ornament,.layout-scene .footer .ornament-svg { color:var(--primary-blue-dark); }
.layout-scene .footer-date { color:var(--text-medium); font-weight:500; }
.layout-scene .footer-hashtag,.layout-scene .back-to-top { font-size:12px; }
.layout-scene .extras-section .container { max-width:840px; }
/* Alternate entrances reuse the existing accessible unlock and opening control. */
.entrance-garden .envelope,.entrance-curtains .envelope { transform:none; aspect-ratio:4/3; height:auto; border-radius:120px 120px 10px 10px; overflow:hidden; isolation:isolate; box-shadow:0 18px 45px #24352026; }
.entrance-garden .envelope::before,.entrance-garden .envelope::after,.entrance-curtains .envelope::before,.entrance-curtains .envelope::after { content:""; position:absolute; top:0; bottom:0; width:50%; z-index:8; transition:transform 1.3s ease; pointer-events:none; }
.entrance-garden .envelope::before,.entrance-garden .envelope::after { background:repeating-linear-gradient(90deg,transparent 0 24px,#63715377 24px 27px),linear-gradient(145deg,#eef1e6,#b4c0a4); border:6px double #647852; }
.entrance-garden .envelope::before,.entrance-curtains .envelope::before { left:0; }
.entrance-garden .envelope::after,.entrance-curtains .envelope::after { right:0; }
.entrance-curtains .envelope { border-radius:12px; }
.entrance-curtains .envelope::before,.entrance-curtains .envelope::after { background:repeating-linear-gradient(90deg,#563446 0,#98627a 13px,#563446 26px); box-shadow:inset 0 0 25px #0007; border-bottom:8px solid #b49a70; }
.entrance-garden .envelope.open::before,.entrance-curtains .envelope.open::before { transform:translateX(-100%); }
.entrance-garden .envelope.open::after,.entrance-curtains .envelope.open::after { transform:translateX(100%); }
.entrance-garden .envelope-front,.entrance-garden .envelope-flap,.entrance-curtains .envelope-front,.entrance-curtains .envelope-flap { display:none; }
.entrance-garden .letter,.entrance-curtains .letter { inset:8%; width:84%; height:84%; transform:none; z-index:3; }
.entrance-garden .envelope.open .letter,.entrance-curtains .envelope.open .letter { transform:none; }
.entrance-none[data-inv-locked="0"] #envelope-section { display:none; }
.entrance-none[data-inv-locked="0"] #invitation-content { display:block; opacity:1; }
@media(max-width:700px), (max-width:950px) and (orientation:landscape) and (max-height:550px) {
    .nav-links { justify-content:center; gap:6px 14px; }
    .nav-links a { padding:6px 0; }
    .moments-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .layout-scene .hero-section,.layout-scene .hero-section.hero-photo { min-height:min(620px,calc(100svh - 64px)); padding:36px 20px 30px; }
    .layout-scene .hero-overlay { background:linear-gradient(0deg,var(--cream) 0%,color-mix(in srgb,var(--cream) 88%,transparent) 28%,color-mix(in srgb,var(--cream) 75%,transparent) 65%,color-mix(in srgb,var(--cream) 42%,transparent)); }
    .layout-scene .hero-content { text-align:center; }
    .layout-scene .hero-content > * { max-width:none; }
    .layout-scene .couple-names { font-size:clamp(3.7rem,16vw,5rem); }
    .layout-scene .couple-names .second-name { padding-left:0; }
    .layout-scene .hero-date { font-size:1.2rem; }
    .layout-scene .hero-actions,.layout-scene .countdown-container { justify-content:center; }
    .layout-scene .countdown-container { gap:18px; }
    .layout-scene .story-section .container { padding:24px 18px; border-radius:18px; }
    .message-section,.story-section,.gallery-section,.details-section,.rsvp-section,.social-section,.entourage-section,.guidelines-section,.extras-section,
    .layout-scene .message-section,.layout-scene .story-section,.layout-scene .gallery-section,.layout-scene .details-section,.layout-scene .rsvp-section,.layout-scene .social-section,.layout-scene .entourage-section,.layout-scene .guidelines-section { padding:36px 18px; }
    .wedding-nav { padding:8px 14px; }
    .nav-links { gap:4px 12px; padding:0; }
    .nav-links .nav-rsvp { padding:8px 10px; }
    .eyebrow { margin-bottom:10px; letter-spacing:1.6px; }
    .section-heading,.section-title { font-size:clamp(2.25rem,10vw,2.65rem); line-height:1.15; margin-bottom:16px; }
    .section-heading::after { width:40px; margin-top:12px; }
    .section-intro,.gallery-subtitle { font-size:1.05rem; line-height:1.5; margin:0 auto 22px; letter-spacing:0; }
    .message-section .container { padding:24px 16px; }
    .ornament { margin:4px 0 12px; }
    .ornament-bottom { margin:14px 0 0; }
    .invitation-text { font-size:1.1rem; line-height:1.55; margin-bottom:18px; }
    .date-highlight { padding:12px 16px; }
    .story-card { padding:22px 18px; margin-top:18px; }
    .story-text { font-size:1.08rem; line-height:1.65; }
    .gallery-section .slideshow { box-shadow:0 10px 28px #2d455710; }
    .moments-grid img { aspect-ratio:4 / 3; object-fit:contain; }
    .details-grid { gap:14px; }
    .detail-card { padding:24px 20px; }
    .event-number { margin-bottom:14px; }
    .card-title { font-size:2.1rem; margin-bottom:10px; }
    .card-time { font-size:1.25rem; margin:10px 0 14px; }
    .card-divider { margin:16px auto; }
    .map-link { margin-top:18px; }
    .entourage-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
    .entourage-card { min-width:0; padding:16px 2px; }
    .entourage-card h3 { font-size:8px; line-height:1.5; letter-spacing:1px; margin-bottom:8px; overflow-wrap:anywhere; }
    .entourage-card li { font-size:1.08rem; line-height:1.4; }
    .attire-card { padding:22px 18px; }
    .attire-text { font-size:1.25rem; line-height:1.45; margin:16px 0; }
    .theme-swatches { margin:22px 0 14px; }
    .attire-gallery { margin-top:18px; }
    .wedding-notes { padding:20px 16px; margin-top:24px; }
    .wedding-notes h3 { font-size:1.8rem; margin-bottom:14px; }
    .custom-section.slideshow { padding:36px 18px; min-height:0; }
    .custom-section .story-card { padding:24px 18px; margin-top:0; }
    .rsvp-text { font-size:1.05rem; margin-bottom:20px; }
    .rsvp-form { padding:24px 18px; }
    .rsvp-form input,.rsvp-form select,.rsvp-form textarea { font-size:16px; }
    .party-reservation { padding:18px; margin:18px auto; }
    .social-subtitle { margin-bottom:20px; }
    .social-hashtag { margin:20px 0; }
    .footer { padding:32px 18px; }
    .footer-ornament { margin-bottom:16px; }
    .back-to-top { margin-top:16px; }
    .day-timeline li { grid-template-columns:82px 1fr; gap:14px; }
    .day-timeline span { font-size:1.3rem; }
}
@media(max-width:950px) and (orientation:landscape) and (max-height:550px) {
    html { scroll-padding-top:56px; }
    .layout-scene .hero-section,.layout-scene .hero-section.hero-photo { min-height:0; padding:32px 24px; }
    .gallery-section .container { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); column-gap:24px; align-items:center; }
    .gallery-section .eyebrow { grid-column:1; align-self:end; margin-bottom:8px; }
    .gallery-section .section-heading { grid-column:1; font-size:2.5rem; margin-bottom:10px; }
    .gallery-section .gallery-subtitle { grid-column:1; align-self:start; margin-bottom:0; }
    .gallery-section .slideshow { grid-column:2; grid-row:1 / span 3; width:100%; max-width:390px; }
    .gallery-section,.layout-scene .gallery-section { padding-top:20px; padding-bottom:20px; }
}
@media(prefers-reduced-motion:reduce) { .moments-grid img,.envelope::before,.envelope::after { transition:none!important; } }