/* ════════════════════════════════════════════════════════════════════
   conference-id-executive-summit-card — styles.css

   Design language: formal paper invitation card. A framed ivory card sheet
   centred on a warm linen ground; crest monogram, Butler serif headlines,
   Montserrat for labels and data, navy + brushed gold.

   Shell contract:
     - Default (no JS): normal stacked document flow.
     - html.shell-on (added by main.js): single-viewport 100dvh shell where
       only the active panel scrolls internally.
   ════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --ink:        #12233f;   /* deep navy   */
  --ink-2:      #1d3a63;
  --paper:      #ece4d2;   /* linen ground */
  --card:       #fdfbf5;   /* card ivory  */
  --card-2:     #f7f2e6;   /* recessed ivory */
  --gold:       #a9894f;   /* brushed gold */
  --gold-2:     #c2a26a;
  --gold-ink:   #84682f;
  --line:       rgba(18, 35, 63, .16);
  --line-soft:  rgba(18, 35, 63, .09);
  --muted:      #5c6b82;
  --danger:     #a3302a;
  --ok:         #2e6b4f;

  --font-display: "Butler", "Times New Roman", Georgia, serif;
  --font-sans:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius:   12px;
  --radius-sm: 8px;
  --shadow:   0 24px 60px -30px rgba(18, 35, 63, .45);
  --topbar-h: 56px;
  --navbar-h: 60px;
}

/* ── Fonts (bundled locally so the template stays self-contained) ──── */
@font-face { font-family: "Butler"; src: url("../fonts/Butler_Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Butler"; src: url("../fonts/Butler_Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Butler"; src: url("../fonts/Butler_Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Butler"; src: url("../fonts/Butler_ExtraBold.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }

@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* ── Reset / base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 400 clamp(15px, 1.6vw, 16.5px)/1.65 var(--font-sans);
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(255, 253, 245, .6), transparent 60%),
    linear-gradient(180deg, #ece4d2 0%, #e7ddc8 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

/* optional-feature toggles: .feature-off hides a non-panel block (flyer,
   video); .panel-hidden hides a whole panel face (gallery). main.js also
   drops the matching nav label so the menu stays honest. */
.feature-off { display: none !important; }
html.shell-on .panel-hidden { display: none !important; }

img { max-width: 100%; height: auto; }

h1, h2, h3, p, dl, dd, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--gold-ink); text-underline-offset: 3px; }
a:hover { color: var(--gold); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--gold); color: #fff; }

/* ── Skip link ──────────────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* ── Shell ────────────────────────────────────────────────────────────
   Default (html:not(.shell-on)): normal document flow — every panel is
   stacked and the page scrolls as a whole. This is the no-JS fallback. */
.shell { min-height: 100dvh; }

/* JS enabled: fixed single-viewport shell, only active panel scrolls. */
html.shell-on .shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  height: 100vh; /* fallback for older browsers */
  min-height: 0;
  overflow: hidden; /* fallback: same visual result on older browsers */
  overflow: clip;   /* clip (not hidden) so anchors / scrollIntoView can
                       never shift the shell sideways; panels scroll
                       internally */
}

/* ── Top bar ────────────────────────────────────────────────────────── */
.shell-topbar {
  flex: 0 0 auto;
  height: var(--topbar-h);
  background: var(--ink);
  color: #f4eedd;
  border-bottom: 1px solid rgba(194, 162, 106, .5);
  padding-top: env(safe-area-inset-top);
}
html:not(.shell-on) .shell-topbar { display: none; } /* clean scroll in no-JS mode */

.topbar-inner {
  max-width: 1080px;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 40px);
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(15px, 2.2vw, 19px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #f4eedd;
}
.topbar-brand em { font-style: normal; color: var(--gold-2); }
.topbar-progress {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(244, 238, 221, .65);
  font-variant-numeric: tabular-nums;
}
.topbar-progress .page-count { color: var(--gold-2); }
.topbar-cta {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-2);
  text-decoration: none;
  border: 1px solid rgba(194, 162, 106, .55);
  border-radius: 999px;
  padding: 8px 16px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.topbar-cta:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ── Panels ─────────────────────────────────────────────────────────── */
.panels {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

/* stacked mode */
.panel { padding: 0; }

/* shell-on mode: a horizontal flex track, one viewport-wide panel each.
   Only the active panel scrolls internally. */
html.shell-on .panels {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  will-change: transform;
  transition: transform .55s cubic-bezier(.65, .05, .36, 1);
}
html.shell-on .panel {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.panel-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(22px, 4.5vh, 52px) clamp(16px, 4.5vw, 56px) clamp(44px, 6vh, 80px);
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.panel-inner::after { content: ""; display: block; height: calc(var(--navbar-h) * 0.5); } /* room for the nav bar */

/* ── The card sheet ─────────────────────────────────────────────────── */
.card-sheet {
  position: relative;
  width: 100%;
  max-width: 880px;
  background: var(--card);
  border: 1px solid rgba(18, 35, 63, .14);
  border-radius: 3px;
  box-shadow: var(--shadow);
  padding: clamp(28px, 5vw, 64px) clamp(22px, 5.5vw, 68px);
}
/* inner hairline frame */
.card-sheet::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(169, 137, 79, .4);
  border-radius: 2px;
  pointer-events: none;
}

/* cover sheet centres its content vertically when it fits */
.cover-sheet {
  min-height: calc(100% - 0px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cover-sheet > :first-child { margin-top: auto; }
.cover-sheet > :last-child  { margin-bottom: auto; }
.cover-sheet > * { flex-shrink: 0; }

/* ── Crest ──────────────────────────────────────────────────────────── */
.crest { margin-bottom: clamp(20px, 3.4vh, 36px); }
.crest-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  padding: 8px;
}
.crest-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--gold);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: .04em;
  color: var(--ink);
}

/* ── Cover content ──────────────────────────────────────────────────── */
.cover-kicker {
  font-size: clamp(10px, 1.3vw, 12px);
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: clamp(12px, 2vh, 20px);
}
.cover-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 7vw, 66px);
  line-height: 1.02;
  letter-spacing: .005em;
  color: var(--ink);
  margin-bottom: clamp(14px, 2.2vh, 24px);
}
.cover-pleasure {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(15px, 2vw, 19px);
  font-style: italic;
  color: var(--ink-2);
  max-width: 46ch;
  margin-bottom: clamp(18px, 2.8vh, 30px);
}
.cover-greeting {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.9vw, 18px);
  color: var(--ink-2);
  margin-bottom: clamp(18px, 3vh, 30px);
}

