/* ═══════════════════════════════════════════
   HATLEY CASTLE — styles entry

   Built from src/css/* via: npm run build
   Tokens + base reset. Do not edit styles.css directly.
   ═══════════════════════════════════════════ */

:root {
    --dark: #1e1b18;
    --paper: #f5f0e8;
    --sage-wash: #eef2eb;
    --pink-wash: #f5eeec;
    --terra-wash: #f3ede6;
    --ink: #2a2420;
    --ink-muted: rgba(42, 36, 32, .38);
    --ink-caption: rgba(42, 36, 32, .58);
    --cream: #f7f3ea;
    --cream-muted: rgba(247, 243, 234, .72);
    --cream-cap: rgba(247, 243, 234, .82);
    --sage: #5d7050;
    --sage-deep: #475439;
    --sage-light: #7a8b6e;
    --vine: #445038;
    --gold: #b89e6f;
    --pink: #c4928a;
    --blush: #d4b0a8;
    --lavender: #9e8bb0;
    --mauve: #b8a0c4;
    --c-pink1: #7a2835; --c-pink2: #bd5664; --c-pink3: #f2a4b0;
    --c-lav1: #504261; --c-lav2: #78648c; --c-lav3: #b8a0c4;
    /* Display serif (names) + body serif (story) + clean sans (labels) — no script */
    --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --body: 'EB Garamond', Georgia, serif;
    --ui: 'DM Sans', system-ui, -apple-system, sans-serif;
    --pad: clamp(1.25rem, 5vw, 3.5rem);
    --gap: clamp(3rem, 9vh, 6rem);
    --ease: cubic-bezier(.16, 1, .3, 1);
    --text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 28px rgba(0,0,0,.35);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body { background: var(--dark); color: var(--ink); font: 400 clamp(.88rem, 2vw, .98rem)/1.85 var(--body); overflow-x: hidden; }
img { display: block; max-width: 100%; }
/* ═══ GRAIN — GPU-isolated layer ═══
   Desktop: mix-blend-mode: overlay for rich texture.
   Mobile: opacity-only (no blend) — saves ~6ms/frame on mobile GPUs. */
.grain {
    position: fixed; inset: 0; z-index: 9000;
    pointer-events: none; opacity: .04;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 150px;
    mix-blend-mode: overlay;
    transform: translateZ(0);
    will-change: transform;
    contain: layout style paint;
}
@media (max-width: 767px) {
    .grain { mix-blend-mode: normal; opacity: .03; }
}
/* ═══ PRELOADER ═══ */
#preloader { position: fixed; inset: 0; z-index: 9999; background: var(--dark); display: flex; flex-direction: column; align-items: center; justify-content: center; contain: layout style paint; color: var(--cream); }
.preloader-container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 400px; padding: 2rem; }
.art-wrapper { width: clamp(140px, 45vw, 220px); aspect-ratio: 16 / 25; margin-bottom: 2.5rem; }
.art-wrapper svg { width: 100%; height: 100%; overflow: visible; }
.draw-vine { stroke-dasharray: 400; stroke-dashoffset: 400; animation: drawLine 2.2s cubic-bezier(0.35, 0.1, 0.25, 1) forwards; }
.v1 { animation-delay: 0.05s; } .v2 { animation-delay: 0.3s; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.grow-leaf-anim { opacity: 0; transform: scale(0); transform-origin: 0 0; animation: leafGrow 1.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
@keyframes leafGrow { 0% { opacity: 0; transform: scale(0); } 40% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
.bloom-out { opacity: 0; transform: scale(0.4) rotate(20deg); animation: bloom 1.8s cubic-bezier(0.25, 1, 0.3, 1) forwards; }
.bloom-mid { opacity: 0; transform: scale(0.2) rotate(-30deg); animation: bloom 1.7s cubic-bezier(0.25, 1, 0.3, 1) forwards; }
.bloom-in  { opacity: 0; transform: scale(0.1) rotate(40deg); animation: bloom 1.5s cubic-bezier(0.21, 1.02, 0.73, 1) forwards; }
@keyframes bloom { to { opacity: 1; transform: scale(1) rotate(0deg); } }
.ambient-sway { transform-origin: 100px 300px; animation: swayEntire 14s ease-in-out infinite; }
@keyframes swayEntire { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.2deg); } }
.breathe-flower { animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03) rotate(1deg); } }
.pre-names {
    display: flex; align-items: baseline; justify-content: center; gap: 0.2em;
    opacity: 0; transform: translateY(15px);
    animation: fadeUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 2.8s forwards;
    margin: 0; color: #fff;
}
.pre-names .pn {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(2.35rem, 9vw, 3.1rem);
    line-height: 1;
    letter-spacing: -0.02em;
}
.pre-names .pa {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1.35rem, 5vw, 1.75rem);
    line-height: 1;
    color: rgba(255,255,255,.78);
    margin: 0 0.08em;
}
.pre-where {
    font-family: var(--ui);
    font-weight: 400;
    font-size: clamp(0.68rem, 1.8vw, 0.78rem);
    line-height: 1.4;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(247, 243, 234, .78);
    margin-top: 1.1rem;
    opacity: 0; transform: translateY(10px);
    animation: fadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 3.0s forwards;
    text-align: center;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
/* ═══ HERO ═══ */
.hero { position: relative; height: 100svh; overflow: hidden; color: #fff; contain: layout style; }
.hero-img-box { position: absolute; inset: 0; }
.hero-img {
    width: 100%; height: 100%; object-fit: cover; object-position: center center;
    animation: heroSettle 11s var(--ease) forwards;
    /* PERF: GPU layer for the animation */
    will-change: transform;
}
@keyframes heroSettle { from { transform: scale(1.05) translateZ(0); } to { transform: scale(1) translateZ(0); } }
/* Stronger bottom scrim so names stay readable on the tree photo */
.hero-shade {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(to top, rgba(12,10,8,.92) 0%, rgba(12,10,8,.72) 18%, rgba(12,10,8,.28) 42%, transparent 62%),
        linear-gradient(to top, rgba(12,10,8,.35) 0%, transparent 35%);
}
.hero-text {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    padding: 0 var(--pad) clamp(2.75rem, 8vh, 5.5rem);
    text-align: center;
    opacity: 0; transform: translateY(20px);
}
.hero-kicker {
    font-family: var(--ui);
    font-weight: 400;
    font-size: clamp(0.7rem, 1.6vw, 0.8rem);
    line-height: 1.3;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255,255,255,.88);
    margin-bottom: 0.85rem;
    text-shadow: var(--text-shadow);
}
.hero-names {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(2.8rem, 10.5vw, 5.75rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: #fff;
    text-shadow: var(--text-shadow);
}
.hero-date {
    font-family: var(--ui);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(0.72rem, 1.7vw, 0.88rem);
    line-height: 1.4;
    color: rgba(255,255,255,.86);
    letter-spacing: 0.14em;
    margin-top: 1rem;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
/* Plain ampersand — same face as names, no script */
.script-amp {
    font-family: var(--display);
    font-weight: 500;
    font-style: normal;
    font-size: 0.72em;
    line-height: 1;
    color: rgba(255,255,255,.82);
    margin: 0 0.14em;
    vertical-align: 0.02em;
}
/* ═══ VINE ═══ */
main { position: relative; }
.vine-thread {
    position: absolute; left: 5px; top: 0; width: 20px; height: 100%; z-index: 5; pointer-events: none;
    transform: translateZ(0);
    will-change: auto;
}
.vine-stem { stroke: var(--sage); fill: none; stroke-dasharray: 6000; stroke-dashoffset: 6000; }
.vine-leaf { stroke: var(--sage); fill: rgba(122,139,110,.15); stroke-dasharray: 50; stroke-dashoffset: 50; }
.vine-bud { fill: var(--sage); opacity: 0; }
.vine-tendril { stroke: var(--sage); fill: none; stroke-dasharray: 40; stroke-dashoffset: 40; }
.vine-flower { opacity: 0; }
.vine-petal { opacity: 0; }
/* ═══ SECTIONS — with CSS containment ═══ */
.sect {
    position: relative; z-index: 1; padding-bottom: var(--gap); overflow: hidden;
    /* PERF: contain layout/style/paint so browser doesn't recalc the world */
    contain: layout style paint;
}
.sect--paper { background: var(--paper); }
.sect--sage { background: var(--sage-wash); }
.sect--pink { background: var(--pink-wash); }
.sect--terra { background: var(--terra-wash); }
/* .sect--dark explicitly cancels containment from .sect base class.
   It houses .wipe-wrap which uses ScrollTrigger pin (position: fixed).
   contain: paint/layout creates a containing block that breaks fixed positioning. */
.sect--dark { background: var(--dark); color: var(--cream); overflow: hidden; contain: none; }
.diagonal-top { clip-path: polygon(0 clamp(14px, 2.5vw, 26px), 100% 0, 100% 100%, 0 100%); margin-top: calc(-1 * clamp(14px, 2.5vw, 26px)); padding-top: calc(clamp(14px, 2.5vw, 26px) + 1rem); }
/* ═══ BRACKET QUOTES ═══ */
.epi { padding: var(--gap) var(--pad); display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.bracket-quote { display: flex; align-items: stretch; gap: .75rem; max-width: 36rem; }
.bracket { width: 10px; flex-shrink: 0; color: var(--sage); }
.bracket-line { stroke: currentColor; fill: none; stroke-dasharray: 150; stroke-dashoffset: 150; }
.bracket-quote blockquote { font: italic 400 clamp(.92rem, 2.6vw, 1.08rem)/2 var(--body); color: var(--ink-caption); text-align: center; opacity: 0; transform: translateY(12px); }
/* One small mark under the quote — leaf pair + gold bud */
.epi-mark {
    width: 48px; height: auto; display: block;
    opacity: 0; transform: translateY(6px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.epi-mark.is-in { opacity: 1; transform: translateY(0); }
/* ═══ CHAPTERS ═══ */
.chapter { padding: 0; }
.ch-head { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: var(--gap) var(--pad) clamp(1.25rem, 3.5vh, 2.25rem); opacity: 0; }
.ch-head--light { color: var(--cream); }
.ch-orn { width: clamp(150px, 48vw, 200px); height: auto; color: var(--sage); }
.ch-orn--light { color: var(--sage-light); }
.orn-l { stroke: currentColor; fill: none; stroke-linecap: round; }
.orn-lf { stroke: currentColor; fill: rgba(122,139,110,.1); }
.orn-ring { stroke: currentColor; fill: none; }
.orn-num { font-family: var(--ui); font-weight: 500; fill: currentColor; letter-spacing: .04em; }
.ch-title {
    font-family: var(--display);
    font-weight: 600;
    font-style: normal;
    font-size: clamp(1.12rem, 3.2vw, 1.45rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.chapter-note { font: italic 400 clamp(.88rem, 2.5vw, 1rem)/2 var(--body); color: var(--ink-caption); text-align: center; max-width: 30ch; margin: 1rem auto var(--gap); padding: 0 var(--pad); opacity: 0; transform: translateY(10px); }
.dark-note {
    font-family: var(--display);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(.92rem, 2.5vw, 1.05rem);
    line-height: 1.75;
    color: var(--cream-cap);
    text-align: center;
    max-width: 34ch;
    margin: 0 auto 2rem;
    padding: 0 var(--pad);
    opacity: 0; transform: translateY(10px);
}
/* ═══ ALBUM PHOTOS — clean fade-up reveal (no warm filter) ═══ */
.album-photo {
    position: relative; opacity: 0; transform: translateY(16px);
}
.album-photo img {
    width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: 2px;
}
.album-photo .portrait-img { aspect-ratio: 2/3; }
.album--detail img { aspect-ratio: 1/1; }
/* img-wrap kept for structure; no brown overlay */
.album-photo .img-wrap { position: relative; display: block; }

/* PERF: shadow on pseudo-element — doesn't repaint with the image */
.album-photo::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 2px;
    box-shadow: 0 4px 20px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08);
    pointer-events: none;
    z-index: 1;
}
.sect--dark .album-photo::after { box-shadow: 0 6px 30px rgba(0,0,0,.5); }

/* ARCH */
.arch img { border-radius: 999px 999px 6px 6px; }
.arch::after { border-radius: 999px 999px 6px 6px; }
.arch .mount { display: none; }

/* ARCH CROWN — only on the one intentional laughing portrait */
.arch-wrap { position: relative; width: 100%; padding-top: 18px; }
.arch-crown {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 78%; max-width: 200px; z-index: 3; color: var(--sage);
    pointer-events: none;
    overflow: visible;
}
.crown-line { stroke: currentColor; fill: none; stroke-dasharray: 280; stroke-dashoffset: 280; }
.crown-leaf { stroke: currentColor; stroke-dasharray: 40; stroke-dashoffset: 40; }
.crown-bud { opacity: 0; }

/* CORNER MOUNTS — quiet gold photo corners */
.mount { position: absolute; width: 11px; height: 11px; border: solid var(--gold); border-width: 0; opacity: .32; z-index: 2; }
.mount.tl { top: -2px; left: -2px; border-top-width: 1px; border-left-width: 1px; }
.mount.tr { top: -2px; right: -2px; border-top-width: 1px; border-right-width: 1px; }
.mount.bl { bottom: -2px; left: -2px; border-bottom-width: 1px; border-left-width: 1px; }
.mount.br { bottom: -2px; right: -2px; border-bottom-width: 1px; border-right-width: 1px; }
.sect--dark .mount { opacity: .28; border-color: rgba(184,158,111,.65); }
/* ═══ BOTANICAL BEDS ═══ */
.botanical-bed { position: relative; }
.bed-art { position: absolute; z-index: 0; pointer-events: none; }
.botanical-bed .album-photo,
.botanical-bed .arch-wrap,
.botanical-bed .cinema-img { position: relative; z-index: 1; }

/* Mobile-first beds: hug the frame, stay inside section pad */
.bed--left .bed-art { left: -12px; top: -10px; width: calc(100% + 22px); height: calc(100% + 24px); }
/* First-look: stem on photo edge, leaves spill right */
.bed--right .bed-art,
.bed-art--firstlook {
    right: -4%;
    top: 0;
    width: 16%;
    height: 100%;
    max-width: 54px;
    min-width: 40px;
}
/* Flash-kiss: dual vines follow the arch outline */
.bed--both .bed-art,
.bed-art--flash {
    left: -9%;
    top: -4%;
    width: 118%;
    height: 108%;
    overflow: visible;
    opacity: .92;
}
/* Cake vine: stem on frame edge, leaves spill out lower-right */
.bed--br .bed-art,
.bed-art--cake {
    right: -8%;
    bottom: -2%;
    top: auto;
    left: auto;
    width: 34%;
    height: 68%;
    max-width: 96px;
    overflow: visible;
}
.bed--tr .bed-art { right: -25px; top: -20px; width: calc(100% + 35px); height: calc(100% + 30px); }
.bed--corners { position: relative; margin-bottom: var(--gap); }
.bed--corners .bed-art { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); z-index: 0; }
.bed--corners .cinema-img { position: relative; z-index: 1; margin-bottom: 0; }

/* PERF: CSS-driven transitions — compositor thread, not GSAP main thread.
   JS just adds .drawn / .bloomed classes; browser handles the interpolation. */
.bed-stem { stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 1.4s var(--ease); }
.bed-leaf { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .7s var(--ease); }
.bed-tendril { stroke-dasharray: 50; stroke-dashoffset: 50; transition: stroke-dashoffset .9s var(--ease); }
.bed-bud { opacity: 0; transform: scale(.3); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.34,1.56,.64,1); }
.bed-berry { opacity: 0; transform: scale(0); transition: opacity .4s var(--ease), transform .5s cubic-bezier(.34,1.56,.64,1); }
.bed-curl { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 1.2s var(--ease); }
.bed-petal { opacity: 0; transform: scale(.2) rotate(-30deg); transform-origin: center; transition: opacity .5s var(--ease), transform .7s cubic-bezier(.34,1.56,.64,1); }

/* .drawn = stroke draws in; .bloomed = opacity + scale pop */
.bed-stem.drawn { stroke-dashoffset: 0; }
.bed-leaf.drawn { stroke-dashoffset: 0; }
.bed-tendril.drawn { stroke-dashoffset: 0; }
.bed-curl.drawn { stroke-dashoffset: 0; }
.bed-bud.bloomed { opacity: 1; transform: scale(1); }
.bed-berry.bloomed { opacity: 1; transform: scale(1); }
.bed-petal.bloomed { opacity: .6; transform: scale(1) rotate(0deg); }

/* Static beds — pre-drawn, just fade the whole art in */
[data-bed="static"] .bed-art { opacity: 0; }
[data-bed="static"] .bed-stem { stroke-dashoffset: 0; }
[data-bed="static"] .bed-leaf { stroke-dashoffset: 0; }
[data-bed="static"] .bed-tendril { stroke-dashoffset: 0; }
[data-bed="static"] .bed-curl { stroke-dashoffset: 0; }
[data-bed="static"] .bed-bud { opacity: 1; transform: scale(1); }
[data-bed="static"] .bed-berry { opacity: 1; transform: scale(1); }
[data-bed="static"] .bed-petal { opacity: .6; transform: scale(1) rotate(0deg); }

/* Predrawn beds — zero transitions, zero compositor overhead, pure decoration */
[data-bed="none"] .bed-art { opacity: 1; }
[data-bed="none"] .bed-stem,
[data-bed="none"] .bed-leaf,
[data-bed="none"] .bed-tendril,
[data-bed="none"] .bed-curl { stroke-dashoffset: 0; transition: none; }
[data-bed="none"] .bed-bud,
[data-bed="none"] .bed-berry { opacity: 1; transform: scale(1); transition: none; }
[data-bed="none"] .bed-petal { opacity: .6; transform: scale(1) rotate(0deg); transition: none; }

/* BOTANICAL DIVIDERS — sparse, quiet */
.botanical-break { display: flex; justify-content: center; padding: 1.25rem 0 .25rem; }
.botan-div { width: clamp(72px, 28vw, 120px); height: auto; color: var(--sage); opacity: .75; }
.bd-stem { stroke-dasharray: 150; stroke-dashoffset: 150; transition: stroke-dashoffset .8s var(--ease); }
.bd-leaf { stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .5s var(--ease); }
.bd-bud { opacity: 0; transform: scale(.3); transition: opacity .4s var(--ease), transform .5s cubic-bezier(.34,1.56,.64,1); }
.bd-stem.drawn { stroke-dashoffset: 0; }
.bd-leaf.drawn { stroke-dashoffset: 0; }
.bd-bud.bloomed { opacity: 1; transform: scale(1); }
/* ═══ BOKEH — paused by default, JS enables via IntersectionObserver ═══ */
.bokeh-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; contain: strict; }
.bokeh-orb {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(184,158,111,.12) 0%, rgba(184,158,111,0) 70%);
    animation: bFloat linear infinite;
    animation-play-state: paused;
    transform: translateZ(0);
    /* PERF: will-change only when animating — saves VRAM when off-screen */
}
.bokeh-orb.is-playing { animation-play-state: running; will-change: transform, opacity; }
.b1 { width: 100px; height: 100px; top: 10%; left: 12%; animation-duration: 18s; }
.b2 { width: 70px; height: 70px; top: 30%; right: 15%; animation-duration: 22s; animation-delay: -5s; }
.b3 { width: 50px; height: 50px; top: 55%; left: 30%; animation-duration: 16s; animation-delay: -8s; }
.b4 { width: 80px; height: 80px; top: 75%; right: 10%; animation-duration: 20s; animation-delay: -3s; }
@keyframes bFloat {
    0%   { transform: translate3d(0,0,0) scale(1);    opacity: .25; }
    25%  { transform: translate3d(12px,-20px,0) scale(1.08); opacity: .4; }
    50%  { transform: translate3d(-8px,-40px,0) scale(.92);  opacity: .25; }
    75%  { transform: translate3d(16px,-24px,0) scale(1.04); opacity: .35; }
    100% { transform: translate3d(0,0,0) scale(1);    opacity: .25; }
}
/* ═══ SWIPE GALLERY — mobile-first ═══ */
.swipe-gallery { padding: 0 0 .25rem; margin-bottom: var(--gap); }
.swipe-track {
    display: flex; gap: .65rem; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: .65rem var(--pad) 1.1rem; scrollbar-width: none;
}
.swipe-track::-webkit-scrollbar { display: none; }
/* Almost full-bleed cards on phone */
.swipe-slide { flex: 0 0 min(86vw, 340px); scroll-snap-align: center; transition: transform .4s var(--ease); }
.swipe-slide .album-photo { width: 100%; }
.swipe-dots { display: flex; justify-content: center; gap: 6px; padding: .45rem 0 0; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-muted); transition: all .3s; cursor: pointer; }
.dot.active { background: var(--sage); transform: scale(1.3); }

/* Gentle tilts — lighter on mobile so photos stay readable */
.tilt-a { transform: rotate(-1.2deg); }
.tilt-b { transform: rotate(1.6deg); }
.tilt-c { transform: rotate(-0.6deg); }
.tilt-d { transform: rotate(2deg); }

/* Mobile zigzag */
.spread--left .album-photo,
.spread--left .botanical-bed,
.spread--left .arch-wrap { margin-right: auto; }
.spread--right .album-photo,
.spread--right .botanical-bed,
.spread--right .arch-wrap { margin-left: auto; }
/* ═══ LAYOUTS — mobile first: photos own the screen ═══ */
.spread {
    display: grid;
    gap: 1rem;
    padding: 0 var(--pad);
    margin-bottom: var(--gap);
}
/* Wide enough to feel intentional on a phone */
.spread .album-photo,
.spread .botanical-bed,
.spread .arch-wrap { width: min(88%, 340px); max-width: 340px; }
.spread .arch-wrap .album-photo { width: 100%; max-width: none; }

.spread-text { opacity: 0; transform: translateY(10px); }
.spread-text p {
    font: italic 400 clamp(.9rem, 2.4vw, 1rem)/1.85 var(--body);
    color: var(--ink-caption);
    max-width: 28ch;
}
.spread-note {
    font: italic 400 clamp(.9rem, 2.4vw, 1rem)/1.85 var(--body);
    color: var(--ink-caption);
    text-align: center;
    max-width: 28ch;
    margin-top: 1.25rem;
    opacity: 0; transform: translateY(10px);
}
.spread--center {
    display: flex; flex-direction: column; align-items: center;
    padding: 0 var(--pad); margin-bottom: var(--gap); gap: 1rem;
}
.spread--center .album-photo,
.spread--center .botanical-bed { width: min(86%, 340px); max-width: 340px; }
.spread--center .bed--both { width: min(92%, 380px); max-width: 380px; }
.spread--center .bed--both .album-photo { width: 100%; max-width: none; }
.spread--center .bed--tr { width: min(88%, 350px); max-width: 350px; }
.spread--center .bed--tr .album-photo { width: 100%; max-width: none; }

.solo-wide { padding: 0 var(--pad); margin-bottom: var(--gap); }
.solo-wide .album-photo { width: min(92%, 450px); max-width: 450px; }

/* Cake: photo first, one quiet vine */
.cake-moment {
    display: flex; flex-direction: column; align-items: center;
    padding: 0 var(--pad) var(--gap);
}
.cake-moment .botanical-bed {
    width: min(72%, 260px);
    max-width: 260px;
    padding: 0 1.15rem .9rem 0;
    box-sizing: content-box;
    overflow: visible;
}
/* Portrait beds: outer room so vines aren't clipped by section overflow */
.spread .botanical-bed.bed--right {
    padding: .25rem .55rem .15rem 0;
    box-sizing: content-box;
    overflow: visible;
}
.spread .botanical-bed.bed--both {
    padding: .7rem .75rem .3rem;
    box-sizing: content-box;
    overflow: visible;
}
.cake-moment .album-photo { width: 100%; }
.cake-note {
    font: italic 400 clamp(.9rem, 2.4vw, 1rem)/1.85 var(--body);
    color: var(--ink-caption);
    text-align: center;
    max-width: 26ch;
    margin-top: 1.1rem;
    opacity: 0; transform: translateY(10px);
}

.ceremony-pair {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .65rem; padding: 0 var(--pad); margin-bottom: var(--gap);
    align-items: end;
}
.ceremony-pair .album-photo { width: 100%; height: fit-content; }
.ceremony-pair .arch-wrap { width: 100%; }
.ceremony-pair .arch-wrap .album-photo { width: 100%; }

.cinema-img { width: 100%; overflow: hidden; margin-bottom: var(--gap); position: relative; opacity: 0; transform: translateY(14px); }
.cinema-img img {
    width: 100%; aspect-ratio: 4/3; object-fit: cover;
    display: block;
}
@media (min-width: 480px) {
    .cinema-img img { aspect-ratio: 16/9; }
}
/* no warm-tone overlay — true photo colors only */
.cinema-img--paper { margin: 0 var(--pad) var(--gap); width: auto; }
.cinema-img--paper img { border-radius: 2px; box-shadow: 0 4px 20px rgba(0,0,0,.12); }
/* ═══ CASTLE — static photo (no scale / pin / parallax) ═══ */
.wipe-wrap {
    position: relative; width: 100%; background: var(--dark);
}
.wipe-inner {
    display: flex; align-items: center; justify-content: center;
    padding: 2.5rem var(--pad) 3rem;
}
.wipe-frame {
    position: relative; width: 100%; max-width: min(92vw, 900px); aspect-ratio: 3/2;
    overflow: hidden; border-radius: 3px;
    box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.wipe-frame img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center center;
    display: block;
}
/* ═══ CLOSING ═══ */
.closing { background: var(--dark); color: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50vh; padding: var(--gap) var(--pad) clamp(3rem, 8vh, 5rem); text-align: center; }
.closing-container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 600px; padding: 2rem; }
.wreath-wrapper { width: clamp(240px, 75vw, 400px); aspect-ratio: 1 / 1; position: relative; margin-bottom: 1.5rem; }
.wreath-wrapper svg { width: 100%; height: 100%; overflow: visible; }
.draw-ring-clara { stroke-dasharray: 380; stroke-dashoffset: 380; transform-origin: 100px 100px; transform: rotate(90deg); }
.draw-ring-elliot { stroke-dasharray: 410; stroke-dashoffset: 410; transform-origin: 100px 100px; transform: rotate(90deg) scale(1, -1); }
.closing.is-visible .draw-ring-clara { animation: drawCircle 3.5s cubic-bezier(0.35, 0.1, 0.25, 1) forwards; }
.closing.is-visible .draw-ring-elliot { animation: drawCircle 3.5s cubic-bezier(0.35, 0.1, 0.25, 1) 0.4s forwards; }
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
.drift-petal { opacity: 0; transform-origin: center; }
.closing.is-visible .drift-petal { animation: drift 15s linear infinite; }
@keyframes drift { 0% { opacity: 0; transform: translate(0, -10px) rotate(0deg) scale(0.4); } 10% { opacity: 0.6; } 70% { opacity: 0.6; } 100% { opacity: 0; transform: translate(-30px, 80px) rotate(200deg) scale(0.4); } }
.close-text { font-family: var(--display); font-size: 0.65rem; font-weight: 500; font-style: italic; fill: #ffffff; text-anchor: middle; filter: drop-shadow(0px 2px 5px rgba(0,0,0,0.9)); opacity: 0; transform: translateY(8px); }
.closing.is-visible .close-text { animation: fadeUp 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 4s forwards; }
.closing.is-visible .close-text.delay { animation-delay: 4.8s; font-size: 0.75rem; }
.seal-star { opacity: 0; transform-origin: 100px 30px; transform: scale(0); }
.closing.is-visible .seal-star { animation: starPop 2s cubic-bezier(0.3, 1.5, 0.6, 1) 3.5s forwards; }
@keyframes starPop { 100% { opacity: 1; transform: scale(1) rotate(180deg); } }
.final-names { display: flex; align-items: baseline; gap: 0.25em; opacity: 0; transform: translateY(15px); margin: 0; }
.closing.is-visible .final-names { animation: fadeUp 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 5.5s forwards; }
.final-names .pn {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.9rem, 7vw, 2.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}
.final-names .pa {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1.1rem, 4vw, 1.4rem);
    line-height: 1;
    color: rgba(255,255,255,.78);
    margin: 0 0.1em;
}
.final-where {
    font-family: var(--ui);
    font-weight: 400;
    font-size: clamp(0.62rem, 1.5vw, 0.72rem);
    line-height: 1.4;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(247, 243, 234, .78);
    margin-top: 1rem;
    opacity: 0; transform: translateY(10px);
    text-align: center;
}
.closing.is-visible .final-where { animation: fadeUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 6s forwards; }
.wreath-sway { transform-origin: 100px 180px; }
.closing.is-visible .wreath-sway { animation: swayWreath 16s ease-in-out infinite 5s; }
@keyframes swayWreath { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1deg); } }

