/* ============================================================================
   ANJALI & SIRAJUDHEEN — WEDDING INVITATION
   White, minimal "save the date" styling:
     · thin signature script for the headline and the names
     · letter-spaced serif capitals for the small lines
     · three photo panels carrying the date
     · one-at-a-time photo slider
     · an RSVP reminder that slides up from the bottom
   Mobile-first: the base rules style phones, the @media blocks at the end of
   each section scale it up. Colours and spacing live in :root.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   BRITTANY SIGNATURE (optional, for the two marked lines on the main page)
   Brittany Signature is a commercial font, so it is not bundled with this site.
   If you have the file, put it in assets/fonts/ using the name below and the
   marked lines pick it up immediately — no other change needed. Until then they
   fall back to Sacramento, the closest free match. Guests who happen to have
   the font installed on their own device get it too, thanks to local().
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Brittany Signature";
  src: local("Brittany Signature"),
       url("../assets/fonts/BrittanySignature.woff2") format("woff2"),
       url("../assets/fonts/BrittanySignature.ttf") format("truetype");
  font-display: swap;
}

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  --paper: #ffffff;
  --paper-soft: #f6f5f3;      /* the gentle bands between white sections */
  --paper-deep: #eceae6;
  --ink: #111111;
  --ink-soft: #6f6a66;
  --ink-faint: #a9a39d;
  --line: rgba(17, 17, 17, 0.12);
  --line-strong: rgba(17, 17, 17, 0.34);

  --shadow-sm: 0 6px 18px -14px rgba(0, 0, 0, 0.5);
  --shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.6);
  --radius: 2px;

  --wrap: 1120px;
  --wrap-narrow: 720px;
  --header-h: 62px;
  --gutter: clamp(18px, 5vw, 34px);
  --section-y: clamp(58px, 10vw, 110px);

  /* Used by the header, the opening screen and the footer */
  --font-script: "Sacramento", "Segoe Script", cursive;
  /* Used only by "We decided to forever" and the names on the main page */
  --font-display: "Brittany Signature", "Sacramento", "Segoe Script", cursive;
  --font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 14px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

body.is-loading { overflow: hidden; height: 100%; }

img, svg, iframe { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ink); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* The [hidden] attribute must always win; several components below set
   display: flex/grid, which would otherwise keep a "hidden" element on screen. */
