/* ============================================================
   Olivia & Blaine - editorial invitation skeleton
   Cream paper, moss-green ink, calligraphic script names,
   refined serif caps, full-bleed Mourne hero.
   ============================================================ */

/* ------------------------------------------------------------
   Self-hosted display faces (chosen by Olivia, 2026-08-29)
   - Cantique (Velvetyne) — SIL Open Font License 1.1:
     free for commercial web use & embedding.
   - Basteleur Moonlight (Velvetyne, velvetyne.fr/fonts/basteleur)
     — SIL Open Font License 1.1: free for commercial web use.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Cantique";
  src: url("../assets/fonts/cantique-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Basteleur Moonlight";
  src: url("../assets/fonts/basteleur-moonlight.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f3ecdd;
  --paper-deep: #ece3cf;
  --ink: #2a4632;
  --ink-soft: #4a6a50;
  --ink-faint: rgba(42, 70, 50, 0.55);
  --rule: rgba(42, 70, 50, 0.25);
  --sky: #9db8d2;
  --peri: #7c8bc4;
  --butter: #e9c46a;
  --hero-cream: #f6f0e2;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --script: "Cantique", "Cormorant Garamond", Georgia, serif;
  --display: "Basteleur Moonlight", "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
}

::selection {
  background: rgba(233, 196, 106, 0.45);
  color: #23402c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* offset anchored sections below the fixed nav */
section[id], header[id] { scroll-margin-top: 66px; }

body {
  background-color: var(--paper);
  /* speckled-paper feel: faint radial flecks over cream */
  background-image:
    radial-gradient(rgba(42, 70, 50, 0.055) 0.5px, transparent 0.5px),
    radial-gradient(rgba(60, 55, 20, 0.045) 0.5px, transparent 0.6px);
  background-size: 11px 11px, 23px 23px;
  background-position: 0 0, 6px 9px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- animated film grain overlay ---------- */
.grain {
  position: fixed;
  top: -60px; left: -60px; right: -60px; bottom: -60px;
  z-index: 50;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  animation: grainShift 1.4s steps(6) infinite;
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-18px, 12px); }
  40%  { transform: translate(14px, -20px); }
  60%  { transform: translate(-10px, -14px); }
  80%  { transform: translate(18px, 16px); }
  100% { transform: translate(0, 0); }
}

/* ============================================================
   TOP NAV
   ============================================================ */
:root {
  --nav-bg: #22392a;          /* deep forest green */
  --nav-cream: #f3ecdd;
  --nav-cream-soft: rgba(243, 236, 221, 0.78);
}

.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px;
  height: 58px;
  background: var(--nav-bg);
  color: var(--nav-cream);
  box-shadow: 0 2px 14px rgba(14, 30, 20, 0.35);
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--nav-cream);
  flex-shrink: 0;
}

.nav-thistle {
  width: 17px;
  height: 23px;
  color: var(--nav-cream-soft);
}

.nav-mono {
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0.06em;
}

.nav-mono em {
  font-style: normal;
  font-weight: 400;
  font-size: 0.85em;
  opacity: 0.85;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-links a {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nav-cream-soft);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--nav-cream);
  border-bottom-color: rgba(243, 236, 221, 0.6);
}

.nav-links a.nav-rsvp {
  color: var(--nav-bg);
  background: var(--nav-cream);
  padding: 8px 18px;
  border: 1px solid var(--nav-cream);
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease;
}

.nav-links a.nav-rsvp:hover,
.nav-links a.nav-rsvp:focus-visible {
  background: var(--butter);
  color: var(--nav-bg);
  border-color: var(--butter);
  border-bottom-color: var(--butter);
}

/* current-page marker on subpages */
.nav-links a.active {
  color: var(--nav-cream);
  border-bottom-color: rgba(243, 236, 221, 0.45);
}

