/* Design tokens from the handoff -------------------------------------------- */
:root {
  --bg: #F6F4EF;
  --sage: #818A77;
  --cream: #F4F1EA;
  --gold: #E9C86A;
  --gold-soft: #F3DFA1;
  --gold-gradient: linear-gradient(135deg, #8a6d1f, #f0d375 45%, #c89a3c 65%, #f0d375 85%, #8a6d1f);
  --gold-btn: linear-gradient(135deg, #8a6d1f, #e9c86a 45%, #c89a3c 65%, #e9c86a 85%, #8a6d1f);
  --script: 'Alex Brush', cursive;

  /* Global body-text scale. Cormorant Garamond runs small, so readable copy
     is sized through this knob — bump it up or down to rescale all body text
     at once (1 = the original design sizes). Headings/script stay fixed. */
  --fs: 1.06;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  /* Cormorant defaults to old-style figures, which sit at varying lowercase
     heights. Lining figures keep numerals full-height and aligned with caps. */
  font-variant-numeric: lining-nums proportional-nums;
}
.page {
  min-height: 100vh;
  background: var(--bg);
  color: var(--cream);
  position: relative;
  overflow-x: hidden;
}
/* The Worcester photo sitting behind every guest page. */
.page:not(.admin-page)::before {
  content: '';
  position: fixed;
  inset: -16px;
  z-index: 0;
  background-image: url('/worcester-riverside.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(9px) saturate(0.72) brightness(1.08);
  transform: scale(1.025);
  pointer-events: none;
}
/* A cream wash over the photo, split into its own layer so it (and the blur)
   can be faded in independently during the opening reveal. */
.page:not(.admin-page)::after {
  content: '';
  position: fixed;
  inset: -16px;
  z-index: 0;
  background: rgba(246, 244, 239, 0.56);
  pointer-events: none;
}
.page:not(.admin-page) > * { position: relative; z-index: 1; }

/* Opening reveal (home page, motion allowed): intro.js shows the photo sharp and
   un-washed for a beat, then removes `bg-reveal` so the blur and cream wash ease
   back in as the login card grows. `bg-anim` gates the transition so the initial
   sharp state snaps in rather than animating from the default blurred state. */
.page.bg-anim::before,
.page.bg-anim::after {
  transition: filter 0.9s ease, transform 0.9s ease, opacity 0.9s ease;
}
.page.bg-reveal::before {
  filter: blur(0) saturate(0.98) brightness(1);
  transform: scale(1);
}
.page.bg-reveal::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .page.bg-anim::before,
  .page.bg-anim::after { transition: none; }
}
::selection { background: rgba(233, 200, 106, 0.35); }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-soft); text-decoration: underline; }

input, select, textarea, button {
  font-family: 'Cormorant Garamond', serif;
  font-variant-numeric: inherit;
}
select:focus, input:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 2px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* A very slow drift in the foil's base layer, independent of the pointer-led
   highlight. Registered percentage properties let the movement interpolate
   smoothly instead of stepping between positions. */
@property --foil-ambient-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --foil-ambient-y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@keyframes foil-ambient-light {
  0%   { --foil-ambient-x: -2.5%; --foil-ambient-y: 1%; }
  45%  { --foil-ambient-x: 1.5%;  --foil-ambient-y: -2%; }
  100% { --foil-ambient-x: 3%;    --foil-ambient-y: 2%; }
}

.script-name,
.btn-gold,
.page-nav__btn--next,
.toggle.active {
  animation: foil-ambient-light 18s ease-in-out infinite alternate;
}

/* Shared pieces ------------------------------------------------------------- */
.script-name {
  --fx: 50%; --fy: 50%; --gx: 50%; --gy: 50%;
  margin: 0; /* it's now an <h1> — drop the default heading margins */
  font-family: var(--script);
  font-weight: 400;
  line-height: 1.4;
  padding: 0 4px;
  /* Gold-foil clipped to the glyphs: a specular glint that follows the cursor
     (or the device tilt on touch) over a metallic gradient that slides gently
     underneath — the couple's name catching the light like the printed foil. */
  background-image:
    radial-gradient(circle at var(--fx) var(--fy),
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.3) 14%,
      rgba(255, 255, 255, 0) 44%),
    var(--gold-gradient);
  background-size: 100% 100%, 200% 200%;
  background-position:
    0 0,
    calc(var(--gx) + var(--foil-ambient-x)) calc(var(--gy) + var(--foil-ambient-y));
  background-blend-mode: screen, normal;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 0.2s ease-out;
}
.script-name--home { font-size: clamp(40px, 13vw, 64px); margin-bottom: 8px; }
.script-name--details { font-size: clamp(38px, 10vw, 54px); }

/* Opening moment: the couple's name "writes out" left to right. A soft, slightly
   slanted mask edge sweeps across the (connected-script) text so the letters flow
   in like handwriting, with a gold "nib" gleam riding the leading edge; the gold
   gradient stays intact throughout. Gated behind classes that intro.js applies —
   without JS (or under reduced motion) the name simply shows in full. */
