/* ═══════════════════════════════════════════════════════════════════════
   COME TOGETHER — template 2008 · styles.css
   A warm, human social-gathering invitation. Sage + terracotta over cream.
   Fonts: Fraunces (display) + Inter (body). Mobile-first single column.

   House UX: NATURAL SCROLLING
     · Sections stack in normal document flow; each is a full-viewport
       "scene" that centers its content (gated behind html.js).
     · Fixed chrome derives its geometry from tokens: --header-h locks the
       sticky header, the cover cap and every anchor offset derive from it,
       --dock-space reserves room for the floating dock.
     · prefers-reduced-motion and @media print are supported; without JS the
       page is a plain stacked document (chrome hidden).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  /* palette (unchanged from template 2008) */
  --cream:        #FAF6EF;
  --card:         #FFFFFF;
  --sage:         #6B7F6B;   /* deep sage — primary brand */
  --sage-light:   #8FA68B;   /* light sage */
  --sage-pale:    #EAEFE7;   /* sage tint for fills */
  --terra:        #C46B47;   /* terracotta — accent / CTA */
  --terra-light:  #D8926D;   /* lighter terracotta */
  --terra-pale:   #F6E4D9;   /* terracotta tint */
  --ink:          #2D2A26;   /* warm near-black text */
  --muted:        #6B6660;   /* muted text */
  --hairline:     #E4DDD0;   /* hairline borders */

  /* typography (unchanged) */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* shape / elevation (unchanged) */
  --radius-card: 16px;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 34px rgba(45, 42, 38, 0.08);
  --shadow-card: 0 6px 20px rgba(45, 42, 38, 0.07);
  --shadow-btn:  0 6px 18px rgba(196, 107, 71, 0.28);

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

  /* Geometry tokens — real chrome must never drift from these. */
  --header-h: 56px;                                  /* enforced on .site-head (content box) */
  --anchor-gap: 10px;                                /* breathing room under the header */
  --head-chrome: calc(var(--header-h) + var(--safe-t));   /* real header footprint */
  --header-offset: calc(var(--head-chrome) + var(--anchor-gap));
  --dock-space: 96px;                                /* body padding reserved for the floating dock */
  --content-max: 560px;                              /* single-column reading width */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

/* ── Base / reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; vertical-align: middle; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
::selection { background: rgba(143, 166, 139, 0.35); }

/* ── Scrollbars styled to the palette (page, menu sheet, zoom panes) ───── */
* { scrollbar-width: thin; scrollbar-color: rgba(107, 127, 107, 0.5) rgba(234, 239, 231, 0.6); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(234, 239, 231, 0.6); }
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid var(--cream);
  background: linear-gradient(180deg, #b8c4aF, var(--sage-light) 60%, var(--sage));
}
::-webkit-scrollbar-corner { background: transparent; }

/* ── Smooth anchor gliding (JS jumps set behavior explicitly too) ──────── */
@media (prefers-reduced-motion: no-preference) {
  html.js { scroll-behavior: smooth; }
}
/* Native anchor/deep-link jumps stop just below the fixed header. */
.js .panel, .js .rsvp-wrap, .js .guestbook-section {
  scroll-margin-top: var(--header-offset);
}

/* ── Reserve room for the floating dock so end-of-page content and the
      powered-by strip never sit beneath it ─────────────────────────────── */
.js body { padding-bottom: calc(var(--dock-space) + var(--safe-b)); }

/* ════════════════════════════════════════════════════════════════════════
   NATURAL-SCROLL SHELL
   Every section stacks in flow. The .js class turns sections into
   full-viewport scenes and adds the fixed chrome; without JS the page is a
   plain, fully readable stacked document.
   ════════════════════════════════════════════════════════════════════════ */
.app { position: relative; }

