/* =========================================================
   ui_kits/website/site.css — wedding site styles
   builds on colors_and_type.css
   ========================================================= */
@import url('colors_and_type.css');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg-page); font-family: var(--font-sans); color: var(--fg-default); }

/* ---------- Layout shell ---------- */
.jl-app { min-height: 100vh; }
.jl-section { max-width: 980px; margin: 0 auto; padding: var(--space-8) var(--space-5); }
.jl-section-paper {
  background: linear-gradient(var(--color-paper), var(--color-paper));
  max-width: none;
  padding: var(--space-8) max(var(--space-5), 5vw);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.jl-section-paper > * { max-width: 980px; margin-left: auto; margin-right: auto; }
.jl-section-cobalt {
  background: var(--color-cobalt);
  color: var(--color-cream);
  max-width: none;
  padding: var(--space-8) max(var(--space-5), 5vw);
  position: relative;
  overflow: hidden;
}
.jl-section-cobalt > * { max-width: 720px; margin-left: auto; margin-right: auto; position: relative; }
.jl-section-cobalt::before {
  content: '';
  position: absolute; left: -36px; top: -28px;
  width: 230px; height: 230px;
  background-image: url('assets/illustration-limoncello.png');
  background-repeat: no-repeat; background-position: top left; background-size: contain;
  opacity: 0.7;
  pointer-events: none;
}
.jl-section-cobalt::after {
  content: '';
  position: absolute; right: -30px; bottom: -36px;
  width: 250px; height: 250px;
  background-image: url('assets/illustration-aperol.png');
  background-repeat: no-repeat; background-position: bottom right; background-size: contain;
  opacity: 0.7;
  pointer-events: none;
}
@media (max-width: 760px) {
  .jl-section-cobalt::before { width: 130px; height: 130px; opacity: 0.5; }
  .jl-section-cobalt::after  { width: 150px; height: 150px; opacity: 0.5; }
}

.jl-section-head { text-align: center; margin: 0 auto var(--space-6); max-width: 680px; }
.jl-section-head-light { color: var(--color-cream); }

.jl-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  color: var(--fg-display);
  margin: 6px 0;
  letter-spacing: 0.02em;
}
.jl-h2 em { font-style: italic; font-weight: 400; }
.jl-h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--fg-display);
  margin: 6px 0 8px;
  letter-spacing: 0.02em;
}
.jl-eyebrow {
  font: 500 12px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-cobalt);
}
.jl-script-inline { font-family: var(--font-script); font-weight: 400; color: var(--color-cobalt); font-size: 1.3em; line-height: 0; vertical-align: -0.1em; margin-right: 4px; }
.jl-script-md { font-family: var(--font-script); font-weight: 400; color: var(--color-cobalt); font-size: 38px; line-height: 1; display: inline-block; }
.jl-script-xl { font-family: var(--font-script); font-weight: 400; color: var(--color-lemon-300); font-size: 120px; line-height: 1; }

/* ---------- Nav ---------- */
.jl-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--space-5);
  padding: 14px max(var(--space-5), 4vw);
  background: rgba(255, 251, 242, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.jl-nav-mark { line-height: 0; }
.jl-nav-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--space-5);
  flex: 1; justify-content: center;
}
.jl-nav-links a {
  font: 500 13px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  color: var(--color-charcoal);
  padding: 8px 4px;
  border-bottom: 1.5px solid transparent;
  transition: color 140ms, border-color 140ms;
}
.jl-nav-links a:hover { color: var(--color-cobalt); }
.jl-nav-links a.is-active { color: var(--color-cobalt); border-bottom-color: var(--color-cobalt); }

.jl-nav-cta {
  font: 500 12px/1 var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.18em;
  text-decoration: none;
  background: var(--color-cobalt); color: var(--color-cream);
  padding: 10px 18px; border-radius: 999px;
  transition: background 140ms;
  white-space: nowrap;
}
.jl-nav-cta:hover { background: var(--color-ink); }