/* hamburger (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--nav-cream);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.topnav.open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topnav.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.topnav.open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--nav-bg);
    padding: 6px 22px 20px;
    box-shadow: 0 12px 20px rgba(14, 30, 20, 0.3);
    /* collapsed */
    display: none;
  }

  .topnav.open .nav-links { display: flex; }

  .nav-links a {
    padding: 14px 2px;
    border-bottom: 1px solid rgba(243, 236, 221, 0.12);
    font-size: 12px;
  }

  .nav-links a.nav-rsvp {
    margin-top: 14px;
    text-align: center;
    border-radius: 999px;
    border-bottom: 1px solid var(--nav-cream);
  }
}

/* ============================================================
   HERO - one pinned Mourne photograph, two stages.
   Stage 1: names in flowing script over the landscape.
   Stage 2: Gilford Castle printed in one-bit ink.
   ============================================================ */
.hero-pin {
  position: relative;
  height: 280vh;
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* the photograph itself drifts - subtle Ken Burns on the image */
.hero-photo {
  position: absolute;
  top: -4%; left: -4%; right: -4%; bottom: -4%;
  background-image: url("../assets/hero.jpg");
  background-size: cover;
  background-position: 50% 42%;
  filter: saturate(0.9) brightness(1.12);
  transform: scale(1.02);
  will-change: transform;
  animation: heroDrift 36s ease-in-out infinite alternate;
}

@keyframes heroDrift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.4%, 1.1%, 0); }
}

/* green-tinted grade + soft dark gradient toward the base for legibility */
.hero-shade {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    linear-gradient(to top, rgba(14, 28, 19, 0.52), rgba(14, 28, 19, 0.05) 44%, rgba(24, 42, 30, 0.12)),
    linear-gradient(rgba(34, 58, 42, 0.16), rgba(34, 58, 42, 0.16));
}

/* stage 2 legibility: a soft dark scrim on the text side (no cream veil --
   the photograph stays visible and brightens instead) */
.hero-scrim {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    104deg,
    rgba(10, 22, 15, 0) 42%,
    rgba(10, 22, 15, 0.34) 68%,
    rgba(10, 22, 15, 0.52) 100%
  );
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 860px) {
  /* mobile stacks castle over text: scrim rises from the base for the copy,
     with a whisper of darkening up top so the white castle pops off the mist */
  .hero-scrim {
    background: linear-gradient(
      to bottom,
      rgba(10, 22, 15, 0.3) 0%,
      rgba(10, 22, 15, 0.1) 26%,
      rgba(10, 22, 15, 0.12) 40%,
      rgba(10, 22, 15, 0.38) 64%,
      rgba(10, 22, 15, 0.58) 100%
    );
  }
}

.hero-stage {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 76px 20px 8vh;
}

.hero-stage-castle {
  opacity: 0;
  pointer-events: none;
}