.js .scene {
  min-height: calc(100vh - var(--head-chrome));
  min-height: calc(100dvh - var(--head-chrome));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.scene > .panel-inner { width: 100%; }

.panel { padding: 24px 18px 48px; }
.panel-inner { max-width: var(--content-max); margin: 0 auto; padding: clamp(30px, 6vmin, 56px) clamp(18px, 4vmin, 28px) clamp(38px, 7vmin, 60px); }

/* ── Sticky site header ────────────────────────────────────────────────── */
.site-head {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--head-chrome);   /* locked — cover cap and anchor offsets derive from it */
  padding: var(--safe-t) clamp(12px, 3vw, 24px) 0;
  border-bottom: 1px solid var(--hairline);
  background: rgba(250, 246, 239, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.site-head.is-scrolled {
  background: rgba(250, 246, 239, 0.94);
  box-shadow: 0 18px 40px -26px rgba(45, 42, 38, 0.35);
}
/* Progress hairline along the header's bottom edge */
.head-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--sage-light), var(--sage) 55%, var(--terra));
  pointer-events: none;
}

.head-brand { display: inline-flex; align-items: center; text-decoration: none; }
.head-monogram {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(143,166,139,0.35), rgba(107,127,107,0.55));
  color: var(--sage);
  font-size: 16px;
  line-height: 1;
}
.head-title {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px; font-weight: 600;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Desktop pill nav — built by script.js from the DOM sections */
.head-nav { display: none; }
@media (min-width: 1200px) {
  html.js .head-nav {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html.js .head-nav::-webkit-scrollbar { display: none; }
  html.js .head-burger { display: none; }
  /* On desktop the pills carry the labels — the brand arrow already jumps to
     the cover, so the free space lets the full pill row fit at 1200px+. */
  .head-title { display: none; }
  .tab-btn { padding: 5px 10px; font-size: 11px; letter-spacing: .05em; }
}
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font: 600 11.5px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.tab-btn span { overflow: hidden; text-overflow: ellipsis; }
.tab-btn:hover { color: var(--ink); border-color: var(--hairline); }
.tab-btn[aria-current="page"], .tab-btn.is-current {
  color: #fff;
  background: linear-gradient(135deg, var(--sage-light), var(--sage));
}
.tab-btn:focus-visible { outline-offset: 1px; }

/* Print + burger buttons */
.head-print {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  background: transparent; color: var(--sage);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  padding: 6px 12px; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.head-print svg { width: 15px; height: 15px; }
.head-print:hover { background: var(--sage); color: #fff; }
@media (max-width: 560px) {
  .head-print { padding: 6px 9px; }
  .head-print-label { display: none; }
}

.head-burger {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: transparent;
  color: var(--sage);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.head-burger:hover { background: rgba(107, 127, 107, 0.12); border-color: var(--sage-light); }
.head-burger svg { width: 20px; height: 20px; }
.head-burger .icon-close { display: none; }
.head-burger[aria-expanded="true"] .icon-open { display: none; }
.head-burger[aria-expanded="true"] .icon-close { display: block; }

/* Without JS the burger would do nothing — the page reads as a document. */
html:not(.js) .head-burger,
html:not(.js) .head-nav,
html:not(.js) .head-progress,
html:not(.js) .dock { display: none !important; }

/* ── Mobile slide-down section sheet ───────────────────────────────────── */
.menu-backdrop {
  position: fixed;
  inset: var(--head-chrome) 0 0 0;
  z-index: 70;
  background: rgba(45, 42, 38, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease);
}
.menu-backdrop.is-open { opacity: 1; pointer-events: auto; }

.menu-sheet {
  position: fixed;
  top: var(--head-chrome);
  left: 0; right: 0;
  z-index: 71;
  max-height: calc(100dvh - var(--head-chrome));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px clamp(14px, 4vw, 26px) calc(16px + var(--safe-b));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 246, 239, 0.98));
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 30px 50px -28px rgba(45, 42, 38, 0.35);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
}
.menu-sheet.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.menu-sheet-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 50px;
  padding: 12px 6px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font: 600 13px/1.25 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item svg { width: 18px; height: 18px; flex: none; color: var(--sage); }
.menu-item .menu-num {
  margin-left: auto;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--sage-pale); }
.menu-item.is-current { color: var(--sage); }
.menu-item.is-current .menu-num { color: var(--terra); }
.menu-sheet:focus { outline: none; }

/* ── Floating icon dock (mobile / tablet; desktop uses the header pills) ── */
.dock {
  position: fixed;
  left: 50%;
  bottom: calc(12px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: stretch;
  gap: 2px;
  max-width: calc(100vw - 16px);
  padding: 6px 7px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 44px -18px rgba(45, 42, 38, 0.4), inset 0 1px 0 rgba(255,255,255,0.7);
  overflow-x: auto;
  scrollbar-width: none;
}
.dock::-webkit-scrollbar { display: none; }
.dock button {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 27px;
  width: 31px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.dock button svg { width: 16px; height: 16px; }
.dock button:hover { color: var(--ink); background: var(--sage-pale); }
.dock button:active { transform: scale(0.92); }
.dock button.is-current {
  color: #fff;
  background: linear-gradient(135deg, var(--sage-light), var(--sage));
  box-shadow: 0 4px 14px -4px rgba(107, 127, 107, 0.6);
}
@media (min-width: 1200px) {
  html.js .dock { display: none; }   /* the header pills carry navigation */
}

/* ── Empty-state audit + cover-fit trimming ──────────────────────────────
   Hidden = visually hidden only: present in DOM, restored in print. */
.is-empty, .fit-hidden { display: none !important; }

/* Sections receive programmatic focus after nav jumps (tabindex="-1") —
   never show a focus ring on them. */
.js [data-panel]:focus, .js [data-panel]:focus-visible { outline: none; }

/* ── Click-to-open switch: <html data-media-lightbox="off"> renders media
   INLINE ONLY — no lightbox triggers, no leftover click affordances. */
html[data-media-lightbox="off"] .gallery-open { pointer-events: none; cursor: default; }
html[data-media-lightbox="off"] .gallery-open img { transform: none !important; }
html[data-media-lightbox="off"] .gallery-item:focus-within { outline: none; }
/* Trigger buttons disabled by script.js render exactly like plain figures. */
.gallery-open[disabled] { pointer-events: none; cursor: default; }
.gallery-open[disabled] img { transform: none; }
.gallery-open[disabled]:focus-visible { outline: none; }

/* ═══════════════════════════ COVER — THE OPENING SCENE ═══════════════════════════
   Exactly one screen: capped at 100dvh minus the header token, vertically
   centered, fully visible at load. Fluid type stops growing on short
   viewports (≤700px tiers below); script.js trims decorative elements first
   if content still overflows; the inner scroll area is the last-resort
   safety valve for extreme viewports only. */
.js .panel-cover {
  height: calc(100vh - var(--head-chrome));
  height: calc(100dvh - var(--head-chrome));
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* layered radial sage glow + subtle paper texture over cream (kept) */
  background:
    radial-gradient(circle at 50% 28%, rgba(143, 166, 139, 0.28), transparent 60%),
    radial-gradient(circle at 50% 75%, rgba(196, 107, 71, 0.10), transparent 55%),
    repeating-linear-gradient(45deg, rgba(107, 127, 107, 0.018) 0 2px, transparent 2px 6px),
    var(--cream);
}
.cover-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 40% at 50% 45%, rgba(143, 166, 139, 0.35), transparent 70%);
  filter: blur(8px);
}
.cover-scene {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;               /* last-resort safety valve for extreme viewports */
  overscroll-behavior: contain;
}
.cover-inner {
  width: 100%;
  min-height: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 5vmin, 56px) clamp(20px, 6vmin, 40px);
  gap: clamp(10px, 2.4vmin, 18px);
}

.cover-ornament {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--sage-light);
}
.cover-ornament .ornament-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.cover-ornament .ornament-line-sm {
  width: 28px; height: 1px;
  background: currentColor;
  opacity: .6;
}