.script-name--home { position: relative; }
.script-name--home.pre-write,
.script-name--home.is-writing {
  -webkit-mask-image: linear-gradient(100deg, #000 0 40%, rgba(0, 0, 0, 0) 56%);
          mask-image: linear-gradient(100deg, #000 0 40%, rgba(0, 0, 0, 0) 56%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
}
.script-name--home.is-writing {
  /* Decelerate (no ease-in): the first letters appear the instant the write
     begins, then it eases to a graceful finish — an ease-in here left a dead
     beat where the name had "started" but nothing was visible yet. */
  animation:
    script-write 2.6s cubic-bezier(0, 0, 0.25, 1) forwards,
    foil-ambient-light 18s ease-in-out infinite alternate;
}
@keyframes script-write {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .script-name,
  .btn-gold,
  .page-nav__btn--next,
  .toggle.active { animation: none; }
  .script-name--home.pre-write,
  .script-name--home.is-writing {
    -webkit-mask-image: none; mask-image: none;
    animation: none;
  }
}

/* Staged card intro (orchestrated by intro.js): a short, narrow box that widens,
   lets the name write, then grows to full height before the form settles in. */
.home-card.is-intro { overflow: hidden; }
.home-card.is-intro .home-card__content { animation: none; }
.home-card.is-intro .divider-gold,
.home-card.is-intro .lede,
.home-card.is-intro .form-error,
.home-card.is-intro .home-form {
  opacity: 0;
  transform: translateY(12px);
}
.home-card.is-intro { transform-origin: center center; }
.home-card.is-intro-anim {
  /* Beat 1 (the box widening); intro.js starts the name write partway through
     this so there's no dead pause between the box settling and the name. */
  transition: transform 0.5s cubic-bezier(0.62, 0, 0.25, 1),
              height 0.8s cubic-bezier(0.62, 0, 0.25, 1);
}
.home-card.is-intro-anim .divider-gold,
.home-card.is-intro-anim .lede,
.home-card.is-intro-anim .form-error,
.home-card.is-intro-anim .home-form {
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.home-card.is-intro.reveal-content .divider-gold,
.home-card.is-intro.reveal-content .lede,
.home-card.is-intro.reveal-content .form-error,
.home-card.is-intro.reveal-content .home-form {
  opacity: 1;
  transform: none;
}
.home-card.is-intro.reveal-content .divider-gold { transition-delay: 0s; }
.home-card.is-intro.reveal-content .lede { transition-delay: 0.12s; }
.home-card.is-intro.reveal-content .form-error { transition-delay: 0.12s; }
.home-card.is-intro.reveal-content .home-form { transition-delay: 0.26s; }

/* Login → RSVP morph (orchestrated by auth.js). The login fields fade out first;
   the card and a cloned "flying" name are then animated in JS. */
.login-welcome {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  text-align: center;
  transform: translateY(-8px);
  transition: max-height 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.login-welcome .details-header__greeting { margin-bottom: 16px; }
.login-welcome .details-header__pre { margin-bottom: 0; }
.home-card.is-morphing .login-welcome { max-height: 90px; opacity: 1; transform: none; }
.home-card.is-morphing .home-card__content {
  transform: translateY(78px);
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.home-card.is-morphing .divider-gold,
.home-card.is-morphing .lede,
.home-card.is-morphing .home-form {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
/* The cloned name that floats from the login card up to the RSVP header. */
.flying-name {
  position: fixed !important;
  margin: 0;
  z-index: 60;
  pointer-events: none;
  text-align: center;
  transform-origin: center center;
  will-change: transform;
}

.divider-gold {
  width: 70px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 18px auto 26px;
}
.divider-gold--sm { width: 56px; margin: 14px auto; }

.field {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(244, 241, 234, 0.3);
  color: var(--cream);
  font-size: calc(18px * var(--fs));
  padding: 10px 12px;
  border-radius: 8px;
}
.field--center { text-align: center; font-size: calc(20px * var(--fs)); padding: 14px 18px; }
.field::placeholder { color: rgba(244, 241, 234, 0.75); }
select.field {
  height: 52px;
  padding: 0 36px 0 12px;
  border-radius: 8px;
  line-height: 50px;
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(255, 255, 255, 0.07);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select.field:hover { border-color: rgba(244, 241, 234, 0.5); }
select.field option { color: #222; background: #fff; }

.btn-gold {
  --fx: 50%; --fy: 50%; --gx: 50%; --gy: 50%;
  width: 100%;
  color: #3a3320;
  border: none;
  font-size: calc(19px * var(--fs));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  /* Two layers: a specular glint that follows the cursor (screen-blended so it
     reads as light on metal) over the metallic gradient, sized larger than the
     button so it can slide like a tilting sheet of foil. */
  background-image:
    radial-gradient(circle at var(--fx) var(--fy),
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.18) 16%,
      rgba(255, 255, 255, 0) 42%),
    var(--gold-btn);
  background-size: 100% 100%, 220% 220%;
  background-position:
    0 0,
    calc(var(--gx) + var(--foil-ambient-x)) calc(var(--gy) + var(--foil-ambient-y));
  background-blend-mode: screen, normal;
  transition: background-position 0.18s ease-out, opacity 0.18s ease-out;
}
.btn-gold.is-foil-lit { transition: opacity 0.18s ease-out; }
.btn-gold:hover { opacity: 0.96; }
.btn-gold--lg { font-size: calc(20px * var(--fs)); letter-spacing: 0.06em; padding: 16px 18px; }
.btn-gold--sm { width: auto; font-size: calc(16px * var(--fs)); padding: 10px 18px; }

.btn-outline {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: calc(17px * var(--fs));
  letter-spacing: 0.05em;
  padding: 10px 22px;
  border-radius: 2px;
  cursor: pointer;
}
.btn-outline:hover { background: rgba(233, 200, 106, 0.12); text-decoration: none; }
.btn-outline--sm { font-size: calc(15px * var(--fs)); padding: 6px 14px; }

.link-btn {
  background: transparent; border: none; color: var(--gold);
  font-size: calc(15px * var(--fs)); cursor: pointer; text-decoration: underline;
  font-family: 'Cormorant Garamond', serif; padding: 0;
}
.link-btn--danger { color: #e6a3a3; }

.form-error {
  background: rgba(233, 200, 106, 0.12);
  border: 1px solid rgba(233, 200, 106, 0.5);
  color: var(--gold-soft);
  padding: 10px 14px; border-radius: 2px; font-size: calc(16px * var(--fs)); margin: 0 0 18px;
}

.panel {
  border: 1px solid rgba(244, 241, 234, 0.25);
  padding: clamp(20px, 4.5vw, 30px);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
}
.stack { display: flex; flex-direction: column; gap: 14px; }

/* Two stacked info boxes within one section (e.g. Confetti + Riverside). */
.panel + .panel { margin-top: 20px; }

/* Logical groups within an info panel (e.g. address / parking / tips), split by
   a subtle hairline for visual weight. */
.panel-block + .panel-block {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(244, 241, 234, 0.14);
}

/* Home ---------------------------------------------------------------------- */
.home {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 6vw, 56px) clamp(16px, 6vw, 24px);
}
.home-card {
  width: 100%; max-width: 560px;
  background: var(--sage); color: var(--cream);
  border-radius: 32px;
  box-shadow: 0 30px 70px rgba(40, 44, 32, 0.28);
  position: relative; overflow: hidden;
  padding: clamp(48px, 9vw, 72px) clamp(24px, 6vw, 48px);
}
.home-card__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.16) 100%);
}
.home-card__frame { position: absolute; pointer-events: none; }
.home-card__frame--outer { inset: 16px; border: 1px solid rgba(244, 241, 234, 0.28); border-radius: 20px; }
.home-card__frame--inner { inset: 24px; border: 1px solid rgba(233, 200, 106, 0.3); border-radius: 14px; }
/* Match the details card: the double inset frame is too busy on small phone
   screens — drop it there and keep the clean card. Returns at tablet width up. */
@media (max-width: 767px) {
  .home-card__frame { display: none; }
}
.home-card__content {
  max-width: 480px; width: 100%; margin: 0 auto; text-align: center;
  position: relative; z-index: 1; animation: fadeIn 0.6s ease;
}
.lede {
  font-size: clamp(calc(17px * var(--fs)), 4.5vw, calc(21px * var(--fs))); letter-spacing: 0.03em;
  color: var(--cream); opacity: 0.9; margin: 0 0 34px; font-weight: 400;
}
.home-form { display: flex; flex-direction: column; gap: 14px; align-items: center; }

/* Details / RSVP ------------------------------------------------------------ */
.details-wrap { padding: clamp(20px, 5vw, 48px) clamp(12px, 4vw, 32px); }
.details-card {
  --details-card-padding-x: clamp(24px, 7vw, 56px);
  --details-card-nav-inset: 25px;
  max-width: 820px; margin: 0 auto;
  background: var(--sage); color: var(--cream);
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(40, 44, 32, 0.25);
  padding: 72px var(--details-card-padding-x) 88px;
  position: relative; animation: fadeIn 0.5s ease;
}
/* The same double inset frame as the login card, framing every guest page. */
.details-card__frame { position: absolute; pointer-events: none; }
.details-card__frame--outer { inset: 16px; border: 1px solid rgba(244, 241, 234, 0.28); border-radius: 16px; }
.details-card__frame--inner { inset: 24px; border: 1px solid rgba(233, 200, 106, 0.3); border-radius: 10px; }
/* The double inset frame is too busy on small phone screens — drop it there and
   keep the clean card. It returns at tablet width and up. */
@media (max-width: 767px) {
  .details-card__frame { display: none; }
}
.details-header { text-align: center; margin-bottom: 48px; position: relative; }
.details-header__greeting { font-size: calc(16px * var(--fs)); letter-spacing: 0.02em; opacity: 0.8; margin: 0 0 16px; }
.details-header__switch { font-size: calc(14px * var(--fs)); opacity: 0.85; white-space: nowrap; }
.details-header__pre { font-size: calc(18px * var(--fs)); letter-spacing: 0.03em; opacity: 0.85; margin: 0 0 6px; }
.details-header__date { font-size: calc(17px * var(--fs)); opacity: 0.75; margin: 0; text-transform: uppercase; letter-spacing: 0.08em; }

.section { margin-bottom: 52px; }
.section h2 {
  font-size: clamp(23px, 6vw, 29px); font-weight: 500; letter-spacing: 0.06em; margin: 0 0 6px;
  text-transform: uppercase;
}
.rule { width: 36px; height: 1px; background: var(--gold); margin-bottom: 18px; }

.note { margin: 0 0 16px; font-size: calc(18px * var(--fs)); opacity: 0.85; }
.note--last { margin-bottom: 0; }
.note--muted { font-size: calc(17px * var(--fs)); opacity: 0.7; margin-bottom: 4px; }
.note--italic { font-style: italic; }
/* Venue sub-headings (now real <h3>s): keep the light body weight the design
   uses rather than the browser's bold <h3> default. */
.venue { margin: 0 0 6px; font-size: calc(20px * var(--fs)); font-weight: inherit; }
.venue + .note { margin-top: 0; }

/* Timeline. The dot is vertically centred on the first line of the label, and
   the connecting line fills the gap down to the next dot. */
.timeline { padding: 4px 2px; }
.timeline__row { display: grid; grid-template-columns: 74px 16px 1fr; column-gap: 14px; }
.timeline__time {
  font-size: calc(20px * var(--fs));
  line-height: 1.55;
  opacity: 0.9;
  /* Lining, tabular figures read far more clearly than Cormorant's default
     old-style numerals, and keep the times vertically aligned. */
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.01em;
}
.timeline__marker { display: flex; flex-direction: column; align-items: center; font-size: calc(19px * var(--fs)); }
.timeline__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex-shrink: 0;
  margin-top: calc(0.775em - 4.5px); /* centre on the first line of the label */
}
.timeline__line { flex: 1 0 auto; width: 1px; min-height: 14px; background: rgba(244, 241, 234, 0.3); margin-top: 6px; }
.timeline__label { font-size: calc(19px * var(--fs)); line-height: 1.55; padding-bottom: 28px; }
.timeline__row:last-child .timeline__label { padding-bottom: 0; }

/* Menu */
.course { font-family: var(--script); font-size: 38px; color: var(--gold); margin: 40px 0 8px; font-weight: 400; }
.dish { margin-bottom: 14px; }
.dish__name { font-size: calc(19px * var(--fs)); font-weight: 600; }
.dish__codes { font-weight: 400; opacity: 0.6; font-size: calc(15px * var(--fs)); }
.dish__desc { font-size: calc(17px * var(--fs)); opacity: 0.8; }
.allergens { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(244, 241, 234, 0.2); }
.allergens p { font-size: calc(15px * var(--fs)); opacity: 0.65; margin: 0 0 4px; }
.allergens p:last-child { margin: 0; }

.menu-selection-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  padding: 22px;
  border: 1px solid rgba(233, 200, 106, 0.45);
  border-radius: 8px;
  background: rgba(233, 200, 106, 0.08);
}
.menu-selection-banner h3 { margin: 0 0 4px; color: var(--gold); font-size: calc(22px * var(--fs)); font-weight: 500; }
.menu-selection-banner p { margin: 0; font-size: calc(17px * var(--fs)); opacity: 0.82; }
.menu-selection-banner form { flex: 0 0 auto; }

@media (max-width: 600px) {
  .menu-selection-banner { align-items: stretch; flex-direction: column; }
  .menu-selection-banner .btn-gold { width: 100%; }
}

/* RSVP form */
.rsvp-form { display: flex; flex-direction: column; gap: 22px; }
.guest { border: 1px solid rgba(244, 241, 234, 0.25); }
.guest__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.guest__title { font-size: calc(20px * var(--fs)); margin: 0; font-weight: 600; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.05em; }
.label { display: flex; flex-direction: column; gap: 6px; font-size: calc(16px * var(--fs)); opacity: 0.85; }
.label__text { font-size: calc(16px * var(--fs)); opacity: 0.85; }
.toggle-groups { display: flex; gap: 24px; flex-wrap: wrap; }
.toggle-group { display: flex; flex-direction: column; gap: 6px; }
.toggle-set { display: flex; gap: 8px; }
.toggle {
  --fx: 50%; --fy: 50%; --gx: 50%; --gy: 50%;
  background: transparent; color: var(--cream);
  border: 1px solid rgba(244, 241, 234, 0.35);
  font-size: calc(16px * var(--fs)); padding: 8px 16px; border-radius: 8px; cursor: pointer; opacity: 0.75;
}
.toggle.active {
  color: #3a3320;
  border-color: transparent;
  font-weight: 600;
  opacity: 1;
  background-image:
    radial-gradient(circle at var(--fx) var(--fy),
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.18) 16%,
      rgba(255, 255, 255, 0) 42%),
    var(--gold-btn);
  background-size: 100% 100%, 220% 220%;
  background-position:
    0 0,
    calc(var(--gx) + var(--foil-ambient-x)) calc(var(--gy) + var(--foil-ambient-y));
  background-blend-mode: screen, normal;
  transition: background-position 0.18s ease-out, opacity 0.18s ease-out;
}
.dinner-fields {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.28s ease;
}
.dinner-fields__inner { min-height: 0; overflow: hidden; }
.dinner-fields.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .dinner-fields { transition: none; }
}
textarea.field { resize: vertical; }
.fineprint { margin: 0; font-size: calc(16px * var(--fs)); opacity: 0.7; text-align: center; }