.cover-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: 640px;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  padding: clamp(14px, 2.4vh, 22px) 0;
  margin-bottom: clamp(18px, 3vh, 30px);
}
.meta-item {
  padding: 0 clamp(10px, 2vw, 22px);
  border-right: 1px solid rgba(169, 137, 79, .35);
}
.meta-item:first-child { padding-left: 0; }
.meta-item:last-child { padding-right: 0; border-right: 0; }
.meta-item dt {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 7px;
}
.meta-item dd {
  font-size: clamp(12.5px, 1.6vw, 14.5px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
}

.cover-rsvp-line {
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: clamp(18px, 2.8vh, 28px);
}
.cover-rsvp-line strong { color: var(--gold-ink); font-weight: 700; }

.cover-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: clamp(20px, 3.2vh, 32px);
}

.cover-admit {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted);
  max-width: 52ch;
}

/* ── Official flyer / banner (optional) ────────────────────────────────
   The summit's own designed flyer shown on the cover face so guests
   recognise the event and confirm the right link. Tap to view larger in
   the lightbox (single image, still zoomable). */
.flyer-banner {
  width: 100%;
  max-width: 560px;
  margin: clamp(18px, 3vh, 28px) auto 0;
}
.flyer-banner__card { position: relative; }
.flyer-banner__open {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(169, 137, 79, .5);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card-2);
  cursor: zoom-in;
  box-shadow: 0 18px 44px -26px rgba(18, 35, 63, .5);
  transition: transform .2s ease, box-shadow .2s ease;
}
.flyer-banner__open:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -26px rgba(18, 35, 63, .55); }
.flyer-banner__open:active { transform: translateY(0); }
.flyer-banner__open:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.flyer-banner__open img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--card-2);
}
.flyer-banner__chip {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(253, 251, 245, .92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(169, 137, 79, .4);
  border-radius: 999px;
  padding: 6px 13px;
  pointer-events: none;
  box-shadow: 0 6px 16px -8px rgba(18, 35, 63, .4);
}
.flyer-banner__label {
  margin: 10px 0 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: #f4eedd; }
.btn-ink:hover { background: var(--ink-2); color: #fff; }
.btn-outline { border-color: rgba(18, 35, 63, .5); color: var(--ink); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold-ink); }
.btn-block { width: 100%; }

/* ── Panel heads ────────────────────────────────────────────────────── */
.panel-head {
  margin-bottom: clamp(20px, 3.2vh, 34px);
  padding-bottom: clamp(14px, 2.2vh, 22px);
  border-bottom: 1px solid var(--gold);
}
.panel-kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 9px;
}
.panel-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(27px, 4.4vw, 44px);
  line-height: 1.1;
  color: var(--ink);
}
.panel-desc {
  max-width: 62ch;
  margin-top: 11px;
  color: var(--muted);
  font-size: clamp(13.5px, 1.6vw, 15.5px);
}
.panel-note {
  margin-top: clamp(18px, 2.8vh, 28px);
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--muted);
  max-width: 68ch;
}