[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- 3. Layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { position: relative; padding: var(--section-y) 0; }

.section--tinted {
  background: var(--paper-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------- 4. Section headings */
.section__header { text-align: center; margin-bottom: clamp(28px, 6vw, 52px); }

.section__heading {
  --ls: 0.06em;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
}
.section__heading--sm {
  --ls: 0.16em;
  font-size: clamp(1.05rem, 3.6vw, 1.4rem);
  letter-spacing: 0.16em;
}

.section__sub {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: clamp(0.92rem, 3.2vw, 1.02rem);
  font-weight: 300;
  text-wrap: pretty;
}

.section__divider {
  width: min(260px, 70%);
  height: auto;
  margin: 20px auto 0;
}

/* --------------------------------------------------------- 5. Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 13px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}

.btn--solid { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--solid:hover { opacity: 0.82; }

.btn--outline { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--outline:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn--sm { min-height: 42px; padding: 10px 20px; font-size: 0.66rem; letter-spacing: 0.18em; }
.btn--block { width: 100%; }

/* -------------------------------------------------------- 6. Intro screen */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: calc(34px + env(safe-area-inset-top)) 26px calc(34px + env(safe-area-inset-bottom));
  text-align: center;
  background: var(--paper);
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
.intro::after {
  content: "";
  position: absolute;
  inset: clamp(12px, 3vw, 22px);
  border: 1px solid var(--line);
  pointer-events: none;
}
.intro.is-open { opacity: 0; visibility: hidden; pointer-events: none; }

.intro__inner { position: relative; z-index: 2; width: 100%; max-width: 520px; }

.intro__label {
  font-family: var(--font-serif);
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.intro__script {
  font-family: var(--font-script);
  font-size: clamp(2.1rem, 10.5vw, 3.6rem);
  line-height: 1.12;
  margin: 14px 0 2px;
  overflow-wrap: break-word;
}

.intro__names {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.7rem, 8.5vw, 2.8rem);
  line-height: 1.15;
  margin-bottom: 6px;
}
.intro__amp { display: inline-block; margin: 0 0.16em; }

.intro__date {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 3.4vw, 1.15rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.intro__button { margin-top: clamp(24px, 6vw, 36px); }

.intro__hint {
  margin-top: 16px;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------ 7. Preview notice */
.preview-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 70;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
}
.preview-bar code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.72rem;
}
.preview-bar__close {
  margin-left: auto;
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------------------------------------------------------- 8. Header/nav */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  color: var(--ink);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
              backdrop-filter 0.3s var(--ease);
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}

.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand__mark {
  flex: none;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  line-height: 1;
}
.brand__names {
  font-family: var(--font-script);
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;
}

.menu-toggle {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle__bars { display: block; width: 18px; }
.menu-toggle__bars i {
  display: block;
  height: 1px;
  margin: 4px 0;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.menu-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile: the menu covers the screen below the header */
.nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 5vh, 30px);
  padding: 30px var(--gutter) calc(40px + env(safe-area-inset-bottom));
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.nav.is-open { opacity: 1; visibility: visible; transform: none; }
.nav a {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 5.4vw, 1.7rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.25s var(--ease);
}
.nav a:hover { opacity: 0.6; }
.nav__cta {
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 10px 30px;
  font-size: clamp(0.8rem, 3.4vw, 0.95rem) !important;
}

/* ------------------------------------------------------------- 9. Hero */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(26px, 6vw, 54px)) var(--gutter) calc(74px + env(safe-area-inset-bottom));
  text-align: center;
  background: var(--paper);
}

/* Blossoms drifting down over the main page, like snow */
.petals {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.petal {
  position: absolute;
  top: 0;
  background: url("../assets/petal.svg") center / contain no-repeat;
  animation-name: petal-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
@keyframes petal-fall {
  0%   { transform: translate3d(0, -60px, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: var(--petal-opacity, 0.8); }
  88%  { opacity: var(--petal-opacity, 0.8); }
  100% { transform: translate3d(var(--drift, 24px), var(--fall, 900px), 0) rotate(300deg); opacity: 0; }
}

.hero__content { position: relative; z-index: 3; width: 100%; max-width: 720px; }

/* The marked line: "We decided to forever" */
.hero__script {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 11.5vw, 5rem);
  line-height: 1.08;
  color: var(--ink);
  overflow-wrap: break-word;
}

/* The three photographs carrying the date */
.hero__panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 14px);
  width: 100%;
  max-width: 520px;
  margin: clamp(22px, 5vw, 36px) auto 0;
}
.panel {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-deep);
}
.panel img { width: 100%; height: 100%; object-fit: cover; }
/* The date printed over each picture. Sized as a share of the panel width, so
   it stays this bold on a phone and on a desktop. */
.panel__digit {
  position: absolute;
  left: 0; right: 0;
  bottom: 1.5%;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 16vw, 7rem);
  line-height: 1;
  color: #fff;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.45);
}