.submitted-rsvp__intro { text-align: center; margin-bottom: 24px; }
.summary__lead { font-size: calc(20px * var(--fs)); margin: 0 0 6px; }
.summary__sub { font-size: calc(17px * var(--fs)); opacity: 0.75; margin: 0; }
.submitted-rsvp__guests { display: grid; gap: 16px; margin-bottom: 24px; }
.submitted-guest { margin: 0; }
.submitted-guest__name { margin: 0 0 14px; color: var(--gold); font-size: calc(21px * var(--fs)); font-weight: 500; }
.submitted-guest__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; margin: 0; }
.submitted-guest__details div { min-width: 0; }
.submitted-guest__details dt { font-size: calc(14px * var(--fs)); opacity: 0.65; text-transform: uppercase; letter-spacing: 0.04em; }
.submitted-guest__details dd { margin: 2px 0 0; font-size: calc(18px * var(--fs)); overflow-wrap: anywhere; }
.submitted-guest__notes { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid rgba(244, 241, 234, 0.14); }

@media (max-width: 520px) {
  .submitted-guest__details { grid-template-columns: 1fr; }
  .submitted-guest__notes { grid-column: auto; }
}

/* Admin --------------------------------------------------------------------- */
.admin-page { background: var(--sage); }
.admin { min-height: 100vh; background: var(--sage); color: var(--cream); }
.admin__inner { max-width: 1100px; margin: 0 auto; padding: 40px clamp(16px, 6vw, 24px) 80px; }
.admin__title { font-size: 27px; font-weight: 600; margin: 0 0 4px; }
.admin__sub { font-size: calc(16px * var(--fs)); opacity: 0.7; margin: 0 0 24px; }
.admin-section { margin-bottom: 48px; }
.admin-section__heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.admin-section__heading .admin-h2 { margin: 0; }
.admin-h2 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.admin-note { font-size: calc(15px * var(--fs)); opacity: 0.7; margin: 0 0 16px; }
.admin-empty { margin-top: 8px; }
.muted { opacity: 0.55; }
.notice {
  background: rgba(233, 200, 106, 0.14); border: 1px solid rgba(233, 200, 106, 0.4);
  color: var(--gold-soft); padding: 10px 14px; border-radius: 2px; font-size: calc(16px * var(--fs)); margin: 0 0 20px;
}