/* ── Agenda (compact card style) ────────────────────────────────────── */
.agenda { margin-top: clamp(4px, .8vh, 10px); }
.agenda-row {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: baseline;
  padding: clamp(11px, 1.8vh, 16px) 0;
  border-bottom: 1px solid var(--line-soft);
}
.agenda-row:last-child { border-bottom: 0; }
.agenda-time {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agenda-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(15.5px, 2vw, 18.5px);
  color: var(--ink);
  line-height: 1.3;
}
.agenda-detail { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* Narrow screens: a long time label (e.g. "Sunset ceremony at 4 PM")
   must not squeeze the agenda name into an unreadable sliver. Fall back to
   a stacked row where the time sits above the item on its own line. */
@media (max-width: 360px) {
  .agenda-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .agenda-time {
    white-space: normal;
  }
}

/* ── Speakers ───────────────────────────────────────────────────────── */
.speaker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
}
.speaker-card {
  background: var(--card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: clamp(18px, 2.4vw, 24px);
  text-align: center;
  transition: transform .2s ease, border-color .2s ease;
}
.speaker-card:hover { transform: translateY(-3px); border-color: rgba(169, 137, 79, .45); }
.speaker-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17.5px;
  color: var(--ink);
  line-height: 1.2;
}
.speaker-role {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-top: 6px;
}
.speaker-bio { font-size: 12.5px; color: var(--muted); margin-top: 9px; }

/* ── Free page (optional notes & extras — blocks with a free title, free
   text and an optional photo each). The editor clones .free-block per row;
   a block without its optional photo still reads as a clean note card. */
.free-blocks {
  display: grid;
  gap: clamp(14px, 2.2vw, 22px);
  max-width: 720px;
}
.free-block { margin: 0; }
.free-card {
  background: var(--card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(18px, 2.6vw, 26px);
  box-shadow: 0 10px 26px -18px rgba(18, 35, 63, .4);
}
.free-figure { margin: 0 0 16px; }
.free-card__open {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(169, 137, 79, .4);
  border-radius: var(--radius-sm);
  overflow: hidden;
  /* navy ground so a missing image still reads as a designed card */
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(169, 137, 79, .2), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, #0a1730 55%, var(--ink-2) 100%);
  cursor: zoom-in;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.free-card__open:hover { transform: translateY(-3px); border-color: rgba(169, 137, 79, .6); box-shadow: 0 20px 44px -24px rgba(18, 35, 63, .6); }
.free-card__open:active { transform: translateY(0); }
.free-card__open:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.free-card__open img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s ease;
}
.free-card__open:hover img { transform: scale(1.04); }
.free-figure__chip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(253, 251, 245, .92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(169, 137, 79, .4);
  border-radius: 999px;
  padding: 5px 11px;
  pointer-events: none;
  box-shadow: 0 6px 16px -8px rgba(18, 35, 63, .4);
}
.free-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--ink);
  line-height: 1.25;
}
.free-content {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.65;
  white-space: pre-line; /* host line breaks from the textarea render as breaks */
  overflow-wrap: anywhere;
}