/* Hamburger toggle — hidden on desktop, shown on mobile */
.jl-nav-toggle {
  display: none;
  margin-left: auto;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 38px; padding: 9px 8px;
  background: none; border: 0; cursor: pointer;
}
.jl-nav-toggle span {
  display: block; width: 100%; height: 2px;
  background: var(--color-ink); border-radius: 2px;
  transition: transform 220ms var(--ease-out), opacity 150ms var(--ease-out);
}
.jl-nav.is-open .jl-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.jl-nav.is-open .jl-nav-toggle span:nth-child(2) { opacity: 0; }
.jl-nav.is-open .jl-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .jl-nav-toggle { display: flex; }
  .jl-nav-cta { display: none; }
  .jl-nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex: none; flex-direction: column; gap: 0;
    background: rgba(255, 251, 242, 0.98);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: var(--shadow-md);
    padding: 4px 0;
    display: none;
  }
  .jl-nav-links.is-open { display: flex; }
  .jl-nav-links li { width: 100%; }
  .jl-nav-links a {
    display: block; width: 100%; text-align: center;
    padding: 15px; border-bottom: 0;
  }
}

/* ---------- Hero ---------- */
.jl-hero {
  position: relative;
  padding: var(--space-7) 0 var(--space-8);
  overflow: hidden;
  text-align: center;
}
.jl-hero-stripes {
  position: absolute; inset: 0;
  background: var(--pattern-stripes-yellow);
  opacity: 0.45;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at center, black 35%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 90% at center, black 35%, transparent 75%);
}
.jl-hero-inner {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "names   illustration"
    "tag     illustration"
    "cta     illustration";
  gap: var(--space-2) var(--space-7);
  align-items: center;
  justify-items: start;
}
@media (max-width: 820px) {
  .jl-hero-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "illustration" "names" "tag" "cta";
    justify-items: center;
    text-align: center;
    gap: var(--space-4);
  }
}

.jl-hero-eyebrow {
  grid-area: eyebrow;
  justify-self: center;
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: rgba(255, 251, 242, 0.85);
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-4);
}
.jl-hero-dot { color: var(--color-cobalt); opacity: 0.5; }

.jl-hero-wordmark {
  grid-area: names;
  align-self: end;
}
@media (max-width: 820px) { .jl-hero-wordmark { align-self: auto; } }

.jl-hero-names {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(54px, 8.5vw, 108px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  display: flex; flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 820px) { .jl-hero-names { align-items: center; } }
.jl-hero-amp {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 0.7em;
  color: var(--color-cobalt);
  letter-spacing: 0;
  margin: -0.18em 0 -0.2em 0.15em;
  line-height: 1;
}
.jl-hero-wedding {
  margin-top: -0.18em;
  margin-left: 0.4em;
}
@media (max-width: 820px) { .jl-hero-wedding { margin-left: 0; } }
.jl-hero-wedding .jl-script-xl {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--color-cobalt);
  font-size: clamp(72px, 11vw, 140px);
  line-height: 0.9;
}

.jl-hero-tag {
  grid-area: tag;
  font: italic 18px/1.5 var(--font-serif);
  color: var(--color-muted);
  margin: var(--space-4) 0 0;
  max-width: none;
  width: 100%;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
@media (max-width: 820px) { .jl-hero-tag { justify-content: center; } }
.jl-hero-tag .jl-script-md {
  color: var(--color-cobalt);
  font-size: 30px;
  vertical-align: -2px;
}

.jl-hero-illustration {
  grid-area: illustration;
  width: 100%;
  max-width: 420px;
  justify-self: end;
  /* Wrapper transform is reserved for the scroll-driven zoom (see scroll
     takeover rules below). Entrance + idle sway live on the inner <img>. */
}
@media (max-width: 820px) { .jl-hero-illustration { justify-self: center; max-width: 320px; } }
.jl-hero-illustration img {
  width: 100%; height: auto; display: block;
  /* The illustration is yellow line art on white — let it sit on the page */
  filter: drop-shadow(0 14px 28px rgba(14, 42, 107, 0.10));
  animation:
    heroFadeUp 0.65s var(--ease-out) 0.2s backwards,
    heroSway   8s   ease-in-out      0.9s infinite alternate;
  transform-origin: 50% 95%;
}
@keyframes heroSway {
  from { transform: rotate(-1deg); }
  to   { transform: rotate(1deg); }
}

.jl-hero-cta-row {
  grid-area: cta;
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-4);
}

