/* ================================================================
   Zaccarie & Antoniana — styles.css
   One type system. One section rhythm. Motion allow-list only.
   ================================================================ */
:root{
  --olive:#4E5B40; --olive-deep:#3B4731; --olive-soft:#6E7D5C;
  --ivory:#F4F1E8; --paper:#EFEBE0; --paper-deep:#E3DFD2;
  --bg:#E7EADF; --alt:#DCE1D0; --sage:#9AA68A; --sage-deep:#6E7D5C;
  --ink:#2F3528; --ink-soft:#5B6350; --ink-faint:#878E7A; --line:rgba(47,53,40,.14);
  --gold:#C6A75B; --gold-hi:#F0DFA3; --gold-lo:#9A7A32; --gold-ink:#8C6D2A;
  --display:'Cormorant Garamond','Times New Roman',serif;
  --body:'EB Garamond',Georgia,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:64px;
  --wrap:720px; --wide:1120px; --mid:900px;
  --pad:clamp(56px,7vw,96px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden}
body.locked{overflow:hidden;height:100dvh}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;line-height:1.1}
p{margin:0 0 1em}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
[hidden]{display:none!important}
.paper-tex{position:absolute;inset:0;opacity:.45;mix-blend-mode:multiply;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .6 0 0 0 0 .55 0 0 0 0 .45 0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ============ ENVELOPE SCENE (film) ============ */
#scene{position:fixed;inset:0;z-index:50;overflow:hidden;background:#E7E3D6;display:grid;place-items:center}
#scene .bg{position:absolute;inset:-3%;background:center/cover no-repeat url(img/hero-courtyard-portrait.jpg)}
@media (min-aspect-ratio:1/1){#scene .bg{background-image:url(img/hero-courtyard-landscape.jpg)}}
#scene .veil{display:none}
.filmwrap{position:relative;overflow:hidden}
.filmwrap.portrait{height:100svh;width:100vw}

.filmwrap.landscape{height:100svh;width:100vw}

#openVid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Z & A on the cover, above the ribbon. Portrait cover: x13-87% y23-79%, ribbon ~y50%. Landscape cover: x20-80%, full height, ribbon ~y50% */
.cover-mono{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);display:flex;align-items:baseline;gap:.12em;font-family:var(--display);font-weight:500;letter-spacing:.12em;pointer-events:none;z-index:4;line-height:1}
.filmwrap.portrait .cover-mono{top:36%;font-size:clamp(34px,8.5svh,64px)}
.filmwrap.landscape .cover-mono{top:33%;font-size:clamp(34px,8.5svh,64px)}
.cover-mono i{font-style:italic;font-weight:300;font-size:.7em;transform:translateY(-.06em)}
/* stitched gold thread */
.stitch span,.stitch i{color:transparent;background:linear-gradient(160deg,#F2E3AE 0%,#D4B86A 45%,#A8873A 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 0 rgba(0,0,0,.5)) drop-shadow(0 0 1px rgba(0,0,0,.3))}
.hit{position:absolute;inset:0;background:transparent;border:0;cursor:pointer;z-index:12}
.tap{position:absolute;left:50%;top:86%;transform:translateX(-50%);white-space:nowrap;text-align:center;color:var(--ink);font-family:var(--display);font-size:15px;letter-spacing:.3em;text-transform:uppercase;padding:13px 26px 11px;border-radius:999px;border:1px solid rgba(140,109,42,.45);background:rgba(244,241,232,.85);z-index:5;pointer-events:none}
.filmwrap.landscape .tap{top:auto;bottom:5%}
.filmwrap.landscape .cover-mono{top:36%;font-size:clamp(30px,7.5svh,56px)}
.tap small{display:block;font-size:11px;letter-spacing:.22em;opacity:.7;margin-top:4px;text-transform:none}
.tap .lbl,.tap .ring{display:none}.tap .wait{opacity:.7}
.tap.ready .lbl,.tap.ready .ring{display:inline}.tap.ready .lbl{display:block}.tap.ready .wait{display:none}
.hit{cursor:wait}.tap.ready~.hit,body .filmwrap:has(.tap.ready) .hit{cursor:pointer}
.tap .ring{position:absolute;inset:-1px;border-radius:999px;border:1px solid rgba(140,109,42,.6);animation:ring 2.8s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.18);opacity:0}}
.forguest{position:absolute;left:50%;top:12%;transform:translateX(-50%);white-space:nowrap;color:var(--ink);font-family:var(--display);font-style:italic;font-size:clamp(20px,5.6vw,28px);font-weight:300;letter-spacing:.02em;z-index:5}
.filmwrap.landscape .forguest{top:7%}
.scenecard{position:fixed;z-index:60;border-radius:0;pointer-events:none;box-shadow:none}

/* ============ LANGUAGE TOGGLE ============ */
.lang{display:inline-flex;border:1px solid rgba(240,223,163,.45);border-radius:999px;padding:2px;background:rgba(35,43,30,.4)}
.lang button{border:0;background:transparent;color:var(--ivory);font-family:var(--display);font-size:13px;letter-spacing:.16em;padding:5px 11px;border-radius:999px;opacity:.65;transition:all .3s}
.lang button[aria-pressed="true"]{background:rgba(240,223,163,.95);color:var(--olive-deep);opacity:1}
.lang.dark{background:rgba(244,241,232,.75);border-color:rgba(53,46,39,.3)}
.lang.dark button{color:var(--ink);opacity:1;font-weight:500}
.lang.dark button[aria-pressed="true"]{background:var(--olive);color:var(--ivory)}

/* ============ APP SHELL / NAV ============ */
#app{visibility:hidden;opacity:0}
body.opened #app{visibility:visible;opacity:1}
body:not(.opened) #app{position:absolute;inset:0;height:100vh;overflow:hidden;pointer-events:none}

.nav{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--nav-h);padding-top:env(safe-area-inset-top);color:var(--ink);background:rgba(231,234,223,.96);box-shadow:0 1px 0 var(--line)}
.nav .in{max-width:1280px;margin:0 auto;height:100%;padding:0 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.nav .right{justify-self:end;display:flex;align-items:center;gap:14px}
.nav .mark{justify-self:center;text-decoration:none;color:var(--ink);display:grid;grid-template-columns:auto auto auto;align-items:baseline;column-gap:.18em;white-space:nowrap;font-family:var(--display);font-size:28px;letter-spacing:.12em;line-height:1;text-align:center;position:relative;padding:4px 10px}
.nav .mark .mamp{font-style:italic;font-weight:300;font-size:.72em;color:var(--gold-ink);transform:translateY(-.06em)}
.nav .mark small{grid-column:1/-1;font-size:9px;letter-spacing:.32em;color:var(--gold-ink);margin-top:4px;opacity:.9}
.nav .mark::before,.nav .mark::after{content:"";position:absolute;top:50%;width:18px;height:1px;background:currentColor;opacity:.35}
.nav .mark::before{right:100%}.nav .mark::after{left:100%}
.nav .rsvp-pill{white-space:nowrap;font-family:var(--display);font-size:14px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:9px 18px;border-radius:999px;background:var(--olive);color:var(--ivory);transition:background .3s,transform .3s}
.nav .rsvp-pill:hover{background:var(--olive-deep);transform:translateY(-1px)}
.nav .burger{display:inline-flex;align-items:center;gap:10px;justify-self:start;white-space:nowrap;background:transparent;border:0;font-family:var(--display);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);padding:8px 2px}
.nav .burger i{display:block;width:22px;height:1px;background:currentColor;position:relative}
.nav .burger i::before,.nav .burger i::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor}
.nav .burger i::before{top:-6px}.nav .burger i::after{top:6px}
@media (max-width:1023px){.nav .mark{font-size:22px}.nav .mark::before,.nav .mark::after{display:none}.nav .burger span{display:none}}

