@font-face {
  font-family: "Hermaiona";
  src: url("../fonts/hermaiona.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Lialisa";
  src: url("../fonts/lialisa.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Easy November";
  src: url("../fonts/easy-november.woff2") format("woff2");
  font-display: swap;
}

/* ==========================================================================
   Home page: one long invitation, laid out like the reference site Max
   liked and dressed in Claud's design: script titles beside her hand-drawn
   illustrations, ivory sections alternating with soft garden colours,
   thin-ruled cards. Loaded after style.css, which supplies the tokens,
   header, envelope, map, RSVP form and the .mega section titles.
   ========================================================================== */

.classic { background: var(--paper-light); }

/* Envelope screen: "You are invited!", the date, then "Tap to open" */
.classic .intro__names { font-family: "Easy November", var(--font-script); font-weight: 400; margin: 0 0 0.2rem; animation-delay: 0.2s; }
.classic .intro__from {
  font-family: var(--font-display); font-style: normal; font-size: 0.78rem; letter-spacing: 0.4em;
  margin: 0 0 clamp(1.8rem, 5vh, 2.8rem); animation-delay: 0.4s;
}
.classic .intro__hint { font-family: var(--font-display); font-style: normal; font-size: 0.68rem; letter-spacing: 0.34em; text-transform: uppercase; }

/* The opening envelope is Claud's envelope artwork. Pocket and flap are cut from the same picture,
   so closed it looks exactly like her design. The flap's cut goes round the seal, so the whole seal
   lifts away with the flap; the pocket uses a copy of the art with the seal painted out.
   The card inside is clean white with teal lettering, to go with the mint and the seal. */
.classic .envelope { aspect-ratio: 900 / 641; }
.classic .envelope__back { background: #b9dfc6; }
.classic .envelope__front { background: url("../img/art/envelope-mint-pocket.webp") center / 100% 100% no-repeat; }
.classic .envelope__flap { background: url("../img/art/envelope-mint.webp") center / 100% 100% no-repeat; }
.classic .envelope__front { clip-path: polygon(0 0, 50% 72.6%, 100% 0, 100% 100%, 0 100%); }
.classic .envelope__flap { clip-path: polygon(0 0, 100% 0, 57.61% 61.55%, 58.70% 63.25%, 59.60% 65.17%, 60.29% 67.25%, 60.75% 69.44%, 60.98% 71.72%, 60.96% 74.01%, 60.70% 76.27%, 60.21% 78.46%, 59.49% 80.52%, 58.56% 82.40%, 57.44% 84.07%, 56.16% 85.49%, 54.74% 86.63%, 53.22% 87.47%, 51.63% 87.97%, 50.00% 88.14%, 48.37% 87.97%, 46.78% 87.47%, 45.26% 86.63%, 43.84% 85.49%, 42.56% 84.07%, 41.44% 82.40%, 40.51% 80.52%, 39.79% 78.46%, 39.30% 76.27%, 39.04% 74.01%, 39.02% 71.72%, 39.25% 69.44%, 39.71% 67.25%, 40.40% 65.17%, 41.30% 63.25%, 42.39% 61.55%); }
.classic .envelope__seal { display: none; }
/* Opening, as in Claud's open-envelope artwork: the closed flap lifts towards you, then the open flap
   (its lace inside, the seal peeping over the top) carries on up and stands above a whole, uncut
   envelope. The two halves of the turn share one easing, so it reads as a single slow movement.
   The card slides out between the two once the flap is up (timings in main.js). */
.classic .envelope__pocket-open, .classic .envelope__pocket-front, .classic .envelope__flap-open { position: absolute; left: 0; right: 0; opacity: 0; pointer-events: none; }
/* The open envelope in two layers: the inside back (behind the card) and the folded side and bottom
   flaps (in front of it), split along the V-shaped fold in Claud's artwork. The card sits between them,
   so it rises out of that V. */
.classic .envelope__pocket-open, .classic .envelope__pocket-front {
  top: 0; bottom: 0;
  background: url("../img/art/envelope-open-pocket.webp") center / 100% 100% no-repeat;
  transition: opacity 0.7s ease 0.25s;
}
.classic .envelope__pocket-open { z-index: 1; }
.classic .envelope__pocket-front { z-index: 3; clip-path: polygon(0 0, 1.9% 0, 29.2% 47.9%, 70.4% 47.9%, 97.6% 0, 100% 0, 100% 100%, 0 100%); }
.classic .envelope__front { transition: opacity 0.7s ease 0.25s; }
.classic .envelope.is-opening .envelope__front { opacity: 0; }
.classic .envelope.is-opening .envelope__pocket-front { opacity: 1; }
.classic .envelope__flap-open {
  bottom: 100%; aspect-ratio: 1000 / 595; z-index: 1;
  background: url("../img/art/envelope-open-flap.webp") center bottom / 100% 100% no-repeat;
  transform-origin: 50% 100%; transform: rotateX(-90deg);
  transition: transform 0.75s cubic-bezier(0.25, 0.6, 0.35, 1) 0.9s, opacity 0s linear 0.9s;
}
.classic .envelope__flap { transition: transform 0.75s cubic-bezier(0.55, 0, 0.75, 0.4) 0.15s, opacity 0s linear 0.9s; }
.classic .envelope.is-opening .envelope__flap { transform: rotateX(90deg); opacity: 0; }
.classic .envelope.is-opening .envelope__pocket-open { opacity: 1; }
.classic .envelope.is-opening .envelope__flap-open { opacity: 1; transform: none; }
.classic .envelope.is-opening { transition-duration: 1.6s; }
/* Once the card is out, the envelope screen lifts away like a sheet of paper: it swipes up with a soft
   shadow and rounded bottom edge, the envelope travels a little faster than the film behind it
   (gentle depth), and the save-the-date page rises in underneath. One easing for every layer. */
.classic .intro.is-swiping {
  --swipe: 1.35s cubic-bezier(0.77, 0, 0.18, 1);
  opacity: 1; visibility: visible;
  transform: translate3d(0, -100%, 0);
  border-radius: 0 0 48px 48px;
  box-shadow: 0 24px 60px rgba(20, 30, 45, 0.28);
  transition: transform var(--swipe), border-radius var(--swipe), box-shadow var(--swipe);
  will-change: transform;
}
.classic .intro .intro__inner, .classic .intro .intro__media { transition: transform 1.35s cubic-bezier(0.77, 0, 0.18, 1); }
.classic .intro.is-swiping .intro__inner { transform: translate3d(0, -14vh, 0); }
.classic .intro.is-swiping .intro__media { transform: translate3d(0, 24vh, 0); }
.classic .intro.is-swiping .intro__skip { opacity: 0; transition: opacity 0.3s; }
/* The letter inside is a heart of cream paper with a stitched edge (like the envelope's dashed fold).
   Its point stays tucked behind the V fold when it rises out. */
.classic .envelope__card {
  left: 12%; right: 12%; top: 3%; height: auto; aspect-ratio: 100 / 90; padding: 0;
  background: none; box-shadow: none; border-radius: 0; color: var(--teal);
  justify-content: flex-start; padding-top: 18%;
  filter: drop-shadow(0 3px 6px rgba(20, 30, 45, 0.18));
  transition-duration: 1.6s;
}
.classic .envelope__card::before, .classic .envelope__card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.classic .envelope__card::before {
  background: var(--paper-light) url("../img/paper-tile.webp") center / 360px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%2090%22%3E%3Cpath%20d%3D%22M50%2088C21%2067%202%2050%202%2027%202%2012%2013%202%2027%202c10%200%2018%205%2023%2013C55%207%2063%202%2073%202c14%200%2025%2010%2025%2025%200%2023-19%2040-48%2061z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%2090%22%3E%3Cpath%20d%3D%22M50%2088C21%2067%202%2050%202%2027%202%2012%2013%202%2027%202c10%200%2018%205%2023%2013C55%207%2063%202%2073%202c14%200%2025%2010%2025%2025%200%2023-19%2040-48%2061z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.classic .envelope__card::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%2090%22%3E%3Cpath%20d%3D%22M50%2088C21%2067%202%2050%202%2027%202%2012%2013%202%2027%202c10%200%2018%205%2023%2013C55%207%2063%202%2073%202c14%200%2025%2010%2025%2025%200%2023-19%2040-48%2061z%22%20transform%3D%22translate%2850%2045%29%20scale%280.86%29%20translate%28-50%20-45%29%22%20fill%3D%22none%22%20stroke%3D%22%231f5f59%22%20stroke-opacity%3D%22.45%22%20stroke-width%3D%22.6%22%20stroke-dasharray%3D%222.2%201.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.classic .envelope.is-open .envelope__card, .classic .intro.is-swiping .envelope__card { transform: translateY(-49%); }
.classic .envelope__card .script {
  color: var(--teal); font-family: "Easy November", var(--font-script); font-weight: 400;
  font-size: clamp(2.3rem, 9.5vw, 3.8rem); line-height: 1.02; margin: 0;
}
.classic .intro__from { text-transform: uppercase; }
.classic .intro__names { font-size: clamp(2.4rem, 10vw, 5.2rem); text-wrap: balance; padding: 0 var(--gutter); }

/* Sections */
.c-sec { position: relative; padding: clamp(4rem, 11vw, 6.5rem) 0; text-align: center; }
.c-light { background: var(--paper-light); color: var(--ink); }
.c-blush, .c-sage, .c-sky, .c-lilac { color: var(--ink); background-image: url("../img/paper-grain.webp"); background-size: 700px; background-blend-mode: multiply; }
.c-blush { background-color: var(--garden-blush); }
.c-sage { background-color: var(--garden-sage); }
.c-sky { background-color: var(--garden-sky); }
.c-lilac { background-color: var(--garden-lilac); }
.c-wrap { max-width: 640px; margin: 0 auto; padding: 0 var(--gutter); }
.c-wrap--wide { max-width: 980px; }

/* Type */
.c-label { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.24em; line-height: 1.9; text-transform: uppercase; margin: 0 0 1rem; }
.c-label--b { font-size: 0.74rem; letter-spacing: 0.2em; color: var(--blue); }
.c-text { font-size: 1.15rem; line-height: 1.7; color: var(--ink-soft); }
.c-lead { font-style: italic; font-size: clamp(1.35rem, 4vw, 1.6rem); line-height: 1.5; margin: 0 0 1rem; }
.c-small { font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 0.4rem; }
.c-tiny { font-style: italic; font-size: 1rem; color: var(--ink-faint); margin: 0.6rem 0 0; }
.c-place { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.08em; margin: 0 0 0.3rem; }
.c-sign { font-family: "Lialisa", var(--font-script); font-weight: 400; font-size: clamp(2.6rem, 8vw, 3.4rem); line-height: 1.2; margin: 1.4rem 0 0; }
.c-gap { margin-top: clamp(2rem, 6vw, 2.8rem); }
.c-tbc { font-style: italic; color: var(--ink-faint); }
.c-narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.c-link {
  background: none; border: 0; padding: 0.2rem; cursor: pointer;
  font-family: var(--font-body); font-style: italic; font-size: 1.12rem; color: var(--blue);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.c-link:hover { color: var(--ink); }

/* Sub-titles inside a section (The venue, What to wear...), in the same script as the titles */
.c-sub { font-family: "Parisienne", var(--font-script); font-weight: 400; font-size: clamp(2.3rem, 8vw, 3.2rem); line-height: 1.2; margin: 0 0 0.8rem; text-wrap: balance; }

/* Claud's drawings beside a title, sized to the title */
.c-headart { display: flex; align-items: center; justify-content: center; gap: clamp(0.6rem, 2.5vw, 1.2rem); margin-bottom: clamp(0.8rem, 3vw, 1.2rem); }
.c-headart .mega, .c-headart .c-sub { margin: 0; }
.c-headart__img { flex: none; width: auto; height: clamp(68px, 17vw, 112px); }
.c-headart--sub .c-headart__img { height: clamp(56px, 14vw, 84px); }

/* Square-cornered buttons, as on the reference */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none;
  background: var(--ink); color: var(--paper-light); border: 1px solid var(--ink); border-radius: 2px;
  padding: 0.9rem 1.5rem; margin-top: 1.1rem; cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.c-btn:hover { background: transparent; color: var(--ink); }
.c-btn--lg { font-size: 0.72rem; padding: 1.15rem 2.2rem; }
.c-btn--ghost { background: transparent; color: var(--ink); }
.c-btn--ghost:hover { background: var(--ink); color: var(--paper-light); }

/* Monogram in an oval */
.c-mono {
  width: 78px; height: 100px; margin: 0 auto clamp(1.6rem, 5vw, 2.2rem); border: 1px solid currentColor; border-radius: 50%;
  display: grid; place-items: center; position: relative;
}
.c-mono::after { content: ""; position: absolute; inset: 5px; border: 1px solid currentColor; border-radius: 50%; opacity: 0.35; }
.c-mono span { font-family: var(--font-script); font-size: 1.4rem; line-height: 1; padding-top: 0.15em; white-space: nowrap; }

/* The invitation card, with the couple's names in Hermaiona */
.c-invite {
  position: relative; max-width: 540px; margin: 0 auto; border-radius: 2px;
  background: linear-gradient(rgba(255, 253, 249, 0.5), rgba(255, 253, 249, 0.5)), url("../img/paper-tile.webp") center / 640px;
  padding: clamp(2.6rem, 8vw, 3.6rem) clamp(1.2rem, 5vw, 2.6rem);
  box-shadow: 0 1px 2px rgba(48, 66, 84, 0.1), 0 26px 50px -32px rgba(48, 66, 84, 0.45);
}
.c-invite__rule { width: 44px; height: 1px; background: var(--line-strong); margin: clamp(0.8rem, 3vw, 1.2rem) auto clamp(1.2rem, 4vw, 1.6rem); }
.c-invite .c-place { margin-top: 1.2rem; }
.c-names {
  font-family: "Hermaiona", var(--font-script); font-weight: 400; font-size: clamp(2.6rem, 11vw, 5.4rem);
  line-height: 1.3; white-space: nowrap; margin: 0.2rem 0; color: var(--ink);
}
.c-names .c-names__amp { font-size: 0.75em; color: var(--blue); }

/* Message from us: the film, with Claud's bow tied on its top-left corner */
.c-film { position: relative; max-width: 760px; margin: 0 auto; padding: 8px; border: 1px solid var(--line-strong); }
.c-film video { display: block; width: 100%; height: auto; background: #000; }
.c-film__bow { position: absolute; z-index: 2; left: clamp(-66px, -6vw, -16px); top: clamp(-72px, -8.5vw, -32px); width: clamp(102px, 24vw, 205px); height: auto; transform: rotate(-8deg); pointer-events: none; }
.c-film__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1.5rem 0.95rem 1.2rem;
  border: 1px solid rgba(255, 253, 249, 0.8); border-radius: 999px; cursor: pointer;
  background: rgba(30, 45, 62, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: var(--paper-light); font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
  transition: background 0.3s, opacity 0.3s;
}
.c-film__play svg { flex: none; width: 18px; height: 18px; }
.c-film__play:hover { background: rgba(30, 45, 62, 0.7); }
.c-film.is-playing .c-film__play { opacity: 0; pointer-events: none; }

/* Countdown with colons, and add to calendar */
.c-count { display: flex; justify-content: center; align-items: flex-start; gap: clamp(0.5rem, 3vw, 1.2rem); }
.c-count__u { min-width: 3.4rem; }
.c-count__n { display: block; font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.c-count__l { display: block; margin-top: 0.6rem; font-family: var(--font-display); font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.c-count .countdown-done { color: var(--blue); margin: 0; }
.c-count__sep { font-family: var(--font-display); font-size: clamp(1.6rem, 7vw, 2.4rem); line-height: 1.1; color: var(--ink-faint); }
.c-cal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: clamp(2rem, 6vw, 2.6rem); }
.c-cal .c-tiny { flex-basis: 100%; margin: 0 0 0.2rem; }
.c-cal .c-btn { margin-top: 0; min-width: 210px; }

/* Our story, as in Claud's Canva: warm cream with a few sprays of cherry blossom at the edges,
   the dancing couple beside the title, the photos, and the couple toasting on the cake in the
   bottom-right corner, clear of the photos. */
#story { background: #f4efe0 url("../img/paper-grain.webp") 0 0 / 700px; background-blend-mode: multiply; overflow: hidden; isolation: isolate; }
#story::before, #story::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: 0.55;
  width: clamp(320px, 70vw, 620px); aspect-ratio: 1600 / 968; background: url("../img/art/blossoms.webp") center / contain no-repeat;
}
#story::before { top: -7%; right: -26%; }
#story::after { bottom: -6%; left: -20%; transform: rotate(180deg); }
.c-story__photos { position: relative; margin: clamp(2.4rem, 7vw, 3.2rem) calc(-1 * var(--gutter)) 0; }
.c-story__photos .c-gallery { padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding: 0 var(--gutter); }
@media (min-width: 1040px) { .c-story__photos { margin-left: 0; margin-right: 0; } .c-story__photos .c-gallery { padding-left: 2px; padding-right: 2px; } }
.c-story__cake { display: block; width: auto; height: clamp(120px, 34vw, 170px); margin: clamp(1.4rem, 4vw, 2rem) 0 0 auto; pointer-events: none; }
@media (min-width: 1200px) {
  .c-story__cake { position: absolute; right: clamp(2rem, 5vw, 6rem); bottom: clamp(2rem, 4vw, 3.5rem); height: 260px; margin: 0; }
}

/* Our story: the words */
.c-story__text { max-width: 600px; margin: 0 auto; }
.c-story__text p { font-size: clamp(1.12rem, 2.4vw, 1.25rem); line-height: 1.8; color: var(--ink-soft); margin: 0 0 1rem; }
.c-story__text .c-story__close { font-family: "Parisienne", var(--font-script); font-size: clamp(1.5rem, 4.6vw, 1.9rem); line-height: 1.4; color: var(--ink); margin-top: 1.4rem; }

/* Gallery: photos keep their own shape. A swipeable row on a phone, a staggered layout on larger screens. */
.c-gallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 16px; }
.c-gallery::-webkit-scrollbar { display: none; }
.c-gallery__item {
  flex: none; height: clamp(220px, 60vw, 340px); padding: 0; border: 0; background: none; overflow: hidden; cursor: zoom-in;
  border-radius: 10px; scroll-snap-align: center; box-shadow: 0 12px 26px -16px rgba(48, 66, 84, 0.45);
}
.c-gallery__item img { display: block; height: 100%; width: auto; transition: transform 0.6s var(--ease); }
@media (min-width: 700px) { .c-gallery__item { height: 320px; } }
.c-strip__nav {
  position: absolute; z-index: 2; top: calc(50% - 8px); transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); cursor: pointer;
  background: rgba(255, 253, 249, 0.94); color: var(--ink); box-shadow: 0 6px 16px -8px rgba(48, 66, 84, 0.5);
  display: none; place-items: center; transition: opacity 0.25s;
}
.c-strip__nav svg { width: 20px; height: 20px; }
.c-strip__nav:disabled { opacity: 0; pointer-events: none; }
.c-strip__prev { left: 8px; }
.c-strip__next { right: 8px; }
@media (min-width: 700px) { .c-strip__nav { display: grid; } }
.c-gallery__item:hover img { transform: scale(1.04); }
.c-gallery__hint { margin: 0.4rem 0 0; }
.c-gallery__item:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* The venue, Schedule of the day, What to wear and the bridal party are separate sections, each
   taking its turn in the light / colour pattern (Our story's cream counts as a colour). */
#venue .c-label--b, #attire .c-label--b { margin-bottom: 0.6rem; }
.c-venue-row { display: grid; gap: clamp(0.6rem, 3vw, 1rem); align-items: center; }
.c-venue .c-drop--card { margin-top: 1.4rem; }
.c-venue .c-btn { margin-top: 0.8rem; }
.c-venue__art { display: block; width: min(100%, 360px); height: auto; margin: 0 auto; pointer-events: none; }
@media (min-width: 760px) {
  .c-venue-row { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); margin-top: 1rem; }
  .c-venue__art { width: 100%; max-width: 440px; }
}

/* Thin-ruled cards: the additional events */
.c-card { border: 1px solid var(--line-strong); padding: clamp(1.6rem, 5vw, 2.2rem) clamp(1.2rem, 4vw, 2rem); background: var(--paper-light); position: relative; }
.c-card::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--line); pointer-events: none; }
.c-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.c-card__art { display: block; width: auto; max-width: 80%; height: clamp(96px, 24vw, 128px); margin: 0 auto 1rem; }
.c-card__name { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.5rem; }
.c-qr { width: 96px; height: 96px; margin: 1rem auto 0; display: block; }

/* Schedule of the day: icons in a row */
.c-steps { list-style: none; padding: 0; margin: clamp(1.2rem, 4vw, 1.8rem) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem 0; }
.c-steps li { flex: 0 0 33.33%; display: flex; flex-direction: column; align-items: center; padding: 0 0.4rem; }
.c-steps svg { width: 44px; height: 44px; color: var(--blue); margin-bottom: 0.6rem; }
.c-steps__t { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.6; }
.c-steps__d { font-style: italic; font-size: 1.02rem; color: var(--ink-soft); }
@media (min-width: 720px) { .c-steps li { flex-basis: 20%; } }
/* On phones, one line per moment: icon, time, what's happening */
@media (max-width: 719px) {
  .c-steps { display: block; max-width: 420px; margin-left: auto; margin-right: auto; }
  .c-steps li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 0 0.9rem; padding: 0.6rem 0.2rem; border-top: 1px solid var(--line); text-align: left; }
  .c-steps li:last-child { border-bottom: 1px solid var(--line); }
  .c-steps svg { width: 30px; height: 30px; margin: 0; }
  .c-steps__t { line-height: 1.4; }
  .c-steps__d { text-align: right; }
}

/* What to wear: ladies, then gentlemen with Claud's suits and their colour swatches */
.c-wear { display: grid; gap: 1.4rem; margin-top: 1.2rem; }
.c-wear__block { padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.c-wear__block .c-small { margin: 0; }
.c-wear__img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0.2rem auto 0.5rem; }
@media (min-width: 760px) { .c-wear { grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 2.8rem); align-items: start; } }
.c-wear__notes { list-style: none; padding: 0; margin: clamp(1.6rem, 5vw, 2.2rem) auto 0; max-width: 560px; }
.c-wear__notes li { font-size: 1.05rem; line-height: 1.5; color: var(--ink-soft); padding: 0.55rem 0; border-top: 1px solid var(--line); }
.c-wear__notes li:first-child { border-top: 0; }
.c-wear__ask { margin-top: 1.2rem; }