/* Map inline pseudo styles */
.closing .bloom-out, .closing .bloom-mid, .closing .bloom-in { animation: none; opacity: 0; }
.closing.is-visible .bloom-out { animation-name: bloom; animation-duration: 3s; animation-fill-mode: forwards; }
.closing.is-visible .bloom-mid { animation-name: bloom; animation-duration: 2.8s; animation-fill-mode: forwards; }
.closing.is-visible .bloom-in { animation-name: bloom; animation-duration: 2.5s; animation-fill-mode: forwards; }
.closing .breathe-flower { animation: none; }
.closing.is-visible .breathe-flower { animation-name: breathe; animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.closing .grow-leaf-anim { animation: none; opacity: 0; }
.closing.is-visible .grow-leaf-anim { animation-name: leafGrow; animation-duration: 2.5s; animation-fill-mode: forwards; }
.closing .gold-core { opacity: 0; }
.closing.is-visible .gold-core { animation: bloom 1.5s forwards 5s; }
/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: rgba(122,139,110,.3); border-radius: 10px; }
::selection { background: var(--sage); color: var(--paper); }
/* ═══ DESKTOP ═══ */
@media (min-width: 768px) {
    .hero-text { text-align: left; padding-left: clamp(3rem, 7vw, 5.5rem); }
    .vine-thread { left: 12px; width: 24px; }
    .spread { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 2.5rem; }
    .spread .album-photo,
    .spread .botanical-bed,
    .spread .arch-wrap { width: 100%; max-width: 420px; }
    .spread-text { padding-bottom: 1.5rem; }
    .spread--right { grid-template-columns: 1fr 1.2fr; }
    .spread--right .album-photo,
    .spread--right .botanical-bed,
    .spread--right .arch-wrap { order: 2; }
    .spread--right .spread-text { order: 1; text-align: right; }
    .spread--right .spread-text p { margin-left: auto; }
    .spread--center { flex-direction: row; justify-content: center; gap: 3rem; }
    .spread--center .album-photo,
    .spread--center .botanical-bed { width: 38%; max-width: 340px; }
    .spread-note { margin-top: 0; text-align: left; align-self: center; }
    .solo-wide .album-photo { max-width: 500px; }
    .swipe-track { overflow: visible; flex-wrap: wrap; padding: 1rem var(--pad) 1.5rem; }
    .swipe-slide { flex: 0 0 calc(50% - .375rem); scroll-snap-align: none; }
    .swipe-dots { display: none; }
    .tilt-a { transform: rotate(-1.8deg); }
    .tilt-b { transform: rotate(2.5deg); }
    .tilt-c { transform: rotate(-0.8deg); }
    .tilt-d { transform: rotate(3.5deg); }
    .cinema-img img { aspect-ratio: 21/9; }
    .cinema-img--paper img { aspect-ratio: 16/9; }
    .ceremony-pair { gap: 1.5rem; }
    .ceremony-pair { gap: 2rem; }
    .cake-moment { flex-direction: row; justify-content: center; gap: 3rem; }
    .cake-moment .botanical-bed { width: 35%; max-width: 300px; padding: 0 1.75rem 1.35rem 0; }
    .cake-note { text-align: left; margin-top: 0; align-self: center; }
    .wipe-frame { max-width: min(92vw, 960px); }
    .bed--left .bed-art { left: -36px; top: -16px; width: calc(100% + 48px); height: calc(100% + 36px); }
    .bed--right .bed-art,
    .bed-art--firstlook { right: -8%; top: -3%; width: 20%; height: 106%; max-width: 88px; }
    .bed--both .bed-art,
    .bed-art--flash { left: -12%; top: -6%; width: 124%; height: 112%; }
    .bed--br .bed-art,
    .bed-art--cake { right: -8%; bottom: -4%; width: 44%; height: 76%; max-width: 140px; }
    .arch-wrap { padding-top: 20px; }
    .arch-crown { top: 0; width: 80%; max-width: 220px; }
    .spread .botanical-bed.bed--right { padding: .5rem 1.25rem .35rem 0; }
    .spread .botanical-bed.bed--both { padding: .85rem 1rem .4rem; }
}