.hero-kicker {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(19px, 2.4vw, 28px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #f8f2e4;
  text-shadow:
    0 1px 2px rgba(8, 18, 12, 0.28),
    0 0 7px rgba(248, 242, 228, 0.6),
    0 0 22px rgba(248, 242, 228, 0.38),
    0 0 52px rgba(214, 192, 245, 0.28);
  margin-bottom: 1.6vh;
  padding-left: 0.42em; /* optically re-centre the letterspacing */
}

/* the names glow softly, as if lit from within -- moonlit, not neon */
.hero-names {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(60px, 9vw, 148px);
  line-height: 1.24;
  letter-spacing: 0.01em;
  color: var(--hero-cream);
  text-shadow:
    0 1px 2px rgba(8, 18, 12, 0.28),
    0 0 7px rgba(248, 242, 228, 0.6),
    0 0 22px rgba(248, 242, 228, 0.38),
    0 0 52px rgba(214, 192, 245, 0.28);
  animation: heroGlowBreath 7s ease-in-out infinite;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.18em;
  max-width: 100%;
  padding: 0.08em 0.3em 0.3em; /* Cantique's B descends deep - keep it clear of the date line */
}

.hero-amp {
  font-size: 0.66em;
  line-height: 1;
  align-self: center;
  color: rgba(246, 240, 226, 0.94);
  position: relative;
  top: -0.02em;
}

/* stack the names on small screens, ampersand between */
@media (max-width: 620px) {
  .hero-names {
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: clamp(46px, 13.5vw, 76px);
    line-height: 1.3; /* room for Cantique's deep B descender when stacked */
  }
  .hero-amp { font-size: 0.52em; top: 0; margin: 0.02em 0; }
}

@keyframes heroGlowBreath {
  0%, 100% {
    text-shadow:
      0 1px 2px rgba(8, 18, 12, 0.28),
      0 0 7px rgba(248, 242, 228, 0.6),
      0 0 22px rgba(248, 242, 228, 0.38),
      0 0 52px rgba(214, 192, 245, 0.28);
  }
  50% {
    text-shadow:
      0 1px 2px rgba(8, 18, 12, 0.28),
      0 0 10px rgba(248, 242, 228, 0.8),
      0 0 32px rgba(248, 242, 228, 0.52),
      0 0 76px rgba(214, 192, 245, 0.4);
  }
}

.hero-sub {
  margin-top: 3vh;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(246, 240, 226, 0.94);
  text-shadow:
    0 1px 12px rgba(8, 18, 12, 0.55),
    0 0 14px rgba(255, 247, 222, 0.24);
  /* letterspaced caps overflow narrow screens - break cleanly at the dot */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.9em;
  max-width: 100%;
  padding: 0 6px;
  line-height: 1.7;
}

.hero-sub-part {
  white-space: nowrap;
  padding-left: 0.28em; /* optically re-centre the tracking */
}

.hero-sub-dot { opacity: 0.8; }

@media (max-width: 560px) {
  .hero-sub {
    font-size: 12px;
    letter-spacing: 0.22em;
    gap: 0;
  }
  /* stack date over venue, drop the separator */
  .hero-sub-part { flex: 0 0 100%; padding-left: 0.2em; }
  .hero-sub-dot { display: none; }
}

.hero-rule {
  width: 56px;
  height: 1px;
  background: rgba(246, 240, 226, 0.55);
  margin-top: 3.2vh;
}

/* ---------- stage 2: the castle print ---------- */
.castle-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 72px);
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  text-align: left;
}

/* white-pixel castle, nestled into the midground of the photograph:
   near-full opacity keeps the dither crisp, the PNG's baked-in feathered
   base (last ~12%) melts it into the slopes, and a faint cool glow keeps
   it from sitting on top of the scene like a sticker */
.castle-dither {
  display: block;
  width: min(52%, 700px);
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 1;
  opacity: 0.97;
  transform: translateY(3.5%);
  filter: drop-shadow(0 0 26px rgba(235, 240, 235, 0.18));
}

.castle-text {
  max-width: 380px;
}

.castle-kicker {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(246, 240, 226, 0.78);
  text-shadow: 0 1px 6px rgba(8, 18, 12, 0.6);
  margin-bottom: 6px;
}

.castle-title {
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(42px, 4.4vw, 62px);
  line-height: 1.15;
  color: #f8f2e4;
  animation: moonBreathe 7s ease-in-out infinite;
  margin: 0 0 18px;
  padding-bottom: 0.08em; /* descender room */
}

.castle-body {
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.75;
  color: rgba(246, 240, 226, 0.94);
  text-shadow: 0 0 5px rgba(246, 240, 226, 0.45), 0 0 14px rgba(246, 240, 226, 0.25), 0 0 34px rgba(214, 192, 245, 0.18);
  margin-bottom: 14px;
}

@media (max-width: 860px) {
  .hero-stage-castle { padding: 76px 22px 5vh; }
  .castle-layout {
    flex-direction: column;
    gap: 26px;
    text-align: center;
  }
  .castle-dither { width: min(92%, 460px); }
  .castle-text { max-width: 440px; }
  .castle-title { margin-bottom: 12px; }
  .castle-body { font-size: 15px; line-height: 1.65; margin-bottom: 10px; }
}

/* hero entrance: fade + slide up, staggered */
.fade-item {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

body.loaded .fade-item {
  opacity: 1;
  transform: translateY(0);
}

body.loaded .fade-item:nth-child(1) { transition-delay: 0.15s; }
body.loaded .fade-item:nth-child(2) { transition-delay: 0.35s; }
body.loaded .fade-item:nth-child(3) { transition-delay: 0.75s; }
body.loaded .fade-item:nth-child(4) { transition-delay: 0.95s; }
body.loaded .fade-item:nth-child(5) { transition-delay: 1.6s; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  padding: 14vh 24px;
}

.section-tinted {
  background: linear-gradient(rgba(42, 70, 50, 0.05), rgba(42, 70, 50, 0.05));
}

.section-inner {
  max-width: 880px;
  margin: 0 auto;
}

.section-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 5.8vw, 60px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  margin-bottom: 18px;
}