/* Ninongs, ninangs and the bridal party: one long list */
.c-roll { margin: clamp(1.4rem, 4vw, 1.8rem) auto 0; max-width: 420px; }
.c-roll dt { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blue); margin-top: 1.1rem; }
.c-roll dt:first-child { margin-top: 0; }
.c-roll dd { margin: 0.25rem 0 0; font-size: 1.12rem; }

/* Map */
.c-map { margin: 0 0 clamp(2rem, 6vw, 2.6rem); text-align: left; }

/* RSVP */
#rsvp-box { margin-top: clamp(2rem, 6vw, 3rem); text-align: left; }
#rsvp .c-label--b { margin-top: 1.4rem; }

/* Footer */
.c-foot { background: var(--paper-light); border-top: 1px solid var(--line); color: var(--ink); text-align: center; padding: clamp(3.5rem, 10vw, 5rem) var(--gutter) 2.4rem; }
.c-foot .c-mono { margin-bottom: 1.2rem; }
.c-foot__names { font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.34em; text-transform: uppercase; margin: 0 0 0.4rem; }
.c-foot__date { font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 1.6rem; }
.c-foot__small { font-style: italic; font-size: 1rem; color: var(--ink-faint); margin: 0; }

/* Drop-downs: FAQs, hotels, Explore lists and the venue's travel notes */
.c-drops { text-align: left; border-top: 1px solid var(--line-strong); }
.c-drop { border-bottom: 1px solid var(--line); }
.c-drop > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0.1rem; font-family: var(--font-display); font-size: clamp(0.98rem, 2.6vw, 1.08rem); line-height: 1.4;
  transition: color 0.25s; -webkit-tap-highlight-color: transparent;
}
.c-drop > summary::-webkit-details-marker { display: none; }
.c-drop > summary::after {
  content: ""; flex: none; width: 13px; height: 13px; opacity: 0.8;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  transition: transform 0.35s var(--ease);
}
.c-drop[open] > summary::after { transform: rotate(45deg); }
.c-drop > summary:hover { color: var(--blue); }
.c-drop__body { padding: 0 2rem 1.3rem 0.1rem; }
.c-drop__body p { font-size: 1.08rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 0.7rem; }
.c-drop__body p:last-child { margin-bottom: 0; }
.c-drop[open] > .c-drop__body, .c-drop[open] > .c-list { animation: drop-in 0.4s var(--ease); }
@keyframes drop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.c-drops__group { text-align: left; margin: clamp(2.2rem, 6vw, 3rem) 0 0.5rem; }
.c-lead + .c-drops__group { margin-top: clamp(1.4rem, 4vw, 2rem); }
.c-drop--card { text-align: left; max-width: 520px; margin: 1.6rem auto 0; border-top: 1px solid var(--line); }