.menu{position:fixed;inset:0;z-index:65;background:var(--olive-deep);color:var(--ivory);display:grid;grid-template-rows:auto 1fr auto;padding:calc(env(safe-area-inset-top) + 16px) 24px 28px;clip-path:circle(0% at 40px 36px);transition:clip-path .7s var(--ease);visibility:hidden}
.menu.open{clip-path:circle(160% at 40px 36px);visibility:visible}
.menu .top{display:flex;justify-content:space-between;align-items:center;height:48px}
.menu .top .mark{font-family:var(--display);font-size:20px;letter-spacing:.28em;color:var(--ivory)}
.menu .top .mark i{font-style:italic;font-weight:300;color:var(--gold-hi);letter-spacing:0;font-size:.78em}
.menu .close{background:transparent;border:0;color:var(--ivory);font-family:var(--display);font-size:14px;letter-spacing:.2em;text-transform:uppercase}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;gap:0;max-width:560px;width:100%;margin:0 auto}
.menu li a{display:flex;flex-direction:column;gap:2px;font-family:var(--display);font-size:clamp(30px,6.4vw,42px);font-weight:300;text-decoration:none;color:var(--ivory);padding:14px 0;border-bottom:1px solid rgba(243,238,228,.12);opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.menu.open li a{opacity:1;transform:none}
.menu li a small{font-family:var(--display);font-style:italic;font-size:16px;color:var(--gold-hi);letter-spacing:.02em}
.menu li a.active{color:var(--gold-hi)}
.menu .bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;max-width:560px;width:100%;margin:0 auto}
.menu .bottom .wa{display:flex;gap:10px}
.menu .bottom .wa a{font-family:var(--display);font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ivory);border:1px solid rgba(243,238,228,.35);border-radius:999px;padding:8px 14px}
@media (max-height:640px){.menu li a{font-size:24px;padding:8px 0}.menu li a small{display:none}}