.cover-eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .35em;
  font-size: clamp(.7rem, 2.6vmin, .82rem);
  font-weight: 500;
  color: var(--terra);
}
.cover-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 11vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cover-recipient {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: .7rem 1.6rem;
  display: inline-flex;
  flex-direction: column;
  gap: .1rem;
  box-shadow: var(--shadow-soft);
  min-width: 200px;
}
.recipient-label {
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
}
.recipient-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink);
  font-weight: 600;
}

.cover-open-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--terra);
  color: #fff;
  padding: .95rem 2.1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background .3s ease, transform .25s ease, box-shadow .3s ease;
}
.cover-open-btn:hover { background: var(--ink); transform: translateY(-2px); }
.cover-open-btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(196, 107, 71, .25); }
.cover-open-btn i { font-size: 1.2rem; }

.cover-footnote {
  font-size: .72rem;
  color: var(--muted);
  font-style: italic;
}

/* Short viewports: fluid sizing stops growing (~700px tier) so mid-size
   phones and landscape screens never lose content to the cap. */
@media (max-height: 700px) {
  .cover-inner { gap: clamp(8px, 1.8vmin, 14px); padding: clamp(16px, 4vmin, 30px) clamp(18px, 5vmin, 36px); }
  .cover-title { font-size: clamp(2rem, 8vmin, 3rem); }
  .cover-recipient { min-width: 180px; padding: .55rem 1.3rem; }
  .cover-open-btn { padding: .8rem 1.8rem; }
}
@media (max-height: 560px) {
  .cover-inner { gap: 7px; padding-bottom: 88px; }   /* keep content clear of the dock on short/landscape screens */
  .cover-ornament, .cover-footnote { display: none; }   /* trimmed by design tiers too */
  .cover-title { font-size: clamp(1.7rem, 7vmin, 2.4rem); }
  .cover-recipient { min-width: 164px; padding: .45rem 1.2rem; }
  .cover-open-btn { padding: .72rem 1.6rem; font-size: .86rem; }
}