.jl-btn-ghost {
  background: transparent;
  color: var(--color-cobalt);
  border: 1.5px solid var(--color-cobalt);
}
.jl-btn-ghost:hover { background: var(--color-sky-50); }

/* ---------- Hero ----------
   Plain static hero section. (The old scroll-zoom takeover — illustration
   grew and text faded as you scrolled — was removed.)                        */
.jl-hero-scroll-wrap {
  position: relative;
}
.jl-hero-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 0 72px;
  box-sizing: border-box;
}
.jl-hero-stage .jl-hero-stripes {
  position: absolute; inset: 0;
  background: var(--pattern-stripes-yellow);
  opacity: 0.45;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at center, black 35%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 90% at center, black 35%, transparent 75%);
}
.jl-hero-stage .jl-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0;
  overflow: visible;
  text-align: center;
}
.jl-hero-scroll-wrap .jl-hero-illustration {
  position: relative;
  z-index: 3;
}

/* Scroll hint is no longer meaningful without the takeover. */
.jl-hero-scroll-hint { display: none; }

/* ---------- Story ---------- */
.jl-story-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 760px) {
  .jl-story-grid { grid-template-columns: 1fr; }
}
.jl-prose p {
  font: 17px/1.7 var(--font-sans);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.jl-signature { margin-top: var(--space-5); }
.jl-signoff { font: 500 18px/1.2 var(--font-serif); color: var(--color-ink); letter-spacing: 0.08em; }

/* ---------- Schedule ---------- */
.jl-day-tabs {
  display: grid;
  grid-template-columns: 1fr 1.32fr 1fr;
  align-items: end;
  gap: var(--space-3);
  margin: 0 auto var(--space-6);
  max-width: 760px;
}
.jl-day-tab {
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  border-radius: 14px;
  padding: 16px 14px;
  cursor: pointer;
  text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  transition: all 160ms var(--ease-out);
  font-family: var(--font-sans);
}
.jl-day-tab:hover { border-color: var(--color-cobalt); transform: translateY(-1px); }
.jl-day-tab.is-active {
  background: var(--color-cobalt);
  border-color: var(--color-cobalt);
  color: var(--color-cream);
  box-shadow: var(--shadow-md);
}
/* Saturday — the big day — is an arched, striped "invitation" tab, and the
   biggest of the three: a wider grid column + extra padding so the arch rises
   above and drops below its plainer neighbours. */
.jl-day-tab.is-featured {
  border-radius: var(--radius-arch);
  background: var(--pattern-stripes-yellow);
  border: 1.5px solid var(--color-cobalt);
  color: var(--color-ink);
  align-items: center;
  text-align: center;
  padding: 34px 22px 24px;
  gap: 4px;
}
.jl-day-tab.is-featured .jl-day-tab-day { font-size: 16px; }
.jl-day-tab.is-featured .jl-day-tab-date { font-size: 30px; }
.jl-day-tab.is-featured .jl-day-tab-label { color: var(--color-cobalt); margin-top: 8px; }
.jl-day-tab.is-featured.is-active {
  background: var(--pattern-stripes-yellow);
  border: 2px solid var(--color-cobalt);
  color: var(--color-ink);
  animation: jl-arch-glow 2.4s ease-in-out infinite;
}
/* Selected Saturday gets an evident, gently pulsing golden glow */
@keyframes jl-arch-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(248, 211, 74, 0.45), 0 3px 12px rgba(216, 154, 5, 0.28); }
  50%      { box-shadow: 0 0 0 5px rgba(248, 211, 74, 0.7),  0 5px 20px rgba(216, 154, 5, 0.5); }
}
.jl-day-tab.is-featured.is-active .jl-day-tab-label { color: var(--color-cobalt); }
.jl-day-tab-day { font: 500 14px/1 var(--font-sans); letter-spacing: 0.04em; }
.jl-day-tab-date { font: 500 22px/1.1 var(--font-serif); }
.jl-day-tab-label {
  font: 500 10px/1 var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--color-muted);
  margin-top: 6px;
}
.jl-day-tab.is-active .jl-day-tab-label { color: var(--color-lemon-300); }