/* ============ SECTION RHYTHM ============ */
body.js-reveal .rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
body.js-reveal .rv.in{opacity:1;transform:none}
.sec{padding:var(--pad) 20px;scroll-margin-top:var(--nav-h)}
.sec.alt{background:var(--alt)}
.band{height:clamp(240px,42vh,480px)}
.wrap{max-width:var(--wrap);margin:0 auto}
.wrap.wide{max-width:var(--wide)}
.wrap.mid{max-width:var(--mid)}
.sh{margin-bottom:clamp(28px,4vw,44px);max-width:var(--wrap)}
.sh.center{margin-left:auto;margin-right:auto;text-align:center}
.sh.sub{margin-top:clamp(48px,7vw,80px)}
.kicker{font-family:var(--display);font-style:italic;color:var(--gold-ink);font-size:20px;margin-bottom:8px;font-weight:300;line-height:1.2}
.sh h2,.sh h1{font-size:clamp(34px,5vw,56px);font-weight:300;letter-spacing:.005em;line-height:1.05;margin-bottom:14px}
.sh p{color:var(--ink-soft);font-size:18px;max-width:600px;margin:0}
.sh.center p{margin:0 auto}
.h3lg{font-size:clamp(28px,4vw,40px);font-weight:300;margin-bottom:12px}
h3{font-size:24px;margin-bottom:6px}
.label{font-family:var(--display);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px}
.muted{color:var(--ink-soft)}
.fine{font-size:15px;color:var(--ink-faint);margin:18px 0 0;font-style:italic;font-family:var(--display);font-size:17px}
.center{text-align:center}
.prose p{font-size:19px;line-height:1.65;max-width:600px;margin-bottom:1.1em}
.prose.big p{font-size:clamp(20px,2.3vw,24px);line-height:1.55;font-family:var(--display);font-weight:400;max-width:640px}
.acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px}
.textlink{font-family:var(--display);font-style:italic;font-size:19px;color:var(--gold-ink);text-decoration:none;border-bottom:1px solid rgba(140,109,42,.4);padding-bottom:2px}
.textlink:hover{border-color:var(--gold-ink)}
.split{display:grid;gap:40px;align-items:start}
#storyFilm .split{align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px)}}
.photo{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--paper-deep)}
.photo.tall{aspect-ratio:4/5}
.photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){.photo.tall{aspect-ratio:3/2}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:10px 28px;border-radius:999px;border:1px solid transparent;font-family:var(--display);font-size:15px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s;text-align:center;line-height:1.25}
.btn.gold{background:var(--olive);color:var(--ivory);box-shadow:0 10px 24px rgba(35,43,30,.22)}
.btn.gold:hover{transform:translateY(-2px);background:var(--olive-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(53,46,39,.3);font-size:14px;min-height:46px;padding:8px 22px}
.btn.ghost:hover{border-color:var(--ink);background:rgba(53,46,39,.04)}
.btn.light{background:transparent;color:var(--ivory);border-color:rgba(243,238,228,.45);font-size:14px;min-height:46px;padding:8px 22px}
.btn.light:hover{border-color:var(--ivory);background:rgba(243,238,228,.1)}
.btn.solidlight{background:var(--ivory);color:var(--olive-deep);font-size:14px;min-height:46px;padding:8px 22px}

/* ============ 1. HERO / INVITATION CARD ============ */
.hero{min-height:100svh;display:grid;place-items:center;padding:calc(var(--nav-h) + 28px) 18px 70px;position:relative;overflow:hidden}
.hero .bgp{position:absolute;inset:0;background:url(img/hero-courtyard-landscape.jpg) center/cover}
@media (max-aspect-ratio:1/1){.hero .bgp{background-image:url(img/hero-courtyard-portrait.jpg)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(231,234,223,.12),rgba(231,234,223,.28) 55%,rgba(231,234,223,.92) 100%)}
.card{position:relative;z-index:1;width:min(92vw,520px);container-type:inline-size;aspect-ratio:1732/2424;border-radius:3px;overflow:hidden;box-shadow:0 40px 90px rgba(47,53,40,.32),0 2px 6px rgba(47,53,40,.14);background:#F4F1E8}
.card .art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}
.card .actions{position:absolute;left:12%;right:12%;top:87.6%;display:flex;flex-direction:column;align-items:center;gap:1.2cqw}
.card .actions .btn{min-height:0;height:7.4cqw;padding:0 6cqw;font-size:2.7cqw;letter-spacing:.2em;box-shadow:0 1.5cqw 4cqw rgba(47,53,40,.22)}
.rsvp-by{font-family:var(--display);font-style:italic;font-size:3cqw;color:#4A4F40;line-height:1.1}
@media (max-height:720px){.card{width:min(92vw,calc((100svh - 150px) * 1732 / 2424))}}
.scrollcue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:1}
.scrollcue i{display:block;width:1px;height:38px;background:linear-gradient(180deg,var(--gold-ink),transparent);animation:cue 2.2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0);opacity:0}30%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ============ COUNTDOWN ============ */
.count{padding:clamp(48px,7vw,80px) 20px;text-align:center;background:var(--alt)}
.count .lead{font-family:var(--display);font-style:italic;font-size:22px;color:var(--gold-ink);margin-bottom:18px;font-weight:300}
.count .nums{display:flex;justify-content:center;gap:clamp(16px,6vw,64px)}
.count .n{font-family:var(--display);font-weight:300;font-size:clamp(44px,12vw,96px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.count .l{font-family:var(--display);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);margin-top:8px}

/* ============ IMAGE BANDS ============ */
.band{position:relative;height:clamp(260px,46vh,520px);overflow:hidden;background:var(--paper-deep)}
.band img{width:100%;height:100%;object-fit:cover}
.band figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 24px;color:var(--ivory);font-family:var(--display);font-style:italic;font-size:18px;background:linear-gradient(180deg,transparent,rgba(35,43,30,.6))}