/* ── Gallery (optional photography — every photo opens in the lightbox) ─ */
.gallery-grid {
  display: grid;
  gap: clamp(12px, 1.8vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-item {
  margin: 0;
}
.gallery-open {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(169, 137, 79, .35);
  border-radius: var(--radius);
  overflow: hidden;
  /* navy ground so a slot without an image still reads as a designed card */
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(169, 137, 79, .2), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, #0a1730 55%, var(--ink-2) 100%);
  cursor: zoom-in;
  box-shadow: 0 14px 34px -22px rgba(18, 35, 63, .55);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.gallery-open:hover { transform: translateY(-3px); border-color: rgba(169, 137, 79, .6); box-shadow: 0 20px 44px -24px rgba(18, 35, 63, .6); }
.gallery-open:active { transform: translateY(0); }
.gallery-open:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.gallery-open img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s ease;
}
.gallery-open:hover img { transform: scale(1.04); }
.gallery-item figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 9px;
  padding: 0 2px;
  font-size: 12.5px;
  color: var(--muted);
}
.g-cap-label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* ── Video (optional aftermovie embed — plays in the lightbox) ──────── */
.video-section {
  margin-top: clamp(26px, 4vh, 40px);
  padding-top: clamp(18px, 3vh, 26px);
  border-top: 1px solid var(--line-soft);
}
.video-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2.6vw, 24px);
  color: var(--ink);
  text-align: center;
  margin-bottom: clamp(14px, 2.4vh, 20px);
}
.video-card { max-width: 620px; margin: 0 auto; }
.video-open {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(169, 137, 79, .45);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
  box-shadow: 0 18px 44px -26px rgba(18, 35, 63, .55);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.video-open:hover { transform: translateY(-3px); border-color: rgba(169, 137, 79, .7); box-shadow: 0 26px 54px -26px rgba(18, 35, 63, .6); }
.video-open:active { transform: translateY(0); }
.video-open:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.video-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink);
}
/* play button — a brushed-gold disc over the still */
.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  text-indent: 3px;
  background: linear-gradient(135deg, var(--gold), var(--gold-ink));
  box-shadow: 0 14px 30px -10px rgba(18, 35, 63, .85), 0 0 0 6px rgba(253, 251, 245, .5);
  transition: transform .2s ease;
}
.video-open:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
.video-open:active .video-play { transform: translate(-50%, -50%) scale(.96); }
.video-chip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #f4eedd;
  background: rgba(18, 35, 63, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(194, 162, 106, .45);
  border-radius: 999px;
  padding: 6px 13px;
  pointer-events: none;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5);
}
.video-card__label {
  margin: 10px 0 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* ── RSVP ───────────────────────────────────────────────────────────── */
.reg-includes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 22px;
  margin-bottom: clamp(18px, 2.8vh, 28px);
  padding: clamp(15px, 2vw, 18px);
  background: rgba(169, 137, 79, .09);
  border: 1px solid rgba(169, 137, 79, .3);
  border-radius: var(--radius-sm);
}
.reg-includes li {
  position: relative;
  padding-left: 24px;
  font-size: 13px;
  color: var(--ink-2);
}
.reg-includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold-ink);
  font-weight: 800;
}

/* countdown (revealed by main.js when the platform sets a deadline) */
.rsvp-countdown {
  margin: 0 0 clamp(20px, 3vh, 30px);
  padding: 16px 18px;
  background: var(--card-2);
  border: 1px solid rgba(169, 137, 79, .4);
  border-radius: var(--radius-sm);
}
.rsvp-countdown-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 12px;
}
.rsvp-countdown-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.count-box {
  min-width: 70px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 8px;
}
.count-box span {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.count-box small {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── RSVP form ──────────────────────────────────────────────────────── */
.rsvp-form { max-width: 620px; }
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 7px;
}
.form-group label .req { color: var(--danger); font-weight: 800; }
.form-group label .muted { color: var(--muted); font-weight: 500; letter-spacing: .02em; text-transform: none; }

.form-control {
  width: 100%;
  padding: 11px 13px;
  font: 400 14.5px/1.4 var(--font-sans);
  color: var(--ink);
  background: var(--card-2);
  border: 1.5px solid rgba(18, 35, 63, .22);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--card);
  box-shadow: 0 0 0 3px rgba(169, 137, 79, .22);
}
.form-control::placeholder { color: rgba(92, 107, 130, .6); }
select.form-control {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2312233f' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 38px;
  cursor: pointer;
}
textarea.form-control { resize: vertical; min-height: 62px; }
.form-control-narrow { max-width: 136px; }