.section-lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  margin-bottom: 40px;
}

/* scroll reveals */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-slow {
  transition-duration: 1.6s;
}

.reveal-delay {
  transition-delay: 0.35s;
}

/* ---------- pixel river seam ----------
   A zero-height marker sits between the hero and the schedule; a pixel-art
   river band straddles that boundary -- grass banks scatter-dissolving into
   the photograph above and the paper below (baked into the PNG's alpha, in
   the same ragged block language as the castle print). The image is a
   mirror tile ([art | art flipped]) so repeat-x is pixel-perfect seamless
   at any viewport width. Slightly more of the band rides over the
   photograph than over the paper, keeping the schedule title clear. */
.river-seam {
  position: relative;
  height: 0;
  z-index: 6;
  pointer-events: none;
}

.river-band {
  position: absolute;
  left: 0;
  top: -138px;
  width: 100%;
  height: 240px;
  background-image: url("../assets/river-band.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: left top;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

@media (max-width: 700px) {
  .river-band {
    top: -92px;
    height: 160px;
  }
}

/* ---------- schedule: moonlit night ---------- */
.section-night {
  position: relative;
  background-color: #2f2131;
  background-image:
    url("../assets/stars-a.png"),
    url("../assets/stars-b.png"),
    url("../assets/grain-night.png");
  background-size: 560px 560px, 720px 720px, 160px 160px;
  background-position: 0 0, 137px 61px, 0 0;
  color: #f6f0e2;
  overflow: hidden;
  padding-top: calc(14vh + 80px); /* clear the river band riding over the top */
}

.section-night .section-title,
.section-night .schedule-day-name,
.section-night .event-time,
.section-night .event-name,
.section-night .event-detail {
  font-family: var(--display);
  font-weight: 400;
}

.night-title {
  color: #f8f2e4;
  animation: moonBreathe 7s ease-in-out infinite;
}

@keyframes moonBreathe {
  0%, 100% { text-shadow: 0 0 6px rgba(248, 242, 228, 0.55), 0 0 20px rgba(248, 242, 228, 0.3), 0 0 48px rgba(214, 192, 245, 0.22); }
  50% { text-shadow: 0 0 9px rgba(248, 242, 228, 0.75), 0 0 30px rgba(248, 242, 228, 0.45), 0 0 72px rgba(214, 192, 245, 0.35); }
}

.section-inner-wide { max-width: 1020px; }


.schedule-days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 40px;
}

.schedule-day-name {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: 0.03em;
  color: #f8f2e4;
  text-shadow: 0 0 5px rgba(248, 242, 228, 0.5), 0 0 16px rgba(248, 242, 228, 0.28), 0 0 38px rgba(214, 192, 245, 0.2);
  border-bottom: 1px solid rgba(246, 240, 226, 0.3);
  padding-bottom: 14px;
  margin-bottom: 22px;
}

.day-event { margin-bottom: 26px; }

.event-time {
  display: block;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(246, 240, 226, 0.6);
  text-shadow: 0 0 8px rgba(246, 240, 226, 0.2);
  margin-bottom: 6px;
}

.event-name {
  display: block;
  font-size: clamp(19px, 2.2vw, 23px);
  color: #f6f0e2;
  text-shadow: 0 0 5px rgba(246, 240, 226, 0.45), 0 0 14px rgba(246, 240, 226, 0.25);
  margin-bottom: 6px;
}

.event-detail {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(246, 240, 226, 0.72);
  text-shadow: 0 0 6px rgba(246, 240, 226, 0.15);
}

@media (max-width: 820px) {
  .schedule-days { grid-template-columns: 1fr; gap: 34px; }
  .section-night { padding-top: calc(10vh + 70px); }
}


/* ---------- rsvp: moonlit night layout ---------- */
.night-lede {
  font-family: var(--display);
  font-style: normal;
  color: rgba(246, 240, 226, 0.75);
  text-shadow: 0 0 8px rgba(246, 240, 226, 0.18);
}

.rsvp-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 60px;
  align-items: center;
}