/* ============ 2. STRIP ============ */
.strip{background:var(--sage-deep);color:var(--ivory);padding:18px 20px}
.strip .in{max-width:var(--wide);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 0;font-family:var(--display);font-size:16px;letter-spacing:.1em;text-transform:uppercase}
.strip i{display:block;width:1px;height:16px;background:rgba(243,238,228,.3);margin:0 22px}
.strip .days b{font-weight:400;color:var(--gold-hi);font-size:1.15em}
@media (max-width:700px){.strip .in{display:grid;grid-template-columns:1fr;gap:6px;text-align:center;font-size:14px}.strip i{display:none}.strip .days{margin-top:4px}}

/* ============ 4. WEEKEND ============ */
.dayblock{margin-top:36px}
.dayblock+.dayblock{margin-top:48px}
.daylabel{font-family:var(--display);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid var(--gold-ink)}
.row{display:grid;grid-template-columns:110px 1fr;gap:16px 24px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.row .t{font-family:var(--display);font-size:20px;color:var(--ink);line-height:1.3;letter-spacing:.02em}
.row h4{font-size:24px;font-weight:400;margin-bottom:4px}
.row p{margin:0;color:var(--ink-soft)}
@media (max-width:560px){.row{grid-template-columns:1fr;gap:4px;padding:16px 0}.row .t{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}}

/* ============ 5. VENUE ============ */
.addr{font-family:var(--display);font-size:20px;line-height:1.45;margin:0 0 14px}
.map{position:relative;height:min(56vh,480px);border-radius:2px;overflow:hidden;background:var(--paper-deep);margin-top:clamp(32px,5vw,56px)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map .fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:url(img/trulli-golden-hour.jpg) center/cover}
.map .fallback::before{content:"";position:absolute;inset:0;background:rgba(35,43,30,.55)}
.map .fallback div{position:relative;color:var(--ivory)}
.map .fallback h3{font-size:30px;font-weight:300;margin-bottom:8px}
.map .fallback p{font-family:var(--display);font-style:italic;color:rgba(243,238,228,.85);margin-bottom:14px}

/* ============ 6. TRAVEL ============ */
.airports{display:grid;gap:14px}
@media (min-width:640px){.airports{grid-template-columns:1fr 1fr}}
.ap{padding:26px;border:1px solid var(--line);border-radius:2px;background:rgba(255,255,255,.35)}
.ap h3{font-size:24px;margin:0 0 2px}
.ap .mins{font-family:var(--display);font-style:italic;font-size:18px;color:var(--ink-soft);margin:0 0 10px}
.ap p{margin:0;color:var(--ink-soft);font-size:16px}
.dl{margin-top:28px}
.dl .i{display:grid;grid-template-columns:1fr;gap:4px;padding:20px 0;border-top:1px solid var(--line)}
.dl .i:last-child{border-bottom:1px solid var(--line)}
.dl .i h3{font-size:22px;margin:0}
.dl .i p{margin:0;color:var(--ink-soft)}
@media (min-width:700px){.dl .i{grid-template-columns:240px 1fr;gap:28px}}

/* ============ 7. STAY ============ */
.towns{display:grid;gap:0 clamp(24px,4vw,56px)}
@media (min-width:800px){.towns{grid-template-columns:1fr 1fr}}
.town{display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.town img{width:88px;height:88px;object-fit:cover;border-radius:2px}
.town h3{font-size:22px;margin:0;font-weight:400}
.town small{display:block;font-family:var(--display);font-style:italic;font-size:15px;color:var(--gold-ink);margin:1px 0 4px}
.town p{font-size:15px;margin:0;color:var(--ink-soft);line-height:1.45}
.town.first h3::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-left:10px;vertical-align:middle}

/* ============ 8. DRESS ============ */
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 8px;margin:0 0 30px;max-width:440px}
@media (max-width:640px){.palette{grid-template-columns:repeat(4,1fr);max-width:380px}}
.palette.avoidp{grid-template-columns:repeat(6,1fr);max-width:600px}
@media (max-width:640px){.palette.avoidp{grid-template-columns:repeat(3,1fr)}}
.pnote{color:var(--ink-soft);font-size:16px;margin:-4px 0 16px;max-width:520px}
.sw{display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--display);font-size:14.5px;line-height:1.2;text-align:center}
.sw i{width:54px;height:54px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset 6px 6px 12px rgba(255,255,255,.22),inset -6px -8px 14px rgba(0,0,0,.22),0 8px 18px rgba(35,43,30,.16)}
.sw.no i::after{content:"";position:absolute;left:50%;top:50%;width:64%;height:2px;background:#B23A2E;transform:translate(-50%,-50%) rotate(-45deg);box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.sw.no span{font-weight:600}
.avoid{display:flex;flex-wrap:wrap;gap:8px}
.avoid span{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.04em;padding:7px 16px;border:1px solid rgba(47,53,40,.4);border-radius:999px;color:var(--ink)}

/* ============ 9. PUGLIA ============ */
.food{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.food>div{aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--paper-deep)}
.food img{width:100%;height:100%;object-fit:cover}
.food .f1 img{object-position:50% 40%}
@media (max-width:640px){.food{grid-template-columns:1fr 1fr;gap:10px}.food .f1{grid-column:span 2;aspect-ratio:4/5}}
.explore{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media (max-width:1000px){.explore{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.explore{grid-template-columns:1fr 1fr;gap:12px}.explore .ex:last-child:nth-child(odd){grid-column:span 2}.explore .ex:last-child:nth-child(odd) .im{aspect-ratio:2/1}}
.ex .im{aspect-ratio:1;overflow:hidden;border-radius:2px;background:var(--paper-deep)}
.ex img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ex:hover img{transform:scale(1.05)}
.ex h3{font-size:21px;margin:12px 0 2px}
.ex p{margin:0;font-size:15px;color:var(--ink-soft);line-height:1.45}

/* ============ 10. FAQ ============ */
.faq{display:grid}
.q{border-top:1px solid var(--line)}
.q:last-child{border-bottom:1px solid var(--line)}
.q button{width:100%;text-align:left;background:transparent;border:0;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--display);font-size:21px;color:var(--ink);line-height:1.3}
.q button i{width:12px;height:12px;position:relative;flex:0 0 12px}
.q button i::before,.q button i::after{content:"";position:absolute;background:var(--gold-ink);transition:transform .35s var(--ease)}
.q button i::before{left:0;right:0;top:50%;height:1px}
.q button i::after{top:0;bottom:0;left:50%;width:1px}
.q.open button i::after{transform:scaleY(0)}
.q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.q.open .a{grid-template-rows:1fr}
.q .a div{overflow:hidden}
.q .a p{color:var(--ink-soft);padding-bottom:20px;max-width:620px;margin:0}

/* ============ 11. RSVP ============ */
.deadline{font-style:italic;font-family:var(--display);font-size:20px!important;color:var(--gold-ink)!important}
.rsvp-wrap{max-width:600px;margin:0 auto;background:#F6F3EA url(img/linen.jpg) center/cover;padding:clamp(28px,5vw,48px);position:relative;border-radius:2px;box-shadow:0 30px 80px rgba(35,43,30,.14)}
.rsvp-wrap .frame{position:absolute;left:10px;top:10px;width:calc(100% - 20px);height:calc(100% - 20px);pointer-events:none}
.f{display:grid;gap:22px;position:relative}
label.l,.f .l{display:grid;gap:7px;font-family:var(--display);font-size:19px;letter-spacing:.01em}
.f input[type=text],.f input[type=tel],.f input[type=email],.f textarea,.f select{width:100%;font:inherit;font-size:17px;padding:10px 2px;border:0;border-bottom:1px solid rgba(53,46,39,.3);border-radius:0;background:transparent;color:var(--ink);transition:border-color .3s}
.f textarea{min-height:72px;resize:vertical}
.f input:focus,.f textarea:focus,.f select:focus{outline:0;border-bottom-color:var(--gold-ink)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:grid;place-items:center;min-height:52px;border:1px solid rgba(53,46,39,.25);border-radius:999px;font-family:var(--display);font-size:19px;transition:all .25s;cursor:pointer}
.seg input:checked+span{background:var(--olive);color:var(--ivory);border-color:var(--olive)}
.guests{display:grid;gap:4px}
.hint{font-size:15px;color:var(--ink-faint);margin:0}
.note{font-family:var(--display);font-style:italic;font-size:17px;color:var(--ink-soft);padding:14px 0 0;border-top:1px solid rgba(154,122,50,.35);margin:0}
.done{text-align:center;padding:30px 0 10px}
.done .mono{font-family:var(--display);font-size:42px;letter-spacing:.25em;padding-left:.25em;color:var(--gold-ink)}
.done h2{font-weight:300;font-size:36px;margin:8px 0}
.err{color:#9B3B2A;font-size:15px;margin:0}

/* ============ 12. CLOSING / FOOTER ============ */
.closing{background:var(--olive);color:var(--ivory);text-align:center;position:relative;overflow:hidden}
.closing .btn.light{border-color:rgba(244,241,232,.55)}
.closing::before{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:soft-light;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9 .25' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .92 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.closing .wrap{position:relative;max-width:820px}
.closing h2{color:var(--ivory);font-size:clamp(32px,4.4vw,48px);font-weight:300;margin-bottom:16px}
.closing p{color:rgba(243,238,228,.85);font-size:18px;max-width:560px;margin:0 auto}
.closing .sig{font-family:var(--display);font-style:italic;font-size:34px;color:var(--gold-hi);margin-top:26px;font-weight:300}
.closing .q2{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.closing .btn.gold{background:var(--gold);color:var(--olive-deep);box-shadow:none}
footer{padding:26px 20px calc(26px + env(safe-area-inset-bottom));text-align:center;font-family:var(--display);letter-spacing:.2em;font-size:12px;text-transform:uppercase;background:var(--olive-deep);color:rgba(244,241,232,.6)}
footer a{text-decoration:none}

/* ============ STORY PAGE ============ */
.storyhero{position:relative;min-height:78svh;display:grid;align-items:end;color:var(--ivory);overflow:hidden;isolation:isolate;padding-top:var(--nav-h)}
.storyhero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.storyhero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(35,43,30,.35) 0%,rgba(35,43,30,.05) 35%,rgba(35,43,30,.82) 100%)}
.storyhero .cap{padding:0 clamp(20px,6vw,72px) clamp(36px,6vw,72px);max-width:1200px;width:100%;margin:0 auto}
.storyhero .kicker{color:var(--gold-hi)}
.storyhero h1{font-size:clamp(42px,8vw,88px);font-weight:300;line-height:1;margin-bottom:12px}
.storyhero p{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(19px,2.4vw,24px);color:rgba(243,238,228,.9);max-width:600px;line-height:1.4;margin:0}
.film .frame-v{position:relative;aspect-ratio:9/16;max-height:78svh;margin:0 auto;overflow:hidden;border-radius:2px;background:#000;width:min(100%,380px)}
.film video{width:100%;height:100%;object-fit:cover}
.film .play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,transparent,rgba(0,0,0,.35));color:var(--ivory);border:0;font-family:var(--display);letter-spacing:.24em;text-transform:uppercase;font-size:13px}
.film .play div{display:grid;place-items:center;gap:12px}
.film .play span{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:1px solid rgba(243,238,228,.7);font-size:20px;padding-left:4px}
.film .play em{font-style:normal}
.moments{display:grid;gap:clamp(36px,6vw,64px)}
.step{display:grid;gap:18px;align-items:center}
.step figure{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--paper-deep)}
.step img{width:100%;height:100%;object-fit:cover}
.step .n{font-family:var(--display);font-size:15px;letter-spacing:.3em;color:var(--gold-ink);margin-bottom:10px}
.step h3{font-size:clamp(30px,3.2vw,40px);font-weight:300;margin-bottom:10px}
.step p{color:var(--ink-soft);max-width:420px;margin:0;font-size:19px}
@media (min-width:760px){.step{grid-template-columns:1fr 1fr;gap:56px}.step:nth-child(even) figure{order:2}.step figure{max-width:420px;justify-self:end}.step:nth-child(even) figure{justify-self:start}}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gallery figure{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--paper-deep)}
.gallery figure.w{grid-column:span 2;aspect-ratio:16/9}
.gallery img{width:100%;height:100%;object-fit:cover}
@media (min-width:800px){.gallery{grid-template-columns:repeat(4,1fr)}.gallery figure.w{grid-column:span 2;aspect-ratio:8/5}}

/* ============ CHAT ============ */
.chat-fab{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:60;display:none;align-items:center;gap:10px;background:var(--olive);color:var(--ivory);border:0;border-radius:999px;padding:12px 18px 12px 14px;font-family:var(--display);font-size:14px;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 14px 30px rgba(35,43,30,.35)}
body.opened .chat-fab{display:inline-flex}
.chat-fab .dot{width:8px;height:8px;border-radius:50%;background:var(--gold-hi)}
.chat{position:fixed;right:0;bottom:0;top:0;width:min(100%,420px);z-index:95;background:var(--ivory);transform:translateX(100%);transition:transform .5s var(--ease);display:grid;grid-template-rows:auto 1fr auto;box-shadow:-20px 0 60px rgba(35,43,30,.25)}
.chat.open{transform:none}
.chat .hd{padding:calc(env(safe-area-inset-top) + 18px) 22px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.chat .hd h3{font-size:24px;margin:0}
.chat .hd h3 .amp{font-style:italic;font-weight:300;color:var(--gold-ink)}
.chat .hd small{display:block;font-family:var(--display);font-style:italic;color:var(--ink-soft);font-size:15px}
.chat .hd button{background:transparent;border:0;font-family:var(--display);letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--ink-soft)}
.chat .log{overflow:auto;padding:18px 22px;display:flex;flex-direction:column;gap:12px}
.chat .m{max-width:88%;padding:12px 16px;border-radius:14px;font-size:16.5px;line-height:1.5}
.chat .m.bot{background:var(--paper);border-bottom-left-radius:3px;align-self:flex-start}
.chat .m.me{background:var(--olive);color:var(--ivory);border-bottom-right-radius:3px;align-self:flex-end}
.chat .m.bot.typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink-faint);margin-right:4px;animation:blink 1.2s infinite}
.chat .m.bot.typing span:nth-child(2){animation-delay:.2s}.chat .m.bot.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.chat .chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 22px 10px}
.chat .chips button{border:1px solid rgba(53,46,39,.2);background:transparent;border-radius:999px;padding:6px 12px;font-family:var(--display);font-size:15px;color:var(--ink-soft)}
.chat form{display:flex;gap:8px;padding:12px 16px calc(env(safe-area-inset-bottom) + 14px);border-top:1px solid var(--line)}
.chat input{flex:1;font:inherit;font-size:16px;padding:12px 14px;border:1px solid rgba(53,46,39,.2);border-radius:999px;background:#FBF8F1;color:var(--ink)}
.chat input:focus{outline:0;border-color:var(--gold-ink)}
.chat form button{border:0;background:var(--olive);color:var(--ivory);border-radius:999px;padding:0 18px;font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.chat-veil{position:fixed;inset:0;z-index:94;background:rgba(35,43,30,.4);opacity:0;pointer-events:none;transition:opacity .4s}
.chat-veil.open{opacity:1;pointer-events:auto}

/* ============ MUSIC ============ */
.music{position:fixed;left:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:60;width:44px;height:44px;border-radius:50%;border:1px solid rgba(154,122,50,.4);background:rgba(243,238,228,.92);display:none;place-items:center;color:var(--olive-deep)}
body.opened .music{display:grid}
.music .bars{display:flex;gap:2px;align-items:flex-end;height:14px}
.music .bars i{width:2px;background:var(--olive);border-radius:2px;animation:eq 1.1s ease-in-out infinite}
.music .bars i:nth-child(2){animation-delay:.2s}.music .bars i:nth-child(3){animation-delay:.4s}.music .bars i:nth-child(4){animation-delay:.1s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.music[aria-pressed="false"] .bars i{animation:none;height:4px}

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

/* nav over the hero photo (before it turns solid) */
.nav:not(.solid) .mark,.nav:not(.solid) .burger{color:var(--ink)}
.nav:not(.solid) .mark .mamp,.nav:not(.solid) .mark small{color:var(--gold-ink)}
.nav:not(.solid) .rsvp-pill{background:var(--olive);color:var(--ivory)}


/* ============ SUB PAGES (info, story) ============ */
.pagehead{padding:calc(var(--nav-h) + clamp(40px,7vw,80px)) 20px clamp(28px,4vw,44px);background:var(--alt)}
.pagehead h1{font-size:clamp(36px,6vw,64px);font-weight:300;line-height:1.05;margin-bottom:12px}
.pagehead p{color:var(--ink-soft);font-size:18px;max-width:600px;margin:0 0 22px}
.subnav{display:flex;flex-wrap:wrap;gap:8px}
.subnav a{font-family:var(--display);font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid rgba(47,53,40,.3);border-radius:999px;padding:8px 14px;transition:background .3s,border-color .3s}
.subnav a:hover{border-color:var(--ink);background:rgba(47,53,40,.05)}
.aside{margin-top:clamp(36px,6vw,56px);padding:24px 26px;border:1px solid var(--line);border-radius:2px;background:rgba(255,255,255,.35)}
.aside h3{font-size:24px;margin:4px 0 8px}
.aside p{margin:0;color:var(--ink-soft)}
.storyhero{min-height:70svh}
.film .frame-v{box-shadow:0 30px 70px rgba(47,53,40,.3)}
.music{background:rgba(231,234,223,.92);border-color:rgba(154,122,50,.45);color:var(--olive-deep)}
.textlink{font-family:var(--display);font-style:italic;font-size:19px;color:var(--gold-ink);text-decoration:none;border-bottom:1px solid rgba(140,109,42,.4);padding-bottom:2px}
.deadline{font-style:italic;font-family:var(--display);font-size:20px!important;color:var(--gold-ink)!important}

/* ============ US (home photo strip) ============ */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.trio a{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--paper-deep)}
.trio img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.trio a:hover img{transform:scale(1.04)}
@media (max-width:640px){.trio{gap:8px}.trio a{aspect-ratio:3/4}}

/* ============ ARTWORK ============ */
.orn{display:block;width:min(240px,50vw);height:auto;margin:0 auto 14px;opacity:.95}
.sh.center .orn{margin-bottom:10px}
.count .orn{margin-bottom:10px}
.pagehead .orn{margin:0 0 14px}
.welcome{position:relative;overflow:hidden}
.welcome::before{content:"";position:absolute;left:calc(50% + 330px);top:50%;transform:translateY(-50%) scaleX(-1);width:300px;aspect-ratio:717/825;background:url(img/branches.png) center/contain no-repeat;opacity:.85;pointer-events:none}
@media (max-width:1180px){.welcome::before{display:none}}
.welcome .wrap{position:relative}
.mapart a{display:block}
.mapart figcaption{font-family:var(--display);font-style:italic;font-size:15px;color:var(--ink-faint);text-align:center;padding:8px 0 0}
.mapart{margin:0 0 clamp(28px,4vw,40px);border-radius:3px;overflow:hidden;box-shadow:0 20px 50px rgba(47,53,40,.18)}
.mapart img{width:100%;height:auto;display:block}

.photo.villa{aspect-ratio:16/10;margin:0 0 clamp(28px,4vw,40px);position:relative}
.photo.villa figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;font-family:var(--display);font-style:italic;font-size:17px;color:#F4F1E8;background:linear-gradient(180deg,transparent,rgba(30,34,24,.55))}

/* villa gallery on the guest page */
.villagal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:clamp(28px,4vw,44px) 0 0}
.villagal figure{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--paper-deep)}
.villagal img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.villagal figure:hover img{transform:scale(1.04)}
@media (max-width:640px){.villagal{grid-template-columns:1fr 1fr;gap:8px}}