.table-wrap { overflow-x: auto; border: 1px solid rgba(244, 241, 234, 0.25); border-radius: 2px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: calc(15px * var(--fs)); min-width: 720px; }
.admin-table th { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(244, 241, 234, 0.2); background: rgba(255, 255, 255, 0.06); }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid rgba(244, 241, 234, 0.12); vertical-align: middle; }

.add-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 18px; }
.add-form__email { width: auto; flex: 1 1 220px; }
.add-form__name { width: auto; flex: 1 1 200px; }
.add-form__guests { width: auto; flex: 1 1 260px; resize: vertical; }
.add-form__rel { width: auto; flex: 1 1 200px; }
.add-form__num { display: flex; flex-direction: column; gap: 4px; font-size: calc(14px * var(--fs)); opacity: 0.8; }
.inline-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.mini-field {
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(244, 241, 234, 0.3);
  color: var(--cream); font-size: calc(15px * var(--fs)); padding: 6px 8px; border-radius: 2px; width: 64px;
}
.mini-field--wide { width: 160px; }
.mini-field--note { width: 240px; }
.mini-field--guest-names { width: 200px; min-height: 58px; resize: vertical; }
.mini-label { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--fs)); opacity: 0.75; }
.mini-label--stacked { align-items: flex-start; flex-direction: column; }
.pill {
  font-size: calc(13px * var(--fs)); padding: 3px 10px; border-radius: 20px;
  border: 1px solid rgba(244, 241, 234, 0.35); opacity: 0.8;
}
.pill--yes { background: rgba(233, 200, 106, 0.18); border-color: rgba(233, 200, 106, 0.5); color: var(--gold-soft); opacity: 1; }