/* ── Powered by: full-width platform credit strip ──────────────────────── */
.powered-by {
  display: flex; align-items: center; justify-content: center;
  padding: 7px calc(14px + var(--safe-r)) calc(9px + var(--safe-b)) calc(14px + var(--safe-l));
  border-top: 1px solid var(--hairline);
  background: rgba(234, 239, 231, 0.6);
  font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.powered-by a { color: var(--sage); }

/* ── Shared panel typography ───────────────────────────────────────────── */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin-bottom: clamp(22px, 4vmin, 34px);
  text-align: center;
}
.ornament-line {
  flex: 0 1 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sage-light), transparent);
}
.panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 4.6vmin, 1.9rem);
  font-weight: 600;
  color: var(--sage);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .panel-title { white-space: normal; }
}

/* ── WELCOME ───────────────────────────────────────────────────────────── */
.panel-welcome {
  background:
    radial-gradient(120% 50% at 50% 0%, var(--sage-pale), transparent 70%),
    var(--cream);
}
.welcome-message {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 4.2vw, 1.4rem);
  line-height: 1.65;
  color: var(--ink);
  max-width: 38ch;
  margin: 0 auto;
  text-align: center;
}
.welcome-host {
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: .95rem;
  color: var(--terra);
  font-weight: 500;
  text-align: center;
}

/* ── SAVE THE DATE + COUNTDOWN + ADD TO CALENDAR ───────────────────────── */
.panel-savedate { background: var(--sage-pale); text-align: center; }
.savedate-date {
  font-size: 1.05rem;
  color: var(--terra);
  font-weight: 500;
  margin-bottom: 2rem;
  letter-spacing: .01em;
}
.savedate-date[hidden] { display: none; }