.jl-schedule-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  padding: var(--space-6) var(--space-6) var(--space-5);
  box-shadow: var(--shadow-md);
  max-width: 720px;
  margin: 0 auto;
}
.jl-schedule-card.is-featured {
  border: 2px solid var(--color-cobalt);
  background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-paper) 100%);
}
.jl-schedule-flag {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  background: var(--color-cobalt); color: var(--color-cream);
  padding: 8px 26px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.jl-schedule-flag .jl-script-md { color: var(--color-cream); font-size: 24px; line-height: 1; }

.jl-timeline { list-style: none; padding: 0; margin: 0; }
.jl-timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: 92px 24px 1fr;
  gap: var(--space-3);
  padding: 14px 0;
  align-items: start;
  border-bottom: 1px dashed var(--border-soft);
}
.jl-timeline-row:last-child { border-bottom: 0; padding-bottom: 0; }
/* Continuous spine: each row but the last draws the line from its own dot
   down to the next dot, so it never stops short on a tall (wrapped) row.
   116px = 92px time col + 12px gap + 12px (half the 24px dot col); 26px = the
   dot's vertical centre (14px padding + 6px dot margin + 6px half-dot). */
.jl-timeline-row:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 116px;
  top: 26px;
  bottom: -26px;
  width: 1px;
  background: var(--border-mid);
  transform: translateX(-50%);
}
.jl-timeline-time {
  font: 500 13px/1.4 var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--color-cobalt);
  padding-top: 2px;
}
.jl-timeline-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-lemon-300);
  border: 2px solid var(--color-cobalt);
  margin: 6px auto 0;
  position: relative;
  z-index: 1;
}
.jl-timeline-title { font: 500 17px/1.3 var(--font-serif); color: var(--color-ink); letter-spacing: 0.01em; }
.jl-timeline-note { font: 14px/1.45 var(--font-sans); color: var(--color-muted); margin-top: 2px; }

.jl-dresscode {
  max-width: 720px; margin: var(--space-6) auto 0;
  background: var(--color-lemon-50);
  border: 1px solid var(--color-lemon-200);
  border-radius: 14px;
  padding: 18px 22px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.jl-dresscode.is-switching { opacity: 0; transform: translateY(8px); }
.jl-dresscode-head { font-family: var(--font-serif); font-weight: 500; font-size: 21px; color: var(--fg-display); margin-top: 2px; }
.jl-dresscode-body { font: 15px/1.55 var(--font-sans); color: var(--color-charcoal); margin-top: 6px; }

/* Dress-code colour swatches */
.jl-swatches { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.jl-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 54px; }
.jl-swatch-dot {
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid rgba(14, 42, 107, 0.18); box-shadow: var(--shadow-xs);
}
.jl-swatch-name { font: 500 11px/1 var(--font-sans); color: var(--color-muted); text-align: center; }

/* Friday "arrive anytime" illustrated line */
.jl-arrival { margin: 2px 0 var(--space-5); text-align: center; }
.jl-arrival-svg { width: 100%; max-width: 600px; height: auto; display: block; margin: 0 auto 8px; overflow: visible; }
.jl-arrival-path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: jl-arrival-draw 2s var(--ease-out) 0.15s forwards;
}
@keyframes jl-arrival-draw { to { stroke-dashoffset: 0; } }
.jl-arrival-start { opacity: 0; animation: jl-arrival-fade 0.4s ease 0.15s forwards; }
.jl-arrival-sun   { opacity: 0; animation: jl-arrival-fade 0.5s var(--ease-out) 1.9s forwards; }
@keyframes jl-arrival-fade { to { opacity: 1; } }
.jl-arrival-label strong { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 21px; line-height: 1.2; color: var(--fg-display); }
.jl-arrival-label span { font: 14px/1.5 var(--font-sans); color: var(--color-muted); }
/* A little cast of pool floats drifts along the curve. Each rides the path via
   SVG <animateMotion> (so it scales with the graphic), bobs on the water, and
   trails a fading ripple wake. See ArrivalFloaties.jsx for the riders. */