.party-list { display: grid; gap: 16px; }
.party-card {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(244, 241, 234, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}
.party-card--new { margin-bottom: 22px; border-color: rgba(233, 200, 106, 0.42); }
.party-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.party-card__heading > div { display: flex; flex-direction: column; }
.party-card__heading strong { font-size: calc(18px * var(--fs)); }
.party-card__heading span:not(.pill) { font-size: calc(14px * var(--fs)); opacity: 0.65; }
.party-form { display: block; }
.party-guest-rows { display: grid; gap: 8px; }
.party-guest-row {
  display: grid;
  grid-template-columns: 120px minmax(130px, 1fr) minmax(130px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.045);
  border-radius: 6px;
}
.party-guest-row--lead { background: rgba(233, 200, 106, 0.08); }
.party-guest-row__type { font-size: calc(14px * var(--fs)); opacity: 0.72; text-transform: uppercase; letter-spacing: 0.05em; }
.party-guest-row__name { width: 100%; }
.party-guest-row__email { font-size: calc(14px * var(--fs)); opacity: 0.65; }
.party-guest-row__email-input { width: min(100%, 270px); }
.party-form__add { margin-top: 10px; }
.party-form__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(244, 241, 234, 0.14); }
.party-card:not(.party-card--new) .party-form__meta { padding-right: 100px; }
.party-card__delete { position: absolute; right: 18px; bottom: 22px; }