.rsvp-photo-wrap { position: relative; }

.rsvp-photo {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 48%, #000 52%, transparent 97%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 48%, #000 52%, transparent 97%);
}

.section-rsvp .rsvp-form label,
.section-rsvp .form-label {
  font-family: var(--display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: rgba(246, 240, 226, 0.6);
  text-shadow: 0 0 8px rgba(246, 240, 226, 0.15);
}

.section-rsvp .rsvp-form input[type="text"],
.section-rsvp .rsvp-form select {
  font-family: var(--display);
  color: #f6f0e2;
  background: rgba(246, 240, 226, 0.07);
  border: 1px solid rgba(246, 240, 226, 0.3);
}

.section-rsvp .rsvp-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23f6f0e2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.section-rsvp .rsvp-form input[type="text"]:focus,
.section-rsvp .rsvp-form select:focus {
  border-color: rgba(246, 240, 226, 0.65);
}

.section-rsvp .rsvp-form ::placeholder { color: rgba(246, 240, 226, 0.38); }

.section-rsvp .radio-pill span {
  font-family: var(--display);
  border-color: rgba(246, 240, 226, 0.3);
  color: rgba(246, 240, 226, 0.75);
}

.section-rsvp .radio-pill input:checked + span {
  background: #f6f0e2;
  border-color: #f6f0e2;
  color: #2f2131;
}

.section-rsvp .rsvp-submit {
  font-family: var(--display);
  letter-spacing: 0.18em;
  background: rgba(246, 240, 226, 0.12);
  border: 1px solid rgba(246, 240, 226, 0.4);
  color: #f6f0e2;
  text-shadow: 0 0 8px rgba(246, 240, 226, 0.3);
}

.section-rsvp .form-note { font-family: var(--display); color: rgba(246, 240, 226, 0.5); }

@media (max-width: 860px) {
  .rsvp-layout { grid-template-columns: 1fr; gap: 26px; }
  .rsvp-photo-wrap { max-width: 420px; margin: 0 auto; }
}

/* ---------- our story ---------- */
.story-body {
  max-width: 620px;
}

.story-body p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

.story-body p:first-child::first-letter {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 3.1em;
  float: left;
  line-height: 0.85;
  padding: 4px 10px 0 0;
  color: var(--ink);
}

/* the orchard film photo, presented plainly */
.story-figure {
  max-width: 620px;
  margin: 44px 0 0;
}

.story-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  filter: saturate(0.92);
}

/* three more photographs, a clean row */
.story-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
  max-width: 720px;
}

.story-strip img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 3px;
  filter: saturate(0.92);
}

@media (max-width: 560px) {
  .story-strip { gap: 10px; }
}

.travel-figure figcaption {
  padding-top: 12px;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ---------- parallax banner ---------- */
.banner {
  position: relative;
  height: 52vh;
  min-height: 320px;
  overflow: hidden;
}

.banner-img {
  position: absolute;
  top: -18%; left: 0; right: 0;
  height: 136%;
  background-image: url("../assets/banner.jpg");
  background-size: cover;
  background-position: 50% 45%;
  filter: saturate(0.9);
  will-change: transform;
}

.banner:after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(rgba(30, 52, 38, 0.16), rgba(30, 52, 38, 0.34));
}

.banner-caption {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
  color: rgba(243, 236, 221, 0.92);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
}

/* ---------- travel ---------- */
.travel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 30px;
}

@media (min-width: 760px) {
  .travel-grid { grid-template-columns: repeat(3, 1fr); }
}

.travel-card {
  border: 1px solid var(--rule);
  padding: 28px 24px;
  background: rgba(255, 252, 244, 0.5);
}

.travel-card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}

.travel-card p {
  font-size: 14.5px;
  color: var(--ink-soft);
}

.travel-figure {
  margin: 40px 0 0;
}