.jl-arrival-floaties { opacity: 0; animation: jl-arrival-fade 0.6s ease 1.4s forwards; }
.jl-bob { transform-box: fill-box; animation: jl-bob 2.8s ease-in-out infinite; }
@keyframes jl-bob { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-3px); } }
.jl-rip { transform-box: fill-box; transform-origin: center; animation: jl-rip 2s linear infinite; }
.jl-rip2 { animation-delay: 1s; }
@keyframes jl-rip { 0% { opacity: 0.5; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.8); } }
@media (prefers-reduced-motion: reduce) {
  .jl-arrival-path { animation: none; stroke-dashoffset: 0; }
  .jl-arrival-start, .jl-arrival-sun, .jl-arrival-floaties { animation: none; opacity: 1; }
  .jl-bob, .jl-rip { animation: none; }
}

/* ---------- Venue ---------- */
.jl-venue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 760px) { .jl-venue-grid { grid-template-columns: 1fr; } }
.jl-info-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.jl-info-card-accent {
  background: var(--color-sky-100);
  border-color: var(--color-sky-200);
}
.jl-info-card-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-cobalt);
  margin-bottom: 6px;
}
.jl-info-card-eyebrow i { color: var(--color-cobalt); }
.jl-info-card p, .jl-info-card ul { font: 15px/1.55 var(--font-sans); color: var(--color-charcoal); margin: 8px 0; }
.jl-bare-list { list-style: none; padding: 0; margin: 8px 0; }
.jl-bare-list li { padding: 4px 0; border-bottom: 1px dashed var(--border-soft); }
.jl-bare-list li:last-child { border-bottom: 0; }
.jl-fine { font: 13px/1.5 var(--font-sans); color: var(--color-muted); margin-top: 8px !important; }

/* ── Nearby-stays pop-up ──────────────────────────────────────────────────── */
.jl-stay-distance {
  display: inline-block; margin-bottom: 8px;
  font: 600 12px/1 var(--font-sans); letter-spacing: 0.02em;
  color: var(--color-cobalt);
  background: var(--color-sky-50);
  border: 1px solid var(--color-sky-100);
  border-radius: 999px; padding: 6px 11px;
}
.jl-link { color: var(--color-cobalt); font: 500 14px var(--font-sans); text-decoration: none; border-bottom: 1px solid var(--color-cobalt); }

/* ---------- FAQ ---------- */
.jl-faq { list-style: none; padding: 0; margin: 0; max-width: 720px; margin-left: auto; margin-right: auto; }
.jl-faq-item {
  border-bottom: 1px solid var(--border-soft);
}
.jl-faq-q {
  width: 100%; background: transparent; border: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 4px;
  cursor: pointer;
  font: 500 19px/1.3 var(--font-serif);
  color: var(--color-ink);
  letter-spacing: 0.01em;
  text-align: left;
}
.jl-faq-q i { color: var(--color-cobalt); transition: transform 200ms var(--ease-out); }
.jl-faq-item.is-open .jl-faq-q i { transform: rotate(90deg); }
.jl-faq-a { padding: 0 4px 22px; font: 16px/1.65 var(--font-sans); color: var(--color-charcoal); max-width: 60ch; }

/* ---------- RSVP ---------- */
.jl-rsvp-deadline { font: italic 16px/1 var(--font-serif); color: var(--color-lemon-200); margin-top: 8px; }
.jl-rsvp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  background: var(--color-cream);
  border-radius: 22px;
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}
.jl-field { display: flex; flex-direction: column; gap: 6px; }
.jl-field-half { grid-column: span 1; }
.jl-field-full { grid-column: span 2; }
@media (max-width: 600px) {
  .jl-rsvp { grid-template-columns: 1fr; padding: var(--space-5); }
  .jl-field-half, .jl-field-full { grid-column: span 1; }
}
.jl-field > label {
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-cobalt);
}
.jl-field input[type="text"],
.jl-field input[type="email"],
.jl-field input:not([type]),
.jl-field textarea {
  font: 15px/1.4 var(--font-sans);
  color: var(--color-charcoal);
  background: #fff;
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 140ms, box-shadow 140ms;
  font-family: inherit;
}
.jl-field input:focus, .jl-field textarea:focus {
  border-color: var(--color-cobalt);
  box-shadow: 0 0 0 3px rgba(30,71,181,0.16);
}
.jl-field > label.jl-check,
.jl-check {
  display: flex; align-items: center; gap: 10px;
  font: 400 15px/1.4 var(--font-sans);
  color: var(--color-charcoal);
  text-transform: none;
  letter-spacing: 0;
}
.jl-check input { accent-color: var(--color-cobalt); width: 17px; height: 17px; }
.jl-radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.jl-radio-btn {
  flex: 1 1 0; min-width: 140px;
  font: 500 15px var(--font-sans);
  background: #fff;
  border: 1.5px solid var(--border-mid);
  border-radius: 999px;
  padding: 11px 18px;
  cursor: pointer;
  transition: all 160ms var(--ease-out);
  color: var(--color-charcoal);
}
.jl-radio-btn:hover { border-color: var(--color-cobalt); color: var(--color-cobalt); }
.jl-radio-btn.is-active {
  background-color: var(--color-lemon-300) !important;
  color: var(--color-ink) !important;
  border-color: var(--color-lemon-400) !important;
  box-shadow: var(--shadow-sm);
}
.jl-rsvp-submit { display: flex; justify-content: flex-end; margin-top: 4px; }
.jl-btn {
  font: 500 15px/1 var(--font-sans);
  letter-spacing: 0.04em;
  padding: 14px 28px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: all 160ms var(--ease-out);
}
.jl-btn-primary {
  background: var(--color-cobalt); color: var(--color-cream);
  box-shadow: var(--shadow-md);
}
.jl-btn-primary:hover:not(:disabled) { background: var(--color-ink); }
.jl-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.jl-btn-secondary {
  background: var(--color-lemon-300); color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}