.form-helper {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 6px;
}

.error {
  display: block;
  min-height: 1.1em;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
}

/* when the guest cannot attend, the party-size field recedes visually
   (main.js toggles .not-attending on the form) */
.party-size { transition: opacity .25s ease; }
#rsvp-form.not-attending .party-size { opacity: .45; }

.loading {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .04em;
}

.rsvp-footnote { margin-top: 16px; }

/* ── Guest book (platform-injected markup) ──────────────────────────── */
.guestbook-section .card-sheet { max-width: 720px; }
.guestbook-section .form-control { background: var(--card-2); }
.guestbook-section .form-control:focus { background: var(--card); }

#guestbookForm { margin-bottom: 8px; }
#guestbookForm .form-control { margin-bottom: 4px; }
#guestbookForm button[type="submit"] {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--ink);
  color: #f4eedd;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}
#guestbookForm button[type="submit"]:hover { background: var(--ink-2); }
#guestbookForm button[type="submit"]:disabled { opacity: .55; cursor: default; }

.guestbook-chapta { margin: 10px 0; }
.loading-guestbook { font-size: 13px; color: var(--muted); padding: 8px 0; }

.guestbook-wrap { margin-top: 16px; }
.guestbook-entry {
  background: var(--card-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 11px;
}
.guestbook-entry h5 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--ink);
}
.guestbook-entry p { font-size: 13.5px; color: var(--ink-2); margin: 3px 0 5px; }
.guestbook-entry small { font-size: 11px; color: var(--muted); }

.more-guestbook-wrap { text-align: center; padding: 8px 0 4px; }
#load-more {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1.5px solid rgba(18, 35, 63, .3);
  background: transparent;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
#load-more:hover { border-color: var(--gold); color: var(--gold-ink); }

/* ── Guestbook: injected platform markup — scope the platform's own
     wrapper (#guestbookForm + #comments-container + #load-more) to match
     the template design. Overrides the generic inline border/max-height. ─ */
.guestbook-form { margin-bottom: 4px; }
#guestbookForm .form-group { margin-bottom: 15px; }
#guestbookForm .form-group label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
#guestbookForm .form-group label .req { color: var(--danger); font-weight: 800; }
#comments-container.guestbook-wrap {
  margin-top: 26px;
  border-top: 1px solid var(--line-soft) !important; /* beats the inline 1px solid */
  padding-top: 18px;
}
#comments-container.guestbook-wrap:empty { border-top: 0; }

/* ── Practical details (formal dl) ──────────────────────────────────── */
.detail-list { max-width: 680px; }
.detail-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: clamp(12px, 2vw, 20px);
  padding: clamp(13px, 2vh, 18px) 0;
  border-bottom: 1px solid var(--line-soft);
}
.detail-row:first-child { border-top: 1px solid var(--line-soft); }
.detail-row dt {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-ink);
  padding-top: 3px;
}
.detail-row dd {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
.detail-sub {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.shell-footer {
  margin-top: clamp(24px, 3.8vh, 36px);
  padding-top: 18px;
  border-top: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}
.footer-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
}
.footer-brand em { font-style: normal; color: var(--gold-ink); }
.shell-footer .back-to-top { margin-left: 14px; font-weight: 700; text-decoration: none; }

/* ── Powered-by brand strip (full width; class .powered-by) ────────────────
   A slim full-width line between the panels and the nav bar in the JS shell
   (and at the end of the stacked document without JS). The engine swaps the
   literal brand token inside .link-footer for the platform name at render;
   the cockpit's Free Powered By field can edit the whole line. */
.powered-by {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  padding: 9px 14px;
  background: rgba(18, 35, 63, .97);
  border-top: 1px solid rgba(194, 162, 106, .35);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 238, 221, .65);
}
.powered-by .link-footer { color: var(--gold-2); }
html:not(.shell-on) .powered-by {
  background: transparent;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  padding: 14px 16px 22px;
}