.travel-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  object-position: 50% 60%;
  border-radius: 3px;
  filter: saturate(0.95);
}

/* ---------- pantone cards ---------- */
.pantone-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

@media (min-width: 640px) {
  .pantone-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .pantone-grid { grid-template-columns: repeat(5, 1fr); }
}

.pantone-card {
  background: #fffdf7;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 10px rgba(28, 48, 34, 0.08);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.5s ease,
              opacity 0.9s ease;
}

.pantone-card:hover {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 0 12px 26px rgba(28, 48, 34, 0.16);
}

/* reveal + hover coexist: reveal handles opacity, keep transform override */
.pantone-card.reveal { transform: translateY(34px); }
.pantone-card.reveal.visible { transform: translateY(0); }
.pantone-card.reveal.visible:hover { transform: translateY(-6px) rotate(-1deg); }

.pantone-swatch {
  height: 130px;
}

.pantone-label {
  padding: 12px 12px 14px;
}

.pantone-brand {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1a1a1a;
}

.pantone-brand sup { font-size: 7px; }

.pantone-code {
  display: block;
  font-size: 11px;
  color: #555;
  margin-top: 3px;
}

.pantone-name {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #1a1a1a;
  margin-top: 1px;
}

/* ---------- explore cards ---------- */
.explore-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 30px;
}

@media (min-width: 640px) {
  .explore-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  .explore-grid { grid-template-columns: repeat(4, 1fr); }
}

.explore-card {
  background: #fffdf7;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 10px rgba(28, 48, 34, 0.08);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.5s ease,
              opacity 0.9s ease;
}

.explore-card:hover {
  transform: translateY(-6px) rotate(0.8deg);
  box-shadow: 0 12px 26px rgba(28, 48, 34, 0.16);
}

.explore-card.reveal { transform: translateY(34px); }
.explore-card.reveal.visible { transform: translateY(0); }
.explore-card.reveal.visible:hover { transform: translateY(-6px) rotate(0.8deg); }

.explore-band {
  height: 128px;
  background-size: cover;
  background-position: center;
  filter: saturate(0.92);
}

.explore-body {
  padding: 16px 16px 20px;
}

.explore-place {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.01em;
  color: #1a1a1a;
}

.explore-tag {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #6a77b3; /* periwinkle */
  margin: 5px 0 10px;
}

.explore-body p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #4a3f38;
}

/* ---------- faqs accordion ---------- */
.faq-list {
  margin-top: 28px;
  border-top: 1px solid var(--rule);
  max-width: 720px;
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 24px 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--ink);
  transition: color 0.25s ease;
}

.faq-q:hover { color: var(--ink-soft); }

.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--ink-soft);
  transform: translateY(-50%);
  transition: transform 0.35s ease;
}