.jl-btn-secondary:hover { background: var(--color-lemon-400); }

.jl-rsvp-success { text-align: center; padding: var(--space-6) 0; }
.jl-rsvp-success .jl-script-xl { display: block; margin-bottom: var(--space-2); }

/* Stepper +/− control */
.jl-stepper { display: flex; flex-direction: column; gap: 6px; }
.jl-stepper-head {
  display: flex; align-items: baseline; gap: 10px;
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-cobalt);
}
.jl-stepper-note { font: 400 11px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--color-muted); }
.jl-stepper-row {
  display: flex; align-items: center; gap: 6px;
  background: #fff;
  border: 1px solid var(--border-mid);
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
}
.jl-stepper-btn {
  width: 38px; height: 38px;
  border: 0;
  border-radius: 9px;
  background: var(--color-sky-50);
  color: var(--color-cobalt);
  font: 500 22px/1 var(--font-serif);
  cursor: pointer;
  transition: background 140ms;
}
.jl-stepper-btn:hover:not(:disabled) { background: var(--color-sky-100); }
.jl-stepper-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.jl-stepper-value {
  min-width: 44px;
  text-align: center;
  font: 500 22px/1 var(--font-serif);
  color: var(--color-ink);
  letter-spacing: 0.02em;
}

/* Per-guest name list */
.jl-names-list { display: flex; flex-direction: column; gap: 8px; }
.jl-named-row { display: flex; align-items: center; gap: 10px; }
.jl-named-row input { flex: 1; }
.jl-named-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-sky-100);
  color: var(--color-cobalt);
  font: 500 13px/28px var(--font-serif);
  text-align: center;
  flex: 0 0 auto;
  letter-spacing: 0.02em;
}

/* Open Sunday block */
.jl-schedule-open {
  text-align: center;
  padding: var(--space-3) 0 var(--space-2);
}
.jl-schedule-open .jl-script-md { display: block; color: var(--color-cobalt); }
.jl-schedule-open p { font: 16px/1.6 var(--font-sans); color: var(--color-charcoal); margin: 0 auto var(--space-3); max-width: 44ch; }

/* ---------- Footer ---------- */
.jl-footer {
  background: var(--color-paper);
  border-top: 1px solid var(--border-soft);
  padding: var(--space-7) max(var(--space-5), 4vw);
  text-align: center;
}
.jl-footer-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }
.jl-footer-mark {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-serif); font-weight: 500;
  font-size: 44px; line-height: 1.1; letter-spacing: 0.18em;
  color: var(--color-ink);
}
.jl-footer-amp {
  font-family: var(--font-script); font-weight: 400;
  color: var(--color-cobalt);
  font-size: 54px; line-height: 0.8;
  letter-spacing: 0;
  margin: -4px 0;
}
.jl-footer-date { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.jl-footer-countdown { font: 500 28px/1 var(--font-serif); color: var(--color-ink); letter-spacing: 0.14em; }
.jl-footer-meta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; font: 14px var(--font-sans); color: var(--color-cobalt); }
.jl-footer-meta a { color: var(--color-cobalt); text-decoration: none; }
.jl-footer-meta a:hover { text-decoration: underline; }
.jl-footer-meta span { opacity: 0.4; }
.jl-footer-fine { font: 13px var(--font-sans); color: var(--color-muted); margin-top: 6px; }