/* Names in a drop-down, each linking to Google Maps */
.c-list { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.c-list li + li { border-top: 1px dashed var(--line); }
.c-list a { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: center; padding: 0.75rem 0.1rem; color: inherit; text-decoration: none; }
.c-list a::after {
  content: "Map \2197"; grid-column: 2; grid-row: 1 / span 3;
  font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue);
}
.c-list__name { grid-column: 1; font-weight: 600; font-size: 1.14rem; line-height: 1.35; transition: color 0.25s; }
.c-list__tag { grid-column: 1; font-style: italic; font-size: 1rem; color: var(--ink-soft); }
.c-list__note { grid-column: 1; font-size: 0.95rem; color: var(--ink-faint); }
.c-list a:hover .c-list__name { color: var(--blue); }

/* Where to stay: the four areas */
.c-areas { display: grid; grid-template-columns: 1fr; gap: 1.4rem 1.8rem; margin-top: clamp(1.8rem, 5vw, 2.4rem); text-align: left; }
.c-areas > div { border-top: 1px solid var(--line-strong); padding-top: 1rem; }
.c-areas .c-label--b { margin-bottom: 0.4rem; }
@media (min-width: 560px) { .c-areas { grid-template-columns: 1fr 1fr; } }

/* Photo viewer: opens over the page */
.c-lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 28, 38, 0.95); color: var(--paper-light); }
.c-lightbox[open] { display: grid; place-items: center; animation: fade-in 0.3s var(--ease); }
.c-lightbox::backdrop { background: transparent; }
.c-lightbox__img { max-width: min(92vw, 1000px); max-height: 78vh; width: auto; height: auto; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); }
.c-lightbox__nav, .c-lightbox__close {
  position: absolute; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 253, 249, 0.4); border-radius: 50%; background: rgba(20, 28, 38, 0.45); color: var(--paper-light);
}
.c-lightbox__nav svg, .c-lightbox__close svg { width: 22px; height: 22px; }
.c-lightbox__prev { left: clamp(0.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.c-lightbox__next { right: clamp(0.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.c-lightbox__close { top: clamp(0.8rem, 3vw, 1.6rem); right: clamp(0.8rem, 3vw, 1.6rem); }
.c-lightbox__count { position: absolute; left: 0; right: 0; bottom: clamp(1rem, 4vw, 2rem); margin: 0; text-align: center; font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.24em; color: rgba(255, 253, 249, 0.75); }

/* Pop-up card (ninongs & ninangs) */
.c-pop { width: min(92vw, 520px); max-width: none; padding: 0; border: 0; background: var(--paper-light); color: var(--ink); box-shadow: 0 30px 80px rgba(20, 30, 45, 0.35); }
.c-pop::backdrop { background: rgba(20, 28, 38, 0.6); }
.c-pop[open] { animation: pop-in 0.35s var(--ease); }
.c-pop__inner { padding: clamp(2rem, 7vw, 2.8rem) clamp(1.4rem, 6vw, 2.4rem); text-align: center; }
.c-pop__inner > p:not(.c-label) { font-size: 1.1rem; line-height: 1.65; color: var(--ink-soft); }
.c-pop form { margin: 0; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html:has(dialog[open]) { overflow: hidden; }

/* Save the date over Claud's photo of the two of them running by the mountains. On phones the date sits
   in the sky and they run along the bottom; on wide screens the date moves to the left so it never
   covers them. A soft cream wash keeps the teal lettering readable. */
.hero--photo { background: var(--paper-light); place-items: start center; }
.hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.hero--photo::before { background: linear-gradient(180deg, rgba(255, 253, 249, 0.6) 0%, rgba(255, 253, 249, 0.3) 45%, rgba(255, 253, 249, 0) 66%); }
.hero--photo .hero__content { padding-top: clamp(5.5rem, 12svh, 8rem); padding-bottom: 2rem; }
.hero--photo .std__date { font-size: min(40vw, 15svh); }
@media (min-width: 900px) {
  .hero--photo { place-items: center start; }
  .hero__photo { object-position: 50% 80%; }
  .hero--photo::before { background: linear-gradient(90deg, rgba(255, 253, 249, 0.62) 0%, rgba(255, 253, 249, 0.28) 38%, rgba(255, 253, 249, 0) 58%); }
  .hero--photo .hero__content { width: auto; padding: 6rem 0 4rem clamp(3rem, 9vw, 9rem); }
  .hero--photo .std__date { font-size: min(20vw, 22svh); }
}

/* Music button (bottom right): little bars that dance while the music plays */
.music-toggle {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 40;
  width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 253, 249, 0.88); color: var(--teal);
  border: 1px solid rgba(31, 95, 89, 0.35);
  box-shadow: 0 4px 14px rgba(20, 30, 45, 0.12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity 0.6s var(--ease), transform 0.3s var(--ease);
}
.music-toggle:hover { transform: scale(1.06); }
.show-intro .music-toggle, .menu-open .music-toggle { opacity: 0; pointer-events: none; }
.music-toggle__bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.music-toggle__bars i { display: block; width: 2px; height: 4px; background: currentColor; border-radius: 1px; transition: height 0.4s var(--ease); }
.music-toggle.is-playing .music-toggle__bars i { animation: music-bar 1.1s ease-in-out infinite alternate; }
.music-toggle.is-playing .music-toggle__bars i:nth-child(2) { animation-delay: -0.4s; animation-duration: 0.9s; }
.music-toggle.is-playing .music-toggle__bars i:nth-child(3) { animation-delay: -0.7s; animation-duration: 1.25s; }
.music-toggle.is-playing .music-toggle__bars i:nth-child(4) { animation-delay: -0.2s; animation-duration: 1s; }
.music-toggle[aria-pressed="false"]::after {
  content: ""; position: absolute; width: 22px; height: 1.5px; background: currentColor; transform: rotate(-45deg); border-radius: 1px;
}
@keyframes music-bar { from { height: 3px; } to { height: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .music-toggle.is-playing .music-toggle__bars i { animation: none; height: 10px; }
}

/* Top-left corner: Claud's drawing of the two of them behind a big heart (in place of "M & C") */
.monogram { padding-top: 0; display: flex; align-items: center; }
.monogram__art { display: block; height: 2.6rem; width: auto; transition: transform 0.4s var(--ease); }
.monogram:hover .monogram__art { transform: rotate(-4deg) scale(1.05); }

/* Welcome heading in Claud's Easy November (her pick, like "A love letter" on the envelope) */
#welcome .mega { font-family: "Easy November", var(--font-script); font-weight: 400; }