.countdown {
  display: flex;
  justify-content: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.countdown[hidden] { display: none; }
.cd-unit {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  min-width: 72px;
  padding: 1rem .5rem;
  box-shadow: var(--shadow-card);
  flex: 1 1 72px;
  max-width: 96px;
}
.cd-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-label {
  display: block;
  margin-top: .45rem;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.countdown-done {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--terra);
}
.countdown-done[hidden] { display: none; }

.cal-row {
  margin: clamp(20px, 4vmin, 30px) 0 0;
  text-align: center;
}
.cal-btn {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px;
  padding: 12px 24px;
  border: 1px solid var(--sage-light); border-radius: var(--radius-pill);
  background: rgba(107, 127, 107, 0.1);
  color: var(--sage);
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.cal-btn svg { width: 17px; height: 17px; flex: none; }
.cal-btn:hover { background: var(--sage); color: #fff; transform: translateY(-1px); }

/* ── SCHEDULE ──────────────────────────────────────────────────────────── */
.panel-schedule { background: var(--cream); }
.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.schedule-item {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.8rem 1.5rem;
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.schedule-name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
.schedule-date,
.schedule-time,
.schedule-venue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-size: .95rem;
  color: var(--ink);
  margin: .4rem 0;
}
.schedule-date .ph-wrap,
.schedule-time .ph-wrap,
.schedule-venue .ph-wrap {
  display: inline-flex;
  color: var(--terra);
  font-size: 1.05rem;
}
.schedule-venue span { max-width: 320px; }
.schedule-map-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.1rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--sage);
  border-bottom: 1px solid var(--sage-light);
  padding-bottom: 2px;
  transition: color .25s ease;
}
.schedule-map-link:hover { color: var(--terra); border-color: var(--terra-light); }

/* ── WHAT TO EXPECT ────────────────────────────────────────────────────── */
.panel-expect { background: var(--cream); }
.expect-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.expect-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.3rem;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.expect-icon {
  width: 52px; height: 52px;
  margin: 0 auto .9rem;
  display: grid;
  place-items: center;
  background: var(--sage-pale);
  color: var(--sage);
  border-radius: 50%;
  font-size: 1.4rem;
}
.expect-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .45rem;
  letter-spacing: -0.01em;
}
.expect-optional {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: .72rem;
  color: var(--muted);
  text-transform: lowercase;
  letter-spacing: 0;
}
.expect-card-text {
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ── GALLERY ───────────────────────────────────────────────────────────── */
.panel-gallery { background: var(--sage-pale); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem;
}
.gallery-item {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
  background: var(--hairline);
}
.gallery-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.gallery-open img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
.gallery-item:hover .gallery-open img { transform: scale(1.06); }
.gallery-item:focus-within { outline: 2px solid var(--sage); outline-offset: 2px; }

/* ── Free Page ─────────────────────────────────────────────────────────── */
.panel-free { background: var(--cream); }
.free-blocks {
  display: flex; flex-direction: column;
  gap: clamp(16px, 3.4vmin, 24px);
}
.free-block {
  padding: clamp(16px, 3vmin, 22px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
  text-align: left;
}
.free-block:hover { transform: translateY(-2px); }
.free-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 3.6vmin, 1.3rem);
  line-height: 1.2;
  color: var(--sage);
}
.free-content { margin: 0; }
.free-content p {
  margin: 0;
  font-size: clamp(.92rem, 3.1vmin, 1rem);
  line-height: 1.65;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ── RSVP ──────────────────────────────────────────────────────────────── */
.panel-rsvp { background: var(--cream); }
.rsvp-form { text-align: left; }
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: .78rem;
  color: var(--sage);
  margin-bottom: .35rem;
  letter-spacing: .04em;
  font-weight: 500;
}
.form-group .req { color: var(--terra); }
.form-control {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: .75rem .9rem;
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--ink);
  background: var(--card);
  appearance: none;
  -webkit-appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--sage-light);
  box-shadow: 0 0 0 3px rgba(143, 166, 139, .25);
}
select.form-control {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7F6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
}
.error {
  display: block;
  min-height: 1.1em;
  margin-top: .4rem;
  font-size: .78rem;
  font-weight: 600;
  color: #b8502f;
}
.rsvp-form .rsvp-error { display: none; }
.rsvp-form .rsvp-error:not(:empty),
.rsvp-form .rsvp-error.show,
.rsvp-form .rsvp-error.is-visible { display: block; }
/* Guest-count field collapses when the guest selects "can't make it". */
#rsvp-attendee-details.is-collapsed { display: none; }
/* Platform-owned status node: hidden until the platform toggles it. */
.loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-top: 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--sage);
}
.loading.show, .loading.visible, .loading.is-visible { display: flex; }
.loading__spinner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 3px solid rgba(107, 127, 107, .25);
  border-top-color: var(--sage);
  animation: rsvp-spin .8s linear infinite;
}
@keyframes rsvp-spin { to { transform: rotate(360deg); } }
#submit-button {
  display: block; width: 100%;
  margin-top: 6px;
  padding: 14px 22px;
  font: 600 14px/1 var(--font-body);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff;
  background: var(--terra);
  border: 0; border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
