/* =========================================================
   Affresco · a Florentine plaster-and-letterpress system
   ========================================================= */
:root {
  /* grounds */
  --intonaco: #EFE6D6;        /* lime plaster */
  --intonaco-2: #E7DCC7;
  --cotton: #FBF7EE;          /* letterpress card stock */
  /* inks */
  --ink: #26332A;             /* cypress letterpress ink */
  --ink-soft: #5A5F52;
  --vino: #7A2E3A;            /* second ink, Chianti red */
  /* architecture */
  --pietra: #8D918B;          /* pietra serena */
  --gold: #A98F64;
  /* fresco */
  --sky: #B9C7CD;
  --apricot: #E3A869;
  --rose: #E7B2A2;
  --sage: #8E9A78;
  --olive: #6F7A55;
  --cotto: #B9714A;

  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --body: "EB Garamond", Garamond, Georgia, serif;
  --caps: "IM Fell English SC", "EB Garamond", Georgia, serif;

  --floor: clamp(34px, 6.5svh, 64px);
  --pw: min(86vw, calc((100svh - 150px) * 0.6667), 560px);
  --gutter: clamp(16px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(17px, 1.05vw + 12px, 20px);
  line-height: 1.6;
  background-color: var(--intonaco);
  background-image:
    radial-gradient(1200px 600px at 10% 20%, rgba(231, 178, 162, .12), transparent 70%),
    radial-gradient(900px 700px at 90% 60%, rgba(185, 199, 205, .16), transparent 70%),
    radial-gradient(1000px 800px at 40% 95%, rgba(227, 168, 105, .10), transparent 70%);
  overflow-x: hidden;
}
html, body { overflow-x: clip; }
main, section, footer { overflow-x: clip; }
/* paper grain over everything except the nav. It stays under the nav (z-index
   49 < 50) because iOS 26 Safari colours the status bar from the topmost fixed
   element at the top edge: a textured full-screen overlay there makes Safari
   give up and show the page scrolling behind the clock. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 49; pointer-events: none;
  opacity: .1; transform: translateZ(0); will-change: transform;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .2  0 0 0 0 .14  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body.menu-open { overflow: hidden; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--vino); text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--vino); outline-offset: 4px; border-radius: 2px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }

.eyebrow {
  font-family: var(--caps); font-size: .95rem; letter-spacing: .22em;
  color: var(--vino); margin: 0 0 .9rem;
}
.eyebrow--light { color: #6A2732; }

/* section heads */
.head { max-width: 1200px; margin: 0 auto clamp(36px, 5vw, 64px); padding: 0 var(--gutter); }
.head h2 {
  font-family: var(--display); font-style: italic;
  font-size: clamp(2.7rem, 6.4vw, 5rem); line-height: .98; letter-spacing: -.01em;
  font-variation-settings: "opsz" 30;
}
.head--center { text-align: center; }
.head__lede { max-width: 34em; margin: 1.1rem auto 0; color: var(--ink-soft); font-style: italic; font-size: 1.1em; }

/* =================== NAV =================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) 14px;
  transition: background .4s, box-shadow .4s, padding .4s;
}
/* The bar's colour sits on .nav itself, as a solid background-color with no
   backdrop-filter: iOS 26 Safari tints the status bar from the background-color
   of a fixed bar at the top edge, and when it can't read one (transparent, or
   blurred with backdrop-filter) it shows the page scrolling behind the clock
   instead. A plain background-color doesn't trap the fixed mobile menu. */
.nav.is-scrolled {
  padding-block: max(10px, env(safe-area-inset-top)) 10px;
  background-color: var(--intonaco);
  box-shadow: 0 1px 0 rgba(141, 145, 139, .35);
}
/* match the open menu's sky so the status bar blends into it */
body.menu-open .nav { background-color: #C5D0D3; box-shadow: none; }
.nav__mark {
  font-family: var(--display); font-style: italic; font-size: 1.7rem; line-height: 1;
  color: var(--ink); text-decoration: none; letter-spacing: .02em;
  display: inline-flex; align-items: baseline; gap: .12em;
}
.nav__dot { color: var(--vino); }
.nav__links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.nav__links a {
  font-family: var(--caps); font-size: 1rem; letter-spacing: .1em;
  color: var(--ink); text-decoration: none; position: relative;
}
.nav__links a:not(.pill)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--vino); transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.nav__links a:not(.pill):hover::after { transform: scaleX(1); }
.pill {
  border: 1px solid var(--vino); color: var(--vino) !important;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  padding: .6em 1.1em; border-radius: 999px; transition: background .25s, color .25s;
}
.pill:hover { background: var(--vino); color: var(--cotton) !important; }
.nav__toggle { display: none; background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer; position: relative; z-index: 2; }
.nav__toggle span { display: block; width: 26px; height: 1.5px; background: var(--ink); margin: 7px 0; transition: transform .3s; }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* =================== HERO =================== */
.hero {
  position: relative; height: 100svh; min-height: 620px; overflow: hidden;
  background: var(--intonaco);
  isolation: isolate;
}
.vault { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; will-change: transform; }
/* clouds stay put: animating inside the filtered ceiling forced a full repaint every frame */

/* a pair of gilt chandeliers, one in each bay beside the doorway */
.chandelier {
  position: absolute; top: calc(var(--nav-h, 70px) + 4px); z-index: -1; pointer-events: none;
  width: clamp(150px, 15vw, 240px); overflow: visible;
}
.chandelier--l { left: calc((100vw - var(--pw)) / 4); transform: translateX(-50%); }
.chandelier--r { right: calc((100vw - var(--pw)) / 4); transform: translateX(50%); }
/* only where there is room for them beside the doorway */
@media (max-width: 900px) { .chandelier { display: none; } }
/* candlelight: the halo breathes and each flame wavers on its own rhythm */
.chandelier .glow, .chandelier .flame { transform-box: fill-box; }
.chandelier .glow { transform-origin: center; animation: glow var(--d, 1s) ease-in-out var(--dl, 0s) infinite alternate; }
.chandelier .flame { transform-origin: 50% 100%; animation: flame var(--d, 1s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes glow { 0% { opacity: 1; transform: scale(1.1); } 30% { opacity: .55; transform: scale(.9); } 60% { opacity: .95; transform: scale(1.05); } 100% { opacity: .4; transform: scale(.85); } }
@keyframes flame { 0% { transform: scale(1, 1.15) skewX(-4deg); } 35% { transform: scale(.9, .8) skewX(3deg); } 70% { transform: scale(1.05, 1.2) skewX(-2deg); } 100% { transform: scale(.92, .85) skewX(5deg); } }
/* glints on the crystal drops */
.chandelier .spark { opacity: 0; transform-box: fill-box; transform-origin: center; animation: glint var(--d, 2s) ease-in-out var(--dl, 0s) infinite; }
@keyframes glint { 0%, 60%, 100% { opacity: 0; transform: scale(.3); } 75% { opacity: 1; transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .chandelier .glow, .chandelier .flame, .chandelier .spark { animation: none; } }



.portal {
  position: absolute; left: 50%; bottom: var(--floor);
  width: var(--pw); aspect-ratio: 600 / 900;
  transform: translateX(-50%);
}
.arch {
  display: block; width: 100%; height: 100%; overflow: visible;
  transform-origin: 50% 72%; will-change: transform;
}

.hero__copy {
  position: absolute; left: -30%; right: -30%; top: 39.5%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  will-change: transform, opacity;
  pointer-events: none;
}
.hero__date {
  font-family: var(--caps); letter-spacing: .38em; color: #5F1F2A;
  font-size: clamp(.85rem, 1.1vw + .5rem, 1.15rem); margin: .35em 0 0;
}
.hero__names {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: min(calc(var(--pw) * .25), 8.4rem);
  line-height: .86; letter-spacing: -.02em;
  display: flex; flex-direction: column; align-items: center;
  font-variation-settings: "opsz" 30;
}
.hero__names .amp {
  font-family: var(--body); font-style: italic; color: var(--vino);
  font-size: .5em; line-height: 1.1;
}
.hero__place {
  font-family: var(--caps); letter-spacing: .16em; font-size: clamp(.9rem, .8vw + .6rem, 1.12rem);
  margin-top: 1.1em; color: var(--ink);
}

.hero__kicker {
  position: absolute; left: 0; right: 0; top: calc(var(--nav-h, 64px) + 2.5svh);
  text-align: center; margin: 0;
}
.hero__kicker span { display: block; }
.hero__kicker .k1 { font-family: var(--caps); letter-spacing: .3em; color: var(--vino); font-size: .9rem; }
.hero__kicker .k2 { font-family: var(--body); font-style: italic; color: var(--ink-soft); font-size: 1.05rem; margin-top: .3em; }
/* the doorway leaves room under the menu for the "Siete invitati" line */
.hero { --pw: min(86vw, calc((max(100svh, 620px) - 230px) * 0.6667), 560px); }
@media (max-aspect-ratio: 4/5) {
  .hero { --pw: min(94vw, calc((max(100svh, 620px) - 220px) * 0.6667), 560px); }
  .hero__kicker { top: calc(var(--nav-h, 64px) + 4svh); }
}

.floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--floor);
  background: linear-gradient(#C07B53, #A9623E);
  box-shadow: inset 0 6px 10px -6px rgba(60, 30, 15, .5);
}
.floor svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.floor::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: calc(var(--pw) * .62); transform: translateX(-50%);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  background: linear-gradient(#6A2731, #7A2E3A);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .12);
}

.hero__cue {
  position: absolute; right: var(--gutter); bottom: calc(var(--floor) + 28px);
  font-family: var(--caps); letter-spacing: .2em; font-size: .9rem;
  color: var(--ink); text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hero__cue::after { content: ""; width: 1px; height: 54px; background: currentColor; animation: cue 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%, 100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* =================== INVITATION =================== */
.invito {
  position: relative; padding: clamp(96px, 14vw, 180px) var(--gutter) clamp(80px, 10vw, 140px);
  display: flex; flex-direction: column; align-items: center;
}
.card { position: relative; width: min(100%, 540px); rotate: -1.4deg; }
.card__paper {
  position: absolute; inset: 0; background: var(--cotton);
  background-image: radial-gradient(rgba(169, 143, 100, .08) 1px, transparent 1px);
  background-size: 5px 5px;
  filter: url(#deckle) drop-shadow(0 22px 34px rgba(70, 48, 26, .18)) drop-shadow(0 2px 3px rgba(70, 48, 26, .12));
}
.card__body { position: relative; text-align: center; padding: clamp(44px, 7vw, 68px) clamp(24px, 6vw, 56px) clamp(48px, 7vw, 64px); }
.crest { width: 96px; height: 96px; color: var(--vino); margin: 0 auto 18px; display: block; }
.crest__type { font-family: var(--display); font-style: italic; font-size: 30px; fill: currentColor; }
.crest__amp { font-family: var(--body); font-size: 20px; }
.card__small { font-family: var(--caps); letter-spacing: .2em; font-size: .9rem; color: var(--ink-soft); margin-bottom: .9rem; }
.card__names { font-family: var(--display); font-size: clamp(2.3rem, 6vw, 3.3rem); line-height: 1; margin-bottom: 1rem; font-style: italic; }
.card__names i { font-family: var(--body); color: var(--vino); font-size: .8em; }
.card__line { font-style: italic; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.card__line--it { font-family: var(--caps); font-style: normal; letter-spacing: .18em; font-size: .9rem; margin-top: .3rem; }
.card__date { font-family: var(--caps); letter-spacing: .12em; color: var(--vino); font-size: 1.15rem; margin: 0 0 .2rem; }
.card__venue { font-family: var(--display); font-size: 1.55rem; margin: 0; }
.rule { display: block; width: 70px; height: 9px; margin: 20px auto; background:
  linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat,
  radial-gradient(circle, var(--gold) 2.5px, transparent 3px) center / 9px 9px no-repeat; }

.sprig { position: absolute; pointer-events: none; z-index: 2; }
.sprig--olive { width: clamp(160px, 22vw, 280px); left: calc(50% - min(46vw, 400px)); top: clamp(60px, 9vw, 120px); transform: rotate(-14deg); }
.sprig--lemon { width: clamp(140px, 18vw, 230px); right: calc(50% - min(46vw, 390px)); top: clamp(380px, 46vw, 560px); transform: rotate(8deg); }

.countdown { display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); margin-top: clamp(48px, 6vw, 72px); }
.countdown div { display: flex; flex-direction: column; align-items: center; }
.countdown b { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 7vw, 4.8rem); line-height: 1; font-variant-numeric: lining-nums; }
.countdown span { font-family: var(--caps); letter-spacing: .2em; font-size: .85rem; color: var(--ink-soft); margin-top: 6px; }
.countdown i { color: var(--vino); font-style: normal; font-size: 1.6rem; transform: translateY(-10px); }
.countdown__note { font-style: italic; color: var(--ink-soft); margin-top: .8rem; }
.countdown__note em { color: var(--vino); font-family: var(--display); }

/* =================== STORY =================== */
.storia { padding: clamp(60px, 8vw, 120px) 0 clamp(90px, 12vw, 170px); }
.vine { display: block; width: min(760px, 92%); height: auto; margin: 0 auto clamp(28px, 4vw, 52px); }
.storia__grid {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(14px, 2vw, 28px); row-gap: clamp(28px, 3vw, 40px);
  align-items: start;
}
.storia__text { grid-column: 1 / span 4; grid-row: 1 / span 2; align-self: center; font-size: 1.08em; }
.dropcap::first-letter {
  font-family: var(--display); font-style: italic; color: var(--vino);
  float: left; font-size: 4.4em; line-height: .78; padding: .06em .1em 0 0;
}

/* =================== WEEKEND =================== */
.programma {
  position: relative;
  padding: clamp(90px, 12vw, 160px) 0;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(239, 230, 214, 1), rgba(239, 230, 214, 0) 70%),
    linear-gradient(var(--intonaco-2), #E4D6BE 70%, var(--intonaco-2));
}
.programma::before, .programma::after {
  content: ""; position: absolute; left: 0; right: 0; height: 24px; background: var(--intonaco);
  filter: url(#deckle);
}
.programma::before { top: -12px; }
.programma::after { bottom: -12px; }
.fountain { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.fountain svg { width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 22%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 22%);
  mask-composite: intersect; }

.days {
  max-width: 1200px; margin: clamp(30px, 5vw, 70px) auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(240px, 1fr) 2.7fr; gap: clamp(32px, 5vw, 72px);
}
.day__title {
  font-family: var(--display); font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 30px;
  border-bottom: 1px solid rgba(141, 145, 139, .55);
}
.day__title em { font-family: var(--body); font-size: .62em; color: var(--ink-soft); }
.day:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 56px); row-gap: clamp(30px, 4vw, 48px); align-content: start; }
.day:nth-child(2) .day__title { grid-column: 1 / -1; margin-bottom: 0; }
.event { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; }
.vignette { width: 150px; height: 150px; display: block; }
.event__time { font-family: var(--caps); letter-spacing: .16em; color: var(--vino); font-size: .95rem; margin: 6px 0 2px; }
.event h4 { font-family: var(--display); font-style: italic; font-size: 1.9rem; line-height: 1.05; }
.event__where { font-style: italic; color: var(--ink-soft); margin: 2px 0 .5em; }
.event p:last-child { margin: 0; }
.day:first-child .event { grid-template-columns: 1fr; gap: 14px; }
.day:first-child .vignette { width: 190px; height: 190px; }
.day:first-child .day__title em { flex-basis: 100%; }

/* =================== TRAVEL =================== */
.viaggio { padding: clamp(100px, 13vw, 180px) 0 clamp(70px, 9vw, 130px); }
.viaggio__grid {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center;
}
.map { margin: 0; }
.map svg { width: 100%; height: auto; display: block; overflow: visible; }
/* a paper-coloured halo behind each label keeps it readable where it crosses a route or river */
.map__labels text { font-family: var(--caps); font-size: 20px; fill: var(--ink); letter-spacing: .06em; stroke: #EFE6D3; stroke-width: 5px; stroke-linejoin: round; paint-order: stroke; }
.map__labels .small { font-family: var(--body); font-style: italic; font-size: 16px; fill: #3E4740; letter-spacing: 0; }
.map__labels .villa { font-family: var(--display); font-style: italic; font-size: 23px; fill: var(--vino); letter-spacing: 0; }
.map__seal { font-family: var(--display); font-style: italic; font-size: 13px; fill: #F3E3D6; }
.note { padding: 22px 0; border-top: 1px solid rgba(141, 145, 139, .5); }
.note:last-child { border-bottom: 1px solid rgba(141, 145, 139, .5); }
.note h3 { font-family: var(--display); font-style: italic; font-size: 1.75rem; margin-bottom: .35em; }
.note .num { font-family: var(--caps); font-style: normal; color: var(--vino); font-size: .7em; margin-right: .3em; }
.note p { margin: 0; }
.note p + p { margin-top: .6em; }

/* While you're here (under Travel) */
.extra { width: min(1120px, 90vw); margin: clamp(70px, 9vw, 120px) auto 0; }
.extra__art { display: block; width: min(960px, 100%); height: auto; margin: 0 auto -10px; }
.extra__vignette { display: block; width: min(340px, 80%); height: auto; margin: -6px 0 2px -14px; }
.extra__list a { color: inherit; text-decoration: underline; text-decoration-color: rgba(122, 46, 58, .45); text-underline-offset: 3px; }
.extra__list a:hover { color: var(--vino); text-decoration-color: var(--vino); }
.extra__head { text-align: center; margin-bottom: clamp(26px, 4vw, 44px); }
.extra__head h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.1; }
.extra__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); }
.extra__col h4 { font-family: var(--caps); font-weight: 400; letter-spacing: .08em; font-size: 1.15rem; color: var(--vino); margin-bottom: 6px; }
.extra .note h5 { margin: 0 0 .3em; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.45rem; }
.extra__list { margin: 0; padding: 0; list-style: none; }
.extra__list li { padding-left: 1.1em; text-indent: -1.1em; }
.extra__list li + li { margin-top: .45em; }
.extra__list li::before { content: "·"; color: var(--vino); display: inline-block; width: 1.1em; text-indent: 0; font-weight: 700; }
@media (max-width: 760px) { .extra__cols { grid-template-columns: 1fr; } }

/* =================== GOOD TO KNOW =================== */
.sapere { padding: clamp(60px, 8vw, 120px) 0 clamp(100px, 13vw, 170px); }
.faq { max-width: 780px; margin: 0 auto; padding: 0 var(--gutter); }
.faq details { border-bottom: 1px solid rgba(141, 145, 139, .55); }
.faq details:first-child { border-top: 1px solid rgba(141, 145, 139, .55); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.55rem);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--body); color: var(--vino); font-size: 1.6em; line-height: 1;
  transition: transform .35s; flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-soft); margin: -4px 0 24px; max-width: 36em; }
.faq .phrases { list-style: none; margin: -12px 0 24px; padding: 0; color: var(--ink-soft); }
.faq .phrases li { padding: 3px 0; }
.faq .phrases i { color: var(--vino); }

/* =================== PAINTED FRIEZE between sections =================== */

/* =================== RSVP =================== */
.rsvp {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 86svh; display: grid; place-items: center; text-align: center;
  padding: clamp(110px, 14vw, 180px) var(--gutter) calc(clamp(110px, 14vw, 180px) + clamp(70px, 9vw, 140px));
}
/* phones: the clouds are painted at desktop size, so shrink them to fit the narrow sky */
@media (max-width: 760px) {
  .rsvp__sky-art image { transform-box: fill-box; transform-origin: center; transform: translate(-50%, -57%) scale(.6); }
}
.rsvp__sky {
  position: absolute; inset: -40px; z-index: -2;
  background:
    radial-gradient(260px 90px at 18% 24%, #F5ECE0 60%, transparent 62%),
    radial-gradient(200px 70px at 28% 30%, #E7D1C4 60%, transparent 62%),
    radial-gradient(320px 100px at 80% 20%, #F5ECE0 60%, transparent 62%),
    radial-gradient(220px 70px at 70% 28%, #EBCFBF 60%, transparent 62%),
    radial-gradient(380px 110px at 50% 88%, #F2E8DB 60%, transparent 62%),
    radial-gradient(240px 80px at 12% 80%, #EEE2D4 60%, transparent 62%),
    radial-gradient(260px 80px at 90% 76%, #EEE2D4 60%, transparent 62%),
    linear-gradient(180deg, #B9C7CD 0%, #D7DCD6 55%, #EFE6D6 100%);
  filter: url(#wash);
}
.rsvp__inner { max-width: 720px; }
.rsvp h2 {
  font-family: var(--display); font-style: italic; font-size: clamp(3.2rem, 9vw, 7rem); line-height: .95;
  letter-spacing: -.02em; font-variation-settings: "opsz" 30;
}
.rsvp__lede { font-style: italic; font-size: 1.15em; margin: 1.2rem 0 2.4rem; color: #3E4740; }
.seal { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--vino); }
.seal svg { width: clamp(128px, 14vw, 160px); height: auto; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 10px 14px rgba(70, 20, 28, .3)); }
.seal:hover svg { transform: rotate(-8deg) scale(1.05); }
.seal__type { font-family: var(--display); font-style: italic; font-size: 38px; fill: #4A1820; }
.seal__label { font-family: var(--caps); letter-spacing: .22em; font-size: 1rem; }
.rsvp__fine { font-size: .9rem; color: var(--ink-soft); font-style: italic; margin-top: 1.2rem; }

/* =================== FOOTER =================== */
/* the hills overlap the bottom of the RSVP sky, so the sky shows through above the ridges
   instead of ending in a flat strip; the bottom of the painted hills fades into the flat green */
.footer {
  --hills-h: clamp(70px, 9vw, 140px);
  position: relative; color: #F1EADC; text-align: center;
  margin-top: calc(-1 * var(--hills-h));
}
.footer__hills { display: block; width: 100%; height: var(--hills-h); margin-bottom: -1px; }
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
  top: calc(var(--hills-h) - 22px); height: 24px;
  background: linear-gradient(rgba(142, 153, 111, 0), #8E996F);
}
.footer__inner { padding: 30px var(--gutter) max(46px, env(safe-area-inset-bottom)); background: #8E996F; }
.footer__names { font-family: var(--display); font-style: italic; font-size: clamp(2rem, 4vw, 2.8rem); margin: 0; }
.footer__line { font-family: var(--caps); letter-spacing: .24em; font-size: .9rem; margin: .4rem 0 0; }

/* =================== THE CAT (Hugo) =================== */
.footer__inner { position: relative; padding-bottom: calc(max(14px, env(safe-area-inset-bottom)) + 82px); }
.cat {
  position: absolute; left: 0; bottom: max(12px, env(safe-area-inset-bottom));
  width: 104px; height: 67px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translate3d(var(--x, 0px), 0, 0); will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.cat:focus-visible { outline: 2px dashed #F1EADC; outline-offset: 4px; border-radius: 12px; }
/* turning around eases through, rather than snapping */
.cat__flip { position: absolute; inset: 0; transform: scaleX(var(--dir, 1)); transition: transform .45s cubic-bezier(.45, 0, .2, 1); }
.cat__flip > svg, .cat__flip > canvas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: opacity .8s ease, transform .8s ease; }
/* main.js paints Hugo onto canvases that overhang the box a little, so his tail and paws have room */
.cat__flip > canvas { inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); }
.cat__flip > .cat__src { visibility: hidden; }
.cat__nap { opacity: 0; transform: translateY(2px) scale(.97); transform-origin: 50% 100%; }
canvas.cat__nap { transform-origin: 50% calc(100% - 14px); }
.cat.is-napping .cat__walk { opacity: 0; }
.cat.is-napping .cat__nap { opacity: 1; transform: none; }
.cat__shadow {
  position: absolute; left: 10%; right: 12%; bottom: -3px; height: 8px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 46, 30, .35), transparent);
}
/* gait, tail swish, blinking and breathing are all drawn frame by frame in main.js */

.cat__z { position: absolute; right: -2px; top: -12px; width: 30px; height: 40px; pointer-events: none; }
.cat__z span {
  position: absolute; left: 0; bottom: 0; opacity: 0;
  font-family: var(--display); font-style: italic; color: #F1EADC; font-size: 15px;
}
.cat.is-napping .cat__z span { animation: snooze 3.8s ease-out infinite; }
.cat.is-napping .cat__z span:nth-child(2) { animation-delay: 1.27s; font-size: 12px; }
.cat.is-napping .cat__z span:nth-child(3) { animation-delay: 2.53s; font-size: 10px; }
@keyframes snooze {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: .9; }
  100% { opacity: 0; transform: translate(16px, -30px); }
}
@media (prefers-reduced-motion: reduce) {
  .cat.is-napping .cat__z span { animation: none; }
  .cat__flip, .cat__flip > svg, .cat__flip > canvas { transition: none; }
  .cat.is-napping .cat__z span:first-child { opacity: .8; }
}

/* =================== REVEAL =================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.event.reveal:nth-child(3) { transition-delay: .08s; }
.event.reveal:nth-child(4) { transition-delay: .16s; }
.event.reveal:nth-child(5) { transition-delay: .24s; }

/* =================== RESPONSIVE =================== */
@media (max-width: 980px) {
  .storia__text { grid-column: 1 / -1; grid-row: auto; max-width: 36em; }
  .days { grid-template-columns: 1fr; }
  .viaggio__grid { grid-template-columns: 1fr; }
}

/* the menu folds into the button wherever the eight links won't fit on one line */
@media (max-width: 1060px), (max-height: 500px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; justify-content: center; gap: 22px;
    background: linear-gradient(180deg, #C5D0D3, #E6E2D8 55%, var(--intonaco));
    opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
  }
  .nav__links.open { opacity: 1; visibility: visible; }
  .nav__links a { font-family: var(--display); font-style: italic; font-size: 2.1rem; letter-spacing: 0; }
  .nav__links .pill { font-family: var(--caps); font-style: normal; font-size: 1.1rem; letter-spacing: .14em; margin-top: 10px; }
}
/* phones on their side: a tighter menu so all eight links fit the short screen */
@media (max-height: 500px) {
  .nav__links { gap: 6px; }
  .nav__links a { font-size: 1.45rem; }
  .nav__links .pill { margin-top: 4px; }
}

@media (max-width: 760px) {
  .hero__cue { display: none; }
  /* names sit below the fanlight's crossbar so the spokes don't run through the first name */
  .hero__copy { top: 40%; }
  .hero__names { font-size: calc(var(--pw) * .21); }

  .sprig--olive { left: -30px; top: 40px; width: 150px; }
  .sprig--lemon { right: -34px; top: auto; bottom: 290px; width: 120px; }

  .storia__grid { grid-template-columns: 1fr 1fr; }
  .storia__text { grid-column: 1 / -1; }

  .day:nth-child(2) { grid-template-columns: 1fr; }
  .event { grid-template-columns: 112px 1fr; gap: 16px; }
  .vignette { width: 112px; height: 112px; }
  .event h4 { font-size: 1.65rem; }

  .fountain { overflow: hidden; }
  .fountain svg { width: 170%; margin-left: -35%; }
  .fountain { padding: 0; }
  .map__labels text { font-size: 24px; }
  .map__labels .small { font-size: 19px; }
  .map__labels .villa { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__cue::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =================== PRE-RENDERED PAINT ===================
   Every SVG filter effect is shown as an image made by scripts/bake.js: the painted SVG pieces
   (sources hidden in index.html), the vignettes, the card's deckled paper, the RSVP sky, the
   sprigs.
   Open the page with ?bake to see the live filters instead. Phones, iPhone Safari especially,
   froze for up to a second computing those filters. The 90px margin holds the edges and shadow. */
html.bake [data-bake-src] { display: inline; }
html.bake image[data-baked] { display: none; }
html:not(.bake) .card__paper { inset: -90px; filter: none; background: url("images/baked/card-paper-lg.webp") 0 0 / 100% 100% no-repeat; }
/* the RSVP sky: live gradient, baked clouds placed at the same % spots, and the wash grain as a mask */
.rsvp__sky-art { display: none; }
html:not(.bake) .rsvp__sky { filter: none; background: none; }
html:not(.bake) .rsvp__sky-art {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask: url("images/baked/sky-grain.webp") 0 0 / 192px 192px repeat;
  mask: url("images/baked/sky-grain.webp") 0 0 / 192px 192px repeat;
}
/* the sprigs: the image sits in a 45px padding ring that the negative margin cancels out */
html:not(.bake) .sprig { filter: none; box-sizing: content-box; padding: 45px; margin: -45px; background: url("images/baked/sprig-olive-lg.webp") 0 0 / 100% 100% no-repeat; }
html:not(.bake) .sprig--lemon { background-image: url("images/baked/sprig-lemon-lg.webp"); }
html:not(.bake) .sprig > * { visibility: hidden; }
@media (max-width: 1100px) {
  html:not(.bake) .card__paper { background-image: url("images/baked/card-paper-md.webp"); }
  html:not(.bake) .sprig--olive { background-image: url("images/baked/sprig-olive-md.webp"); }
  html:not(.bake) .sprig--lemon { background-image: url("images/baked/sprig-lemon-md.webp"); }
}
@media (max-width: 600px) {
  html:not(.bake) .card__paper { background-image: url("images/baked/card-paper-sm.webp"); }
  html:not(.bake) .sprig--olive { background-image: url("images/baked/sprig-olive-sm.webp"); }
  html:not(.bake) .sprig--lemon { background-image: url("images/baked/sprig-lemon-sm.webp"); }
}

/* =================== HERO ZOOM ON SCROLL ===================
   Where the browser can tie animations to scrolling, the doorway zoom runs as CSS animations instead
   of main.js setting transforms on every scroll event. iPhone Safari redrew the zooming doorway at
   each new size when JavaScript moved it, which caused short hitches leaving the hero. Same curve as
   main.js: smoothstep over the first screen of scrolling, which is cubic-bezier(1/3, 0, 2/3, 1). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .arch, .hero__copy, .vault {
      animation-timeline: scroll(root block);
      animation-range: 0px max(100svh, 620px);
      animation-fill-mode: both;
      animation-duration: auto;
      animation-timing-function: cubic-bezier(.3333, 0, .6667, 1);
    }
    .arch { animation-name: arch-zoom; }
    .vault { animation-name: vault-sink; }
    .hero__copy { animation-name: copy-rise, copy-fade; animation-timing-function: cubic-bezier(.3333, 0, .6667, 1), linear; }
  }
}
@keyframes arch-zoom { to { transform: scale(1.9); } }
@keyframes vault-sink { to { transform: translateY(60px); } }
@keyframes copy-rise { to { transform: translateY(-90px); } }
@keyframes copy-fade { 0% { opacity: 1.000; } 5% { opacity: 0.988; } 10% { opacity: 0.955; } 15% { opacity: 0.903; } 20% { opacity: 0.834; } 25% { opacity: 0.750; } 30% { opacity: 0.654; } 35% { opacity: 0.549; } 40% { opacity: 0.437; } 45% { opacity: 0.320; } 50% { opacity: 0.200; } 55% { opacity: 0.080; } 60% { opacity: 0.000; } 65% { opacity: 0.000; } 70% { opacity: 0.000; } 75% { opacity: 0.000; } 80% { opacity: 0.000; } 85% { opacity: 0.000; } 90% { opacity: 0.000; } 95% { opacity: 0.000; } 100% { opacity: 0.000; } }

/* ---- "RSVPs open soon" card ---- */
.soon { border: 0; padding: 0; background: transparent; max-width: min(520px, calc(100vw - 32px)); width: 100%; color: var(--ink); }
.soon::backdrop { background: rgba(38, 51, 42, .55); }
.soon__card { position: relative; background: var(--cotton); padding: 44px 40px 36px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25); outline: 1px solid rgba(122, 46, 58, .35); outline-offset: -12px; font-family: var(--body); font-size: 1.1rem; line-height: 1.55; }
.soon__card h2 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 2rem; margin: .1em 0 .6em; color: var(--ink); }
.soon__card .eyebrow { color: var(--vino); }
.soon__card p { margin: 0 0 .9em; }
.soon__card a { color: var(--vino); overflow-wrap: anywhere; }
.soon__x { position: absolute; top: 16px; right: 20px; background: none; border: 0; font-size: 1.8rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 4px 8px; }
.soon__ok { margin-top: .6em; font-family: var(--caps); font-size: 1rem; letter-spacing: .08em; background: var(--vino); color: var(--cotton); border: 0; border-radius: 999px; padding: 10px 28px; cursor: pointer; }
.soon__ok:hover { background: #5A1E28; }
@media (max-width: 520px) { .soon__card { padding: 40px 24px 28px; font-size: 1.02rem; } .soon__card h2 { font-size: 1.7rem; } }

.soon__card:focus { outline: 1px solid rgba(122, 46, 58, .35); }
.soon__x { border-radius: 10px; outline: 2px solid transparent; transition: outline-color .15s; }
.soon__x:focus { outline-color: transparent; }
.soon__x:hover, .soon__x:focus-visible { outline-color: var(--vino); }

/* ---- Gallery: the photo list, shown only if scripts don't run (the wall below replaces it) ---- */
.gallery { width: min(1120px, 90vw); margin: 0 auto; columns: 3 260px; column-gap: 20px; }
.gallery[hidden] { display: none; }
.gallery .photo { margin: 0 0 20px; break-inside: avoid; }
.gallery .photo img { display: block; width: 100%; height: auto; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(20, 24, 21, .92); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.lightbox button { position: absolute; background: none; border: 0; color: #F4EEE2; cursor: pointer; font-size: 2.6rem; line-height: 1; padding: 10px 16px; opacity: .8; }
.lightbox button:hover { opacity: 1; }
.lightbox__x { top: 10px; right: 14px; }
.lightbox__nav--prev { left: 6px; top: 50%; transform: translateY(-50%); font-size: 3.4rem; }
.lightbox__nav--next { right: 6px; top: 50%; transform: translateY(-50%); font-size: 3.4rem; }

/* Gallery wall: gilt frames (baked by scripts/bake-frames.js) with photos that change on their own */
.wall { position: relative; width: min(1100px, 94vw); margin: 0 auto; }
.wall[hidden] { display: none; }
.wall[data-kind="phone"] { width: min(440px, 100%); }
.wall__slot { position: absolute; padding: 0; border: 0; background: none; cursor: zoom-in; }
.wall__win { position: absolute; inset: 0; overflow: hidden; background: var(--intonaco-2); }
.wall__slot--arch .wall__win { border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0; }
.wall__slot--oval .wall__win { border-radius: 50%; }
.wall__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.wall__ph.is-on { opacity: 1; }
.wall__frame { position: absolute; left: -16.667%; top: -12.5%; width: 133.333%; height: 125%; max-width: none; pointer-events: none; }
.wall__slot--wide .wall__frame { left: -11.111%; top: -16.667%; width: 122.222%; height: 133.333%; }
.wall__slot--square .wall__frame { left: -16.667%; top: -16.667%; width: 133.333%; height: 133.333%; }
.wall__slot:focus-visible { outline: none; }
.wall__slot:focus-visible .wall__win { outline: 3px solid var(--vino); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .wall__ph { transition: none; } }

/* ---- Add to calendar (under "The schedule") ---- */
.addcal { margin: 2.6rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; }
.addcal__btn {
  font-family: var(--caps); font-size: 1rem; letter-spacing: .1em; text-decoration: none;
  color: var(--vino); border: 1px solid currentColor; border-radius: 999px; padding: 8px 22px;
  transition: background .25s, color .25s;
}
.addcal__btn:hover, .addcal__btn:focus-visible { background: var(--vino); color: var(--cotton); }
.addcal__alt { font-style: italic; color: var(--ink-soft); font-size: .95em; text-underline-offset: 3px; }

/* ---- Footer links ---- */
.footer__links { margin: 1rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: .98rem; }
.footer__links a { color: #F7F1E4; text-decoration-color: rgba(247, 241, 228, .5); text-underline-offset: 3px; }
.footer__top { font-family: var(--caps); letter-spacing: .14em; text-decoration: none !important; }

/* ---- Even line breaks: no single word left alone on the last line ---- */
h1, h2, h3, h4, h5, .card__date, .card__line, .rsvp__lede, .head__lede, .soon__card p, .countdown__note { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* ---- Easier reading on phones: a touch larger, a little heavier, darker grey ---- */
@media (max-width: 760px) {
  :root { --ink-soft: #484D42; }
  /* only EB Garamond has a 500 weight; font-synthesis keeps Bodoni and IM Fell from being faked bold */
  html { font-synthesis: style; }
  body { font-size: 18.5px; line-height: 1.62; font-weight: 500; }
  b, strong { font-weight: 600; }
  .eyebrow, .card__small, .event__time { font-size: 1rem; }
  body::before { opacity: .06; }
}

/* ---- "RSVPs open soon": eases in and out; on phones it rises from the bottom as a sheet ---- */
.soon[open] { animation: soon-in .42s cubic-bezier(.2, .8, .2, 1); }
.soon[open]::backdrop { animation: soon-fade .42s ease; }
.soon.is-closing { animation: soon-out .26s ease-in forwards; }
.soon.is-closing::backdrop { animation: soon-fade .26s ease-in reverse forwards; }
@keyframes soon-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes soon-out { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes soon-fade { from { opacity: 0; } }
.soon__ok, .soon__x { transition: background .2s, transform .15s; }
.soon__ok:active { transform: scale(.97); }
@media (max-width: 520px) {
  .soon { margin: auto 0 0; max-width: 100vw; width: 100vw; max-height: 92svh; }
  .soon__card {
    border-radius: 22px 22px 0 0; outline-offset: -10px;
    padding: 34px 24px calc(26px + env(safe-area-inset-bottom));
  }
  .soon__card::before { content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(38, 51, 42, .2); }
  .soon__ok { width: 100%; padding: 13px 28px; }
  .soon[open] { animation: sheet-in .45s cubic-bezier(.2, .9, .25, 1); }
  .soon.is-closing { animation: sheet-out .28s ease-in forwards; }
  @keyframes sheet-in { from { transform: translateY(100%); } }
  @keyframes sheet-out { to { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) {
  .soon[open], .soon.is-closing, .soon[open]::backdrop, .soon.is-closing::backdrop { animation-duration: .01s; }
}
html.soon-open { overflow: hidden; }