.hero__kicker {
  margin-top: clamp(26px, 6vw, 44px);
  font-family: var(--font-serif);
  font-size: clamp(0.68rem, 2.6vw, 0.8rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* The marked line: the names */
.hero__names {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 10vw, 4rem);
  line-height: 1.16;
  margin-top: 6px;
  text-wrap: balance;
}
.hero__amp { display: inline-block; margin: 0 0.14em; }

.hero__fullnames {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: clamp(0.66rem, 2.5vw, 0.78rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* On a phone the date and the time sit on their own lines; side by side they
   would be too wide for the screen. */
.hero__date {
  margin-top: clamp(18px, 4.4vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 3.6vw, 1.2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero__dot { display: none; }

.hero__venue {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: clamp(0.9rem, 3.4vw, 1.05rem);
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.hero__actions {
  margin-top: clamp(24px, 6vw, 34px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.hero__closing {
  margin-top: clamp(30px, 7vw, 46px);
  font-family: var(--font-serif);
  font-size: clamp(0.68rem, 2.6vw, 0.8rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-wrap: balance;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink-faint);
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
}
.scroll-cue__line {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, transparent, var(--ink));
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.35; transform: scaleY(0.7); }
  50%      { opacity: 1;    transform: scaleY(1); }
}

/* -------------------------------------------------------- 10. Countdown */
.section--countdown {
  padding: clamp(44px, 8vw, 78px) 0;
  text-align: center;
  background: var(--paper-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.countdown {
  margin: clamp(20px, 5vw, 34px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 12px);
  max-width: 620px;
}
.countdown__unit {
  padding: clamp(12px, 3.4vw, 20px) 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.countdown__value {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 7.4vw, 2.6rem);
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  display: block;
  margin-top: 6px;
  font-size: clamp(0.52rem, 2.2vw, 0.62rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.countdown__message {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.countdown__actions { margin-top: clamp(20px, 5vw, 28px); }

/* ------------------------------------------------------------ 11. Story */
.story { font-size: clamp(1rem, 3.5vw, 1.08rem); color: var(--ink-soft); }
.story p + p { margin-top: 1.15em; }
.story p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 3.2em;
  line-height: 0.8;
  padding: 0.06em 0.14em 0 0;
  color: var(--ink);
}

.blessing {
  margin-top: clamp(28px, 6vw, 44px);
  padding: clamp(22px, 5vw, 32px);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
}
.blessing__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  color: var(--ink);
  text-wrap: balance;
}

/* ----------------------------------------------------------- 12. Events */
.events { display: grid; gap: clamp(16px, 4vw, 24px); }

.event-card {
  position: relative;
  padding: clamp(24px, 5.4vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-align: center;
}
.event-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
}
.event-card__divider { width: min(200px, 62%); height: auto; margin: 16px auto 20px; }

.event-card__rows { display: grid; gap: 14px; }
.event-card__row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  text-align: left;
}
.event-card__row svg { width: 18px; height: 18px; margin-top: 4px; color: var(--ink-soft); }
.event-card__row dt {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.event-card__row dd { margin: 2px 0 0; color: var(--ink); line-height: 1.6; }

.event-card__note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-soft);
}
.event-card__actions { margin-top: 22px; }

/* ----------------------------------------------------------- 13. Slider */
.slider { position: relative; max-width: min(100%, 440px); margin: 0 auto; }

/* Without JavaScript the slides simply stack into a grid, so nothing is lost. */
.slider__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.slide { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-deep); }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
  color: #fff;
  font-family: var(--font-serif);
  font-size: clamp(0.88rem, 3.2vw, 1rem);
  letter-spacing: 0.08em;
  text-align: center;
}

.js .slider__track {
  display: flex;
  gap: 0;
  transition: transform 0.6s var(--ease);
}
.js .slide { flex: 0 0 100%; }
.js .slider__viewport { overflow: hidden; }

.slider__arrow,
.slider__dots,
.slider__counter { display: none; }

.js .slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.js .slider__arrow:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.js .slider__arrow--prev { left: clamp(6px, 2vw, -21px); }
.js .slider__arrow--next { right: clamp(6px, 2vw, -21px); }

.js .slider__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.slider__dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.slider__dot.is-active { background: var(--ink); border-color: var(--ink); }

.js .slider__counter {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ----------------------------------------------------------- 14. Venue */
.venue { display: grid; gap: clamp(18px, 4vw, 28px); }

/* With the embedded map switched off, the card sits on its own, centred.
   The doubled class keeps this winning over the two-column desktop rule. */
.venue.venue--single { grid-template-columns: minmax(0, 1fr); }
.venue.venue--single .venue__card { max-width: 640px; margin: 0 auto; }

.venue__card {
  padding: clamp(24px, 5.4vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-align: center;
}
.venue__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 4.6vw, 1.7rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.3;
}
.venue__address { margin-top: 12px; color: var(--ink-soft); }
.venue__note {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.venue__actions { margin-top: 22px; }
.venue__contacts {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
.venue__contacts li { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.venue__contacts span { font-size: 0.9rem; color: var(--ink-soft); }
.venue__contacts a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.venue__contacts a:hover { background: var(--ink); color: #fff; }

.venue__map {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-deep);
  aspect-ratio: 4 / 3;
}
.venue__map iframe { width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------ 15. RSVP */
.rsvp {
  padding: clamp(22px, 5.4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
}
.rsvp .field + .field, .rsvp .field + .field--choice { margin-top: 20px; }
.rsvp .field--choice + .field { margin-top: 20px; }

.field { display: block; }
.field label, .field legend {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field__optional { letter-spacing: 0.08em; text-transform: none; color: var(--ink-faint); }
.field--choice { border: 0; padding: 0; margin: 20px 0 0; }

.field input[type="text"],
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 1rem; /* keeps iOS from zooming on focus */
  font-weight: 300;
  transition: border-color 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 108px; }
.field input[type="text"]:focus,
.field select:focus,
.field textarea:focus { border-color: var(--ink); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }

.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.field__error { margin-top: 7px; font-size: 0.8rem; color: #8d1b29; }

.choice { display: grid; gap: 10px; }
.choice__option { position: relative; display: block; cursor: pointer; }
.choice__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__option span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 0.94rem;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.choice__option span::before {
  content: "";
  flex: none;
  width: 15px; height: 15px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: box-shadow 0.25s var(--ease);
}
.choice__option input:checked + span { border-color: var(--ink); }
.choice__option input:checked + span::before { box-shadow: inset 0 0 0 3.5px var(--ink); }
.choice__option input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.rsvp .btn--block { margin-top: 26px; }
.rsvp__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.6;
}
.rsvp__consent input { flex: 0 0 auto; margin-top: 4px; accent-color: var(--ink); }
.rsvp__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.rsvp__note { margin-top: 14px; font-size: 0.78rem; color: var(--ink-soft); text-align: center; }
.rsvp__status {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.88rem;
  text-align: center;
}
.rsvp__status.is-ok { background: rgba(47, 93, 58, 0.08); }
.rsvp__status.is-error { background: rgba(141, 27, 41, 0.08); }
.rsvp__status.is-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 120;
  width: min(560px, calc(100vw - 32px));
  margin: 0;
  transform: translateX(-50%);
  border-color: rgba(47, 93, 58, 0.24);
  background: #fff;
  box-shadow: 0 10px 32px rgba(20, 17, 15, 0.16);
}
body.has-dock .rsvp__status.is-toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
body.has-preview .rsvp__status.is-toast { bottom: calc(76px + env(safe-area-inset-bottom)); }

.rsvp details.fallback { margin-top: 16px; }
.rsvp details.fallback summary {
  cursor: pointer;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rsvp details.fallback textarea {
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 0.92rem;
  line-height: 1.6;
  resize: vertical;
}
.fallback__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.rsvp-wall__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rsvp-wall__empty { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); font-size: 0.9rem; }
.rsvp-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
}
.rsvp-card__name { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 400; }
.rsvp-card__attendance { margin-top: 8px; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.rsvp-card__guests { margin-top: 7px; font-size: 0.82rem; color: var(--ink-soft); }
.rsvp-card__message { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.9rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.rsvp-card__date { display: block; margin-top: 14px; color: var(--ink-faint); font-size: 0.68rem; letter-spacing: 0.08em; }
@media (max-width: 620px) { .rsvp-wall__list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- 16. Footer */
.site-footer {
  padding: clamp(44px, 9vw, 74px) 0 calc(clamp(44px, 9vw, 74px) + env(safe-area-inset-bottom));
  text-align: center;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.site-footer__message {
  font-family: var(--font-serif);
  font-size: clamp(0.68rem, 2.6vw, 0.8rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.site-footer__signature {
  margin-top: 14px;
  font-family: var(--font-script);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1.2;
}
/* The closing "Regards" list, printed under the names */
.site-footer__regards {
  margin-top: clamp(26px, 6vw, 42px);
  padding-top: clamp(22px, 5vw, 32px);
  border-top: 1px solid var(--line);
}
.regards__heading {
  --ls: 0.3em;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(0.66rem, 2.5vw, 0.78rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: clamp(16px, 4vw, 24px);
}
.regards { display: grid; gap: clamp(12px, 3vw, 18px); }
.regards__row { display: grid; justify-items: center; gap: 3px; }
.regards__label {
  font-size: clamp(0.56rem, 2.2vw, 0.64rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.regards__names {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 3.5vw, 1.12rem);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
}
.site-footer__credit { margin-top: 24px; font-size: 0.72rem; color: var(--ink-faint); }
.site-footer__credit a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line-strong); }

/* ------------------------------------------------- 17. RSVP reminder dock */
/* A small window that slides up from the bottom once the guest has scrolled
   past the main page, so the RSVP is always one tap away. */
.rsvp-dock {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 68;
  max-width: 470px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 16px 38px -24px rgba(0, 0, 0, 0.8);
  visibility: hidden;
  opacity: 0;
  transform: translateY(140%);
  transition: transform 0.55s var(--ease), opacity 0.4s var(--ease),
              visibility 0.55s var(--ease);
}
.rsvp-dock.is-shown { visibility: visible; opacity: 1; transform: none; }

.rsvp-dock__text { min-width: 0; flex: 1 1 auto; }
.rsvp-dock__title {
  font-family: var(--font-serif);
  font-size: clamp(0.9rem, 3.4vw, 1.05rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.25;
}
.rsvp-dock__note {
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--ink-soft);
  line-height: 1.35;
}
.rsvp-dock__button { flex: none; }
.rsvp-dock__close {
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.rsvp-dock__close:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Keep the corners tidy: while the dock is visible the music button sits above
   it, and the preview notice above that, so nothing overlaps. */
body.has-dock .music-widget { bottom: calc(84px + env(safe-area-inset-bottom)); }
body.has-dock .preview-bar { bottom: calc(150px + env(safe-area-inset-bottom)); }

@media (max-width: 379px) {
  .rsvp-dock__note { display: none; }
}

/* ------------------------------------------------- 17b. Credit watermark */
/* A small, quiet badge in the bottom left corner. It steps up with the music
   button so it never lands on the RSVP reminder or the preview notice. */
.watermark {
  position: fixed;
  left: clamp(12px, 3vw, 22px);
  bottom: calc(clamp(12px, 3vw, 22px) + env(safe-area-inset-bottom));
  z-index: 64;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), bottom 0.45s var(--ease);
}
.watermark:hover { opacity: 1; color: var(--ink); border-color: var(--line-strong); }

body.has-preview .watermark { bottom: calc(76px + env(safe-area-inset-bottom)); }
body.has-dock .watermark { bottom: calc(84px + env(safe-area-inset-bottom)); }

/* ------------------------------------------------- 18. Music + lightbox */
/* The floating button and the small player it opens live in one fixed column,
   so the player always sits above the button and both step out of the dock's
   way together. */
.music-widget {
  position: fixed;
  right: clamp(12px, 3vw, 22px);
  bottom: calc(clamp(12px, 3vw, 22px) + env(safe-area-inset-bottom));
  z-index: 65;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;                 /* only the children take taps */
}
.music-widget > * { pointer-events: auto; }

.music-panel {
  width: min(330px, calc(100vw - 32px));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.music-panel.is-open { visibility: visible; opacity: 1; transform: none; }
.music-panel__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 7px 7px 12px;
  border-bottom: 1px solid var(--line);
}
.music-panel__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-panel__close {
  flex: none;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.music-panel__close:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.music-panel__frame { aspect-ratio: 16 / 9; background: #000; }
.music-panel__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* While the player is open the preview notice steps aside completely. */
body.has-panel .preview-bar { display: none !important; }

.music-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.music-toggle:hover { background: var(--ink); color: #fff; }
.music-toggle__icon { display: grid; place-items: center; }
.music-toggle__label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
body.has-preview .music-widget { bottom: calc(76px + env(safe-area-inset-bottom)); }

.music-toggle__bars { display: none; align-items: flex-end; gap: 2px; height: 13px; }
.music-toggle.is-playing .music-toggle__bars { display: flex; }
.music-toggle__bars i {
  width: 1.5px;
  height: 5px;
  background: currentColor;
  animation: eq 0.9s ease-in-out infinite;
}
.music-toggle__bars i:nth-child(2) { animation-delay: 0.15s; }
.music-toggle__bars i:nth-child(3) { animation-delay: 0.3s; }
.music-toggle__bars i:nth-child(4) { animation-delay: 0.45s; }
@keyframes eq {
  0%, 100% { height: 4px; }
  50%      { height: 13px; }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vw, 44px) clamp(12px, 4vw, 60px);
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox__figure img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border: 1px solid var(--line);
  background: var(--paper-soft);
}
.lightbox__figure figcaption {
  max-width: 44ch;
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 3.4vw, 1.1rem);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.lightbox__close,
.lightbox__nav {
  position: fixed;
  z-index: 121;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--ink); color: #fff; }
.lightbox__close { top: calc(16px + env(safe-area-inset-top)); right: 16px; }
.lightbox__nav--prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 12px; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------ 19. Monochrome photos */
.mono .panel img,
.mono .slide img,
.mono .lightbox__figure img { filter: grayscale(1); }

/* ------------------------------------------------------- 20. Scroll anim */
/* Every rule here is scoped to .js, so a browser without scripting shows the
   whole page with no animation and nothing hidden. */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js .reveal--zoom { transform: translateY(18px) scale(0.965); }
.js .reveal--fade { transform: none; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Headings settle: the letters close in as the heading arrives */
.js .reveal-letters {
  opacity: 0;
  transform: translateY(14px);
  letter-spacing: calc(var(--ls, 0.06em) + 0.16em);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease),
              letter-spacing 1.2s var(--ease);
}
.js .reveal-letters.is-visible {
  opacity: 1;
  transform: none;
  letter-spacing: var(--ls, 0.06em);
}

/* The hairlines draw themselves outwards from the middle */
.js .reveal-rule {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1.1s var(--ease);
}
.js .reveal-rule.is-visible { transform: scaleX(1); }

/* The main page arrives in a gentle cascade. The class that hides it is added
   by the script itself, so a browser without scripting never hides anything. */
.js .hero--anim .hero__content > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js .hero--anim.is-ready .hero__content > * { opacity: 1; transform: none; }

#main:focus { outline: none; }

/* ------------------------------------------------- 20. Larger screens */
@media (min-width: 600px) {
  .choice { grid-template-columns: 1fr 1fr; }
  .hero__panels { max-width: 600px; }
  .slider { max-width: min(100%, 520px); }
  .hero__date { flex-direction: row; gap: 0; }
  .hero__dot { display: inline-block; margin: 0 0.5em; color: var(--ink-faint); }
}

@media (min-width: 760px) {
  .events { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .js .slider__arrow--prev { left: -22px; }
  .js .slider__arrow--next { right: -22px; }
  .slider { max-width: 560px; }
}

@media (min-width: 900px) {
  :root { --header-h: 72px; }

  .menu-toggle { display: none; }
  .nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: clamp(18px, 2.4vw, 34px);
    padding: 0;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav a {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: var(--ink);
  }
  .nav__cta { padding: 8px 22px; font-size: 0.7rem !important; }
  .brand__names { font-size: 1.35rem; }

  .venue { grid-template-columns: 0.85fr 1.15fr; align-items: stretch; }
  .venue__map { aspect-ratio: auto; min-height: 430px; }

  .event-card { text-align: left; }
  .event-card__divider { margin-left: 0; }
  .event-card__actions { text-align: left; }

  .hero__panels { max-width: 660px; }
}

/* Short phones: tighten the main page so it fits without hunting */
@media (max-height: 700px) and (orientation: portrait) {
  .hero { padding-top: calc(var(--header-h) + 16px); padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .hero__script { font-size: clamp(2rem, 9.5vw, 2.6rem); }
  .hero__panels { margin-top: 16px; max-width: 380px; }
  .hero__kicker { margin-top: 18px; }
  .hero__names { font-size: clamp(1.8rem, 8.5vw, 2.6rem); }
  .hero__date { margin-top: 14px; }
  .hero__actions { margin-top: 18px; }
  .hero__closing { margin-top: 20px; }
  .scroll-cue { display: none; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .scroll-cue { display: none; }
  .hero { padding-top: calc(var(--header-h) + 20px); padding-bottom: 50px; }
}

/* ------------------------------------------------- 21. Motion & print */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal,
  .js .reveal-letters,
  .js .reveal-rule,
  .js .hero--anim .hero__content > * { opacity: 1; transform: none; }
}

@media print {
  .site-header, .music-toggle, .intro, .preview-bar, .scroll-cue,
  .hero__actions, .venue__map, .lightbox, .slider__arrow, .slider__dots,
  .slider__counter, .petals, .rsvp-dock, .watermark { display: none !important; }
  /* nothing may be left faded out on paper */
  .js .reveal,
  .js .reveal-letters,
  .js .reveal-rule,
  .js .hero--anim .hero__content > * { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; }
  .section--tinted, .section--countdown, .rsvp { background: #fff !important; }
  .section { padding: 18px 0; }
  .panel img, .slide img { filter: grayscale(1); }
}