/* ── Shell navigation bar ─────────────────────────────────────────────
   Labelled navigation: every section has visible text, so guests always
   know where they are and what comes next. The labels scroll horizontally
   on narrow screens; prev/next buttons stay fixed at the edges. */
.shell-nav {
  flex: 0 0 auto;
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 18px);
  background: rgba(18, 35, 63, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(194, 162, 106, .35);
  padding: 0 8px calc(0px + env(safe-area-inset-bottom));
}
html:not(.shell-on) .shell-nav { display: none; }

.nav-btn {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(194, 162, 106, .55);
  background: transparent;
  color: var(--gold-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.nav-btn:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.nav-btn:disabled { opacity: .3; cursor: default; pointer-events: none; }

/* text labels — centered when they fit, scrollable when they don't */
.nav-labels {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.nav-labels::-webkit-scrollbar { display: none; }
.nav-labels--fits { justify-content: center; }
/* when the labels overflow the bar, fade the right edge as a “more content”
   affordance; the active label scrolls into view on navigation */
.nav-labels--overflow {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 20px), transparent);
}

.nav-label {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(244, 238, 221, .72);
  transition: color .2s ease, background .2s ease;
}
.nav-label:hover { color: #fff; background: rgba(194, 162, 106, .16); }
.nav-label.is-active {
  color: #fff;
  background: rgba(169, 137, 79, .92);
  box-shadow: 0 0 0 1px rgba(194, 162, 106, .5);
}
.nav-label:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.nav-label[hidden] { display: none; }

/* ── Media viewer (lightbox) ──────────────────────────────────────────
   One viewer serves every image/video feature: the flyer banner (single),
   the gallery (album with ‹ ›, counter and zoom) and the aftermovie (video
   mode with an embedded player). Lives outside the .shell so nothing clips
   it. Zoom: double-tap / double-click, mouse wheel, pinch, the + / − keys
   or the + button; drag to pan while zoomed. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
  background: rgba(6, 10, 20, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.lightbox-backdrop { position: absolute; inset: 0; }

.lightbox-figure {
  position: relative;
  z-index: 1;
  width: min(880px, 94vw);
  max-height: 92vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid rgba(194, 162, 106, .45);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 70px -18px rgba(0, 0, 0, .6);
}

.lightbox-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  touch-action: none; /* we handle pinch/pan ourselves */
  cursor: zoom-in;
  background: #0a0f1c;
}
.lightbox.zoomed .lightbox-viewport, .lightbox.panning .lightbox-viewport { cursor: grabbing; }

.lightbox-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

/* video mode — the embedded player keeps a tidy 16:9 frame */
.lightbox-video {
  position: relative;
  z-index: 1;
  width: min(900px, 94vw);
  background: var(--card);
  border: 1px solid rgba(194, 162, 106, .45);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 70px -18px rgba(0, 0, 0, .6);
}
.lightbox-iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

.lightbox-cap {
  width: 100%;
  padding: 11px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  overflow-wrap: anywhere;
  flex: 0 0 auto;
}
.lightbox-count {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #f4eedd;
  background: rgba(18, 35, 63, .6);
  padding: 3px 10px;
  border-radius: 999px;
}
.lightbox-zoom-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  color: #f4eedd;
  background: rgba(18, 35, 63, .55);
  padding: 4px 12px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  white-space: nowrap;
}
.lightbox.hint-on .lightbox-zoom-hint,
.lightbox.zoomed .lightbox-zoom-hint,
.lightbox-figure:hover .lightbox-zoom-hint { opacity: 1; }