/* =========================================================
   ANIMATIONS
   ========================================================= */

/* ── Scroll progress bar ──────────────────────────────────────────────────── */
#jl-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-cobalt) 0%, var(--color-lemon-300) 100%);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
}

/* ── Scroll reveals ───────────────────────────────────────────────────────── */
.jl-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  will-change: opacity, transform;
}
.jl-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hero entrance (CSS-driven, not IO) ───────────────────────────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* `backwards` fill — opacity stays at the `from` value during the delay, then
   reverts to the declared value (default 1, or the scroll-driven calc in the
   takeover rules below) after the animation ends. This frees `opacity` for
   scroll-driven control without `!important`. */
.jl-hero-eyebrow  { animation: heroFadeUp 0.65s var(--ease-out) 0.15s backwards; }
.jl-hero-wordmark { animation: heroFadeUp 0.65s var(--ease-out) 0.30s backwards; }
.jl-hero-tag      { animation: heroFadeUp 0.65s var(--ease-out) 0.50s backwards; }
.jl-hero-cta-row  { animation: heroFadeUp 0.65s var(--ease-out) 0.65s backwards; }

/* ── Cursor trail ─────────────────────────────────────────────────────────── */
.jl-trail {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  font-size: 16px;
  line-height: 1;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: transform 0.75s ease, opacity 0.75s ease;
  user-select: none;
}
.jl-trail.is-gone {
  transform: translate(-50%, -220%) scale(0.35);
  opacity: 0;
}

/* ── Confetti ─────────────────────────────────────────────────────────────── */
.jl-confetti {
  position: fixed;
  top: -28px;
  display: block;
  pointer-events: none;
  z-index: 10001;
  animation: jlConfettiFall linear forwards;
}
@keyframes jlConfettiFall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100vh) rotate(900deg) scale(0.4); opacity: 0; }
}

/* ── Schedule tab enhancements ───────────────────────────────────────────── */
.jl-day-tabs-hint {
  text-align: center;
  font: italic 13px/1 var(--font-serif);
  color: var(--color-muted);
  margin-bottom: var(--space-3);
  letter-spacing: 0.03em;
}
/* When Saturday isn't the selected day, drain its saturation so the bright
   stripes don't read as "already selected" — it dims to a faint arch and only
   blooms to full colour once it's the active tab. A brief pulse still hints
   that it's tappable. */
.jl-day-tab.is-featured:not(.is-active) {
  filter: saturate(0.28);
  opacity: 0.9;
  border-color: var(--border-mid);
  animation: tabPulse 2s ease-in-out 1.6s 3;
}
@keyframes tabPulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 5px rgba(30, 71, 181, 0.18); }
}
/* Card fade on day switch */
.jl-schedule-card {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.jl-schedule-card.is-switching {
  opacity: 0;
  transform: translateY(8px);
}

/* ── Travel Map ───────────────────────────────────────────────────────────── */
/* Venue becomes a full-width band: the heading and info cards stay in the
   980px column (their own padding), but the map spans edge to edge. The
   section drops its side padding so the map can reach the viewport edges. */
#venue.jl-section {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
#venue > .jl-section-head,
#venue > .jl-venue-grid {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  box-sizing: border-box;
}
.jl-venue-map {
  margin: var(--space-6) 0 var(--space-7);   /* full width of the section = edge to edge */
}
.jl-venue-map svg { width: 100%; height: auto; display: block; }
.jl-venue-map iframe {
  width: 100%;
  aspect-ratio: 1500 / 689;   /* native ratio of the embedded D3 map */
  display: block;
  border: 0;
}