@media (min-width: 1100px) {
    .sect > .chapter, .ch-head, .spread, .swipe-gallery, .cake-moment, .ceremony-pair, .solo-wide { max-width: 1050px; margin-left: auto; margin-right: auto; }
    .cinema-img, .bed--corners { max-width: 1200px; margin-left: auto; margin-right: auto; }
    .cinema-img--paper { max-width: 900px; }
    .wipe-frame { max-width: 900px; }
    #ch-details .swipe-slide { flex: 0 0 calc(25% - .5625rem); }
}
/* ═══ LIGHTBOX — tap to view full image ═══ */
/* Clickable images: subtle cursor hint */
.album-photo[data-lb] img,
.cinema-img[data-lb] img { cursor: zoom-in; }

/* Overlay — background is set inline by JS to match the section */
.lb-overlay {
    position: fixed; inset: 0; z-index: 9500;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(1rem, 4vw, 2.5rem);
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
    transform: translateZ(0);
    cursor: zoom-out;
}
/* PERF: will-change only when open — saves VRAM when lightbox is closed */
.lb-overlay.is-open { opacity: 1; visibility: visible; will-change: opacity; }
body.lb-open { overflow: hidden; }

/* Image inside lightbox */
.lb-overlay img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    transform: scale(.92);
    transition: transform .4s cubic-bezier(.16,1,.3,1);
    cursor: default;
}
.lb-overlay.is-open img { transform: scale(1); }