#submit-button:hover { background: var(--ink); transform: translateY(-2px); }
#submit-button:disabled { filter: grayscale(0.5) brightness(0.9); cursor: default; transform: none; }

/* ── GUESTBOOK (injected platform markup: style via its own selectors) ─── */
.panel-guestbook { background: var(--sage-pale); }
.guestbook-body .form-group { margin-bottom: 1rem; text-align: left; }
.guestbook-body label {
  display: block;
  font-size: .78rem;
  color: var(--sage);
  margin-bottom: .35rem;
  letter-spacing: .04em;
  font-weight: 500;
}
.guestbook-body .form-control {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: .75rem .9rem;
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--ink);
  background: var(--card);
}
.guestbook-body .form-control:focus {
  outline: none;
  border-color: var(--sage-light);
  box-shadow: 0 0 0 3px rgba(143, 166, 139, .25);
}
.guestbook-body #guestbookForm button,
.guestbook-body #guestbookForm [type="submit"] {
  background: var(--terra);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: .85rem 2rem;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  box-shadow: var(--shadow-btn);
}
.guestbook-body #comments-container,
.guestbook-body .guestbook-entry,
.guestbook-body .wish-item {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-top: .75rem;
  text-align: left;
  box-shadow: var(--shadow-card);
}
.guestbook-body .more-guestbook-wrap { text-align: center; margin-top: 1rem; }
.guestbook-body #load-more {
  background: var(--card);
  color: var(--sage);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: .7rem 1.6rem;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
}
.guestbook-body #load-more:hover { background: var(--terra); color: #fff; border-color: var(--terra); }
/* Injected guestbook submit button uses Bootstrap-ish classes this template
   doesn't ship — restyle to match. */
#guestbookForm .d-flex { display: flex; justify-content: center; }
#guestbookForm .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 6px;
  padding: 13px 30px;
  font: 600 13px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff;
  background: var(--terra);
  border: 0; border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
}
#guestbookForm .btn:hover { background: var(--ink); }

/* ── GIFT / CONTRIBUTION ───────────────────────────────────────────────── */
.panel-gift { background: var(--cream); }
.gift-intro {
  max-width: 42ch;
  margin: 0 auto 1.75rem;
  font-size: .98rem;
  color: var(--muted);
  line-height: 1.7;
  text-align: center;
}
.gift-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.gift-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.2rem;
  box-shadow: var(--shadow-soft);
  text-align: left;
}
.gift-bank-icon {
  flex: 0 0 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--terra-pale);
  border-radius: 12px;
  color: var(--terra);
  font-size: 1.35rem;
}
.gift-detail { flex: 1; min-width: 0; }
.gift-bank-name {
  font-size: .74rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}