.faq-icon::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq-item.open .faq-icon::after {
  transform: translateY(-50%) rotate(0deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.faq-a-inner {
  padding: 0 2px 26px;
}

.faq-a-inner p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 580px;
}

.faq-a-inner a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- registry ---------- */
.registry-inner { text-align: center; }

.registry-inner .section-lede {
  margin-left: auto;
  margin-right: auto;
}

.registry-note {
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 460px;
  margin: 0 auto 34px;
}

.registry-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.registry-link-stub {
  display: inline-block;
  padding: 13px 28px;
  border: 1px dashed var(--rule);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- rsvp ---------- */
.rsvp-form {
  margin-top: 26px;
  max-width: 560px;
}

.form-row { margin-bottom: 28px; }

.rsvp-form label,
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

.rsvp-form input[type="text"],
.rsvp-form select {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: rgba(255, 252, 244, 0.6);
  border: 1px solid var(--rule);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color 0.3s ease;
}

.rsvp-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232a4632'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.rsvp-form input[type="text"]:focus,
.rsvp-form select:focus {
  border-color: var(--ink-soft);
}

.rsvp-form ::placeholder { color: rgba(42, 70, 50, 0.4); }

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.radio-pill {
  display: inline-block;
  cursor: pointer;
}

.radio-pill input {
  position: absolute;
  opacity: 0;
}

.radio-pill span {
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid var(--rule);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  transition: all 0.3s ease;
}

.radio-pill input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.rsvp-submit {
  display: inline-block;
  padding: 15px 34px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: none;
  cursor: not-allowed;
  opacity: 0.55;
}

.form-note {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
}

/* ---------- footer / poster flourish ---------- */
.footer {
  text-align: center;
  padding: 10vh 24px 8vh;
}

.footer-rule {
  width: 56px;
  height: 1px;
  background: var(--rule);
  margin: 0 auto 30px;
}

.footer-edition {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.barcode {
  width: 150px;
  height: 42px;
  margin: 0 auto 10px;
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0px, var(--ink) 2px,
    transparent 2px, transparent 4px,
    var(--ink) 4px, var(--ink) 7px,
    transparent 7px, transparent 9px,
    var(--ink) 9px, var(--ink) 10px,
    transparent 10px, transparent 14px
  );
  opacity: 0.8;
}

.footer-meta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
}


/* footer joins the night — no cream at the bottom of the page */
.footer-night {
  background-color: #2f2131;
  background-image:
    url("../assets/stars-a.png"),
    url("../assets/stars-b.png"),
    url("../assets/grain-night.png");
  background-size: 560px 560px, 720px 720px, 160px 160px;
  background-position: 40px 30px, 300px 90px, 0 0;
  margin-top: 0;
}

.footer-night .footer-rule { background: rgba(246, 240, 226, 0.3); }

.footer-night .footer-edition {
  font-family: var(--display);
  font-style: normal;
  color: rgba(246, 240, 226, 0.85);
  text-shadow: 0 0 6px rgba(246, 240, 226, 0.35), 0 0 16px rgba(246, 240, 226, 0.18);
}

.footer-night .barcode {
  background: repeating-linear-gradient(
    90deg,
    rgba(246, 240, 226, 0.85) 0px, rgba(246, 240, 226, 0.85) 2px,
    transparent 2px, transparent 4px,
    rgba(246, 240, 226, 0.85) 4px, rgba(246, 240, 226, 0.85) 7px,
    transparent 7px, transparent 9px,
    rgba(246, 240, 226, 0.85) 9px, rgba(246, 240, 226, 0.85) 10px,
    transparent 10px, transparent 14px
  );
  opacity: 0.75;
}

.footer-night .footer-meta { color: rgba(246, 240, 226, 0.55); }

/* ============================================================
   SUBPAGE HEADER - a quiet frontispiece for the inner pages
   ============================================================ */
.page-header {
  padding: calc(58px + 11vh) 24px 7vh;
}

.page-header-inner {
  max-width: 880px;
  margin: 0 auto;
}

.page-kicker {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 16px;
}

.page-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 7vw, 78px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  padding-bottom: 0.08em; /* descender room */
}

.page-lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  margin-top: 10px;
  max-width: 560px;
}

/* optional full-width photo band under the header */
.page-band {
  position: relative;
  height: 42vh;
  min-height: 280px;
  background-size: cover;
  background-position: 50% 45%;
  filter: saturate(0.9);
}

.page-band::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(rgba(30, 52, 38, 0.1), rgba(30, 52, 38, 0.26));
}

.page-band-caption {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
  color: rgba(243, 236, 221, 0.92);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
}

/* the first content section after a page header sits closer to it */
.section-after-header {
  padding-top: 6vh;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain,
  .hero-photo { animation: none !important; }
  .hero-names { animation: none !important; } /* glow stays, statically */
  .fade-item,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .banner-img { transform: none !important; }
  .pantone-card,
  .explore-card { transition: none; }
  .faq-a { transition: none; }
  .nav-toggle-bar { transition: none; }

  /* hero: no pin, no crossfade; the two stages stack statically */
  .hero-pin { height: auto; }
  .hero-sticky { position: relative; height: auto; overflow: visible; }
  .hero-stage {
    position: relative;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    min-height: 100vh;
    min-height: 100svh;
  }
  .hero-scrim { display: none; }
  /* stages stack statically over the photograph; give stage 2 its own
     gentle darkening so the cream text stays legible without JS */
  .hero-stage-castle { background: rgba(10, 22, 15, 0.42); }
}