@media (max-width: 700px) {
  .party-guest-row { grid-template-columns: 1fr auto; }
  .party-guest-row__type { grid-column: 1 / -1; }
  .party-guest-row__name { grid-column: 1 / -1; }
  .party-guest-row__email,
  .party-guest-row__email-input { width: 100%; grid-column: 1 / -1; }
  .party-card__delete { position: static; margin-top: 14px; }
  .party-card:not(.party-card--new) .party-form__meta { padding-right: 0; }
}

/* Admin login */
.admin-login {
  width: 100%; max-width: 420px; background: var(--sage); color: var(--cream);
  border-radius: 24px; box-shadow: 0 30px 70px rgba(40, 44, 32, 0.28);
  padding: clamp(40px, 8vw, 56px); text-align: center; animation: fadeIn 0.5s ease;
}
.admin-login__title { font-size: 26px; font-weight: 600; margin: 0 0 4px; }
.admin-login__sub { font-family: var(--script); font-size: 30px; color: var(--gold); margin: 0 0 24px; }

/* Printable RSVP report ----------------------------------------------------- */
.print-page { background: #eceae5; color: #25251f; }
.print-report { width: min(900px, calc(100% - 32px)); margin: 32px auto; padding: 48px; background: #fff; box-shadow: 0 10px 35px rgba(40, 44, 32, 0.14); }
.print-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.print-actions .btn-outline { color: #596050; border-color: #818a77; }
.print-actions .btn-gold { width: auto; }
.print-report__header { text-align: center; margin-bottom: 30px; }
.print-report__header h1 { margin: 0; font-family: var(--script); font-size: 46px; font-weight: 400; color: #8a6d1f; }
.print-report__header p { margin: 4px 0 0; }
.print-report__eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; color: #666; }
.print-summary { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #d8d6cf; margin-bottom: 34px; }
.print-summary div { display: flex; flex-direction: column; align-items: center; padding: 15px 8px; text-align: center; border-right: 1px solid #d8d6cf; }
.print-summary div:last-child { border-right: 0; }
.print-summary strong { font-size: 25px; color: #596050; }
.print-summary span { font-size: 13px; }
.print-booking { break-inside: avoid; margin: 0 0 28px; border-top: 2px solid #818a77; }
.print-booking__header { display: flex; justify-content: space-between; gap: 24px; padding: 12px 0 8px; }
.print-booking__header h2 { margin: 0; font-size: 22px; }
.print-booking__header p { margin: 2px 0 0; color: #666; }
.print-booking__admin-note { max-width: 42%; text-align: right; }
.print-guest { margin: 8px 0 12px; padding: 12px 14px; background: #f6f4ef; break-inside: avoid; }
.print-guest__heading { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.print-guest__heading h3 { margin: 0; font-size: 18px; }
.print-guest__heading span { color: #777; font-size: 13px; }
.print-guest__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 22px; margin: 0; }
.print-guest__details div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
.print-guest__details dt { font-weight: 600; }
.print-guest__details dd { margin: 0; }
.print-guest__notes { grid-column: 1 / -1; }

@media (max-width: 650px) {
  .print-report { width: 100%; margin: 0; padding: 24px 16px; box-shadow: none; }
  .print-summary { grid-template-columns: repeat(2, 1fr); }
  .print-summary div:nth-child(2) { border-right: 0; }
  .print-summary div:nth-child(-n + 2) { border-bottom: 1px solid #d8d6cf; }
  .print-guest__details { grid-template-columns: 1fr; }
  .print-guest__notes { grid-column: auto; }
}

@media print {
  @page { margin: 12mm; }
  .print-page { background: #fff; }
  .print-report { width: 100%; margin: 0; padding: 0; box-shadow: none; }
  .print-actions { display: none; }
  .print-report__header { margin-bottom: 20px; }
  .print-summary { margin-bottom: 24px; }
  .print-booking { margin-bottom: 18px; }
  .print-guest { background: #f6f4ef !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Section nav + paged content ----------------------------------------------- */
.nav-sentinel { height: 1px; }

.section-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  padding: 8px 10px;
  transition: background 0.3s ease, padding 0.3s ease;
}
/* Once stuck, become a flat header spanning the full card rather than a
   floating pill inside the card's content padding. */
.section-nav.is-stuck {
  width: calc(100% + var(--details-card-padding-x) + var(--details-card-padding-x) - var(--details-card-nav-inset) - var(--details-card-nav-inset));
  margin-left: calc(var(--details-card-nav-inset) - var(--details-card-padding-x));
  margin-right: calc(var(--details-card-nav-inset) - var(--details-card-padding-x));
  padding: 8px calc(var(--details-card-padding-x) - var(--details-card-nav-inset));
  background: var(--sage);
}

.section-nav__list {
  --active-underline-left: 0px;
  --active-underline-width: 0px;
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(6px, 2.4vw, 22px);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.section-nav__list::after {
  content: '';
  position: absolute;
  left: var(--active-underline-left);
  bottom: 0;
  width: var(--active-underline-width);
  height: 2px;
  background: var(--gold);
  pointer-events: none;
}
.section-nav__list.has-active-underline::after {
  transition: left 0.36s cubic-bezier(0.22, 0.61, 0.36, 1),
              width 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.section-nav__list::-webkit-scrollbar { display: none; }

/* Holds the scrolling link list plus the overflow chevrons. The chevrons are
   pinned to this (non-scrolling) wrapper so they stay put while the list moves. */
.section-nav__scroller { position: relative; min-width: 0; max-width: 100%; }

/* End chevrons: hidden by default, revealed by pages.js only when the list can
   actually scroll that way — a hint that there's more, and a tappable scroller
   for anyone without a trackpad/scroll gesture. */
.section-nav__chevron {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 25;
  display: none;
  align-items: center;
  width: 36px;
  padding: 0;
  border: none;
  cursor: pointer;
  color: var(--gold);
  font-size: calc(26px * var(--fs));
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.section-nav__chevron:hover { color: var(--gold-soft); }
.section-nav__chevron--left  { left: 0;  justify-content: flex-start; background: linear-gradient(90deg, var(--sage) 58%, rgba(129, 138, 119, 0)); }
.section-nav__chevron--right { right: 0; justify-content: flex-end;   background: linear-gradient(270deg, var(--sage) 58%, rgba(129, 138, 119, 0)); }
.section-nav.can-scroll-left  .section-nav__chevron--left  { display: flex; }
.section-nav.can-scroll-right .section-nav__chevron--right { display: flex; }
.section-nav__link {
  position: relative;
  display: inline-block;
  color: var(--cream);
  opacity: 0.7;
  font-size: calc(17px * var(--fs));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 2px;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.section-nav__link::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 0;
  left: 2px;
  height: 2px;
  background: rgba(233, 200, 106, 0.5);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.24s ease;
}
.section-nav__link:not(.is-active):hover::after,
.section-nav__link:not(.is-active):focus-visible::after { transform: scaleX(1); }
.section-nav__link:hover { opacity: 1; color: var(--gold-soft); text-decoration: none; }
.section-nav__link.is-active {
  opacity: 1;
  color: var(--gold);
}
.section-nav__link.has-attention { padding-right: 19px; }
.section-nav__attention {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(233, 200, 106, 0.14);
  animation: rsvp-attention-pulse 2.3s ease-in-out infinite;
}
@keyframes rsvp-attention-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(233, 200, 106, 0.18); }
  50% { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(233, 200, 106, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .section-nav__attention { animation: none; }
}

/* Paged sections. Only the active page shows; others are revealed via the
   slide/fade transition driven by pages.js. */
.sections { position: relative; overflow-anchor: none; }
.section-page:not(.is-active) { display: none; }
.section-page > .section:last-child { margin-bottom: 0; }

/* Transition states (JS toggles these + sets transform/opacity inline). */
.sections.is-animating {
  overflow: hidden;
  transition: height 0.46s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sections.is-animating .section-page { position: absolute; top: 0; left: 0; width: 100%; }
.section-page.is-entering,
.section-page.is-leaving {
  transition: transform 0.46s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .section-nav,
  .section-nav__link,
  .section-nav__link::after,
  .section-nav__list::after { transition: none; }
}

/* Back / Next page footer --------------------------------------------------- */
.page-nav {
  display: flex; justify-content: space-between; align-items: stretch; gap: 12px;
  margin-top: 44px; padding-top: 24px;
  border-top: 1px solid rgba(244, 241, 234, 0.18);
}
.page-nav__spacer { flex: 0 0 1px; }
.page-nav__btn {
  display: inline-flex; align-items: center; gap: 12px;
  max-width: 49%;
  color: var(--cream); opacity: 0.9;
  border: 1px solid rgba(244, 241, 234, 0.3); border-radius: 2px;
  padding: 10px 16px; text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.page-nav__btn:hover {
  text-decoration: none; opacity: 1;
  border-color: var(--gold); background-color: rgba(233, 200, 106, 0.08);
}
.page-nav__btn--prev {
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
/* The "Next" button carries the primary, gold-foil treatment (matching the login
   Continue); "Back" stays a quiet outline. Foil vars are driven by foil.js. */
.page-nav__btn--next {
  --fx: 50%; --fy: 50%; --gx: 50%; --gy: 50%;
  margin-left: auto;
  border: none;
  border-radius: 8px;
  color: #3a3320;
  background-image:
    radial-gradient(circle at var(--fx) var(--fy),
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.18) 16%,
      rgba(255, 255, 255, 0) 42%),
    var(--gold-btn);
  background-size: 100% 100%, 220% 220%;
  background-position:
    0 0,
    calc(var(--gx) + var(--foil-ambient-x)) calc(var(--gy) + var(--foil-ambient-y));
  background-blend-mode: screen, normal;
  transition: background-position 0.18s ease-out, opacity 0.18s ease-out;
}
.page-nav__btn--next:hover { border: none; opacity: 0.96; color: #3a3320; }
.page-nav__arrow { color: var(--gold); font-size: calc(24px * var(--fs)); line-height: 1; flex-shrink: 0; }
.page-nav__btn--next .page-nav__arrow { color: #3a3320; }
.page-nav__text { display: flex; flex-direction: column; min-width: 0; }
.page-nav__btn--next .page-nav__text { align-items: flex-end; text-align: right; }
.page-nav__dir { font-size: calc(12px * var(--fs)); opacity: 0.6; letter-spacing: 0.06em; text-transform: uppercase; }
.page-nav__btn--next .page-nav__dir { opacity: 0.7; }
.page-nav__page { font-size: calc(17px * var(--fs)); }
.page-nav__btn--next .page-nav__page { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

/* More width on small screens — trim the card and panel padding, keep the
   generous framing on larger viewports. */
@media (max-width: 600px) {
  .details-wrap { padding-left: 8px; padding-right: 8px; }
  .details-card {
    --details-card-padding-x: 28px;
    --details-card-nav-inset: 21px;
    padding: 44px 28px 56px;
    border-radius: 18px;
  }
  .panel { padding-left: 16px; padding-right: 16px; }
}

/* "Menu closed" notice (guest-facing) --------------------------------------- */
.menu-closed {
  border: 1px solid rgba(233, 200, 106, 0.45);
  background: rgba(233, 200, 106, 0.08);
  color: var(--cream);
  border-radius: 2px;
  padding: clamp(16px, 4vw, 22px);
  /* Match the body text of the other panels; keep the gold border + tint. */
  font-size: calc(18px * var(--fs));
  opacity: 0.85;
}
.menu-closed p { margin: 0 0 0.85em; }
.menu-closed p:last-child { margin-bottom: 0; }

/* Admin: dinner-menu editor ------------------------------------------------- */
.menu-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.menu-status__state { font-size: calc(16px * var(--fs)); opacity: 0.85; }
.menu-status__state .is-open { color: var(--gold); }
.menu-status__state .is-closed { color: #e6a3a3; }

.menu-message { margin-bottom: 26px; max-width: 620px; }
.menu-message .label { margin-bottom: 8px; }

.menu-course { margin-bottom: 22px; }
.menu-course__title {
  font-family: var(--script); font-size: 26px; color: var(--gold);
  font-weight: 400; margin: 0 0 10px;
}
.menu-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid rgba(244, 241, 234, 0.1);
}
.menu-row--add { border-bottom: none; margin-top: 6px; }
.menu-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; flex: 1 1 auto; }
.menu-item__del { margin: 0; }
.menu-item__name { width: 200px; }
.menu-item__codes { width: 96px; }
.menu-item__desc { flex: 1 1 260px; min-width: 200px; }