.gift-account-number {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.gift-account-name { font-size: .8rem; color: var(--muted); }
.gift-copy-btn {
  flex: 0 0 auto;
  background: var(--terra);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: .55rem .95rem;
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: background .3s ease;
}
.gift-copy-btn:hover { background: var(--ink); }

/* ── FOOTER ────────────────────────────────────────────────────────────── */
.panel-footer { background: var(--sage); color: #fff; text-align: center; }
.footer-thanks {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  margin-bottom: .6rem;
  font-weight: 500;
}
.footer-credit {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
  font-weight: 500;
}

/* ── Lightbox: full-screen media viewer (built by script.js) ─────────────
   Photos: wheel / pinch / double-tap zoom with pan while zoomed, prev/next
   and an "Open full size" link. Built/destroyed on demand. */
.lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
  background: rgba(45, 42, 38, 0.94);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lightbox.is-open { display: flex; }
html.lb-open, html.lb-open body { overflow: hidden; }   /* lock the page while open */
.lightbox-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(92vw, 980px);
  max-height: 76vh;
  touch-action: none;
}
.lightbox img,
.lightbox video,
.lightbox iframe {
  display: block;
  max-width: min(92vw, 980px);
  max-height: 76vh;
  width: auto; height: auto;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  box-shadow: 0 34px 90px -30px rgba(0, 0, 0, 0.85);
  background: rgba(45, 42, 38, 0.8);
}
.lightbox img { cursor: zoom-in; touch-action: none; user-select: none; -webkit-user-select: none; }
.lightbox.is-zoomed .lightbox-media { overflow: visible; }
.lightbox img { transition: transform 0.2s var(--ease); }
.lightbox.is-panning img { transition: none; cursor: grabbing; }
.lightbox-cap,
.lightbox-hint,
.lightbox-original { align-self: center; }
.lightbox-cap {
  margin: 14px 0 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; text-align: center;
}
.lightbox-hint {
  margin: 8px 0 0;
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); text-align: center;
}
.lightbox-original {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sage-light); text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lightbox-original:hover { background: var(--sage); color: #fff; }
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--hairline); border-radius: 50%;
  background: rgba(45, 42, 38, 0.8);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
  background: var(--terra); color: #fff;
}
.lightbox-close { top: calc(14px + var(--safe-t)); right: 14px; }
.lightbox-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-prev.is-hidden, .lightbox-next.is-hidden { display: none; }
@media (max-width: 560px) {
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
  .lightbox { padding: 12px; }
}

/* ── Responsive polish ─────────────────────────────────────────────────── */
@media (min-width: 560px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: .9rem; }
  .expect-grid { grid-template-columns: 1fr 1fr; }
}
/* Very narrow phone: compact the dock so all section icons fit the viewport
   (11 sections × ~28px). */
@media (max-width: 380px) {
  .dock { padding: 5px 6px; gap: 1px; bottom: calc(8px + var(--safe-b)); }
  .dock button { min-width: 23px; width: 27px; height: 31px; border-radius: 8px; }
  .dock button svg { width: 14px; height: 14px; }
}
@media (min-width: 640px) {
  .schedule-item { padding: 2.2rem 2.4rem; }
}

/* ── Motion preferences ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  #submit-button:hover, .head-print:hover, .cal-btn:hover, .cover-open-btn:hover { transform: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .lightbox img { transition: none; }
}

/* ── Print: full stacked invitation ────────────────────────────────────── */
@media print {
  @page { margin: 12mm; }
  html.js body { padding-bottom: 0; }
  .app { background: none; }
  .site-head, .dock, .menu-sheet, .menu-backdrop, .head-progress,
  .js-print, .lightbox, .cal-row { display: none !important; }
  /* Empty-state hiding and cover-fit trimming are visual only — print
     restores everything (§ empty-state audit). */
  .is-empty, .fit-hidden { display: revert !important; }
  .powered-by { background: none; border-color: #ddd; color: #666; }
  .powered-by a { color: var(--sage); }
  .js .panel-cover { height: auto; min-height: 0; padding: 0 18px; }
  .js .scene { min-height: 0; display: block; }
  .cover-scene { overflow: visible; max-height: none; }
  .cover-inner { min-height: 0; }
  .cover-ornament, .cover-footnote { display: flex !important; }
  .js .panel, .rsvp-wrap, .guestbook-section { break-before: page; }
  .panel-cover { break-before: auto; }
  .panel[data-panel="cover"] { break-before: auto; }
  .schedule-item, .gallery-item, .free-block, .expect-card, .gift-item { break-inside: avoid; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .panel-inner { max-width: none; }
  .form-control, #submit-button { border-width: 1px; }
  body { background: #fff; color: #222; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; }
}