.lightbox-close,
.lightbox-zoom,
.lightbox-nav {
  position: absolute;
  z-index: 4;
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(194, 162, 106, .55);
  cursor: pointer;
  color: #f4eedd;
  background: rgba(18, 35, 63, .6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: 1.3rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .15s ease;
}
.lightbox-close:hover,
.lightbox-zoom:hover,
.lightbox-nav:hover:not(:disabled) { background: rgba(169, 137, 79, .9); border-color: var(--gold); color: #fff; }
.lightbox-nav:disabled { opacity: .4; cursor: default; }
.lightbox-close:focus-visible,
.lightbox-zoom:focus-visible,
.lightbox-nav:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.lightbox-close { top: 14px; right: 14px; }
.lightbox-zoom { top: 14px; left: 14px; font-size: 1.45rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .cover-meta { grid-template-columns: 1fr; border: 0; padding: 0; }
  .meta-item { padding: 10px 0; border-right: 0; border-bottom: 1px solid rgba(169, 137, 79, .3); }
  .meta-item:first-child { border-top: 1px solid var(--gold); }
  .meta-item:last-child { border-bottom: 1px solid var(--gold); }
  .cover-actions .btn { width: 100%; }
  .detail-row { grid-template-columns: 1fr; gap: 4px; }
  .topbar-cta { display: none; }
  .nav-btn { width: 40px; height: 40px; }
  .nav-label { padding: 0 11px; font-size: 10.5px; }
  .card-sheet::before { inset: 6px; }
  /* the lightbox is edge-to-edge on phones; keep the nav buttons inside */
  .lightbox { padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)); }
  .lightbox-figure, .lightbox-video { width: 100%; }
  .lightbox-nav { top: auto; bottom: 12px; transform: none; }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Print: every panel prints as its own page, light on ink ────────── */
@media print {
  @page { margin: 14mm; }
  html { scroll-behavior: auto; }
  body {
    background: #fff !important;
    color: #111;
  }

  .skip-link, .shell-topbar, .shell-nav, .powered-by { display: none !important; }

  html.shell-on .shell {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  html.shell-on .panels {
    display: block;
    width: auto;
    transform: none !important;
    transition: none;
  }
  html.shell-on .panel {
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    break-after: page;
    page-break-after: always;
  }
  html.shell-on .panel:last-child { break-after: auto; page-break-after: auto; }
  html:not(.shell-on) .panel { break-after: page; page-break-after: always; }
  html:not(.shell-on) .panel:last-child { break-after: auto; page-break-after: auto; }

  .panel-inner {
    min-height: 0;
    padding: 0;
    display: block;
  }
  .panel-inner::after { content: none; }

  .card-sheet {
    max-width: none;
    box-shadow: none;
    border: 1px solid #999;
    padding: 20mm;
  }
  .card-sheet::before { border-color: #bbb; }

  .cover-sheet { min-height: 0; }
  .cover-title, .speaker-name, .guestbook-entry h5, .agenda-name { color: #0d1f3c !important; }
  .cover-kicker, .cover-meta dt, .panel-kicker, .meta-item dt, .detail-row dt, .rsvp-countdown-label, .speaker-role, .cover-rsvp-line strong { color: #84682f !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cover-pleasure, .cover-greeting, .cover-meta dd, .cover-admit { color: #333 !important; }
  .cover-meta, .cover-meta .meta-item { border-color: #a9894f; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .meta-item:first-child { border-top: 0; }
  .meta-item:last-child { border-bottom: 0; }

  .btn { border: 1.5px solid #0d1f3c; background: #fff; color: #0d1f3c !important; }

  .speaker-card, .guestbook-entry, .reg-includes, .rsvp-countdown, .detail-row {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .gallery-item, .gallery-open img, .video-card, .video-thumb, .flyer-banner, .flyer-banner__open img,
  .free-block, .free-figure, .free-card__open img {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .lightbox { display: none !important; }
  .speaker-card { background: #fff; border-color: #bbb; box-shadow: none; }
  .reg-includes { background: #faf7f0; border-color: #bbb; }
  .rsvp-countdown { background: #faf7f0; border-color: #bbb; }
  .count-box { background: #fff; border-color: #bbb; }
  .count-box span { color: #111; }
  .form-control, select.form-control { border-color: #999; background: #fff !important; }
  .form-group label, .panel-title { color: #0d1f3c !important; }
  .panel-desc, .agenda-detail, .form-helper, .panel-note, .speaker-bio, .detail-row dd, .detail-sub { color: #333 !important; }
  a { color: #0d1f3c !important; }
}