@media (max-width:600px){.nav .right{gap:8px}.nav .lang.dark button{padding:4px 8px;font-size:12px}.nav .rsvp-pill{padding:8px 13px;font-size:12.5px}.nav .in{padding:0 12px;gap:8px}}
@media (max-width:600px){.nav .in{grid-template-columns:auto 1fr auto}.nav .mark{justify-self:center}.nav .lang.dark button{padding:4px 7px;font-size:11.5px;letter-spacing:.1em}.nav .rsvp-pill{padding:7px 11px;font-size:12px;letter-spacing:.14em}.nav .burger{padding:8px 0}}

/* ============ KINDLY REPLY ============ */
.reply{padding:clamp(52px,8vw,88px) 20px clamp(44px,7vw,72px);text-align:center;background:var(--bg)}
.reply .orn{margin-bottom:18px}
.reply .rk{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(20px,2.6vw,26px);color:var(--gold-ink);margin-bottom:6px}
.reply .rd{font-family:var(--display);font-weight:300;font-size:clamp(46px,9vw,84px);line-height:1;letter-spacing:.01em;color:var(--ink)}
.reply .rn{max-width:440px;margin:18px auto 26px;color:var(--ink-soft);font-size:16.5px}
.count{border-top:1px solid var(--line)}
/* tap targets: 44px minimum in the top bar */
.nav .burger{min-height:44px;min-width:44px}
.nav .rsvp-pill{min-height:36px;display:inline-flex;align-items:center}
.nav .lang.dark button{min-height:32px}

/* compact chat button on phones: icon + one word */
@media (max-width:600px){.chat-fab{padding:11px 16px 11px 13px;font-size:14px}}
.chat-fab .lbl-short{display:none!important}.chat-fab .lbl-long{display:inline!important;white-space:nowrap}