/* Close button */
.lb-close {
    position: absolute; top: clamp(.8rem, 2.5vw, 1.5rem); right: clamp(.8rem, 2.5vw, 1.5rem);
    width: 36px; height: 36px;
    background: none; border: none; cursor: pointer;
    opacity: .5; transition: opacity .2s;
    z-index: 1;
}
.lb-close:hover, .lb-close:focus { opacity: 1; }
.lb-close::before, .lb-close::after {
    content: ''; position: absolute;
    top: 50%; left: 50%;
    width: 22px; height: 1.5px;
    background: currentColor;
}
.lb-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.lb-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Dark sections get light close button */
.lb-overlay.lb--dark { color: var(--cream); }
.lb-overlay.lb--dark img { box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.lb-overlay.lb--light { color: var(--ink); }
/* Reduced motion keeps the composition, but removes time-based choreography. */
html.reduced-motion .hero-img {
    animation: none;
    transform: none;
}

html.reduced-motion .hero-text,
html.reduced-motion .ch-head,
html.reduced-motion .spread-text,
html.reduced-motion .reveal-text,
html.reduced-motion .chapter-note,
html.reduced-motion .dark-note,
html.reduced-motion .cake-note,
html.reduced-motion .spread-note,
html.reduced-motion .album-photo,
html.reduced-motion .final-names,
html.reduced-motion .final-where,
html.reduced-motion .close-text {
    opacity: 1;
    transform: none;
}

html.reduced-motion .epi-mark {
    opacity: 1; transform: none; transition: none;
}
html.reduced-motion .bracket-quote blockquote,
html.reduced-motion .album-photo,
html.reduced-motion .cinema-img,
html.reduced-motion .album-photo img,
html.reduced-motion .cinema-img img {
    opacity: 1;
    transform: none;
}

html.reduced-motion .vine-stem,
html.reduced-motion .vine-leaf,
html.reduced-motion .vine-tendril,
html.reduced-motion .bracket-line,
html.reduced-motion .crown-line,
html.reduced-motion .crown-leaf,
html.reduced-motion .bd-stem,
html.reduced-motion .bd-leaf,
html.reduced-motion .bed-stem,
html.reduced-motion .bed-leaf,
html.reduced-motion .bed-tendril,
html.reduced-motion .bed-curl,
html.reduced-motion .draw-ring-clara,
html.reduced-motion .draw-ring-elliot {
    stroke-dashoffset: 0;
}

html.reduced-motion .vine-leaf,
html.reduced-motion .vine-bud,
html.reduced-motion .vine-flower,
html.reduced-motion .crown-bud,
html.reduced-motion .bd-bud,
html.reduced-motion .bed-bud,
html.reduced-motion .bed-berry,
html.reduced-motion .bed-petal,
html.reduced-motion [data-bed="static"] .bed-art,
html.reduced-motion .seal-star,
html.reduced-motion .gold-core {
    opacity: 1;
    transform: none;
}

html.reduced-motion .bd-bud,
html.reduced-motion .bed-bud,
html.reduced-motion .bed-berry,
html.reduced-motion .bed-petal,
html.reduced-motion .grow-leaf-anim,
html.reduced-motion .bloom-out,
html.reduced-motion .bloom-mid,
html.reduced-motion .bloom-in {
    opacity: 1;
    transform: none;
}

html.reduced-motion .ambient-sway,
html.reduced-motion .breathe-flower,
html.reduced-motion .wreath-sway,
html.reduced-motion .drift-petal,
html.reduced-motion .seal-star,
html.reduced-motion .final-names,
html.reduced-motion .final-where,
html.reduced-motion .close-text,
html.reduced-motion .draw-ring-clara,
html.reduced-motion .draw-ring-elliot,
html.reduced-motion .gold-core,
html.reduced-motion .grow-leaf-anim,
html.reduced-motion .bloom-out,
html.reduced-motion .bloom-mid,
html.reduced-motion .bloom-in {
    animation: none !important;
    transition: none !important;
}



html.reduced-motion .drift-petal {
    opacity: .45;
    transform: none;
}

html.reduced-motion .bokeh-orb {
    animation: none;
    opacity: .22;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}