/* ── Rooms pop-up ─────────────────────────────────────────────────────────── */
/* Let .jl-link work on a <button> (used to open the rooms modal). */
button.jl-link {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-cobalt);
  padding: 0;
  cursor: pointer;
  align-self: flex-start;   /* don't stretch inside flex .jl-field */
  font: 500 14px var(--font-sans);
}
button.jl-link:hover { color: var(--link-hover); border-color: var(--link-hover); }

.jl-modal-overlay {
  position: fixed; inset: 0; z-index: 6000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  background: rgba(14, 42, 107, 0.42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: jl-modal-fade var(--dur-base) var(--ease-out);
}
@keyframes jl-modal-fade { from { opacity: 0; } to { opacity: 1; } }

.jl-modal {
  position: relative;
  width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
  background: var(--color-cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7) var(--space-6) var(--space-6);
  animation: jl-modal-rise var(--dur-base) var(--ease-out);
}
@keyframes jl-modal-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.jl-modal-close {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px; border-radius: 999px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--color-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.jl-modal-close:hover { background: var(--color-paper); color: var(--color-ink); }

.jl-modal-head { text-align: center; margin-bottom: var(--space-5); }
.jl-modal-intro { font-size: 15px; color: var(--color-muted); max-width: 46ch; margin: 8px auto 0; }
.jl-modal-note {
  font-size: 13px; color: var(--color-muted);
  text-align: center; max-width: 52ch; margin: var(--space-5) auto 0;
  padding-top: var(--space-4); border-top: 1px solid var(--border-soft);
}

.jl-room-list { display: flex; flex-direction: column; gap: var(--space-4); }
.jl-room-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Swipeable photo gallery with count badge + position dots */
.jl-room-gallery-wrap { position: relative; }
.jl-room-gallery {
  display: flex; gap: 4px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: var(--color-paper);
}
.jl-room-gallery::-webkit-scrollbar { display: none; }
.jl-room-gallery img {
  flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  scroll-snap-align: center; display: block;
}
.jl-room-count {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  background: rgba(14, 42, 107, 0.72); color: #fff;
  font: 600 11px/1 var(--font-sans); letter-spacing: 0.03em;
  padding: 5px 9px; border-radius: 999px; pointer-events: none;
}
.jl-room-dots {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 1;
  display: flex; justify-content: center; gap: 6px; pointer-events: none;
}
.jl-room-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 3px rgba(14, 42, 107, 0.4);
  transition: background 200ms, transform 200ms;
}
.jl-room-dot.is-active { background: #fff; transform: scale(1.35); }
.jl-room-body { padding: var(--space-4) var(--space-5) var(--space-5); }
/* Floor plan */
.jl-room-layout { margin: var(--space-4) 0 0; }
.jl-room-layout img {
  width: 100%; max-width: 380px; display: block; margin: 0 auto;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: #fff;
}
.jl-room-layout figcaption {
  text-align: center; margin-top: 6px;
  font: 500 11px/1 var(--font-sans); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--color-muted);
}
.jl-room-kicker {
  font: 500 12px/1 var(--font-sans); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--color-cobalt); margin-bottom: 4px;
}
.jl-room-name { font-family: var(--font-serif); font-size: 24px; color: var(--fg-display); margin: 0; }
.jl-room-desc { font-size: 14px; line-height: 1.55; color: var(--color-charcoal); margin: 8px 0 0; }
.jl-room-details {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.jl-room-details li {
  font-size: 12.5px; color: var(--color-muted);
  background: var(--color-lemon-50);
  border: 1px solid var(--border-soft); border-radius: 999px;
  padding: 4px 11px;
}
.jl-room-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4);
}
.jl-room-price { font: 600 16px var(--font-sans); color: var(--color-ink); }
.jl-btn-sm { padding: 10px 18px; font-size: 13px; }

.jl-room-pick-link { margin-top: 12px; display: inline-block; }

/* ── RSVP decline funnel ──────────────────────────────────────────────────── */
.jl-decline {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-lemon-50);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.jl-decline-line { margin: 0; font-size: 15px; color: var(--color-charcoal); }
.jl-decline-line strong { color: var(--color-cobalt); }
.jl-decline > .jl-field { width: 100%; }
.jl-decline .jl-btn-sm { align-self: flex-start; }

@media (max-width: 560px) {
  .jl-modal { padding: var(--space-6) var(--space-4) var(--space-5); }
}